/**
 * The controls every surface reuses: one button, one icon button, one badge,
 * one text entry, one select, one tick box. A component positions them; it
 * does not restyle them.
 */

/* An inline SVG sits on the text baseline and leaves a gap under it. */
.vo-icon {
    display: block;
    flex: 0 0 auto;
}

.vo-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
    padding: var(--sp-5);
    background: linear-gradient(var(--bg-surface), var(--chrome-hover));
    border: var(--bw) solid var(--chrome-line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-raise);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: left;
    text-decoration: none;
    color: var(--chrome-ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.vo-btn:active {
    transform: translateY(var(--press-shift));
    box-shadow: none;
}

.vo-btn__label {
    flex: 1 1 auto;
    min-width: 0;
}

.vo-btn .vo-icon {
    color: var(--chrome-accent);
}

.vo-btn:hover {
    background: var(--brand-teal-tint);
    border-color: var(--chrome-accent);
    color: var(--chrome-accent-dark);
}

.vo-btn:hover .vo-icon {
    color: var(--chrome-accent-dark);
}

.vo-btn--primary,
.vo-btn--primary:hover {
    background: var(--chrome-cta);
    border-color: var(--chrome-cta);
    color: var(--text-on-dark);
    font-weight: var(--fw-semibold);
}

.vo-btn--primary:hover {
    background: var(--chrome-cta-hover);
    border-color: var(--chrome-cta-hover);
}

.vo-btn--primary .vo-icon,
.vo-btn--primary:hover .vo-icon {
    color: var(--text-on-dark);
}

/* Not shouting until it is reached for: a permanently red row teaches the eye
   to ignore red. */
.vo-btn--danger:hover {
    background: var(--chrome-danger-bg);
    border-color: var(--chrome-danger);
    color: var(--chrome-danger);
}

.vo-btn--danger:hover .vo-icon {
    color: var(--chrome-danger);
}

.vo-btn--quiet {
    background: transparent;
    border-color: var(--chrome-line);
    box-shadow: none;
    font-weight: var(--fw-normal);
    color: var(--chrome-ink-soft);
}

.vo-btn--quiet .vo-icon {
    color: var(--chrome-muted);
}

.vo-btn--ghost {
    background: var(--bg-surface);
    color: var(--text-control);
    border-color: var(--border-control);
    box-shadow: none;
}

.vo-btn--ghost:hover {
    background: var(--bg-section);
    color: var(--text-control);
}

.vo-btn--centred {
    justify-content: center;
    text-align: center;
    width: auto;
}

.vo-btn--wide {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.vo-btn:disabled,
.vo-btn[aria-disabled="true"] {
    opacity: var(--o-disabled);
    cursor: wait;
}

.vo-btn:focus-visible,
.vo-iconbtn:focus-visible {
    outline: var(--focus-w) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.vo-btn[aria-expanded="true"] {
    background: var(--brand-teal-tint);
    border-color: var(--chrome-accent);
    color: var(--chrome-accent-dark);
}

.vo-btn[aria-expanded="true"] .vo-icon {
    color: var(--chrome-accent-dark);
}

.vo-iconbtn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    background: transparent;
    border: var(--bw) solid var(--chrome-line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-lg);
    line-height: var(--lh-none);
    color: var(--chrome-ink);
    cursor: pointer;
}

.vo-iconbtn:hover,
.vo-iconbtn:active {
    background: var(--bg-section);
}

/* Standing beside a text entry, where anything shorter than the entry reads as
   misaligned and is below the touch target the entry already meets. */
.vo-iconbtn--field {
    width: var(--touch-h);
    height: var(--touch-h);
}

.vo-iconbtn--round {
    width: var(--icon-btn-sm);
    height: var(--icon-btn-sm);
    border-radius: var(--r-pill);
    border-color: var(--border-control);
    background: var(--bg-surface);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-soft);
}

.vo-iconbtn--bare {
    border: none;
    font-size: var(--fs-4xl);
    color: var(--text-soft);
}

.vo-badge {
    flex: 0 0 auto;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--bg-section);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
}

/* A requirement, not a failure: red is what a check turns, and only after it
   has run. */
.vo-badge--req {
    background: var(--brand-teal-tint);
    color: var(--chrome-accent-dark);
}

.vo-badge--pass {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.vo-badge--fail {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.vo-badge--count {
    min-width: var(--badge-min-w);
    font-size: var(--fs-xs);
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.vo-badge--count[data-ok="true"] {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

/* On the filled CTA the pale-red pill and the magenta fight; a white pill
   keeps pass and fail apart by the numeral instead. */
.vo-btn--primary .vo-badge--count,
.vo-btn--primary .vo-badge--count[data-ok="true"] {
    background: var(--bg-surface);
}

.vo-btn--primary .vo-badge--count {
    color: var(--chrome-cta);
}

.vo-btn--primary .vo-badge--count[data-ok="true"] {
    color: var(--ok-fg);
}

.vo-input,
.vo-textarea {
    width: 100%;
    min-height: var(--touch-h);
    padding: var(--sp-5) var(--sp-6);
    font-family: var(--font-ui);
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    color: var(--text);
    background: var(--bg-surface);
    border: var(--bw) solid var(--border-control);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease),
                background var(--t-base) var(--ease);
}

.vo-textarea {
    resize: vertical;
}

.vo-input:hover,
.vo-textarea:hover {
    border-color: var(--chrome-accent);
    background: var(--bg-input-focus);
}

.vo-input:focus,
.vo-textarea:focus {
    outline: var(--focus-w) solid var(--focus-ring);
    outline-offset: var(--focus-inset);
    background: var(--bg-input-focus);
}

.vo-select {
    font: inherit;
    padding: var(--sp-4) var(--sp-5);
    border: var(--bw) solid var(--chrome-line-strong);
    border-radius: var(--r-sm);
    background: var(--bg-surface);
    color: var(--chrome-ink);
}

.vo-check {
    width: var(--check-size);
    height: var(--check-size);
    flex: 0 0 auto;
    accent-color: var(--chrome-accent);
    cursor: pointer;
}

@media (max-width: 768px) {
    .vo-btn {
        min-height: var(--touch-h);
        font-size: var(--fs-md);
        padding: var(--sp-5) var(--sp-6);
    }
}