.button {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.button.variant-default {
    gap: var(--spacing-1);
    line-height: var(--leading-tighter);
    height: var(--spacing-10);

    padding-inline: var(--padding-inline);
    border: 1px solid var(--border-color);

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

    &:hover:not(:where(:disabled, .state-disabled)) {
        background-color: hsl(from var(--bg-color) h calc(s * 0.8) l / 0.8);
    }

    &:active {
        color: hsl(from var(--text-color) h s l / 0.75);
    }

    &:disabled,
    &.state-disabled {
        pointer-events: none;
        color: hsl(from var(--text-color) h s l / 0.75);
        background-color: hsl(from var(--bg-color) h calc(s * 0.8) l / 0.8);

        &:hover {
            cursor: not-allowed;
        }
    }

    &.with-icon > .icon {
        width: var(--spacing-5);
        height: var(--spacing-5);
    }
}

.button.variant-text {
    gap: var(--spacing-0_5);
    line-height: var(--leading-tight);
    height: var(--spacing-4);
}

.button.variant-text > .icon {
    margin-bottom: -2px;
}

.button.shape-square {
    --border-radius: var(--radius-md);
    --padding-inline: var(--spacing-3);
}

.button.shape-rounded {
    --border-radius: 9999px;
    --padding-inline: var(--spacing-3_5);
}

.button.shape-circle {
    --border-radius: 9999px;
    --padding-inline: var(--spacing-1);
    aspect-ratio: 1 / 1;
    width: var(--spacing-9);
}

.button.scheme-default {
    --bg-color: var(--color-secondary);
    --text-color: var(--color-secondary-contrast);
    --border-color: hsl(from var(--text-color) h s l / 0.5);
}

.button.scheme-primary {
    --bg-color: var(--color-primary);
    --text-color: var(--color-primary-contrast);
    --border-color: hsl(from var(--bg-color) h s calc(l * 0.25) / 1);

    @media (prefers-color-scheme: dark) {
        --border-color: hsl(from var(--text-color) h s 80%);
    }
}