@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: fit-content;
        padding: var(--pad-sm) var(--pad-md);
        border: var(--border-thickness-base) solid var(--color-foreground);
        border-radius: var(--radius-sm);

        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-tight);
        color: var(--color-foreground);

        background-color: transparent;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .button:hover {
        background-color: var(--color-background-surface);
        border-color: var(--color-primary);
    }

    .button:disabled,
    .button.is-disabled {
        background-color: var(--color-state-disabled);
        color: var(--color-foreground-secondary);
        border-color: var(--color-border);
        cursor: not-allowed;
        box-shadow: none;
    }

    .button--primary {
        background-color: var(--color-primary);
        color: var(--color-foreground-on-primary);
        border-color: var(--color-primary);
    }

    .button--primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
        box-shadow: var(--shadow-sm);
    }

    .button--danger {
        background-color: var(--color-feedback-danger);
        color: var(--color-foreground-on-primary);
        border-color: var(--color-feedback-danger);
    }

    .button--danger:hover {
        background-color: var(--color-feedback-danger-hover);
        border-color: var(--color-feedback-danger-hover);
        box-shadow: var(--shadow-sm);
    }

    .button--small {
        font-size: var(--font-size-sm);
        padding: var(--pad-xs) var(--pad-sm);
    }

    .button--large {
        font-size: var(--font-size-lg);
        padding: var(--pad-sm) var(--pad-xl);
    }
}