a[role="button"] {

    color: var(--text-color);
}

:is(button, a[role="button"]) {
    --width: 16em;
    --font-weight: 500;
    --spacing: var(--md) var(--lg);
    --_roundness: var(--roundness);
    text-align: center;

    font-weight: var(--font-weight);
    min-width: var(--width);
    cursor: pointer;
    text-transform: uppercase;
    border: none;
    padding: var(--md) var(--lg);
    border-radius: var(--_roundness);
    transition:
        background-color var(--transition),
        transform var(--transition);

    &:hover:not(.disabled) {
        transform: translateY(2%);
    }

    &:active:not(.disabled) {
        transform: translateY(6%);

        filter: brightness(115%);
    }

    &.cta,
    &[type="submit"] {
        --bg: var(--accent);

        background-color: var(--bg);
        will-change: background-color, transform;
        border: 0.2rem var(--accent) solid;

        &:hover {
            background-color: color-mix(in oklab, var(--bg), white 20%);
        }

        &:active {
            background-color: color-mix(in oklab, var(--bg), white 10%);
        }
    }

    &.secondary {
        --bg: var(--secondary);
        --_border: var(--border);

        background-color: var(--bg);
        border: var(--_border);
    }

    &.ghost {
        --bg: transparent;

        background-color: var(--bg);
        border: .2rem solid var(--accent);

        transition: transform var(--transition);
    }

    &.destructive {
        --bg: var(--destructive);

        background-color: var(--bg);
    }

    &.disabled {
        //pointer-events: none;
        cursor: not-allowed;
        opacity: 0.8;
    }
}

// Form Invalid Variant

form:invalid {
    & button[type="submit"] {
        pointer-events: none;
        opacity: 60%;
        cursor: not-allowed;
    }
}