@import "function";
@import "../common/var";

/* Break-points — explicit @media per key (Dart Sass + LibSass).
   Add a branch when adding keys to $--breakpoints or $--breakpoints-spec. */
@mixin res($key, $map: $--breakpoints) {
    @if not map-has-key($map, $key) {
        @warn "Undefined breakpoint `#{$key}` for this map";
    } @else if $key == "xs" {
        @media only screen and (max-width: $--sm) {
            @content;
        }
    } @else if $key == "sm" {
        @media only screen and (min-width: $--sm) {
            @content;
        }
    } @else if $key == "md" {
        @media only screen and (min-width: $--md) {
            @content;
        }
    } @else if $key == "lg" {
        @media only screen and (min-width: $--lg) {
            @content;
        }
    } @else if $key == "xl" {
        @media only screen and (min-width: $--xl) {
            @content;
        }
    } @else if $key == "xs-only" {
        @media only screen and (max-width: $--sm - 1) {
            @content;
        }
    } @else if $key == "small-and-up" {
        @media only screen and (min-width: $--sm) {
            @content;
        }
    } @else if $key == "sm-only" {
        @media only screen and (min-width: $--sm) and (max-width: $--md - 1) {
            @content;
        }
    } @else if $key == "sm-and-down" {
        @media only screen and (max-width: $--md - 1) {
            @content;
        }
    } @else if $key == "md-and-up" {
        @media only screen and (min-width: $--md) {
            @content;
        }
    } @else if $key == "md-only" {
        @media only screen and (min-width: $--md) and (max-width: $--lg - 1) {
            @content;
        }
    } @else if $key == "md-and-down" {
        @media only screen and (max-width: $--lg - 1) {
            @content;
        }
    } @else if $key == "lg-and-up" {
        @media only screen and (min-width: $--lg) {
            @content;
        }
    } @else if $key == "lg-only" {
        @media only screen and (min-width: $--lg) and (max-width: $--xl - 1) {
            @content;
        }
    } @else if $key == "lg-and-down" {
        @media only screen and (max-width: $--xl - 1) {
            @content;
        }
    } @else if $key == "xl-only" {
        @media only screen and (min-width: $--xl) {
            @content;
        }
    } @else {
        @warn "Unknown breakpoint key `#{$key}` - add a branch to res()";
    }
}

/* Scrollbar
 -------------------------- */
@mixin scrollbar {
    /* Firefox */
    scrollbar-width: medium;
    scrollbar-color: $--scrollbar-background-color transparent;
    transition: $--all-transition;

    /* Works on Chrome, Edge, and Safari */
    &::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: $--scrollbar-background-color;
        border-radius: $--border-radius-base;
        transition: $--all-transition;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: $--scrollbar-hover-background-color;
    }
}

/* Placeholder
 -------------------------- */
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }

    &::-moz-placeholder {
        @content;
    }

    &:-ms-input-placeholder {
        @content;
    }
}

/* BEM
 -------------------------- */
@mixin b($block) {
    $B: $namespace+"-"+$block !global;

    .#{$B} {
        @content;
    }
}

@mixin e($element) {
    $E: $element !global;
    $selector: &;
    $currentSelector: "";
    @each $unit in $element {
        $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
    }

    @if hitAllSpecialNestRule($selector) {
        @at-root {
            #{$selector} {
                #{$currentSelector} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$currentSelector} {
                @content;
            }
        }
    }
}

@mixin m($modifier) {
    $selector: &;
    $currentSelector: "";
    @each $unit in $modifier {
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
    }

    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}

@mixin configurable-m($modifier, $E-flag: false) {
    $selector: &;
    $interpolation: "";

    @if $E-flag {
        $interpolation: $element-separator + $E-flag;
    }

    @at-root {
        #{$selector} {
            .#{$B+$interpolation+$modifier-separator+$modifier} {
                @content;
            }
        }
    }
}

@mixin spec-selector($specSelector: "", $element: $E, $modifier: false, $block: $B) {
    $modifierCombo: "";

    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }

    @at-root {
        #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
            @content;
        }
    }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
    $selector: &;
    $modifierCombo: "";

    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }

    @at-root {
        #{$selector} {
            .#{$block+$element-separator+$element+$modifierCombo} {
                @content;
            }
        }
    }
}

@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}

@mixin extend-rule($name) {
    @extend #{"%shared-"+$name};
}

@mixin share-rule($name) {
    $rule-name: "%shared-"+$name;

    @at-root #{$rule-name} {
        @content;
    }
}

@mixin pseudo($pseudo) {
    @at-root #{&}#{":#{$pseudo}"} {
        @content;
    }
}

/* stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after */
@mixin placeholder {
    &.placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &::-webkit-input-placeholder {
        @content;
    }
}
/* stylelint-enable */

@mixin fa-icon {
    font: normal normal normal 14px/1 "BritecoreIcons";
    font-size: inherit;
    text-align: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    width: 1.28571429em;
}

@mixin hidden--accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin inline-block-center {
    &:after {
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
    }
}

@mixin hide-number-stepper {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

@mixin clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}

@mixin form-element {
    background-color: $--input-fill;
    background-image: none;
    border-radius: $--input-border-radius;
    border: $--input-border;
    box-sizing: border-box;
    color: $--input-color;
    display: inline-block;
    font-size: inherit;
    height: $--input-height;
    line-height: 1;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;

    &:focus {
        border-color: $--color-primary;
        background-color: $--input-focus-fill;
    }
}

@mixin primary-button {
    // background-color: $btn-primary-bg;
    // color: $btn-primary-color;
    // box-shadow: 0 1px 1px rgba(0, 0, 0, .3), inset 0px 1px 1px rgba(255, 255, 255, .1);
    // border: 1px solid darken($btn-primary-bg, 5%);
    // text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    //
    // &:hover {
    //     background-color: darken($btn-primary-bg, 5%);
    // }
}
@mixin disable-mouse-outline {
    [data-whatinput="mouse"] & {
        outline: 0;
    }
}

// Taken from Foundation ...
// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
//
// @param {Number} $triangle-size - Width of the triangle.
// @param {Color} $triangle-color - Color of the triangle.
// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
@mixin css-triangle(
    $triangle-size,
    $triangle-color,
    $triangle-direction
) {
    display: block;
    width: 0;
    height: 0;

    border: inset $triangle-size;

    content: "";

    @if ($triangle-direction == down) {
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: $triangle-color transparent transparent;
    }
    @if ($triangle-direction == up) {
        border-top-width: 0;
        border-bottom-style: solid;
        border-color: transparent transparent $triangle-color;
    }
    @if ($triangle-direction == right) {
        border-right-width: 0;
        border-left-style: solid;
        border-color: transparent transparent transparent $triangle-color;
    }
    @if ($triangle-direction == left) {
        border-left-width: 0;
        border-right-style: solid;
        border-color: transparent $triangle-color transparent transparent;
    }
}

@mixin inline-edit {
    /* Eliminate borders and padding */
    border: 1px solid transparent;
    border-radius: $--input-border-radius;
    padding: 0;
    margin: 0;
    width: 100%;
    height: $--input-height;
    background-color: transparent;
    line-height: 1;

    /* Inherit the parent element's typography */
    font: inherit;
    color: inherit;
    font-size: inherit;
    text-align: inherit;

    /* Seems to help alignment in headers */
    vertical-align: top;

    // Transition timings must differ slightly for correct appearance
    transition: padding 50ms ease-in, border 100ms ease-in 25ms, background-color 100ms ease-in 25ms;
}

@mixin inline-edit__active {
    @include form-element;
    transition: padding 50ms ease-in 50ms, border 75ms ease-in, background-color 75ms ease-in;
}

@mixin unstyled-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

@mixin u-link-style {
    color: $--link-color;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit; // Buttons without class don't inherit font family.
    border: 0;
    background-color: transparent;
    box-shadow: none;
    text-shadow: none;
    transition: none;
    padding: 0;

    &:hover, &:focus {
        color: $--link-hover-color;
        text-decoration: underline;
        border-color: transparent;
        background-color: transparent;
    }
}