// Variables
//

// custom cods
$primary: #f13347;
$secondary: #00a6de;
$warning: #fdd103;
$success: #03fda1;
$info: $secondary;
$danger: $primary;

// Color system
$transparent: none;
$white: #fff;
$black: #000;
$dark: rgba($black, 0.5);

// Font weight
$font-weight-lighter: 100;
$font-weight-light: 300;
$font-weight-normal: normal;
$font-weight-medium: 500;
$font-weight-bold: 700;
$font-weight-black: 900;

$h1-font-size: 4rem;
$h2-font-size: 3.25rem;
$h3-font-size: 1.5rem;

//$h4-font-size:         1.125rem;
//$h5-font-size:         0.9375rem;
//$h6-font-size:         0.75rem;

$font-size-base: 1.125rem;
$font-size-sm: 0.75rem;
$font-size-lg: $font-size-base * 1.25;
$label_txt: $font-size-sm;

//Grid
$g_extraSmall: 0.5rem;
$g_small: 1rem;
$g_medium: 1.5rem;
$g_baseline: 2rem;
$g_large: 2.5rem;
$g_extraLarge: 4rem;

// Fonts
/********************@font-face********************/
@mixin font-include($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + ".eot");
    src: url($file-name + ".eot?#iefix") format("embedded-opentype"),
      url($file-name + ".woff") format("woff"),
      url($file-name + ".ttf") format("truetype"),
      url($file-name + ".svg##{$font-name}") format("svg");
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}
/*@include font-include($font-family-secondary, "../fonts/corinthia-regular", 400, normal);*/

@mixin font-face($font-name, $path, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($path + ".eot");
    src: url($path + ".eot?#iefix") format("embedded-opentype"),
      url($path + ".woff") format("woff"),
      url($path + ".ttf") format("truetype"),
      url($path + ".svg##{$font-name}") format("svg");
    font-weight: $weight;
    font-style: $style;
  }
}
/*@include font-face(Roboto, "./assets/Roboto", normal, normal);*/
/********************Text Overflow********************/
@mixin text-overflow($line) {
  //white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $line;
}
/*@include text-overflow(4);*/

/********************Square with radius********************/
@mixin round($size, $radius: 0) {
  width: $size;
  height: $size;
  @if $radius != 0 {
    border-radius: $radius;
  }
}
/*@include square(100px, $radius: 4px);*/

@mixin radius($radius: 0) {
  @if $radius != 0 {
    border-radius: $radius;
  }
}
/*@include radius($radius: 4px);*/

/***************************************/
/*CSS Opacity with fallback for IE8+.*/
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity = $opacity-ie); //IE8
}
/*@include opacity(.4);*/

/***************************************/
/* Mixin to create vertical, horizontal or radial gradient */
@mixin gradient($start-color, $end-color, $orientation) {
  background: $start-color;
  @if $orientation == "vertical" {
    /* Vertical gradient */
    background: linear-gradient(to bottom, $start-color, $end-color) !important;
  } @else if $orientation == "horizontal" {
    /* Horizontal gradient */
    background: linear-gradient(to right, $start-color, $end-color) !important;
  } @else if $orientation == "radial" {
    /* Radial gradient */
    background: radial-gradient(
      ellipse at center,
      $start-color,
      $end-color
    ) !important;
  }
}
/*@include gradient(#07c, #06f, vertical);*/

/***************************************/
/* @include transition(all,2s,ease-out); */
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
  -webkit-transition: $what $time $how;
  -moz-transition: $what $time $how;
  -ms-transition: $what $time $how;
  -o-transition: $what $time $how;
  transition: $what $time $how;
}
/*@include transition (all, 0.5s, ease)*/

/***************************************/
/*Shadow*/
@mixin box-shadow(
  $x-axis: 0,
  $y-axis: 1px,
  $blur: 2px,
  $hard: 2px,
  $color: $black
) {
  box-shadow: $x-axis $y-axis $blur $hard $color;
}
/*
@include box-shadow(5px, 5px, 5px, 5px, #333)

/***************************************/
@mixin scrollbars(
  $size,
  $foreground-color,
  $foreground-hover,
  $background-color: mix($foreground-color, white, 50%)
) {
  /* For Google Chrome */
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  /* Track */
  &::-webkit-scrollbar-track {
    background: $background-color;
  }
  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: $secondary;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}
/*@include scrollbars(10px, pink, red);*/

/***************************************/
@mixin breakpoint_min($point) {
  @if $point == desktop {
    @media (min-width: 1440px) {
      @content;
    }
  } @else if $point == laptop {
    @media (min-width: 1200px) {
      @content;
    }
  } @else if $point == tablet {
    @media (min-width: 992px) {
      @content;
    }
  } @else if $point == phablet {
    @media (min-width: 768px) {
      @content;
    }
  } @else if $point == mobileonly {
    @media (min-width: 576px) {
      @content;
    }
  }
}
@mixin breakpoint_max($point) {
  @if $point == desktop {
    @media (max-width: 1440px) {
      @content;
    }
  } @else if $point == laptop {
    @media (max-width: 1200px) {
      @content;
    }
  } @else if $point == tablet {
    @media (max-width: 992px) {
      @content;
    }
  } @else if $point == phablet {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $point == mobileonly {
    @media (max-width: 576px) {
      @content;
    }
  }
}

/*
@include breakpoint(desktop){.... }
@include breakpoint(laptop){.... }
@include breakpoint(tablet){.... }
@include breakpoint(phablet){.... }
@include breakpoint(mobileonly){.... }
*/

/***************************************/