/*
 * Buttons — modern, accessible, consistent.
 *
 * Variants: primary, secondary/ghost, danger.
 * Sizes: small, default, large.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--easing);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-focus) 40%, transparent);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Primary -------------------------------------------------------------------------------- */

.btn--primary {
    background: var(--colour-primary);
    color: var(--colour-primary-ink);
    border-color: var(--colour-primary);
}

.btn--primary:hover:not(:disabled) {
    background: var(--colour-primary-hover);
    border-color: var(--colour-primary-hover);
}

.btn--primary:active:not(:disabled) {
    background: var(--colour-primary-active);
}

/* ---- Secondary / Ghost ---------------------------------------------------------------------- */

.btn--secondary,
.btn--ghost {
    background: transparent;
    color: var(--colour-ink);
    border-color: var(--colour-border);
}

.btn--secondary {
    background: var(--colour-surface);
}

.btn--secondary:hover:not(:disabled),
.btn--ghost:hover:not(:disabled) {
    background: var(--colour-surface-sunken);
    border-color: var(--colour-border-strong);
}

/* ---- Danger --------------------------------------------------------------------------------- */

.btn--danger {
    background: var(--colour-error);
    color: #fff;
    border-color: var(--colour-error);
}

.btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--colour-error) 90%, black);
    border-color: color-mix(in srgb, var(--colour-error) 90%, black);
}

/* ---- Sizes ---------------------------------------------------------------------------------- */

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn--lg,
.btn--large {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* ---- Full width ----------------------------------------------------------------------------- */

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

/* ---- Icon button ---------------------------------------------------------------------------- */

.btn--icon {
    padding: var(--space-2);
    width: 40px;
    height: 40px;
}

.btn--icon.btn--sm {
    width: 32px;
    height: 32px;
    padding: var(--space-1);
}

/* ---- Legacy aliases — views use .button, .button--primary etc. ----------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--easing);
    white-space: nowrap;
    background: var(--colour-surface);
    color: var(--colour-ink);
}

.button:hover {
    background: var(--colour-surface-sunken);
    border-color: var(--colour-border-strong);
}

.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-focus) 40%, transparent);
}

.button--primary {
    background: var(--colour-primary);
    color: var(--colour-primary-ink);
    border-color: var(--colour-primary);
}

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

/* Less prominent than primary, but still clearly an action — also used by `<label>`s that open a
   file picker, which is why the selector is the class and not the element. */
.button--secondary {
    background: var(--colour-primary-surface);
    color: var(--colour-primary);
    border-color: var(--colour-primary-surface);
}

.button--secondary:hover {
    border-color: var(--colour-primary);
}

.button--danger {
    background: var(--colour-error);
    color: #fff;
    border-color: var(--colour-error);
}

.button--danger:hover {
    background: color-mix(in srgb, var(--colour-error) 90%, black);
}

.button--warning {
    background: var(--colour-warning);
    color: #fff;
    border-color: var(--colour-warning);
}

.button--warning:hover {
    background: color-mix(in srgb, var(--colour-warning) 90%, black);
}

.button--success {
    background: var(--colour-success);
    color: #fff;
    border-color: var(--colour-success);
}

.button--success:hover {
    background: color-mix(in srgb, var(--colour-success) 90%, black);
}

.button--quiet {
    background: transparent;
    color: var(--colour-ink-quiet);
    border-color: transparent;
}

.button--quiet:hover {
    color: var(--colour-ink);
    background: var(--colour-surface-sunken);
}

.button--full {
    width: 100%;
}