/*
 * Image library picker.
 *
 * The modal grid of remembered pictures: every thumbnail is a button that wears the picture
 * again, and under it sits the two-step delete control. The structure is built by
 * `js/core/image-picker.js`; these rules are its appearance.
 */

/* The grid wants more room than the default panel. */
.image-picker.modal__panel {
    max-width: 40rem;
}

.image-picker__status {
    margin: var(--space-4) 0;
    color: var(--colour-ink-quiet);
    text-align: center;
}

.image-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--space-3);
    max-height: 60vh;
    overflow-y: auto;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.image-picker__item {
    position: relative;
}

/* A round trip in flight: one picture at a time, so the rest of the grid stays quiet but usable. */
.image-picker__item.is-busy {
    opacity: 0.6;
}

.image-picker__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    background-color: var(--colour-surface-sunken);
    transition: border-color var(--duration-fast) var(--easing);
}

.image-picker__thumb:hover {
    border-color: var(--colour-border-strong);
}

.image-picker__thumb:focus-visible {
    outline: var(--focus-width) solid var(--colour-focus);
    outline-offset: var(--focus-offset);
}

.image-picker__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The picture the server currently wears: a primary-coloured edge and a corner badge. */
.image-picker__item.is-current .image-picker__thumb {
    border-color: var(--colour-primary);
    box-shadow: inset 0 0 0 var(--border-width) var(--colour-primary);
}

.image-picker__badge {
    position: absolute;
    top: var(--space-1);
    inset-inline-end: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--colour-primary);
    color: var(--colour-primary-ink);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
    font-weight: var(--weight-medium);
    pointer-events: none;
}

.image-picker__delete {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
    padding: var(--space-1) 0;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--colour-ink-quiet);
    font-size: var(--text-xs);
    text-align: center;
    transition: color var(--duration-fast) var(--easing);
}

.image-picker__delete:hover {
    color: var(--colour-error-ink);
}

.image-picker__delete:focus-visible {
    outline: var(--focus-width) solid var(--colour-focus);
    outline-offset: var(--focus-offset);
}

/* The armed step: the label has already become the confirmation sentence; the colour says so. */
.image-picker__delete.is-armed {
    color: var(--colour-error-ink);
    font-weight: var(--weight-bold);
    background-color: var(--colour-error-surface);
}