@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

.ui.icon {
    display: inline-flex;
    height: rem(16px);
    margin-right: 11px;
    text-align: center;
    width: rem(16px);
    > svg {
        height: rem(16px);
        transition:
            color 150ms ease-out,
            transform 150ms ease-out;
        width: rem(16px);
    }
    .icon-use-path { transition: fill 150ms linear; }
    &-align-left { margin-right: 11px; }
    &-align-right { margin-left: 11px; margin-right: 0; }
    &-clickable { cursor: pointer; }
    &-color {
        &-alert { .icon-use-path { fill: color(colorAlert); } }
        &-disable { .icon-use-path { fill: color(colorDisable); } }
        &-highlight { .icon-use-path { fill: color(colorHighlight); } }
        &-primary { .icon-use-path { fill: color(color); } }
        &-static { .icon-use-path { fill: color(colorStatic); } }
        &-success { .icon-use-path { fill: color(colorSuccess); } }
        &-warning { .icon-use-path { fill: color(colorWarning); } }
    }
    &-inverse {
        &.icon-color-alert { .icon-use-path { fill: color(colorAlert); } }
        &.icon-color-disable { .icon-use-path { fill: color(colorDisableInverse); } }
        &.icon-color-highlight { .icon-use-path { fill: color(colorHighlight); } }
        &.icon-color-primary { .icon-use-path { fill: color(colorInverse); } }
        &.icon-color-static { .icon-use-path { fill: color(colorStatic); } }
        &.icon-color-success { .icon-use-path { fill: color(colorSuccess); } }
        &.icon-color-warning { .icon-use-path { fill: color(colorWarning); } }
    }
    &-compact { margin: 0; }
    &.icon-disable { color: color(colorDisable); cursor: default; }
    &-size- {
        &xxlarge, &xxlarge svg { height: rem(32px); width: rem(32px); }
        &xlarge, &xlarge svg { height: rem(24px); width: rem(24px); }
        &large, &large svg { height: rem(20px); width: rem(20px); }
        &medium, &medium svg { height: rem(18px); width: rem(18px); }
        &small, &small svg { height: rem(14px); width: rem(14px); }
        &xsmall, &xsmall svg { height: rem(12px); width: rem(12px); }
        &xxsmall, &xxsmall svg { height: rem(10px); width: rem(10px); }
    }
    &-spin svg { animation: 1500ms infinite spin linear; line-height: 1; }
}
button.ui.icon {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    &:focus {
        box-shadow: 0 0 0 1px color(backgroundColorHighlight);
    }
}

@keyframes spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}