// Variables
//

// custom cods
$primary:       #F16847;
$secondary:     #49A8E8;
$warning:       #FDD103;
$success:       #03fda1;
$info:          $secondary;
$danger:        $primary;

// Color system
$transparent:   none;
$white:         #fff;
$black:         #000;
$dark:          rgba($black, .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:           .75rem;
$font-size-lg:           $font-size-base * 1.25;
$label_txt:              $font-size-sm;

//Grid
$g_extraSmall         : .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){.... }
*/

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