.colored {
    color: var(--color);
}

.s-button .colored:hover, .s-button .colored:focus {
    background-color: color-mix(in srgb, var(--color), white 60%);
    color: var(--color);
}

.colored.with-background {
    background-color: color-mix(in srgb, var(--color), white 75%);
    border-color: var(--color);
}

.colored.with-background:disabled {
    background-color: color-mix(in srgb, var(--color), #efefef 90%);
    border-color: color-mix(in srgb, var(--color), #efefef 80%);
    cursor: not-allowed;
    color: color-mix(in srgb, var(--color), #efefef 70%);
}

.colored.with-transparent-background {
    background-color: color-mix(in oklch, transparent, var(--color) 20%);
    border-color: var(--color);
}

.s-button {
    display: inline-block;
    /*width: 100%;*/
}

.loading .colored.with-icon:before {
    display: inline-block;
    content: "\f110" !important;
    animation: spinner 2s linear infinite;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.colored.with-icon:before {
    margin-right: 0.5rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    align-content: flex-start;
}

/* Success */
.colored.success {
    --color: var(--color-success);
}
.colored.with-icon.success:before {
    content: "\f00c";
}

/* Failure */
.colored.failure {
    --color: var(--color-failure);
}
.colored.with-icon.failure:before {
    content: "\f00d";
}

/* Error */
.colored.error {
    --color: var(--color-error);
}

.colored.with-icon.error:before {
    content: "\f06a";
}

/* Warning */
.colored.warning {
    --color: var(--color-warning);
}

.colored.with-icon.warning:before {
    content: "\f071";
}

/* Waiting */
.colored.waiting {
    --color: var(--color-waiting);
}

.colored.with-icon.waiting:before {
    content: "\f017";
    font-weight: 500;
}

/* Disabled */
.colored.disabled {
    --color: var(--color-disabled);
}

.colored.with-icon.disabled:before {
    content: "\f05e";
}

/* Draft */
.colored.draft {
    --color: var(--color-warning);
}

.colored.with-icon.draft:before {
    content: "\f303";
}

/* Published */
.colored.published {
    --color: var(--color-success);
}

.colored.with-icon.published:before {
    content: "\f06e";
}