/*
 * Quantity field: a labelled number input in a form of its own, posting on
 * its own. Without JavaScript it has an "update" button; with it
 * (layouts/tts/js/quantity-field.js adds .is-enhanced) −/+ buttons and a submit
 * when the value changes. The buttons are the tap size; the input is as wide
 * as three digits. Decision 22.
 */

.quantity-field {
    display: grid;
    gap: var(--shop-space-1);
    margin: 0;
}

.quantity-field__label {
    margin: 0;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-xs);
    line-height: var(--shop-leading-snug);
}

.quantity-field__control {
    display: inline-flex;
    align-items: stretch;
    justify-self: start;
    overflow: hidden;
    border: 1px solid var(--shop-border-input);
    border-radius: var(--shop-radius-md);
    background: var(--shop-surface);
}

.quantity-field__control:focus-within {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

/* input.-qualified: Foundation styles number inputs at (0,1,1) (Decision 5). */
input.quantity-field__input {
    width: 4.5ch;
    min-width: 3.5rem;
    height: var(--shop-tap);
    margin: 0;
    padding: 0 var(--shop-space-1);
    border: 0;
    box-shadow: none;
    background: none;
    color: var(--shop-ink);
    font-size: var(--shop-text-base);
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
}

input.quantity-field__input:focus,
input.quantity-field__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.quantity-field__input::-webkit-inner-spin-button,
.quantity-field__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

/* button.-qualified: base.css resets buttons at (0,1,1) on :hover/:focus. */
button.quantity-field__step,
button.quantity-field__step:hover,
button.quantity-field__step:focus {
    display: inline-grid;
    place-items: center;
    width: var(--shop-tap);
    height: var(--shop-tap);
    color: var(--shop-accent);
}

button.quantity-field__step[hidden] {
    display: none;
}

button.quantity-field__step:hover {
    background: var(--shop-accent-soft);
}

button.quantity-field__step:disabled {
    color: var(--shop-text-soft);
    background: none;
    cursor: default;
    opacity: 0.5;
}

.quantity-field__step svg {
    width: 18px;
    height: 18px;
}

/* The step buttons' own ring would sit inside the clipped control; the
   control shows focus instead (above). */
button.quantity-field__step:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: -4px;
}

button.quantity-field__update,
button.quantity-field__update:hover,
button.quantity-field__update:focus {
    justify-self: start;
    min-height: 32px;
    padding: 0 var(--shop-space-2);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-accent-soft);
    color: var(--shop-accent);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
}

.quantity-field.is-enhanced .quantity-field__update {
    display: none;
}