/* A form of the form module on the site (see frontend/views/form/_form.php): the fields use the form classes
   of the site; this is what the module adds, built on the tokens of the site. */

/* A form is a column in the middle of the page, no wider than the text of a post (the `w-max-800` of the
   site), wherever it is shown: every block of it keeps its container, only narrower. */
.form-module .container {
    max-width: 50rem;
}

.form-required {
    color: var(--color-primary);
}

/* The error of a field, in the block Yii's forms use; empty until there is one. */
.form-module .help-block:empty {
    display: none;
}

/* What the visitor reads once the form is sent, and what the editor reads while no form is chosen. */
.form-success,
.form-note {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.form-success {
    border-left: 4px solid var(--color-primary);
}

.form-note {
    color: var(--color-text-muted);
    text-align: center;
}

/* The button while the form is being sent. */
.form-module button[disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* A field of files: a framed box with the label the visitor clicks or drops the files on, the input in it
   hidden from sight only, and the files chosen listed under it. The box is a `form-control` too, so it has
   the corners, the border and the background of the inputs of the site and of its theme, only dashed. */
.form-file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    border-style: dashed;
    cursor: pointer;
}

.form-file-drop:hover,
.form-file-drop.is-dragover {
    border-color: var(--color-primary);
}

.form-file-drop:has(.form-file-input:focus-visible) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.form-file-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.form-file-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
}

.form-file-limits {
    color: var(--color-text-muted);
    font-size: 0.875em;
}

.form-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-file-list {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.form-file-list:empty {
    display: none;
}

.form-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
}

.form-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-file-remove {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.form-file-remove:hover {
    background: var(--color-surface);
    color: var(--color-danger);
}