/* Generated from shared/src/css/controls.css by backend/tools/sync-shared.py. Do not edit. */
/* psi-overflow form controls and buttons.
 *
 * Shared verbatim by the server-rendered pages and by the embed's shadow
 * roots, so a field looks and behaves the same in both. Keeping these in one
 * file is not just tidiness: they had already drifted apart once, with the
 * focus ring fixed on one side only.
 *
 * Element selectors are used for fields because inside a shadow root there is
 * nothing else to hit, and on the backend pages these are the styles every
 * field should get anyway. Buttons use .button, which shadow encapsulation keeps
 * away from the host page.
 *
 * Tokens come from theme.css; nothing here defines one.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* A fieldset is used only to disable a whole form at once, so it must not draw
   a box or change the layout: display:contents leaves its children as direct
   children of the form. The resets cover the case where that is unsupported. */
fieldset {
    display: contents;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* fields */

input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='datetime-local'],
select,
textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    font: inherit;
    color: var(--psi-overflow-ink);
    background: var(--psi-overflow-surface);
    border: 1px solid var(--psi-overflow-rule-strong);
    /* The buttons' radius: a field and the button beside it are one row. */
    border-radius: var(--psi-overflow-radius);
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

/* WebKit pads a date and a time inside the field, and each of their parts,
   which makes it taller than the fields beside it; without that it is as
   tall as they are. */
input::-webkit-datetime-edit,
input::-webkit-datetime-edit-year-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-second-field,
input::-webkit-datetime-edit-millisecond-field,
input::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

textarea {
    min-height: 7rem;
    line-height: 1.55;
    display: block;
    /* Vertical only, and the cursor says so. */
    resize: vertical;
    cursor: ns-resize;
}

textarea:focus {
    cursor: auto;
}

/* The corner grip is the browser's own control, and it keeps its diagonal
   cursor unless it is told otherwise -- which only shows once the field is
   focused and the rule above hands the element's cursor back to `auto`. A
   field focused the moment it appears, as the embed's widget one is, is
   therefore the one place the vertical-only affordance would never show up.
   Pinning it on the resizer survives focus, because `textarea:focus` above
   matches the element and not this. Firefox has no such pseudo-element and
   takes the direction from `resize: vertical` already. */
textarea::-webkit-resizer {
    cursor: ns-resize;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--psi-overflow-ink-faint);
}

/* One ring, and it never reshapes the field: the border tints and a soft halo
   sits outside it. The generic :focus-visible outline is suppressed so the two
   do not stack into concentric rings. */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--psi-overflow-accent);
    box-shadow: 0 0 0 3px var(--psi-overflow-accent-wash);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

/* Disabled fields are dimmed, never editable, and keep their solid border. */
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    background: var(--psi-overflow-surface-sunk);
    border-color: var(--psi-overflow-rule);
    color: var(--psi-overflow-ink-faint);
    -webkit-text-fill-color: var(--psi-overflow-ink-faint);
    opacity: 1;
}

/* In a form busy sending what its fields hold (`aria-busy` on it), they are
   as inert as any disabled field, but their text stays readable on their
   own ground: it is what is being sent, not what was refused. */
[aria-busy='true'] input:disabled,
[aria-busy='true'] select:disabled,
[aria-busy='true'] textarea:disabled {
    cursor: progress;
    background: var(--psi-overflow-surface);
    color: var(--psi-overflow-ink-soft);
    -webkit-text-fill-color: var(--psi-overflow-ink-soft);
}

select {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        right 1rem center,
        right 0.7rem center;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

/* A required select still on its empty option reads as placeholder text, like
   an empty input would. :invalid does this without script on every browser in
   the Safari 13 baseline. */
select:required:invalid {
    color: var(--psi-overflow-ink-faint);
}

/* buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--psi-overflow-radius);
    border: 1px solid var(--psi-overflow-rule-strong);
    background: var(--psi-overflow-surface);
    color: var(--psi-overflow-ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}

/* The space between an icon and its label: a margin rather than flex `gap`,
   which Safari 13 does not know on a flex container. So a label beside an
   icon is always an element, a <span> at least: bare text is no element for
   the margin to go on. */
.button > * + * {
    margin-left: 0.4rem;
}

.button:hover:not(:disabled) {
    border-color: var(--psi-overflow-ink-faint);
}

/* Pressed: a shade darker while held, where it is; nothing moves. On a
   touchscreen, which has no hover, the sign that the tap landed. */
.button:active:not(:disabled) {
    background: var(--psi-overflow-surface-sunk);
}

.button:focus-visible {
    outline: 2px solid var(--psi-overflow-accent);
    outline-offset: 2px;
}

.button--primary:not(:disabled) {
    background: var(--psi-overflow-accent);
    border-color: var(--psi-overflow-accent);
    color: var(--psi-overflow-accent-contrast);
}

.button--primary:hover:not(:disabled),
.button--primary:active:not(:disabled) {
    background: var(--psi-overflow-accent-hover);
    border-color: var(--psi-overflow-accent-hover);
    color: var(--psi-overflow-accent-contrast);
}

/* The only rule that paints an inert button, but for a busy one (below).
 * Every variant and contextual rule that colours a button is guarded with
 * :not(:disabled), so none of them can out-specify this one and no new
 * variant has to be named here. A disabled button must never look pressable. */
.button:disabled {
    cursor: not-allowed;
    background: var(--psi-overflow-surface-sunk);
    border: 1px solid var(--psi-overflow-rule);
    color: var(--psi-overflow-ink-faint);
    box-shadow: none;
    opacity: 1;
}

/* The primary button of a form busy with what was pressed (`aria-busy` on the
   form): disabled, and saying so in its words, but in its own colours, so it
   reads as working rather than refused. */
[aria-busy='true'] .button--primary:disabled {
    cursor: progress;
    background: var(--psi-overflow-accent);
    border-color: var(--psi-overflow-accent);
    color: var(--psi-overflow-accent-contrast);
}

/* A compact button, for toolbars and for what goes under a message. The
   backend's pages size theirs in base.css, which loads after this file. */
.button--small {
    min-height: 2.25rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
}

/* A live character counter under a field, which warns near its limit and
   reads as an error past it (`counterState` in the embed's question.ts). */
.counter {
    font-size: 0.8125rem;
    color: var(--psi-overflow-ink-faint);
    font-variant-numeric: tabular-nums;
}

.counter[data-state='warn'] {
    color: var(--psi-overflow-review);
}

.counter[data-state='over'] {
    color: var(--psi-overflow-danger);
}

/* Text for screen readers only: a label the layout has no room for, or what
   an animation means. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The dot between two facts in small print, a question's time and its page
   say: a little larger than the text around it, where "·" is a hair. The
   embed's question lists and the overview's cards draw it alike. */
.fact-separator {
    font-size: 1.3em;
    font-weight: 700;
    line-height: 0;
    vertical-align: -0.06em;
}