//
// Icon
// ====
// General CSS for Icons
//
//
// Example Usage
// -------------
//
// <span class="icon icon-size-large">
//   <span class="icon-markup">
//     <img src="#" width="16" height="16">
//   </span>
//   <span class="icon-overlay">
//     <img src="#" width="8" height="8">
//   </span>
// </span>
//

//
// Variables
//
$icon-size-small:       16px !default;
$icon-size-medium:      32px !default;
$icon-size-large:       48px !default;
$icon-size-mega:        64px !default;
$icon-unify-modifier:   .86 !default;
$icon-opacity-disabled: .5 !default;
:root {
    --icon-color-primary: currentColor;
    --icon-size-small: #{$icon-size-small};
    --icon-size-medium: #{$icon-size-medium};
    --icon-size-large: #{$icon-size-large};
    --icon-size-mega: #{$icon-size-mega};
    --icon-unify-modifier: #{$icon-unify-modifier};
    --icon-opacity-disabled: #{$icon-opacity-disabled};
}

//
// Component
//
.icon {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    color: var(--icon-color-primary);
    height: var(--icon-size, 1em);
    width: var(--icon-size, 1em);
    line-height: var(--icon-size, 1em);
    flex-shrink: 0;
    svg,
    img {
        display: block;
        height: 100%;
        width: 100%;
    }
    * {
        display: block;
        line-height: inherit;
    }
}
.icon-markup {
    position: absolute;
    display: block;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.icon-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 68.75%;
    width: 68.75%;
    text-align: center;
}

//
// Icon Animation
//
.icon-spin {
    .icon-markup {
        -webkit-animation: icon-spin 2s infinite linear;
        animation: icon-spin 2s infinite linear;
    }
}
@keyframes icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

//
// States
//
.icon-state-disabled {
    .icon-markup {
        opacity: var(--icon-opacity-disabled);
    }
}

//
// Variants
//
@mixin icon-size($identifier) {
    .icon-size-#{$identifier} {
        --icon-size: var(--icon-size-#{$identifier});
        .icon-unify {
            line-height: var(--icon-size);
            font-size: calc(var(--icon-size) * var(--icon-unify-modifier));
        }
        .icon-overlay {
            .icon-unify {
                line-height: calc(var(--icon-size) / 1.6);
                font-size: calc((var(--icon-size) / 1.6) * var(--icon-unify-modifier));
            }
        }
    }
}
@include icon-size(small);
@include icon-size(medium);
@include icon-size(large);
@include icon-size(mega);