$default: #121212;
$dark: #121212;
$darkSidebar: #1e1f20;
$primary: #60e5e8;
$blue: #257ffc;
$blue2: #5e64ff;
$pink: #ff07c9;
$white: #ffffff;
$border: #e9e9eb;
$border2: #e5e5e5;
$black: #000000;
$black2: #121727;
$gray: #e6e7e9;
$gray2: #f9f9f9;
$gray3: #e4e4e4;
$grey: #f4f3f3;
$grey2: #e6e6e6;
$grey3: #e0e0e0;
$grey4: #636363;
$gray2: #e6e6e6;
$gray3: #e0e0e0;
$gray4: #636363;
$gray5: #f5f5f5;
$gray6: #cdcdcd;
$gray7: #e6e6e6;
$gray8: #d3d3d3;
$gray9: #e9e9eb;
$gray10: #f4f3f3;
$gray11: #f1f1f1;
$gray12: #f3f3f3;
$red: #ff3c45;
$secondaryRed: #fc0d1b;
$inputBorder: #e4e4ed;
$checked: linear-gradient(360deg, #76ba18 2.22%, #76ba18 100%);
$button: linear-gradient(
  270deg,
  #17e391 21.47%,
  #58e5df 77.04%,
  #60e5e8 77.05%
);
$checkedBorder: #76ba18;
$blueDodger: #5e64ff;
$lavender: #cd5ce0;
$yellow: #ffba00;
$green: #76ba18;
$violet: #ec8efc;
$magenta: #cd5ce0;
$anakiwa: #8feaff;
$codGray: #141414;
$darkGray: #1a1a1a;
$orange: #ffa41c;
$tundola: #414141;
$mineShaft: #292929;
$text: #121212;
$borderRadius: 16px;
$warning: #ffa41c;
$success: #76ba18;
$alto: #e0e0e0;
$lightGreen: #50c32c;
$secondaryGrey: #c4c4c4;
$dusty_gray: #979797;
$serenade: #fff6e8;
$shark: #1e1f20;
$error: #ff3c45;
$grey5: #e0e0e0;
$mercury: #e6e6e6;

$successBackground: #f1f8e8;

$xx-small: 10px;
$x-small: 12px;
$small: 14px;
$xl-small: 15px;
$medium1: 16px;
$medium2: 18px;
$normal: 20px;
$normal1: 22px;
$normal2: 24px;
$large: 32px;
$larger: 36px;
$x-large: 40px;
$xx-large: 56px;
$xxl-large: 72px;

$regular: 400;
$medium: 500;
$semi-bold: 600;
$bold: 700;
$extra-bold: 800;

$container: 616px;

$mobile-width: 480px;
$tablet-width: 768px;
$desktop-width: 1024px;
$small-height: 650px;
$videoCallHeight: calc((50vw - 64px) * 720 / 1280);
$fontGotham: 'Gotham Pro', sans-serif;
$fontSFProDisplay: 'SFProDisplay', sans-serif;

$boxShadow:
  rgba(60, 64, 67, 0.3) 0 1px 2px 0,
  rgba(60, 64, 67, 0.15) 0 1px 3px 1px;

$boxShadow2: 0 0 10px rgba(0, 0, 0, 0.25);
$boxShadow3: 0 0 15px rgba(0, 0, 0, 0.15);

$icons-url: 'https://komi-assets.s3.amazonaws.com/icons';

// KDS Colors
$color-blue-100: #bbe1ff;
$color-blue-800: #0f69e6;
$color-accent-blue: $color-blue-800;
$color-color-turquoise-200: #60e5e8;
$color-overlay-turquoise-10: #60e5e81a;
$color-overlay-turquoise-20: #60e5e833;

// :root {
//   --ant-primary-color: #10848b;
//   --ant-success-color: rgba(255, 255, 255, 0.1);
//   --ant-info-color: #ffffff;
// }

@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin mobile-and-tablet {
  @media (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin max-width($max-width) {
  @media (max-width: #{$max-width}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

@mixin smallHeight {
  @media (max-height: #{$small-height}) {
    @content;
  }
}

@mixin modalActions {
  display: flex;
  justify-content: flex-end;

  @include mobile {
    flex-direction: column-reverse;
    justify-content: center;
  }

  .ant-btn {
    width: 123px;

    &:nth-child(1) {
      margin-right: 24px;
    }

    @include mobile {
      width: 100%;

      &:nth-child(1) {
        margin-top: 16px;
      }
    }
  }
}