.featured-icon {
    --rocket-ui-featured-icon-color-background: var(--rocket-color-primary-100);
    --rocket-ui-featured-icon-color-stroke: var(--rocket-color-primary-400);

    @include size(3.5rem);

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rocket-ui-featured-icon-color-stroke);
    background: var(--rocket-ui-featured-icon-color-background);
    border-radius: 50%;

    svg {
        @include size(1.5rem);

        path:not([fill="none"]) {
            fill: currentColor;
        }
    }

    &--primary {
        --rocket-ui-featured-icon-color-background: var(
            --rocket-color-primary-100
        );
        --rocket-ui-featured-icon-color-stroke: var(--rocket-color-primary-400);
    }

    &--success {
        --rocket-ui-featured-icon-color-background: var(
            --rocket-color-success-100
        );
        --rocket-ui-featured-icon-color-stroke: var(--rocket-color-success-300);
    }

    &--error {
        @include size(2rem);

        --rocket-ui-featured-icon-color-background: var(--rocket-color-error-200);
        --rocket-ui-featured-icon-color-stroke: var(--rocket-color-error-300);

        svg {
            @include size(1.25rem);
        }
    }

    &--logo {
        --rocket-ui-featured-icon-color-background: transparent;
        --rocket-ui-featured-icon-color-stroke: var(--rocket-color-primary-400);

        svg {
            @include size(2.5rem);
        }
    }
}