// web colors
$primary-color: #4271D6;
$primary-color-alt: #233a6c;
$primary-color-alt-transparent: #2176F01f;
$primary-color-alt-transparent-2: #2176F07a;
$secondary-color: #A7EEEF;
$secondary-color-alt: #A7EEEF;
$terciary-color: #13A407;
$black: #000000;
$white: #ffffff;
$footer-background: #292929;

//text colors
$primary-text-color: $white;
$secondary-text-color: $primary-color-alt;
$third-text-color: $secondary-color;

// fonts
$primary-font: 'Source Code Pro', monospace;
$secondary-font: 'Share Tech', sans-serif;
$tertiary-font: 'Montserrat', sans-serif;

//layout
$max-width-layout: 1376px;
$max-width-super-admin-layout: 1429px;

$responsive-measure: 1026px;
$ipad-pro: 1026px;
$ipad-air: 822px;
$ipad-mini: 770px;
$iphone-promax: 432px;
$iphone-pro: 392px;

// please notice this are some breakpoint to be used for apply breakpoint to the css rules
@mixin breakpoint($size) {
  @if $size == 'xs' {
    @media (max-width: 361px) {
      @content;
    }
  } @else if $size == 'sm' {
    @media (max-width: 601px) {
      @content;
    }
  } @else if $size == 'md' {
    @media (max-width: 769px) {
      @content;
    }
  } @else if $size == 'lg' {
    @media (max-width: 901px) {
      @content;
    }
  } @else if $size == 'xl' {
    @media (max-width: 1201px) {
      @content;
    }
  }
}