/*--------------------------------------
	- Base
----------------------------------------*/

// Body Mixin
@mixin body($font-family: $font, $font-weight: 400, $color: $global-color, $font-size: $global-font-size, $line-height: 1.5) {
  font-family: $font-family;
  font-weight: $font-weight;
  font-size: $font-size;
  line-height: $line-height;
  text-rendering: optimizeSpeed;
  color: $color;
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1==$u2 and $u1==$u3 and $u1==$u4 {
    & {
      font-size: $min-font-size;

      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

//Before Icon mixin
@mixin before-icon($content, $color) {
  content: $content;
  font-family: IcoFont;
  color: $color;
  vertical-align: middle;
}

/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 *
 */

// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fs-rem($size) {
  font-size: rem($size);
}

// Font Size Class
@mixin font($size, $breakpoint: null, $pre: px) {

  @if $breakpoint {
    @include media-up(#{$breakpoint}) {
      .font-#{$breakpoint}-#{$size} {
        font-size: #{$size}#{$pre};
      }
    }
  } @else {
    .font-#{$size} {
      font-size: #{$size}#{$pre};
    }
  }
}

//Line Height
@mixin line-height($size, $breakpoint: null, $pre: px) {
  @if $breakpoint {
    @include media-up(#{$breakpoint}) {
      .line-height-#{$breakpoint}-#{$size} {
        line-height: #{$size}#{$pre};
      }
    }
  } @else {
    .line-height-#{$size} {
      line-height: #{$size}#{$pre};
    }
  }
}

// hr mixin
@mixin hr($bg: $global-color, $width: 50px, $height: 5px, $my: 50px, $mx: 0, $p: 0, $radius: 0) {
  background: $bg;
  width: $width;
  height: $height;
  margin: $my $mx;
  padding: $p;
  border: none;
  border-radius: $radius;
  opacity: 1;
}

@mixin media-up($name, $breakpoints: $breakpoints) {
  $min: breakpoint-min($name, $breakpoints);

  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-down($name, $breakpoints: $breakpoints) {
  $max: breakpoint-max($name, $breakpoints);

  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-between($lower, $upper, $breakpoints: $breakpoints) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min !=null and $max !=null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max==null {
    @include media-up($lower, $breakpoints) {
      @content;
    }
  } @else if $min==null {
    @include media-down($upper, $breakpoints) {
      @content;
    }
  }
}

// For each breakpoint, define the maximum width of the container in a media query
@mixin container-max-widths($max-widths: $container-widths, $breakpoints: $breakpoints) {

  @each $breakpoint,
  $container-width in $max-widths {
    @include media-up($breakpoint) {
      max-width: $container-width;
    }
  }
}

/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin container($name: container, $gutter: $gutter-width) {
  .#{$name} {
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
    margin-right: auto;
    margin-left: auto;
    @include container-max-widths();
  }
}

@mixin container-fluid($name: container-fluid, $gutter: $gutter-width) {
  .#{$name} {
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
    margin-right: auto;
    margin-left: auto;
  }
}

// Row
//
// Rows contain your columns.
@mixin row($name: row, $gutter: $gutter-width, $max-width: false) {
  @if $max-width==true {
    .#{$name} {
      margin-right: auto;
      margin-left: auto;
      display: flex;
      flex-flow: row wrap;
      @include container-max-widths();
    }
  } @else {
    .#{$name} {
      display: flex;
      flex-wrap: wrap;
      margin-right: -$gutter / 2;
      margin-left: -$gutter / 2;
    }
  }
}

@mixin column($size, $column: $columns) {
  flex: 0 0 percentage($size / $column);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $column);
}

@mixin col-offset($size, $columns: $columns) {
  $num: $size / $columns;
  margin-left: if($num==0, 0, percentage($num));
}

.col {
  position: relative;
  width: 100%;
  padding-right: $gutter-width / 2;
  padding-left: $gutter-width / 2;
}

@mixin col-ready($gutter: $gutter-width) {
  @extend .col;
}

//Gird Columns Width Responsive
@mixin col($name: null, $columns: null, $breakpoint: null) {
  @if $name==col {
    @if ($breakpoint==sm, md, lg, xl, xxl) {
      .#{$name}-#{$breakpoint}-#{$columns} {
        @include col-ready();

        @include media-up(#{$breakpoint}) {
          @include column($columns);
        }
      }
    } @else {
      .#{$name}#{$columns} {
        @include col-ready();
      }
    }
  } @else {
    .#{$name} {
      @include col-ready();
    }

    .#{$breakpoint}-#{$columns} {
      @include media-up(#{$breakpoint}) {
        @include column($columns);
      }
    }
  }
}

//Gird Columns Offset Width Responsive
@mixin offset($name, $columns, $breakpoint: null) {
  @if ($breakpoint==sm, md, lg, xl, xxl) {
    .#{$name}-#{$breakpoint}-#{$columns} {
      @include media-up($breakpoint) {
        @include col-offset($columns);
      }
    }
  } @else {
    .#{$name}-#{$columns} {
      @include col-offset($columns);
    }
  }
}

// Mixins for controlling flex.
@mixin flex($name, $value, $breakpoint: null) {
  @if $value==1 {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 1 1 0%;
        }
      }
    } @else {
      .#{$name} {
        flex: 1 1 0%;
      }
    }
  } @else if $value==auto {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 1 1 auto;
        }
      }
    } @else {
      .#{$name} {
        flex: 1 1 auto;
      }
    }

  } @else if $value==initial {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 0 1 auto;
        }
      }
    } @else {
      .#{$name} {
        flex: 0 1 auto;
      }
    }
  } @else {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: none;
        }
      }
    } @else {
      .#{$name} {
        flex: none;
      }
    }
  }
}

// Controlling gutters between rows and columns.
@mixin gap($size, $position: x) {
  @if $position==y {
    row-gap: $size;
    grid-row-gap: $size;
  } @else {
    gap: $size;
    grid-gap: $size;
  }
}

/*--------------------------------------
	- Utilities
----------------------------------------*/
@mixin hover() {
  &:hover {
    @content;
  }
}

@mixin focus() {
  &:focus {
    @content;
  }
}

@mixin hover-focus() {

  &:hover,
  &:focus {
    @content;
  }
}

@mixin plain-hover-focus() {

  &,
  &:hover,
  &:focus {
    @content;
  }
}

@mixin hover-focus-active() {
  &:hover,
  &:focus,
  &:active {
    @content;
  }
}

@mixin before($content: null) {
  @if $content {
    &::before {
      content: $content;
      @content;
    }
  } @else {
    &::before {
      @content;
    }
  }
}

@mixin after($content: null) {
  @if $content {
    &::after {
      content: $content;
      @content;
    }
  } @else {
    &::after {
      @content;
    }
  }
}

@mixin before-after($content: null) {
  @if $content {

    &::before,
    &::after {
      content: $content;
      @content;
    }
  } @else {

    &::before,
    &::after {
      @content;
    }
  }
}

@mixin pseudo($args: top 0 left 0, $loca: before, $position: absolute, $content: "") {
  @if ($loca==after) {
    @include after($content) {
      @if ($position==relative) {
        @include relative($args);
        @content;
      } @else {
        @include absolute($args);
        @content;
      }
    }
  } @else if ($loca==before-after) {
    @include before-after($content) {
      @if ($position==relative) {
        @include relative($args);
        @content;
      } @else {
        @include absolute($args);
        @content;
      }
    }
  } @else {
    @include before($content) {
      @if ($position==relative) {
        @include relative($args);
        @content;
      } @else {
        @include absolute($args);
        @content;
      }
    }
  }
}

//Create the mixin for theme colors
@mixin color($name, $color) {
  // Define colors in your theme
  $primary: $color;
  $bg-color: $color;

  // Add your Prefix classes name
  .text-#{$name} {
    color: $primary !important;
  }

  .bg-#{$name} {
    background: $primary;
  }

}

// Gradient Color Mixin
@mixin gradient($direction, $first, $last) {
  background-color: $first;
  background-image: linear-gradient($direction, $first 0%, $last 100%);
}

// Gradient Color Class Name with Mixin
@mixin gradient-color($class, $direction, $first, $last) {
  .#{$class} {
    @include gradient($direction, $first, $last);
  }
}

// Mixins for controlling the direction of flex items.
@mixin flex-direction($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        flex-direction: $value;
      }
    }
  } @else {
    .#{$name} {
      flex-direction: $value;
    }
  }
}

// Mixins for controlling how flex items wrap.
@mixin flex-wrap($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        flex-wrap: $value;
      }
    }
  } @else {
    .#{$name} {
      flex-wrap: $value;
    }
  }
}

// Mixins for controlling flex.
@mixin flex($name, $value, $breakpoint: null) {
  @if $value==1 {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 1 1 0%;
        }
      }
    } @else {
      .#{$name} {
        flex: 1 1 0%;
      }
    }
  } @else if $value==auto {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 1 1 auto;
        }
      }
    } @else {
      .#{$name} {
        flex: 1 1 auto;
      }
    }

  } @else if $value==initial {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: 0 1 auto;
        }
      }
    } @else {
      .#{$name} {
        flex: 0 1 auto;
      }
    }
  } @else {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex: none;
        }
      }
    } @else {
      .#{$name} {
        flex: none;
      }
    }
  }
}

// Mixins for controlling how flex item grow.
@mixin flex-grow($name, $value, $breakpoint: null) {
  @if $value==0 {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex-grow: 0;
        }
      }
    } @else {
      .#{$name} {
        flex-grow: 0;
      }
    }
  } @else {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex-grow: 1;
        }
      }
    } @else {
      .#{$name} {
        flex-grow: 1;
      }
    }
  }
}

// Mixins for controlling how flex item shrink.
@mixin flex-shrink($name, $value, $breakpoint: null) {
  @if $value==0 {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex-shrink: 0;
        }
      }
    } @else {
      .#{$name} {
        flex-shrink: 0;
      }
    }
  } @else {
    @if $breakpoint {
      @include media-up($breakpoint) {
        .#{$name} {
          flex-shrink: 1;
        }
      }
    } @else {
      .#{$name} {
        flex-shrink: 1;
      }
    }
  }
}

// The justify-content property.
@mixin justify-content($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        justify-content: $value;
      }
    }
  } @else {
    .#{$name} {
      justify-content: $value;
    }
  }
}

// The justify-items property.
@mixin justify-items($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        justify-items: $value;
      }
    }
  } @else {
    .#{$name} {
      justify-items: $value;
    }
  }
}

// The justify-self property.
@mixin justify-self($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        justify-self: $value;
      }
    }
  } @else {
    .#{$name} {
      justify-self: $value;
    }
  }
}

// The align-content property.
@mixin align-content($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        align-content: $value;
      }
    }
  } @else {
    .#{$name} {
      align-content: $value;
    }
  }
}

// The align-items property.
@mixin align-items($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        align-items: $value;
      }
    }
  } @else {
    .#{$name} {
      align-items: $value;
    }
  }
}

// The align-self property.
@mixin align-self($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        align-self: $value;
      }
    }
  } @else {
    .#{$name} {
      align-self: $value;
    }
  }
}

// The align-content property.
@mixin align-content($name, $value, $breakpoint: null) {
  @if $breakpoint {
    @include media-up($breakpoint) {
      .#{$name} {
        align-content: $value;
      }
    }
  } @else {
    .#{$name} {
      align-content: $value;
    }
  }
}

// margin Name with Mixin
@mixin margin($name, $value) {

  // Add your Prefix name
  @if $name==mt {
    @if $value==auto {
      margin-top: #{$value};
    } @else if $value==0 {
      margin-top: #{$value};
    } @else {
      margin-top: #{$value};
    }
  } @else if $name==mb {
    @if $value==auto {
      margin-bottom: #{$value};
    } @else if $value==0 {
      margin-bottom: #{$value};
    } @else {
      margin-bottom: #{$value};
    }
  } @else if $name==ml {
    @if $value==auto {
      margin-left: #{$value};
    } @else if $value==0 {
      margin-left: #{$value};
    } @else {
      margin-left: #{$value};
    }
  } @else if $name==mr {
    @if $value==auto {
      margin-right: #{$value};
    } @else if $value==0 {
      margin-right: #{$value};
    } @else {
      margin-right: #{$value};
    }
  } @else if $name==mx {
    @if $value==auto {
      margin-left: #{$value};
      margin-right: #{$value};
    } @else if $value==0 {
      margin-left: #{$value};
      margin-right: #{$value};
    } @else {
      margin-left: #{$value};
      margin-right: #{$value};
    }
  } @else if $name==my {
    @if $value==auto {
      margin-top: #{$value};
      margin-bottom: #{$value};
    } @else if $value==0 {
      margin-top: #{$value};
      margin-bottom: #{$value};
    } @else {
      margin-top: #{$value};
      margin-bottom: #{$value};
    }
  } @else {
    @if $value==auto {
      margin: #{$value};
    } @else if $value==0 {
      margin: #{$value};
    } @else {
      margin: #{$value};
    }
  }
}

@mixin margin-rs($name, $breakpoint, $value) {

  // Add your Prefix name
  @if $name==mt {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
      }
    }
  } @else if $name==mb {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-bottom: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-bottom: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-bottom: #{$value};
      }
    }
  } @else if $name==ml {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
      }
    }
  } @else if $name==mr {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-right: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-right: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-right: #{$value};
      }
    }
  } @else if $name==mx {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
        margin-right: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
        margin-right: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-left: #{$value};
        margin-right: #{$value};
      }
    }
  } @else if $name==my {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    }
  } @else {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        margin: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        margin: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        margin: #{$value};
      }
    }
  }
}

// margin Class Name with Mixin
@mixin margin-class($name, $property, $value, $pre: $active-prefix) {

  // Add your Prefix classes name
  @if $property==mt {
    @if $value==auto {
      .#{$name} {
        margin-top: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-top: #{$value};
      }
    } @else {
      .#{$name} {
        margin-top: #{$value}#{$pre};
      }
    }
  } @else if $property==mb {
    @if $value==auto {
      .#{$name} {
        margin-bottom: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-bottom: #{$value};
      }
    } @else {
      .#{$name} {
        margin-bottom: #{$value}#{$pre};
      }
    }
  } @else if $property==ml {
    @if $value==auto {
      .#{$name} {
        margin-left: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-left: #{$value};
      }
    } @else {
      .#{$name} {
        margin-left: #{$value}#{$pre};
      }
    }
  } @else if $property==mr {
    @if $value==auto {
      .#{$name} {
        margin-right: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-right: #{$value};
      }
    } @else {
      .#{$name} {
        margin-right: #{$value}#{$pre};
      }
    }
  } @else if $property==mx {
    @if $value==auto {
      .#{$name} {
        margin-left: #{$value};
        margin-right: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-left: #{$value};
        margin-right: #{$value};
      }
    } @else {
      .#{$name} {
        margin-left: #{$value}#{$pre};
        margin-right: #{$value}#{$pre};
      }
    }
  } @else if $property==my {
    @if $value==auto {
      .#{$name} {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    } @else {
      .#{$name} {
        margin-top: #{$value}#{$pre};
        margin-bottom: #{$value}#{$pre};
      }
    }
  } @else {
    @if $value==auto {
      .#{$name} {
        margin: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        margin: #{$value};
      }
    } @else {
      .#{$name} {
        margin: #{$value}#{$pre};
      }
    }
  }
}

// Responsive margin Class Name with Mixin
@mixin margin-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {

  // Add your Prefix classe name
  @if $property==mt {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==mb {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-bottom: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-bottom: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-bottom: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==ml {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==pr {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-right: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-right: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-right: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==mx {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value};
          margin-right: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value};
          margin-right: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-left: #{$value}#{$pre};
          margin-right: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==my {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value};
          margin-bottom: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value};
          margin-bottom: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin-top: #{$value}#{$pre};
          margin-bottom: #{$value}#{$pre};
        }
      }
    }
  } @else {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          margin: #{$value}#{$pre};
        }
      }
    }
  }
}

// padding Name with Mixin
@mixin padding($name, $value) {

  // Add your Prefix name
  @if $name==pt {
    @if $value==auto {
      padding-top: #{$value};
    } @else if $value==0 {
      padding-top: #{$value};
    } @else {
      padding-top: #{$value};
    }
  } @else if $name==pb {
    @if $value==auto {
      padding-bottom: #{$value};
    } @else if $value==0 {
      padding-bottom: #{$value};
    } @else {
      padding-bottom: #{$value};
    }
  } @else if $name==pl {
    @if $value==auto {
      padding-left: #{$value};
    } @else if $value==0 {
      padding-left: #{$value};
    } @else {
      padding-left: #{$value};
    }
  } @else if $name==pr {
    @if $value==auto {
      padding-right: #{$value};
    } @else if $value==0 {
      padding-right: #{$value};
    } @else {
      padding-right: #{$value};
    }
  } @else if $name==px {
    @if $value==auto {
      padding-left: #{$value};
      padding-right: #{$value};
    } @else if $value==0 {
      padding-left: #{$value};
      padding-right: #{$value};
    } @else {
      padding-left: #{$value};
      padding-right: #{$value};
    }
  } @else if $name==py {
    @if $value==auto {
      padding-top: #{$value};
      padding-bottom: #{$value};
    } @else if $value==0 {
      padding-top: #{$value};
      padding-bottom: #{$value};
    } @else {
      padding-top: #{$value};
      padding-bottom: #{$value};
    }
  } @else {
    @if $value==auto {
      padding: #{$value};
    } @else if $value==0 {
      padding: #{$value};
    } @else {
      padding: #{$value};
    }
  }
}

@mixin padding-rs($name, $breakpoint, $value) {

  // Add your Prefix name
  @if $name==pt {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
      }
    }
  } @else if $name==pb {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-bottom: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-bottom: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-bottom: #{$value};
      }
    }
  } @else if $name==pl {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
      }
    }
  } @else if $name==pr {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-right: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-right: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-right: #{$value};
      }
    }
  } @else if $name==px {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
        padding-right: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
        padding-right: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-left: #{$value};
        padding-right: #{$value};
      }
    }
  } @else if $name==py {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    }
  } @else {
    @if $value==auto {
      @include media-up(#{$breakpoint}) {
        padding: #{$value};
      }
    } @else if $value==0 {
      @include media-up(#{$breakpoint}) {
        padding: #{$value};
      }
    } @else {
      @include media-up(#{$breakpoint}) {
        padding: #{$value};
      }
    }
  }
}

// padding Class Name with Mixin
@mixin padding-class($name, $property, $value, $pre: $active-prefix) {

  // Add your Prefix classes name
  @if $property==pt {
    @if $value==auto {
      .#{$name} {
        padding-top: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-top: #{$value};
      }
    } @else {
      .#{$name} {
        padding-top: #{$value}#{$pre};
      }
    }
  } @else if $property==pb {
    @if $value==auto {
      .#{$name} {
        padding-bottom: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-bottom: #{$value};
      }
    } @else {
      .#{$name} {
        padding-bottom: #{$value}#{$pre};
      }
    }
  } @else if $property==pl {
    @if $value==auto {
      .#{$name} {
        padding-left: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-left: #{$value};
      }
    } @else {
      .#{$name} {
        padding-left: #{$value}#{$pre};
      }
    }
  } @else if $property==pr {
    @if $value==auto {
      .#{$name} {
        padding-right: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-right: #{$value};
      }
    } @else {
      .#{$name} {
        padding-right: #{$value}#{$pre};
      }
    }
  } @else if $property==px {
    @if $value==auto {
      .#{$name} {
        padding-left: #{$value};
        padding-right: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-left: #{$value};
        padding-right: #{$value};
      }
    } @else {
      .#{$name} {
        padding-left: #{$value}#{$pre};
        padding-right: #{$value}#{$pre};
      }
    }
  } @else if $property==py {
    @if $value==auto {
      .#{$name} {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    } @else {
      .#{$name} {
        padding-top: #{$value}#{$pre};
        padding-bottom: #{$value}#{$pre};
      }
    }
  } @else {
    @if $value==auto {
      .#{$name} {
        padding: #{$value};
      }
    } @else if $value==0 {
      .#{$name} {
        padding: #{$value};
      }
    } @else {
      .#{$name} {
        padding: #{$value}#{$pre};
      }
    }
  }
}

// Responsive padding Class Name with Mixin
@mixin padding-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {

  // Add your Prefix classe name
  @if $property==pt {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==pb {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-bottom: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-bottom: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-bottom: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==pl {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==pr {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-right: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-right: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-right: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==px {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value};
          padding-right: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value};
          padding-right: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-left: #{$value}#{$pre};
          padding-right: #{$value}#{$pre};
        }
      }
    }
  } @else if $property==py {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value};
          padding-bottom: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value};
          padding-bottom: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding-top: #{$value}#{$pre};
          padding-bottom: #{$value}#{$pre};
        }
      }
    }
  } @else {
    @if $value==auto {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding: #{$value};
        }
      }
    } @else if $value==0 {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding: #{$value};
        }
      }
    } @else {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          padding: #{$value}#{$pre};
        }
      }
    }
  }
}

// Border 
@mixin border($type: null, $size: 1px, $style: solid, $color: $global-color) {
  @if $type==top {
    border#{-$type}: #{$size} #{$style} #{$color};
  } @else if $type==bottom {
    border#{-$type}: #{$size} #{$style} #{$color};
  } @else if $type==left {
    border#{-$type}: #{$size} #{$style} #{$color};
  } @else if $type==right {
    border#{-$type}: #{$size} #{$style} #{$color};
  } @else if $type==by {
    border-top: #{$size} #{$style} #{$color};
    border-bottom: #{$size} #{$style} #{$color};
  } @else if $type==bx {
    border-left: #{$size} #{$style} #{$color};
    border-right: #{$size} #{$style} #{$color};
  } @else {
    border: #{$size} #{$style} #{$color};
  }
}

// Border 
@mixin border-class($type: null, $size: 1px, $style: solid, $color: $global-color) {

  // Add your Prefix classes name
  @if $type==top {
    .border-#{$type} {
      border#{-$type}: #{$size} #{$style} #{$color};
    }
  } @else if $type==bottom {
    .border-#{$type} {
      border#{-$type}: #{$size} #{$style} #{$color};
    }
  } @else if $type==left {
    .border-#{$type} {
      border#{-$type}: #{$size} #{$style} #{$color};
    }
  } @else if $type==right {
    .border-#{$type} {
      border#{-$type}: #{$size} #{$style} #{$color};
    }
  } @else {
    .border {
      border: #{$size} #{$style} #{$color};
    }
  }
}

// Border 
@mixin border-rs($breakpoint, $type: null, $size: 1px, $style: solid, $color: $global-color) {

  // Add your Prefix classes name
  @if $type==top {
    .border-#{$breakpoint}-#{$type} {
      @include media-up(#{$breakpoint}) {
        border#{-$type}: #{$size} #{$style} #{$color};
      }
    }
  } @else if $type==bottom {
    .border-#{$breakpoint}-#{$type} {
      @include media-up(#{$breakpoint}) {
        border#{-$type}: #{$size} #{$style} #{$color};
      }
    }
  } @else if $type==left {
    .border-#{$breakpoint}-#{$type} {
      @include media-up(#{$breakpoint}) {
        border#{-$type}: #{$size} #{$style} #{$color};
      }
    }
  } @else if $type==right {
    .border-#{$breakpoint}-#{$type} {
      @include media-up(#{$breakpoint}) {
        border#{-$type}: #{$size} #{$style} #{$color};
      }
    }
  } @else {
    .border-#{$breakpoint} {
      @include media-up(#{$breakpoint}) {
        border: #{$size} #{$style} #{$color};
      }
    }
  }
}

// Border Width
@mixin border-width($type: null, $size: 1px) {
  @if $type==top {
    border#{-$type}-width: #{$size};
  } @else if $type==right {
    border#{-$type}-width: #{$size};
  } @else if $type==bottom {
    border#{-$type}-width: #{$size};
  } @else if $type==left {
    border#{-$type}-width: #{$size};
  } @else {
    border: #{$size};
  }
}

// Border Color
@mixin border-color($color: $global-color) {
  border-color: #{$color};
}

// Border Style
@mixin border-style($style: solid) {
  border-style: #{$style};
}

// Border Radius Mixin
@mixin radius($type: null, $size: 0) {
  @if $type==top {
    border#{-$type}-left-radius: #{$size};
    border#{-$type}-right-radius: #{$size};
  } @else if $type==right {
    border-top-right-radius: #{$size};
    border-bottom-right-radius: #{$size};
  } @else if $type==bottom {
    border#{-$type}-left-radius: #{$size};
    border#{-$type}-right-radius: #{$size};
  } @else if $type==left {
    border-top-left-radius: #{$size};
    border-bottom-left-radius: #{$size};
  } @else {
    border-radius: #{$size};
  }
}

// Border Radius Class Mixin
@mixin radius-class($type: null, $size: 0, $num: null) {
  @if $type==top {
    @if $num {
      .radius-#{$type}-#{$num} {
        border#{-$type}-left-radius: #{$size};
        border#{-$type}-right-radius: #{$size};
      }
    } @else {
      .radius-#{$type} {
        border#{-$type}-left-radius: #{$size};
        border#{-$type}-right-radius: #{$size};
      }
    }
  } @else if $type==right {
    @if $num {
      .radius-#{$type}-#{$num} {
        border-top-right-radius: #{$size};
        border-bottom-right-radius: #{$size};
      }
    } @else {
      .radius-#{$type} {
        border-top-right-radius: #{$size};
        border-bottom-right-radius: #{$size};
      }
    }
  } @else if $type==bottom {
    @if $num {
      .radius-#{$type}-#{$num} {
        border#{-$type}-left-radius: #{$size};
        border#{-$type}-right-radius: #{$size};
      }
    } @else {
      .radius-#{$type} {
        border#{-$type}-left-radius: #{$size};
        border#{-$type}-right-radius: #{$size};
      }
    }
  } @else if $type==left {
    @if $num {
      .radius-#{$type}-#{$num} {
        border-top-left-radius: #{$size};
        border-bottom-left-radius: #{$size};
      }
    } @else {
      .radius-#{$type} {
        border-top-left-radius: #{$size};
        border-bottom-left-radius: #{$size};
      }
    }
  } @else {
    @if $num {
      .radius-#{$num} {
        border-radius: #{$size};
      }
    } @else {
      .radius {
        border-radius: #{$size};
      }
    }
  }
}

//Display mixin
@mixin display($value) {
  .d-#{$value} {
    display: $value;
  }
}

//Responsive Display Mixin
@mixin display-rs($breakpoint, $value) {
  .d-#{$breakpoint}-#{$value} {
    @include media-up(#{$breakpoint}) {
      display: #{$value};
    }
  }
}

@mixin padding-divide($name, $value: 0, $device: x, $div: false) {
  @if $device==y {
    .#{$name} {
      @if $div==true {
        div + div {
          @include padding(py, $value);
        }
      } @else {
        li + li {
          @include padding(py, $value);
        }
      }
    }
  } @else {
    .#{$name} {
      @if $div==true {
        div + div {
          @include padding(pl, $value);
        }
      } @else {
        li + li {
          @include padding(pl, $value);
        }
      }
    }
  }
}

@mixin padding-divide-rs($name, $value: 0, $breakpoint: null, $divide: x, $div: false) {
  @if $divide==y {
    .#{$name} {
      @include media-up($breakpoint) {
        @if $div==true {
          div + div {
            @include padding(py, $value);
          }
        } @else {
          li + li {
            @include padding(py, $value);
          }
        }
      }
    }
  } @else {
    .#{$name} {
      @include media-up($breakpoint) {
        @if $div==true {
          div + div {
            @include padding(pl, $value);
          }
        } @else {
          li + li {
            @include padding(pl, $value);
          }
        }
      }
    }
  }
}

//Overlay Mixin
@mixin overlay($name, $width: 100%, $height: $width, $color: null, $direction: null, $gradient: null, $mode: null, $index: 999) {
  .overlay {
    overflow: hidden;
    position: relative;
    @include property;
  }

  @if $gradient {
    .overlay-#{$name} {
      &::before {
        content: '';
        @include absolute();
        @include size($width, $height: $width);
        @include property;
        @include gradient($direction, $gradient);
        @include overlay-mode($mode: $mode);
        z-index: $index;
      }
    }
  } @else {
    .overlay-#{$name} {
      &::before {
        content: '';
        @include absolute();
        @include size($width, $height: $width);
        @include property;
        background: $color;
        @include overlay-mode($mode: $mode);
        z-index: $index;
      }
    }
  }
}

//Overlay Opacity Mixin
@mixin overlay-opacity($name, $opacity: 1) {
  .overlay-#{$name} {
    &::before {
      opacity: $opacity;
    }
  }
}

//Overlay Mode Mixin
@mixin overlay-mode($name: null, $mode: null) {
  @if $name {
    .overlay-#{$name} {
      &::before {
        mix-blend-mode: $mode;
      }
    }
  } @else {
    mix-blend-mode: $mode;
  }

}

// Size 
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

//Position mixin
@mixin position($position, $args) {
  @each $o in top right bottom left inset {
    $i: index($args, $o);

    @if $i and $i+1 <=length($args) and type-of(nth($args, $i + 1))==number {
      #{$o}: nth($args, $i + 1);
    }
  }

  position: $position;
}

// Positioning helpers
@mixin absolute($args: '') {
  @include position(absolute, $args);
}

@mixin fixed($args: '') {
  @include position(fixed, $args);
}

@mixin relative($args: '') {
  @include position(relative, $args);
}

// Position Top/Right/Bottom/Left Alignment
@mixin trbl($type, $value, $pre: null) {

  @if $type==top {
    .#{$type}-#{$value} {
      top: #{$value}#{$pre};
    }
  } @else if $type==right {
    .#{$type}-#{$value} {
      right: #{$value}#{$pre};
    }
  } @else if $type==bottom {
    .#{$type}-#{$value} {
      bottom: #{$value}#{$pre};
    }
  } @else if $type==left {
    .#{$type}-#{$value} {
      left: #{$value}#{$pre};
    }
  }
}

// Position Top/Bottom/Left/Right Alignment
@mixin position-align($name, $position: absolute) {

  @if $name==center {
    @if $position==relative {
      .inset-#{$name} {
        @include relative(top 50% left 50%);
        transform: translate(-50%, -50%);
      }
    } @else {
      .inset-#{$name} {
        @include absolute(top 50% left 50%);
        transform: translate(-50%, -50%);
      }
    }
  } @else if $name==tl-center {
    @if $position==relative {
      .#{$name} {
        @include relative(top 50% left 0);
        transform: translateY(-50%);
      }
    } @else {
      .#{$name} {
        @include absolute(top 50% left 0);
        transform: translateY(-50%);
      }
    }
  } @else if $name==tr-center {
    @if $position==relative {
      .#{$name} {
        @include relative(top 50% right 0);
        transform: translateY(-50%);
      }
    } @else {
      .#{$name} {
        @include absolute(top 50% right 0);
        transform: translateY(-50%);
      }
    }
  } @else if $name==top-right {
    @if $position==relative {
      .#{$name} {
        @include relative(top 0 right 0);
      }
    } @else {
      .#{$name} {
        @include absolute(top 0 right 0);
      }
    }
  } @else if $name==bl-center {
    @if $position==relative {
      .#{$name} {
        @include relative(bottom 0 left 50%);
        transform: translateY(-50%);
      }
    } @else {
      .#{$name} {
        @include absolute(bottom 0 left 50%);
        transform: translateX(-50%);
      }
    }
  } @else if $name==bottom-left {
    @if $position==relative {
      .#{$name} {
        @include relative(bottom 0 left 0);
      }
    } @else {
      .#{$name} {
        @include relative(bottom 0 left 0);
      }
    }
  } @else if $name==bottom-right {
    @if $position==relative {
      .#{$name} {
        @include relative(bottom 0 right 0);
      }
    } @else {
      .#{$name} {
        @include relative(bottom 0 right 0);
      }
    }
  }

}

// Box Shadow Mixin
@mixin shadow($x: 0, $y: 0, $b: 0, $color: $black, $opacity: 1) {
  -webkit-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
  -moz-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
  box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);
}

//Text mixin
@mixin text-align($value: left, $breakpoint: null, $name: null) {
  @if $name {
    @if $breakpoint {
      .#{$name} {
        @include media-up(#{$breakpoint}) {
          text-align: $value;
        }
      }
    } @else {
      .#{$name} {
        text-align: $value;
      }
    }
  } @else {
    @if $breakpoint {
      .text-#{$breakpoint}-#{$value} {
        @include media-up(#{$breakpoint}) {
          text-align: $value;
        }
      }
    } @else {
      .text-#{$value} {
        text-align: $value;
      }
    }
  }
}

// prefix declarations
@mixin prefixed($property, $value) {
  @if $webkit==true {
    -webkit-#{$property}: #{$value};
  }

  @if $moz==true {
    -moz-#{$property}: #{$value};
  }

  @if $ms==true {
    -ms-#{$property}: #{$value};
  }

  @if $o==true {
    -o-#{$property}: #{$value};
  }

  #{$property}: #{$value};
}

// prefix keyframes
@mixin keyframes($name) {
  @if $webkit==true {
    @-webkit-keyframes #{$name} {
      @content;
    }
  }

  @if $moz==true {
    @-moz-keyframes #{$name} {
      @content;
    }
  }

  @if $ms==true {
    @-ms-keyframes #{$name} {
      @content;
    }
  }

  @if $o==true {
    @-o-keyframes #{$name} {
      @content;
    }
  }

  @keyframes #{$name} {
    @content;
  }
}

@mixin property($value: 0.3s) {
  // Improve performance on mobile/tablet devices
  // Perspective reduces blurriness of text in Chrome
  @include prefixed(transition, #{$value} ease-out);
}

@mixin transform($name: translate, $value: 0) {
  // Improve performance on mobile/tablet devices
  // Perspective reduces blurriness of text in Chrome
  @include prefixed(transform, #{$name}(#{$value}));
}

// --------------------------------------
//	- Component
// ----------------------------------------
// CSS Triangle
@mixin triangle($direction: top, $width: 50px, $height: $width, $color: $global-color) {
  $half: $width / 2;

  @if ($direction == top) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 $half $height $half;
    border-color: transparent transparent $color transparent;
    display: block;
  }

  @if ($direction == right) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $half 0 $half $height;
    border-color: transparent transparent transparent $color;
    display: block;
  }

  @if ($direction==bottom) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $height $half 0 $half;
    border-color: $color transparent transparent transparent;
    display: block;
  }

  @if ($direction==left) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $half $height $half 0;
    border-color: transparent $color transparent transparent;
    display: block;
  }

  @if ($direction==top-left) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $width $width 0 0;
    border-color: $color transparent transparent transparent;
    display: block;
  }

  @if ($direction==top-right) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 $width $width 0;
    border-color: transparent $color transparent transparent;
    display: block;
  }

  @if ($direction==bottom-left) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $width 0 0 $width;
    border-color: transparent transparent transparent $color;
    display: block;
  }

  @if ($direction==bottom-right) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 $width $width;
    border-color: transparent transparent $color transparent;
    display: block;
  }
}

// Nav Menu Mixin
@mixin nav($li: inline-block, $position: relative, $ff: $font, $fs: 1rem, $fw: 400, $color: $global-color, $bg: transparent, $tt: capitalize, $td: none, $py: 0.625rem, $px: .5rem, $pt: null, $pr: null, $pb: null, $pl: null, $my: null, $mx: null, $mt: null, $mr: null, $mb: null, $ml: null, $display: block, $index: 99, $h-color: $color, $h-bg: $bg, $h-fw: null, $h-py: $py, $h-px: $px, $h-pt: $pt, $h-pr: $pr, $h-pb: $pb, $h-pl: $pl, $h-my: null, $h-mx: null, $h-mt: $mt, $h-mr: $mr, $h-mb: $mb, $h-ml: $ml, $h-td: none) {

  ul {
    margin: 0;
  }

  li {
    display: $li;

    a {
      position: $position;
      font-family: $ff;
      font-size: $fs;
      font-weight: $fw;
      color: $color;
      background: $bg;
      text-transform: $tt;
      text-decoration: $td;
      padding: $py $px;

      @if ($pt $pr $pb $pl) {
        padding-top: $pt;
        padding-right: $pr;
        padding-bottom: $pb;
        padding-left: $pl;
      }

      margin: $my $mx;

      @if ($mt $mr $mb $ml) {
        margin-top: $mt;
        margin-right: $mr;
        margin-bottom: $mb;
        margin-left: $ml;
      }

      display: $display;
      z-index: $index;

      @if $h-color {
        @include hover {
          color: $h-color;
          background: $h-bg;
          font-weight: $h-fw;
          padding: $h-py $h-px;

          @if ($h-pt $h-pr $h-pb $h-pl) {
            padding-top: $h-pt;
            padding-right: $h-pr;
            padding-bottom: $h-pb;
            padding-left: $h-pl;
          }

          margin: $h-my $h-mx;

          @if ($h-mt $h-mr $h-mb $h-ml) {
            margin-top: $h-mt;
            margin-right: $h-mr;
            margin-bottom: $h-mb;
            margin-left: $h-ml;
          }

          text-decoration: $h-td;
        }
      }
    }
  }
}

// Nav Tabs Mixin
@mixin nav-tabs($name, $ff: $font, $fw: 400, $fs: 16px, $lh: null, $color: $global-color, $bg: null, $tt: capitalize, $p-name: null, $p-value:null, $m-name: null, $m-value:null, $h-color: null, $h-bg: null, $breakpoint: null, $b-fs: null, $b-p-name: null, $b-p-value:null, $b-m-name: null, $b-m-value:null) {
  .#{$name} {
    display: block;
    font-family: $ff;
    font-weight: $fw;
    font-size: $fs;
    line-height: $lh;
    color: $color;
    text-transform: $tt;
    @include padding($p-name, $p-value);
    @include margin($m-name, $m-value);

    @if $breakpoint {
      @include media-up($breakpoint) {
        font-size: $b-fs;
        @include padding($b-p-name, $b-p-value);
        @include margin($b-m-name, $b-m-value);
      }
    }

    &:hover {
      color: $h-color;
      background: $h-bg;
    }

    // Disabled state lightens text
    &.disabled {
      color: $nav-link-disabled-color;
      pointer-events: none;
      cursor: default;
    }
  }
}

// Button mixin
@mixin btn($fs: var(--btn-fs), $ff: var(--btn-ff), $fw: var(--fw-400), $lh: 1.5, $tt: capitalize, $td: none, $py: var(--btn-py), $px: var(--btn-px), $my: var(--btn-mx), $mx: var(--btn-mx), $bg: var(--btn-bg), $border-width: var(--border-width), $border-style: var(--border-style), $border-color: $bg, $radius: var(--btn-radius, var(--radius)), $display: inline-block, $position: relative) {
  position: $position;
  font-family: $ff;
  font-size: $fs;
  font-weight: $fw;
  line-height: $lh;
  background: var(--btn-bg);
  color: var(--btn-clr);
  border: var(--btn-bw, #{$border-width}) var(--btn-bs, #{$border-style}) var(--btn-bc, #{$border-color});
  text-transform: $tt;
  text-decoration: $td;
  border-radius: $radius;
  padding: $py $px;
  margin: $my $mx;
  display: $display;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  @include property;
}

// Button Color
@mixin btn-color($bg: var(--clr-black), $color: var(--clr-white), $border-color: $bg, $h-color: $bg, $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {
  --btn-bg: #{$bg};
  --btn-clr: #{$color};
  --btn-bc: #{$border-color};

  @if $h-bg {
    @include hover {
      --btn-clr: #{$h-color};
      --btn-bg: #{$h-bg};
      --btn-bc: #{$h-border-color};
    }
  }

  @include focus {
    outline: 0;
    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
  }
}

//Button hover color
@mixin btn-hover($h-color: var(--clr-black), $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {
  @if $h-bg {
    @include hover {
      --btn-clr: #{$h-color};
      --btn-bg: #{$h-bg};
      --btn-bc: #{$h-border-color};
    }
  }

  @include focus {
    outline: 0;
    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
  }
}

@mixin btn-outline($color: var(--btn-clr), $h-color: var(--clr-white), $h-bg: $color, $border-color: $color, $h-border-color: $h-bg, $f-width: 0.4rem, $f-color: $color, $f-opacity: 0.5) {
  --btn-clr: #{$color};
  --btn-bc: #{$border-color};

  @include hover {
    --btn-clr: #{$h-color};
    --btn-bg: #{$h-bg};
    --btn-bc: #{$h-border-color};
  }

  @include focus {
    outline: 0;
    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);
  }
}


// Form Input mixin 
@mixin form-input($ff: $font, $fs: inherit, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 1rem, $px: 1.25rem, $my: 0, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: $global-color, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-bg: null, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $black, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {

  font-family: $ff;
  font-size: $fs;
  font-weight: $fw;
  line-height: $lh;
  color: rgba($color, $opacity);
  background: $bg;
  text-transform: $tt;
  padding: $py $px;
  margin: $my $mx;
  @include size($width, $height);
  max-width: $max-width;
  @include border($border-type, $border-size, $border-style, $border-color);
  @include radius($radius-type, $radius-size);
  box-shadow: $shadow;
  @include property;

  @if $focus==true {
    &:focus {
      outline: none;
      font-weight: $f-fw;
      color: rgba($f-color, $f-opacity);
      background: $f-bg;
      @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);
      @include radius($f-radius-type, $f-radius-size);
      box-shadow: $f-shadow;
    }
  } @else {
    @include focus {
      outline: none;
    }
  }

}

// Form Textarea mixin 
@mixin textarea($fs: null, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 15px, $px: 20px, $my: 0.9375rem, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $border-color, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {

  font-size: $fs;
  font-weight: $fw;
  line-height: $lh;
  padding: $py $px;
  margin: $my $mx;
  color: rgba($color, $opacity);
  background: $bg;
  text-transform: $tt;
  @include size($width, $height);
  max-width: $max-width;
  @include border($border-type, $border-size, $border-style, $border-color);
  @include radius($radius-type, $radius-size);
  box-shadow: $shadow;
  @include property;

  @if $focus==true {
    &:focus {
      font-weight: $f-fw;
      color: rgba($f-color, $f-opacity);
      @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);
      @include radius($f-radius-type, $f-radius-size);
      box-shadow: $f-shadow;
    }
  }
}

// Dropdown Menu Mixin
@mixin dropdown-menu($position:top 100% left 0, $width: 100%, $max-width: null, $padding: 15px, $m-name: mx, $m-value: auto, $fs: 16px, $a-color: $global-color, $a-padding: 0.625rem, $a-margin: 5px, $align: left, $index: 99, $radius: null, $shadow: null, $hover-bg: $black, $hover-color: $white) {
  @include absolute($position);
  width: $width;

  @if $max-width {
    max-width: $max-width;
    @include margin($m-name, $m-value);
  }

  padding: $padding;
  text-align: $align;
  z-index: $index;
  border-radius: $radius;
  box-shadow: $shadow;
  opacity: 0;
  visibility: hidden;

  li {
    display: block;

    a {
      color: $a-color;
      font-size: $fs;
      border-radius: $radius;
      padding: $a-padding;
      margin-bottom: $a-margin;
      display: block;

      &:hover {
        background: $hover-bg;
        color: $hover-color;
      }
    }
  }
}

// Social Link
@mixin social($name, $display: inline-block, $m-type: ml, $m-size: .75rem, $before: false, $divide-li: false, $before-content: '', $position: null, $before-width: 1px, $before-height: 20px, $before-bg: $global-color, $fs: 20px, $bg: transparent, $color: $global-color, $width: null, $height: $width, $lh: $width, $b-type: null, $b-size: 1px, $b-style: solid, $b-color: transparent, $radius: null, $p-name: null, $p-value: null, $shadow-x: null, $shadow-y: null, $shadow-b: null, $shadow-color: $color, $shadow-opacity: 1, $h-bg: null, $h-color: $color, $hb-type: $b-type, $hb-size: $b-size, $hb-style: $b-style, $hb-color: $b-color, $hs-x: null, $hs-y: null, $hs-b: null, $hs-color: $color, $hs-opacity: 1) {
  .#{$name} {
    li {
      + li {
        @include margin($m-type, $m-size);
      }

      position: relative;

      @if $display==inline-flex {
        display: inline-flex;
        flex-wrap: wrap;
      } @else {
        display: $display;
      }

      @if $before==true {
        @if $divide-li==true {
          & + li {
            &::before {
              content: $before-content;
              @include absolute($position);
              @include size($before-width, $before-height);
              background: $before-bg;
            }
          }
        } @else {
          &::before {
            content: $before-content;
            @include absolute($position);
            @include size($before-width, $before-height);
            background: $before-bg;
          }
        }
      }

      a {
        font-size: $fs;
        line-height: $lh;
        background: $bg;
        color: $color;
        display: block;
        text-align: center;
        @include size($width, $height);
        @include border($b-type, $b-size, $b-style, $b-color);
        @include radius($size: $radius);
        @include property;

        @if $p-name {
          @include padding($p-name, $p-value);
        }

        @if $shadow-color==true {
          @include shadow($shadow-x, $shadow-y, $shadow-b, $shadow-color, $shadow-opacity);
        }

        @if $h-bg {
          @include hover {
            background: $h-bg;
            color: $h-color;

            @if $hb-color {
              @include border($hb-type, $hb-size, $hb-style, $hb-color);
            }

            @if $hs-color {
              @include shadow($hs-x, $hs-y, $hs-b, $hs-color, $hs-opacity);
            }
          }
        } @else {
          @include hover {
            color: $h-color;
          }
        }
      }
    }
  }
}

//Owl Carousel Nav
@mixin owl-nav($name: null, $fs: 20px, $bg: transparent, $color: $global-color, $position: null, $width: 50px, $height: $width, $lh: null, $radius: 0, $border: 2px solid $global-color, $transform: null, $p: 0, $owl-prev-left: null, $owl-prev-right: null, $owl-next-left: null, $owl-next-right: null, $h-bg: null, $h-color: null, $h-border: null) {
  @if $name {
    .#{$name} {
      button {
        @include absolute($position);
        @include size($width, $height);
        font: inherit;
        font-size: $fs;
        background: $bg;
        color: $color;
        line-height: $lh;
        border-radius: $radius;
        border: $border;
        transform: $transform;
        padding: $p;
        cursor: pointer;
        @include property;

        &.owl-prev {
          left: $owl-prev-left;
          right: $owl-prev-right;
        }

        &.owl-next {
          left: $owl-next-left;
          right: $owl-next-right;
        }

        &:focus {
          outline: none;
        }

        &:hover {
          background: $h-bg;
          color: $h-color;
          border: $h-border;
        }
      }
    }
  } @else {
    .owl-nav {
      button {
        @include absolute($position);
        @include size($width, $height);
        font: inherit;
        font-size: $fs;
        background: $bg;
        color: $color;
        line-height: $lh;
        border-radius: $radius;
        border: $border;
        transform: $transform;
        padding: $p;
        cursor: pointer;
        @include property;

        &.owl-prev {
          left: $owl-prev-left;
          right: $owl-prev-right;
        }

        &.owl-next {
          left: $owl-next-left;
          right: $owl-next-right;
        }

        &:focus {
          outline: none;
        }

        &:hover {
          background: $h-bg;
          color: $h-color;
          border: $h-border;
        }
      }
    }
  }
}

// OWl Carousel Dots 
@mixin owl-dots($dots-position: left 50% bottom 0, $translateX: -50%, $translateY: -50%, $width: 8px, $height: $width, $display: inline-block, $text-center: center, $bg: $global-color, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 50%, $p-name: null, $p-value: .25rem, $m-name: ml, $m-value: .5rem, $before: false, $b-content: '', $b-position: left -9px top -9px, $b-width: 25px, $b-height: $b-width, $b-radius-type: null, $b-radius-size: 50%, $b-border: 1px solid $global-color, $active: true, $a-width: $width, $a-height: $height, $a-bg: $bg, $a-border-size: 1px, $a-border-style: solid, $a-border-color: transparent, $active-before: false, $ab-content: '', $ab-position: left -9px top -9px, $ab-width: 25px, $ab-height: $ab-width, $ab-border: 2px solid $global-color, $ab-radius-type: null, $ab-radius-size: 50%) {

  @include absolute($dots-position);
  text-align: $text-center;

  @if $translateY==true {
    transform: translateY($translateY);
  } @else {
    transform: translateX($translateX);
  }

  button {
    position: relative;
    @include size($width, $height);
    display: $display;
    background: $bg;
    @include border(null, $border-size, $border-style, $border-color);
    @include radius($radius-type, $radius-size);
    @include padding($p-name, $p-value);
    @include margin($m-name, $m-value);

    @if $before==true {
      &::before {
        content: $b-content;
        @include absolute($b-position);
        @include size($b-width, $b-height);
        @include radius($b-radius-type, $b-radius-size);
        border: $b-border;
      }
    }

    @if $active==true {
      &.active {
        @include size($a-width, $a-height);
        background: $a-bg;
        @include border(null, $a-border-size, $a-border-style, $a-border-color);

        @if $active-before==true {
          &::before {
            content: $ab-content;
            @include absolute($ab-position);
            @include size($ab-width, $ab-height);
            @include radius($ab-radius-type, $ab-radius-size);
            border: $ab-border;
          }
        }
      }
    }

    @include focus {
      outline: none;
    }
  }
}

// Footer Menu 
@mixin footer-menu($size: 18px, $color: $black, $padding: 10px, $opacity: 1, $display: block, $tt: capitalize, $td: none, $h-color: $black, $h-td: none) {
  li {
    a {
      font-size: $size;
      color: $color;
      opacity: $opacity;
      padding-bottom: $padding;
      display: $display;
      text-transform: $tt;
      text-decoration: $td;

      @include hover {
        color: $h-color;
        text-decoration: $h-td;
      }
    }
  }
}

// Footer Widget 
@mixin footer-widget($value, $weight: 600, $prefix: top, $padding: 0) {
  h3 {
    font-size: $value;
    padding-#{$prefix}: $padding;
    font-weight: $weight;
  }

  @include footer-menu;
}

//Extra Small Screen Only
@mixin xs {
  @media screen and (max-width: 767px) {
    @content;
  }
}

//Small Screen
@mixin xsm {
  @media screen and (min-width: 425px) {
    @content;
  }
}

//Small Screen
@mixin sm {
  @media screen and (min-width: 576px) {
    @content;
  }
}

//Medium Screen
@mixin md {
  @media screen and (min-width: 768px) {
    @content;
  }
}

//Large Screen
@mixin lg {
  @media screen and (min-width: 992px) {
    @content;
  }
}

//Extra Large Screen
@mixin xl {
  @media screen and (min-width: 1200px) {
    @content;
  }
}

//Desktop Screen
@mixin xxl {
  @media screen and (min-width: 1441px) {
    @content;
  }
}