/* Accept Button Variant */
.btn-accept {
    background-color: var(--sys-color-positive-default);
    color: var(--sys-color-positive-text);
    border-color: var(--sys-color-positive-default);
}

.btn-accept:hover {
    background-color: var(--sys-color-positive-hover);
    border-color: var(--sys-color-positive-hover);
    color: var(--sys-color-positive-text);
}

.btn-accept:active {
    background-color: var(--sys-color-positive-active);
    border-color: var(--sys-color-positive-active);
    color: var(--sys-color-positive-text);
}

.btn-accept:focus-visible {
    outline-color: var(--sys-color-positive-default);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys-color-positive-default) 10%, transparent);
}

.btn-accept:disabled {
    background-color: var(--sys-color-interactive-disabled);
    border-color: var(--sys-color-interactive-disabled);
    color: var(--sys-color-text-subtle);
}

/* Accept outline variant */
.btn-accept-outline {
    background-color: transparent;
    color: var(--sys-color-positive-default);
    border-color: var(--sys-color-positive-default);
}

.btn-accept-outline:hover {
    background-color: var(--sys-color-positive-default);
    color: var(--sys-color-positive-text);
    border-color: var(--sys-color-positive-default);
}

.btn-accept-outline:active {
    background-color: var(--sys-color-positive-active);
    color: var(--sys-color-positive-text);
    border-color: var(--sys-color-positive-active);
}

/* Accept ghost variant */
.btn-accept-ghost {
    background-color: transparent;
    color: var(--sys-color-positive-default);
    border-color: transparent;
}

.btn-accept-ghost:hover {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--sys-color-positive-hover);
}

.btn-accept-ghost:active {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--sys-color-positive-active);
}