/// 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);
}

}