@import '../dynamic.scss';

.icon,
.icon > svg {
    width: $icon-size-base;
    height: $icon-size-base;
}

// Icon sizes

.icon-xs,
.icon-xs > svg {
    width: $icon-size-xsmall;
    height: $icon-size-xsmall;
}

.icon-sm,
.icon-sm > svg {
    width: $icon-size-small;
    height: $icon-size-small;
}

.icon-md,
.icon-md > svg {
    width: $icon-size-mlarge;
    height: $icon-size-mlarge;
}

.icon-lg,
.icon-lg > svg {
    width: $icon-size-large;
    height: $icon-size-large;
}

.icon-xl,
.icon-xl > svg {
    width: $icon-size-largest;
    height: $icon-size-largest;
}

// Colors

.icon {
    fill: currentColor;

    &.icon-primary {
        fill: $primary;
    }

    &.icon-secondary {
        fill: $secondary;
    }

    &.icon-branded {
        fill: $branded;
    }

    &.icon-success {
        fill: $success;
    }

    &.icon-danger {
        fill: $danger;
    }

    &.icon-white {
        fill: $white;
    }

    &.icon-dark {
        fill: $dark;
    }
}

// Animated

.icon-spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}