@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$icon-color: inherit;
$icon-font-size: inherit;
$icon-spin-animation-duration: 2s !default;
/* @docs */

.o-icon {
    @include h.defineVar("icon-color", $icon-color);
    @include h.defineVar("icon-font-size", $icon-font-size);
    @include h.defineVar(
        "icon-spin-animation-duration",
        $icon-spin-animation-duration
    );

    align-items: center;
    display: inline-flex;
    justify-content: center;
    color: h.useVar("icon-color");
    font-size: h.useVar("icon-font-size");
    transition:
        transform h.useVar("animation-speed-fast") h.useVar("transition-timing"),
        opacity h.useVar("animation-speed") h.useVar("transition-timing");

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar("icon-font-size", h.useVar("size-#{$name}"));
        }
    }

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar("icon-color", h.useVar($name));
        }
    }

    &--clickable {
        @include h.clickable;
    }

    &--spin {
        animation-name: spinAround;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: h.useVar("icon-spin-animation-duration");
    }
}