/* @docs */
$icon-spin-duration: 2s !default;
/* @docs */

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

.o-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    transition: transform $speed-slow $easing, opacity $speed $easing;
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('icon-font-size-' + #{$name}), $value);
        }
    }
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &--#{$name} {
            @include avariable('color', ('variant-' + #{$name}), $color);
        }
    }
    &--clickable {
        pointer-events: auto;
        cursor: pointer;
    }
    &--spin {
        animation-name: icon-spin;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        @include avariable('animation-duration', 'icon-spin-duration', $icon-spin-duration);
    }
}