/*
 * Buttons: <a class="btn btn-primary"> or <button class="btn btn-secondary btn-sm">.
 * Variants: primary, secondary, outline, ghost, danger, success, link.
 * Sizes: btn-sm, btn-lg. Modifiers: btn-block, btn-icon (square, icon only),
 * is-loading (spinner, disabled).
 */
@layer components {
    .btn {
        --btn-bg: var(--color-bg-surface);
        --btn-bg-hover: var(--color-bg-subtle);
        --btn-bg-active: var(--color-bg-muted);
        --btn-color: var(--color-text);
        --btn-border: var(--color-border-strong);
        --btn-height: var(--control-height-md);
        --btn-padding-x: var(--control-padding-x-md);
        --btn-font-size: var(--font-size-sm);

        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--btn-height);
        padding: 0 var(--btn-padding-x);
        border: var(--border-width-thin) solid var(--btn-border);
        border-radius: var(--button-radius);
        background: var(--btn-bg);
        color: var(--btn-color);
        font-size: var(--btn-font-size);
        font-weight: var(--button-font-weight);
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: background-color var(--duration-fast) var(--easing-standard),
            border-color var(--duration-fast) var(--easing-standard),
            color var(--duration-fast) var(--easing-standard);
    }

    .btn:hover {
        background: var(--btn-bg-hover);
        color: var(--btn-color);
    }

    .btn:active {
        background: var(--btn-bg-active);
    }

    .btn:disabled,
    .btn[aria-disabled="true"],
    .btn.is-loading {
        opacity: var(--opacity-disabled);
        cursor: not-allowed;
        pointer-events: none;
    }

    .btn .icon {
        font-size: 1.15em;
    }

    .btn-primary,
    .btn-danger,
    .btn-success {
        --btn-border: transparent;
    }

    .btn-primary {
        --btn-bg: var(--color-primary);
        --btn-bg-hover: var(--color-primary-hover);
        --btn-bg-active: var(--color-primary-active);
        --btn-color: var(--color-primary-contrast);
    }

    .btn-danger {
        --btn-bg: var(--color-danger);
        --btn-bg-hover: var(--color-danger-hover);
        --btn-bg-active: var(--color-danger-active);
        --btn-color: var(--color-danger-contrast);
    }

    .btn-success {
        --btn-bg: var(--color-success);
        --btn-bg-hover: var(--color-success-hover);
        --btn-bg-active: var(--color-success-active);
        --btn-color: var(--color-success-contrast);
    }

    .btn-secondary {
        --btn-bg: var(--color-primary-subtle);
        --btn-bg-hover: var(--color-primary-subtle-hover);
        --btn-bg-active: var(--color-primary-border);
        --btn-color: var(--color-primary-text);
        --btn-border: transparent;
    }

    .btn-outline {
        --btn-bg: transparent;
        --btn-color: var(--color-primary);
        --btn-border: currentColor;
        --btn-bg-hover: var(--color-primary-subtle);
    }

    .btn-ghost {
        --btn-bg: transparent;
        --btn-border: transparent;
    }

    .btn-link {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-bg-active: transparent;
        --btn-border: transparent;
        --btn-color: var(--color-text-link);
        --btn-padding-x: 0;
        text-decoration: underline;
    }

    .btn-sm {
        --btn-height: var(--control-height-sm);
        --btn-padding-x: var(--control-padding-x-sm);
        --btn-font-size: var(--font-size-xs);
    }

    .btn-lg {
        --btn-height: var(--control-height-lg);
        --btn-padding-x: var(--control-padding-x-lg);
        --btn-font-size: var(--font-size-md);
    }

    .btn-block {
        display: flex;
        width: 100%;
    }

    .btn-icon {
        --btn-padding-x: 0;
        width: var(--btn-height);
    }

    .btn.is-loading > :not(.spinner) {
        visibility: hidden;
    }

    .btn.is-loading > .spinner {
        position: absolute;
    }

    /* Buttons joined together. */
    .btn-group {
        display: inline-flex;
    }

    .btn-group > .btn:not(:first-child) {
        margin-left: calc(-1 * var(--border-width-thin));
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group > .btn:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}