.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);
}

.link-button {
    display: inline;
    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, 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. */
.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;
}

.noord-digital-button:active,
.pressable:active {
    transform: scale(.97);
}

.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:active,
    .pressable:active {
        transform: none;
    }

    .noord-digital-button.is-done,
    .is-leaving,
    .is-arriving {
        animation-duration: 1ms;
    }
}