/* Shared thumbnail hover/removal affordance. */
.thumb-hoverable {
    position: relative;
    display: inline-block;
}
.thumb-hoverable > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.thumb-hoverable:hover > img {
    filter: blur(3px) saturate(130%) brightness(1.05);
    transform: scale(1.04);
}
.thumb-hoverable .thumb-remove {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--color-danger);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}
.thumb-hoverable:hover .thumb-remove,
.thumb-hoverable .thumb-remove:focus-visible {
    opacity: 1;
}
.thumb-hoverable .thumb-remove svg {
    width: 24px;
    height: 24px;
    /* Это не тень окна, а контраст иконки поверх чужой фотографии:
       поэтому тесно и темно, а не как у окон. */
    filter: var(--shadow-icon);
}
.thumb-hoverable .thumb-remove:hover {
    color: var(--color-danger-hover);
}
.thumb-hoverable .thumb-remove:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) { .thumb-hoverable img, .thumb-hoverable .thumb-remove { transition: none; } }