@import "../mixins/private/icon-mixins";
@import "../mixins/private/token-mixins";

svg {
    &.icon {
        @include icon-base-mixin();
    }
    &.icon--12,
    &.icon--12-fit {
        height: 12px;
        width: 12px;
    }

    &.icon--16,
    &.icon--16-fit {
        height: 16px;
        width: 16px;
    }

    &.icon--18,
    &.icon--18-fit {
        height: 18px;
        width: 18px;
    }

    &.icon--20,
    &.icon--20-fit {
        height: 20px;
        width: 20px;
    }

    &.icon--24,
    &.icon--24-fit {
        height: 24px;
        width: 24px;
    }

    &.icon--30,
    &.icon--30-fit {
        height: 30px;
        width: 30px;
    }

    &.icon--32,
    &.icon--32-fit {
        height: 32px;
        width: 32px;
    }

    &.icon--48,
    &.icon--48-fit {
        height: 48px;
        width: 48px;
    }

    &.icon--64,
    &.icon--64-fit {
        height: 32px;
        width: 64px;
    }

    &.icon--12-colored {
        height: 12px;
    }

    &.icon--16-colored {
        height: 16px;
    }

    &.icon--18-colored {
        height: 18px;
    }

    &.icon--20-colored {
        height: 20px;
    }

    &.icon--24-colored {
        height: 24px;
    }

    &.icon--30-colored {
        height: 30px;
    }

    &.icon--32-colored {
        height: 32px;
    }

    &.icon--48-colored {
        height: 48px;
    }

    &.icon--64-colored {
        height: 64px;
    }

    &.icon--disabled {
        filter: var(--color-media-disabled-filter);
    }
    &.icon--attention-filled {
        @include color-token(color-foreground-attention);
    }
    &.icon--confirmation-filled {
        @include color-token(color-foreground-confirmation);
    }
    &.icon--information-filled {
        @include color-token(color-foreground-information);
    }
}
