.eui-icon {
    &--primary {
        color: v(eui-base-color-primary-100);
    }

    &--secondary {
        color: v(eui-base-color-grey-75);
    }

    &--info {
        color: v(eui-base-color-info-100);
    }

    &--success {
        color: v(eui-base-color-success-100);
    }

    &--warning {
        color: v(eui-base-color-warning-100);
    }

    &--danger {
        color: v(eui-base-color-danger-100);
    }

    &--accent {
        color: v(eui-base-color-accent-110);
    }

    // SHAPES
    &--badge {
        background-color: v(eui-base-color-grey-10);
        border-radius: v(eui-base-spacing-m);
        padding: v(eui-base-spacing-2xs) v(eui-base-spacing-s);
    }

    &--border {
        border: 1px solid v(eui-base-color-grey-25);
        border-radius: v(eui-base-border-radius);
        padding: v(eui-base-spacing-xs);
    }

    &--rounded {
        background-color: v(eui-base-color-grey-10);
        border-radius: 50%;
        padding: v(eui-base-spacing-s);
    }

    // WITH ANIM
    &--animated {
        &:hover {
            // TODO : mixin eui-animation(for eui-icon)
            @include eui-animation(pop);
        }
    }
}
