//
// Icon
// ====
// General CSS for Icons
//
//
// Example Usage
// -------------
//
// <span class="icon icon-size-large icon-provider-svg">
//   <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;
$icon-size-default: 32px;
$icon-size-large: 48px;
$icon-unify-modifier: 0.86;
$icon-opacity-disabled: 0.5;

//
// Component
//
.icon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: -22%;

    svg,
    img {
        display: block;
        height: 100%;
        width: 100%;
        transform: translate3d(0, 0, 0);
    }

    * {
        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-color {
    fill: currentColor;
}

//
// Icon Animation
//
.icon-spin {
    .icon-markup {
        -webkit-animation: icon-spin 2s infinite linear;
        animation: icon-spin 2s infinite linear;
    }
}

@-webkit-keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

//
// States
//
.icon-state-disabled {
    .icon-markup {
        opacity: $icon-opacity-disabled;
    }
}

//
// Variants
//
@mixin icon-size($identifier, $size) {
    .icon-size-#{$identifier} {
        height: $size;
        width: $size;
        line-height: $size;

        .icon-unify {
            line-height: $size;
            font-size: ceil($size * $icon-unify-modifier);
        }

        .icon-overlay {
            .icon-unify {
                line-height: ceil($size / 1.6);
                font-size: ceil(ceil($size / 1.6) * $icon-unify-modifier);
            }
        }
    }
}

@include icon-size(small, $icon-size-small);
@include icon-size(default, $icon-size-default);
@include icon-size(large, $icon-size-large);

//
// Special icons
//
.icon-actions-edit-copy-release,
.icon-actions-edit-cut-release,
.icon-status-status-current,
.icon-status-dialog-error,
.icon-status-status-permission-denied {
    color: $brand-danger;
}

.icon-status-status-sorting-light-asc,
.icon-status-status-sorting-light-desc {
    color: #fff;
}

.icon-status-status-sorting-asc,
.icon-status-status-sorting-desc {
    color: $gray;
}

.icon-status-dialog-information {
    color: $brand-info;
}

.icon-status-dialog-ok,
.icon-status-status-permission-granted {
    color: $brand-success;
}

.icon-status-dialog-notification {
    color: $brand-notice;
}

.icon-status-dialog-warning {
    color: $brand-warning;
}
