// decorative icon on the left of text
@mixin icon($icon-name, $fill)
{
    display: inline-block;
    padding-left: steps(3);

    &::before
    {
        content: svg-image-data-url($icon-name, $fill);

        display: inline-block;
        width: steps(2);
        height: steps(2);
        margin: -3px steps(1) 0 steps(-3);

        vertical-align: middle;
    }
}

@mixin button-icon($icon-name, $fill, $hover-fill: null, $center: false)
{
    @at-root %button-icon-element
    {
        @include transition("opacity");

        @if ($center)
        {
            display: inline-block;
            margin-left: steps(-4);
            margin-right: steps(2);

            vertical-align: top;
        }
        @else
        {
            position: absolute;
            top: 50%;
            left: steps(2) + 2px;

            transform: translateY(-50%);

            margin: 0;
        }

        width: steps(2);
        height: steps(2);
    }

    padding-left: steps(6);

    @if not ($center)
    {
        position: relative;

        text-align: left;
    }

    &::before
    {
        @extend %button-icon-element;

        content: svg-image-data-url($icon-name, $fill);
    }

    @if ($hover-fill)
    {
        &::after
        {
            @extend %button-icon-element;

            content: svg-image-data-url($icon-name, $hover-fill);

            opacity: 0;
        }

        &:hover,
        &:focus
        {
            &::before
            {
                opacity: 0;
            }

            &::after
            {
                opacity: 1;
            }
        }
    }
}

@mixin button-icons($fill, $hover-fill: null)
{
    $button-icons: download email marker add;

    @each $icon in $button-icons
    {
        &.#{$icon}
        {
            @include button-icon($icon, $fill, $hover-fill);
        }
    }
}

@mixin success-icon
{
    &::before
    {
        content: svg-image-data-url('success', $color-success);

        display: block;
        overflow: hidden;
        width: steps(6);
        height: steps(6);
        margin: 0 auto steps(2);

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(4);
        }
    }
}

@mixin back-icon
{
    &::before
    {
        @include antialiasing;

        content: svg-image-data-url('compact-chevron-left', $color-text-inverted-lighter);

        display: inline-block;
        overflow: hidden;
        width: steps(2);
        height: steps(2);
        padding: steps(0.5);
        border-radius: 50%;
        margin-right: steps(2);

        line-height: steps(2);
        color: $color-text-inverted-lighter;
        background: $color-text-lighter;
        text-align: center;
        vertical-align: top;
    }
}

@mixin remove-icon
{
    &
    {
        box-shadow: none;
    }

    &::before
    {
        content: svg-image-data-url("x", $color-border-darker);

        display: inline-block;
        overflow: hidden;
        width: steps(2);
        height: steps(2);
        padding: steps(0.5) - 1px;
        border: 1px solid $color-border-darker;
        border-radius: 50%;
        margin-right: steps(1);
        margin-bottom: 3px;

        line-height: steps(2);
        text-align: center;
        vertical-align: middle;
        box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.22);
    }

    &:hover,
    &:focus
    {
        &:before
        {
            content: svg-image-data-url("x", $color-text-inverted-lighter);

            background-color: $color-border-darker;
        }
    }
}

// private
@mixin form-control-icon($icon-name, $fill)
{
    position: relative;

    &::after
    {
        content: svg-image-data-url($icon-name, $fill);

        position: absolute;
        top: 50%;
        right: steps(2) - 2px;

        width: steps(2);
        height: steps(2);

        transform: translateY(-50%);
        pointer-events: none;
    }
}

@mixin input-icon($icon-name, $fill: $color-brand-normal)
{
    @include form-control-icon($icon-name, $fill);

    input
    {
        padding-right: steps(5.5) - 2px;
        text-align: center;
    }
}

@mixin select-icon($icon-name: "chevron-down", $fill: $color-brand-normal)
{
    @include form-control-icon($icon-name, $fill);

    select
    {
        padding-right: steps(5.5);
    }
}
