/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $category Optional category to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $category: regular, $where: before) {

    text-decoration: none;

    &:#{$where} {

        @if $content {
            content: $content;
        }

        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;

        @if ($category == brands) {
            font-family: 'Font Awesome 5 Brands';
        }
        @elseif ($category == solid) {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
        }
        @else {
            font-family: 'Font Awesome 5 Free';
            font-weight: 400;
        }

    }

}

/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {

    @if $important {
        $important: '!important';
    }

    $x: 0.1em;

    @if unit(_size(element-margin)) == 'rem' {
        $x: 0.1rem;
    }

    padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};

}

/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {

    $svg: str-replace($svg, '"', '\'');
    $svg: str-replace($svg, '%', '%25');
    $svg: str-replace($svg, '<', '%3C');
    $svg: str-replace($svg, '>', '%3E');
    $svg: str-replace($svg, '&', '%26');
    $svg: str-replace($svg, '#', '%23');
    $svg: str-replace($svg, '{', '%7B');
    $svg: str-replace($svg, '}', '%7D');
    $svg: str-replace($svg, ';', '%3B');

    @return url("data:image/svg+xml;charset=utf8,#{$svg}");

}

/// Defines a unit of width: size the elements so their width is a multiple of the unit.
/// @param {mixed} $x the actual size of the unit.
@mixin spans($x) {
    @for $i from 0 through 10 {

        @if ($i > 0) {
            .span-#{$i} {
                width: ($x * $i);
            }
        }

        @if ($i < 10) {
            .span-#{$i}-25 {
                width: ($x * $i) + ($x * 0.25);
            }

            .span-#{$i}-5 {
                width: ($x * $i) + ($x * 0.5);
            }

            .span-#{$i}-75 {
                width: ($x * $i) + ($x * 0.75);
            }
        }
    }
}

@mixin spans-small($x) {
    @for $i from 0 through 10 {

        @if ($i > 0) {
            .span-#{$i} {
                width: 100%;
            }
        }

        @if ($i < 10) {
            .span-#{$i}-25 {
                width: 100%;
            }

            .span-#{$i}-5 {
                width: 100%;
            }

            .span-#{$i}-75 {
                width: 100%;
            }
        }
    }
}

/// 
@mixin gradient-background($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%, $angle: 45deg) {
    $background-image: (
        url('./images/overlay.png'),
        linear-gradient($angle, transparentize(_palette(accent1), (1 - $opacity)) $stop1, transparentize(_palette(accent2), (1 - $opacity)) $stop2, transparentize(_palette(accent3), (1 - $opacity)))
    );

    $background-size: (
        128px 128px,
        auto
    );

    @if ($tint) {
        $x: linear-gradient(0deg, rgba(0,0,0,0.125), rgba(0,0,0,0.125));
        $y: auto;
        $background-image: append($background-image, $x);
        $background-size: append($background-size, $y);
    }

    background-image: $background-image;
    background-size: $background-size;
}

@mixin gradient-background-small($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%) {
    @include gradient-background($tint, $opacity, $stop1, $stop2, 135deg);
}

/// 
@mixin panel-colors {
    $opacity: 0.175;
    $darken: 3;
    $desaturate: 3;

    &.color0 {
        @include gradient-background(false, 1, 20%, 60%);
    }

    &.color1 {
        @include gradient-background;
        background-color: _palette(accent1);
    }

    &.color2 {
        @include gradient-background;
        background-color: _palette(accent2);
    }

    &.color3 {
        @include gradient-background;
        background-color: desaturate(darken(_palette(accent3), 9), 9);
    }

    &.color4 {
        @include gradient-background;
        background-color: _palette(accent4);
    }

    &.color1-alt {
        @include gradient-background(false, $opacity);
        background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
    }

    &.color2-alt {
        @include gradient-background(false, $opacity);
        background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
    }

    &.color3-alt {
        @include gradient-background(false, $opacity);
        background-color: desaturate(darken(_palette(accent3), 12), 12);
    }

    &.color4-alt {
        @include gradient-background(false, $opacity);
        background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
    }
}

@mixin panel-colors-small {
    $opacity: 0.175;
    $darken: 3;
    $desaturate: 3;

    &.color1 {
        @include gradient-background-small;
        background-color: _palette(accent1);
    }

    &.color2 {
        @include gradient-background-small;
        background-color: _palette(accent2);
    }

    &.color3 {
        @include gradient-background-small;
        background-color: _palette(accent3);
    }

    &.color4 {
        @include gradient-background-small;
        background-color: _palette(accent4);
    }

    &.color1-alt {
        @include gradient-background-small(false, $opacity);
        background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
    }

    &.color2-alt {
        @include gradient-background-small(false, $opacity);
        background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
    }

    &.color3-alt {
        @include gradient-background-small(false, $opacity);
        background-color: desaturate(darken(_palette(accent3), $darken), $desaturate);
    }

    &.color4-alt {
        @include gradient-background-small(false, $opacity);
        background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
    }
}