.noord-digital-button {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.noord-digital-button:hover {
    border-color: var(--khaki-color);
    background: var(--surface-muted-color);
}

.noord-digital-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    outline-offset: 2px;
}

.noord-digital-button[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    transform: none;
}

.noord-digital-button--primary {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--accent-contrast-color);
}

.noord-digital-button--primary:hover {
    background: var(--accent-hover-color);
}

.noord-digital-button--quiet {
    background: transparent;
}

.noord-digital-button--icon {
    width: 28px;
    height: 28px;
    min-height: 24px;
    padding: 0;
    border-radius: 8px;
}
/* ONE OBVIOUS ACTION. The primary button carries weight (colour, shadow) that nothing next to it has; a second
   action is quiet or a link, never a second button of the same weight. */
.noord-digital-button--primary {
    box-shadow: 0 1px 2px rgba(26, 26, 26, .12), 0 6px 14px -8px color-mix(in srgb, var(--accent-color) 70%, transparent);
}

.noord-digital-button--quiet {
    border-color: transparent;
    color: var(--soft-text-color);
}

.noord-digital-button--quiet:hover {
    border-color: transparent;
    background: var(--surface-muted-color);
    color: var(--text-color);
}

/* Inline-block, so a press can move it (a transform does nothing on an inline box); it still wraps within its line. */
.link-button {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-color);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* FEEDBACK. A press answers at once: the button sinks a pixel and shrinks a little (80 ms in, 120 ms back, a transform,
   so nothing around it moves), and while the server works it shows it is busy instead of looking dead. Cards and rows
   that act like buttons get the same press with the class pressable. A blocked button does not move. The plain
   controls (button, summary, tab, chip, menu item) get the same press from site.css, region fb1-d. */
.noord-digital-button,
.pressable {
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .12s ease-out, box-shadow .15s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    .noord-digital-button:not([aria-disabled="true"]):not(:disabled):active,
    .pressable:not([aria-disabled="true"]):active {
        transform: translateY(1px) scale(.98);
        transition-duration: 80ms;
    }
}

.noord-digital-button.is-pending {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.noord-digital-button.is-pending::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--muted-text-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: noord-digital-spin .6s linear infinite;
}

.noord-digital-button--primary.is-pending::after {
    border-color: var(--accent-contrast-color);
    border-right-color: transparent;
}

.noord-digital-button.is-done {
    animation: noord-digital-done .45s ease-out;
}

@keyframes noord-digital-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes noord-digital-done {
    40% {
        transform: scale(1.04);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-color) 25%, transparent);
    }
}

/* Something removed on purpose fades and folds away instead of vanishing. */
.is-leaving {
    overflow: hidden;
    animation: noord-digital-leave .22s ease-in forwards;
}

.is-arriving {
    animation: noord-digital-arrive .25s ease-out;
}

@keyframes noord-digital-leave {
    to {
        opacity: 0;
        transform: translateX(12px);
    }
}

@keyframes noord-digital-arrive {
    from {
        opacity: 0;
        transform: translateY(-6px);
        background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .noord-digital-button.is-done,
    .is-leaving,
    .is-arriving {
        animation-duration: 1ms;
    }
}