@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {
    @each $icon in $iconList {
        #{$prefix}#{$icon} {
            background-position: $x * 1px $y * 1px;
        }
        @if $direction == 'x' {
            $x: $x - 16;
        } @else {
            $y: $y - 16;
        }
    }
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
@mixin linear-gradient($colorList, $direction: 'to right') {
    $percentage: 0;
    $units: '%';
    $count: length($colorList);
    $increment: calc(100 / ($count - 1));
    $css: #{$direction + ', '};
    $sep: ', ';
    @each $colorItem in $colorList {
        $color: $colorItem;
        @if (length($colorItem) > 1) {
            $color: nth($colorItem, 1);
            $percentage: nth($colorItem, 2);
            $units: '';
        }
        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {
            $sep: '';
        }
        $css: #{$css + $color + ' ' + $percentage + $units + $sep};
        $percentage: $percentage + $increment;
    }
    background: linear-gradient(#{$css});
}

@mixin grid-unit($span, $numCols: 12, $gutter: 0) {
    $gridPx: 840;
    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));
    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);
    $spanPercent: widthPerc($spanPx, $gridPx);
    $marginPercent: widthPerc($gutter, $gridPx);
    margin-inline-start: $marginPercent;
    inline-size: $spanPercent;
}

@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {
    @if $whatToPrefix == 'property' {
        @each $prefix in $prefixes {
            #{$prefix + $property}: #{$value};
        }
    } @else if $whatToPrefix == 'value' {
        @each $prefix in $prefixes {
            #{$property}: #{$prefix + $value};
        }
    }
}
@mixin flex-container($wrapBehavior: nowrap, $direction: row) {
    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));

    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));
    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));

    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));

    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));

    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));
}

@mixin simple-flex-box($width: auto, $minWidth: 1) {
    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));
    flex-item-align: stretch;
    -ms-flex-item-align: stretch;
    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));

    // if both, min width and width are set, width will win this conflict
    @if ($width == auto) {
        @if ($minWidth != 1) {
            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));
        } @else {
            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));
            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
            // for a discussion auto vs. main-size
            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));
        }
    } @else {
        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));
    }
}

@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {
    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);
}

@mixin simple-border($color: #ddd) {
    border: 1px solid $color;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

@mixin border-radius($radius: 2) {
    -moz-border-radius: $radius * 1px;
    -webkit-border-radius: $radius * 1px;
    border-radius: $radius * 1px;
}

@mixin border-radius-top($radius: 2) {
    -webkit-border-top-left-radius: $radius * 1px;
    -webkit-border-top-right-radius: $radius * 1px;
    -moz-border-radius-topleft: $radius * 1px;
    -moz-border-radius-topright: $radius * 1px;
    border-top-left-radius: $radius * 1px;
    border-top-right-radius: $radius * 1px;
}

@mixin border-radius-bottom($radius: 2) {
    -webkit-border-bottom-right-radius: $radius * 1px;
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-bottomright: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-bottom-right-radius: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

@mixin border-radius-left($radius: 2) {
    -webkit-border-top-left-radius: $radius * 1px;
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-topleft: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-top-left-radius: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

@mixin border-radius-right($radius: 2) {
    -webkit-border-top-right-radius: $radius * 1px;
    -webkit-border-bottom-right-radius: $radius * 1px;
    -moz-border-radius-topright: $radius * 1px;
    -moz-border-radius-bottomright: $radius * 1px;
    border-top-right-radius: $radius * 1px;
    border-bottom-right-radius: $radius * 1px;
}

@mixin border-radius-top-left($radius: 2) {
    -webkit-border-top-left-radius: $radius * 1px;
    -moz-border-radius-topleft: $radius * 1px;
    border-top-left-radius: $radius * 1px;
}

@mixin border-radius-top-right($radius: 2) {
    -webkit-border-top-right-radius: $radius * 1px;
    -moz-border-radius-topright: $radius * 1px;
    border-top-right-radius: $radius * 1px;
}

@mixin border-radius-bottom-right($radius: 2) {
    -webkit-border-bottom-right-radius: $radius * 1px;
    -moz-border-radius-bottomright: $radius * 1px;
    border-bottom-right-radius: $radius * 1px;
}

@mixin border-radius-bottom-left($radius: 2) {
    -webkit-border-bottom-left-radius: $radius * 1px;
    -moz-border-radius-bottomleft: $radius * 1px;
    border-bottom-left-radius: $radius * 1px;
}

@mixin border-box() {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@function whiten($color, $white: 0.3) {
    @return mix(#fff, $color, ($white * 100) * 1%);
}

@function blacken($color, $black: 0.3) {
    @return mix(#000, $color, ($black * 100) * 1%);
}

@function widthPerc($colWidth, $context) {
    @return calc(($colWidth * 100 / $context) * 1%);
}

@function remDist($fontSizePx) {
    @return calc(($fontSizePx / 10) * 1rem);
}

@function black($alpha: 1) {
    @return (rgba(0, 0, 0, $alpha));
}

@function white($alpha: 1) {
    @return (rgba(255, 255, 255, $alpha));
}

@mixin font-size($remPx, $important: false) {
    @if $important == true {
        font-size: calc(($remPx) * 1px) !important;
        font-size: calc(($remPx / 10) * 1rem) !important;
    } @else {
        font-size: calc(($remPx) * 1px);
        font-size: calc(($remPx / 10) * 1rem);
    }
}

@mixin keyframes($name) {
    @-o-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-webkit-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

@mixin animation($value, $type: '') {
    $animation: animation;
    @if $type != '' {
        $animation: $animation + '-' + $type;
    }
    @include vendor-prefix($animation, $value, property);
}

/// CSS transition mixin to the current selection (apply also vendor prefixes).
/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values
///
/// @param {property} [$type = all] the CSS property to apply the transition to
/// @param {time} [$duration = .5s] the transition property
/// @param {timing-function} [$effect = ease-out] the transition property
@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {
    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);
}

@mixin fade($duration: 1s) {
    @include keyframes(fade) {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @include vendor-prefix(animation, fade 1s forwards, property);
}

@mixin repeat() {
    @include animation(infinite, iteration-count);
}

@mixin largeHeading() {
    @include font-size(20);
    font-family: $headingFont;
    font-style: normal;
}

@mixin disableSelect() {
    @include vendor-prefix(user-select, none, property);
}

/* based on "visually-hidden" mixin in LDS for accessibility goals */
@mixin visuallyHidden() {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    margin: 0;
    padding: 0;
}

/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
@mixin writing-mode-vertical-rl {
    @at-root {
        #{selector-replace(&, $mainContainer, $mainContainer + " .writing-mode-vertical-rl")} {
            @content;
        }
    }
}
@mixin writing-mode-horizontal-tb {
    & {
        @content;
    }
    @at-root {
        #{selector-replace(&, $mainContainer, $mainContainer + " .writing-mode-vertical-rl .writing-mode-horizontal-tb")} {
            @content;
        }
    }
}