/* stylelint-disable scss/at-else-empty-line-before */
/* stylelint-disable scss/at-if-closing-brace-space-after */
// Sass Mix In's
//==================================================//
@use 'sass:list';

// rem font sizin
@mixin font-size($size-value) {
  font-size: ($size-value) + px;
  font-size: calc($size-value / 10) + rem;
}

// Prefixes that we use throughout
$prefixes: -webkit-, -moz-, -o-, -ms-, '';

// Builds a list of vendor-prefixed animation definitions
@mixin animation($animate...) {
  $max: list.length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + list.nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ', '};
    }
  }

  @each $prefix in $prefixes {
    #{$prefix}animation: $animations;
  }
}

@mixin colorPalettesProperty($prop) {
  @each $name in $color-names {
    $i: list.index($color-names, $name);
    $color: list.nth($color-vars, $i);

    &.#{$name} {
      #{$prop}: $color !important;
    }
  }
}

// Builds out vendor-prefixed keyframe definitions
@mixin no-animation() {
  animation: none !important;
}

// Builds out vendor-prefixed keyframe definitions
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} { @content; }

  @-moz-keyframes #{$animation-name} { @content; }

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

// basic vendor prefixing
@mixin css3($property, $value...) {
  @each $prefix in $prefixes {
    #{$prefix}#{$property}: $value;
  }
}

// basic vendor prefixing with optional prefixes only
@mixin css3-extended($property, $value, $this-prefixes:false) {
  $this-prefixes: if($this-prefixes, $this-prefixes, $prefixes);

  @each $prefix in $this-prefixes {
    #{$prefix}#{$property}: $value;
  }
}

// vendor prefixed transitions for regular properties (non-vendor prefixed)
@mixin transition($transitions-list...) {
  @each $prefix in $prefixes {
    #{$prefix}transition: $transitions-list;
  }
}

// Use "transition: transform ... ..." with all vendor prefixes
@mixin transform-transition-list($transition-rule, $additional-transitions-list...) {
  @each $prefix in $prefixes {
    #{$prefix}transition: #{$prefix}transform $transition-rule, $additional-transitions-list;
  }
}

// 'transform'-specific vendor prefixing mixins
// This is because we can't include the word 'transform' inside the normal vendor prefixer,
// since it would not be prefixed properly.
@mixin transform($value) {
  @each $prefix in $prefixes {
    #{$prefix}transform: $value;
  }
}

@mixin transform-origin($origin) {
  @each $prefix in $prefixes {
    #{$prefix}transform-origin: $origin;
  }
}

// rotation
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
  @include transform(scale($scale));
}

// translate
@mixin translate($x, $y) {
  @include transform(translate($x, $y));
}

// translate3d
@mixin translate3d($x, $y, $z) {
  @include transform(translate3d($x, $y, $z));
}

// set opacity cross browser
@mixin opacity($opacity) {
  $opacity-ie: $opacity * 100;

  filter: alpha(opacity=$opacity-ie); // IE8
  opacity: $opacity;
}

// Util To Disable Select
@mixin no-select {
  @include css3(user-select, none);

  -webkit-touch-callout: none;
}

// Util to enable select (use in conjunction with the disable util)
@mixin enable-select {
  @include css3(user-select, auto);

  -webkit-touch-callout: default;
}

// Respond-To different device sizes (Responsive Breakpoints)
@mixin respond-to($media) {
  @if $media == phone {
    @media (max-width: ($breakpoint-phone-to-tablet - 1)) { @content; }
  }

  @else if $media == phonedown {
    @media (min-width: 0) and (max-width: ($breakpoint-big-phone - 1)) { @content; }
  }

  @else if $media == tabletdown {
    @media (max-width: ($breakpoint-tablet-to-desktop - 1)) { @content; }
  }

  @else if $media == tablet {
    @media (min-width: $breakpoint-phone-to-tablet) and (max-width: ($breakpoint-tablet-to-desktop - 1)) { @content; }
  }

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

  @else if $media == phabletdown {
    @media (min-width: 0) and (max-width: ($breakpoint-wide-tablet - 1)) { @content; }
  }

  @else if $media == phabletup {
    @media (min-width: ($breakpoint-wide-tablet - 1)) { @content; }
  }

  @else if $media == tabletup {
    @media (min-width: $breakpoint-phone-to-tablet) { @content; }
  }

  @else if $media == smphabletdown {
    @media (min-width: 0) and (max-width: ($breakpoint-phablet - 1)) { @content; }
  }

  @else if $media == desktop {
    @media (min-width: $breakpoint-tablet-to-desktop) and (max-width: ($breakpoint-desktop-to-extralarge - 1)) { @content; }
  }

  @else if $media == extralarge {
    @media (min-width: $breakpoint-desktop-to-extralarge) { @content; }
  }
}

// Control the text color of placeholder
@mixin placeholderTextColor {
  &::-webkit-input-placeholder { @content; } /* Chrome | Opera |Safari | Edge */
  &::-moz-placeholder { @content; } /* Firefox 19+ */
  &:-ms-input-placeholder { @content; } /* IE 10+ */
  &:-moz-placeholder { @content; } /* Firefox 18- */
}

// Align Vertically to Parent
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: top;
}

// Control line text via line clamp
@mixin line-clamp($num-lines) {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: $num-lines;
}

@mixin antialiased {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

// Truncate to Ellipsis....
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin focus-state {
  border: solid 1px $input-color-focus-border;
  box-shadow: $focus-box-shadow;  //wanted 0 0 4px 3px rgba(54, 138 ,192, 0.30)
  outline: none;
  outline-color: transparent;
}

@mixin placeholder {
  color: $input-placeholder-color;
  font-size: $input-size-regular-font-size;
  font-weight: $ids-number-font-weight-base;
  opacity: 1;
}

// Wrap longer word
@mixin word-wrap() {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -ms-word-break: break-all;
  word-break: break-all;
}

// Disable Text Selection
@mixin unselectable() {
  outline-style: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

// Enable Text Selection
@mixin selectable() {
  outline-style: none;
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  -o-user-select: auto;
  user-select: auto;
}

// Vertical Alignment Spacer
// When using "vertical-align: middle;" to align inline-block elements in a container,
// attach this as a Psuedo-element (::before or ::after) to the container that will hold these elements.
// This will perfectly align the elements vertically.
@mixin vertical-alignment-spacer {
  content: '';
  display: inline-block;
  height: 100%;
  overflow: hidden;
  vertical-align: middle;
  visibility: hidden;
  width: 1px;
}

// Horizontal gradient
@mixin horizontal-gradient($start-color, $end-color) {
  background: $start-color;
  background: -webkit-gradient(linear, 0 0, 100% 0, from($start-color), to($end-color));
  background: -webkit-linear-gradient(left, $start-color, $end-color);
  background: -moz-linear-gradient(left, $start-color, $end-color);
  background: -ms-linear-gradient(left, $start-color, $end-color);
  background: -o-linear-gradient(left, $start-color, $end-color);
}

// BEGIN: Flexbox
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($value) {
  -webkit-box-flex: $value;
  -moz-box-flex: $value;
  -webkit-flex: $value;
  -ms-flex: $value;
  flex: $value;
}

@mixin flex-direction($value) {
  $orient: horizontal;

  @if $value == 'column' {
    $orient: vertical;
  }

  -moz-box-direction: $value;
  -webkit-box-direction: $value;
  -webkit-box-orient: $orient;
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
  -ms-flexbox-direction: $value;
}

@mixin dropdown-box-shadow() {
  box-shadow: $dropdown-box-shadow-top, $focus-box-shadow;
}

// Re-usable box shadow statement for drawer-style stuff
$box-shadow-on-color: rgba(0, 0, 0, 0.75);
$box-shadow-off-color: rgba(0, 0, 0, 0);

@mixin drawer-box-shadow() {
  @include css3(box-shadow, 0 0 20px 1px $box-shadow-on-color);
}