/*
 * An image field (App\Filament\Shared\Forms\ImageSelector): the picker's "Select file" is the only way in, so its
 * uploader (FilePond or AdvancedFileUpload) only shows the chosen image with its edit and remove buttons —
 * no dropzone, no browse. Decided in the browser (:has), so it is right after the × too.
 */
/* Collapsed, not display: none: FilePond only starts once its element has a place on the page. */
.fi-image-selector-uploader:not(:has(.filepond--item)):not(:has(.shadow-inset)) {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.fi-image-selector-uploader .filepond--drop-label,
.fi-image-selector-uploader label[x-ref='inputLabel'] {
    display: none;
}

.fi-image-selector .fi-fo-field:has(.fi-image-selector-picker) {
    container-type: inline-size;
}

/*
 * The image field's picker is the placeholder of the image, like the advanced uploader's dropzone: a grey dashed box with
 * three round icons, a bold line, the picker's small text and Select file in the middle. It is the field's content column
 * (the head above the picker's body, the body, the helper text). Once the field holds an image the uploader shows it (with
 * its edit button and ×) and the placeholder is gone; the × brings it back, so another image is picked with Select file again.
 * Its size is the preview's (--image-selector-h, a part of the width, or --image-selector-height, set per field on .fi-image-selector); in a narrow column it grows to fit its content rather than clip it.
 */
.fi-image-selector .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    /* at least as high as the preview (a part of the field's width), more when the content needs it: no clipping in a narrow column */
    min-height: max(var(--image-selector-height, 9rem), calc(100cqw * var(--image-selector-h, 0)));
    padding: 0.75rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.75rem;
    background: var(--gray-100);
    text-align: center;
}

.dark .fi-image-selector .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col {
    border-color: var(--gray-600);
    background: color-mix(in oklab, var(--gray-950) 25%, transparent);
}

.fi-image-selector-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* the head sits in a Filament inline schema, which grows to fill the box: it must take just its own height */
.fi-image-selector .fi-fo-field-content-col > .fi-sc {
    flex: none;
    padding: 0;
    gap: 0;
}

/* small, like the field's other hints, so it fits a narrow column */
.fi-image-selector .fi-image-selector-picker > p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1rem;
}

.fi-image-selector-picker > div {
    margin: 0;
}

.fi-image-selector-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.fi-image-selector-head > p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
}

.fi-image-selector-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fi-image-selector-icons > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--primary-600);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.dark .fi-image-selector-icons > span {
    background: var(--gray-950);
    color: var(--primary-400);
}

.fi-image-selector-icons > span:nth-child(1) {
    margin-inline-end: -0.5rem;
}

.fi-image-selector-icons > span:nth-child(2) {
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    transform: translateY(-0.375rem);
}

.fi-image-selector-icons > span:nth-child(3) {
    margin-inline-start: -0.5rem;
}

.fi-image-selector-icon {
    width: 1rem;
    height: 1rem;
}

.fi-image-selector-icons > span:nth-child(2) .fi-image-selector-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.fi-image-selector:has(.filepond--item) .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col,
.fi-image-selector:has(.shadow-inset) .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col {
    display: none;
}

/*
 * The placeholder sits between the label and the (collapsed) uploader, which is one grid gap below it. With an image the
 * placeholder is gone and the preview takes its place: up by that gap, and the gap again below, so nothing moves.
 */
.fi-image-selector:has(.filepond--item) .fi-fo-field-content-col:has(.fi-image-selector-uploader),
.fi-image-selector:has(.shadow-inset) .fi-fo-field-content-col:has(.fi-image-selector-uploader) {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* Small text, like the field's other hints, so it fits in a narrow column. */
.fi-image-selector-picker > p {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/*
 * An advanced uploader's picked image (its file row: the preview, the name, and the green edit / download / preview /
 * delete icons under it) is as high as the placeholder it replaces, like a post's 4:3 preview: the row has the
 * placeholder's height and the preview takes what the name and the icons leave, at any column width.
 */
/* its width is what the height is a part of (100cqw) */
.fi-image-selector .fi-fo-field:has(.fi-image-selector-uploader .shadow-inset) {
    container-type: inline-size;
}

.fi-image-selector-uploader .shadow-inset {
    box-sizing: border-box;
    min-height: calc(100cqw * var(--image-selector-h, 0));
}

.fi-image-selector-uploader .shadow-inset > div:first-child {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
}

/* the preview: the free space, not the package's 52 px square */
.fi-image-selector-uploader .shadow-inset > div:first-child > div:first-child {
    flex: 1000 1 0;
    width: 100%;
    height: auto;
    min-height: 52px;
    position: relative;
    overflow: hidden;
}

/* out of the flow: its own proportions must not decide the row's height */
.fi-image-selector-uploader .shadow-inset > div:first-child > div:first-child > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* the name and the icons under the preview, full width */
.fi-image-selector-uploader .shadow-inset > div:first-child > div:nth-child(2) {
    display: contents;
    max-width: none;
}

/*
 * The showcase's pictures (product page -> Showcase, ShowcasePicture): a File Manager picker that looks like the post's image
 * field. Until a picture is picked it is the grey dashed placeholder (the icons and the line above the picker, Select file
 * in the middle) as big as the preview (4:3, the post's own); once there is one, the picture shows as large as that preview
 * with its eye and bin, and neither Select file nor Clear is under it (the bin empties the field, which brings the placeholder
 * back). The field is the box, as in .fi-image-selector.
 */
.fi-fo-field:has(> .fi-fo-field-content-col > .fi-showcase-picker) {
    container-type: inline-size;
}

.fi-showcase-picker .aspect-square {
    aspect-ratio: 4 / 3;
}

.fi-showcase-picker > p,
.fi-showcase-picker:has(.aspect-square) > div:last-child {
    display: none;
}

.fi-showcase-picker > div:last-child {
    display: flex;
    justify-content: center;
    margin: 0;
}

.fi-fo-field-content-col:has(> .fi-showcase-picker) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: calc(100cqw * 0.75);
    padding: 0.75rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.75rem;
    background: var(--gray-100);
    text-align: center;
}

.dark .fi-fo-field-content-col:has(> .fi-showcase-picker) {
    border-color: var(--gray-600);
    background: color-mix(in oklab, var(--gray-950) 25%, transparent);
}

/* with a picture it is the picture, not the box (:has() can't be inside :has(): the placeholder is the rule above, this takes it away) */
.fi-fo-field-content-col:has(> .fi-showcase-picker .aspect-square),
.dark .fi-fo-field-content-col:has(> .fi-showcase-picker .aspect-square) {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* the head (icons and line) above the picker: just its own height, and gone once there is a picture */
.fi-fo-field-content-col:has(> .fi-showcase-picker) > .fi-sc {
    flex: none;
    padding: 0;
    gap: 0;
}

.fi-fo-field-content-col:has(> .fi-showcase-picker .aspect-square) > .fi-sc {
    display: none;
}

/*
 * A field that already has an image: its uploader (FilePond) starts in the browser and then reads the image, which takes a moment
 * in which the placeholder used to show its words and then swap for the image. Now, for the first seconds, the box keeps its size
 * as a quiet pulse, without its words, until the uploader's item takes its place (the rule above hides the box then): nothing
 * flashes and nothing moves. Time-boxed, not tied to the image: the field's state is only known to the server at render, so after
 * the image is taken out (or never comes) the words are back.
 */
.fi-image-selector[data-image-selector-filled] .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col {
    border-style: solid;
    animation: fi-image-selector-pulse 1.4s ease-in-out 6;
}

.fi-image-selector[data-image-selector-filled] .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col > * {
    animation: fi-image-selector-wait 8.4s linear forwards;
}

@keyframes fi-image-selector-pulse {
    50% {
        opacity: 0.55;
    }
}

@keyframes fi-image-selector-wait {
    0%,
    99.9% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-image-selector[data-image-selector-filled] .fi-fo-field:has(.fi-image-selector-picker) > .fi-fo-field-content-col {
        animation: none;
    }
}

/* the picture of a showcase picker sits where the placeholder was: the files' own top margin would move what is below it */
.fi-showcase-picker [x-ref='files'] {
    margin-top: 0;
}