.curator-grid-container {
    /**
     * User input values.
     */
    --grid-layout-gap: theme('spacing.6');
    --grid-column-count: 1;
    --grid-item--min-width: 75px;

    /**
     * Calculated values.
     */
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
}

@screen md {
    .curator-grid-container {
        --grid-column-count: 2;
    }
}

@screen lg {
    .curator-grid-container {
        --grid-column-count: 3;
    }
}

.checkered {
    background-color: theme("colors.gray.200");
    background-image: repeating-linear-gradient(45deg, theme("colors.gray.300") 25%, transparent 25%, transparent 75%, theme("colors.gray.300") 75%, theme("colors.gray.300")), repeating-linear-gradient(45deg, theme("colors.gray.300") 25%, theme("colors.gray.200") 25%, theme("colors.gray.200") 75%, theme("colors.gray.300") 75%, theme("colors.gray.300"));

    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.dark .checkered {
    background-color: theme("colors.gray.800");
    background-image: repeating-linear-gradient(45deg, theme("colors.gray.700") 25%, transparent 25%, transparent 75%, theme("colors.gray.700") 75%, theme("colors.gray.700")), repeating-linear-gradient(45deg, theme("colors.gray.700") 25%, theme("colors.gray.800") 25%, theme("colors.gray.800") 75%, theme("colors.gray.700") 75%, theme("colors.gray.700"));
}

.fi-resource-media {
    .fi-forms-tabs-component-header {
        @apply bg-gray-100 dark:bg-gray-900;
    }

    .fi-ta {
        .fi-ta-record:has([type="checkbox"]:checked) {
            @apply ring-2 ring-primary-500;
        }

        .fi-ta-record:not(:has([type="checkbox"])) .fi-ta-actions {
            margin-top: 56.25%;
        }

        .fi-ta-record:has(.curator-grid-column) {
            @apply block;

            > div {
                @apply flex-col p-0;

                > div {
                    @apply p-0;
                }
            }

            label {
                @apply w-full h-auto aspect-video;
                z-index: 1;
            }

            [type="checkbox"]:not(:checked) {
                @apply bg-white dark:bg-gray-800;
            }

            .fi-ta-actions {
                @apply pb-3 px-3;
            }
        }
    }
}

.curator-panel-sidebar {
    .fi-fo-component-ctn {
        @apply gap-4;

        label {
            @apply text-sm;
        }
    }

    .filepond--root {
        min-height: 300px;
    }
}

[wire\:key*="open_curator_picker"],
[wire\:key*="open_curation_panel"],
.curator-panel {
    > .fi-modal-window {
        @apply !p-0;

        > .fi-modal-header {
            @apply py-2 px-4 border-b border-gray-300 dark:border-gray-800;

            .fi-modal-heading {
                @apply text-base;
            }

            .fi-modal-close-btn {
                margin-block-start: -0.75rem;

                &:hover,
                &:focus {
                    @apply text-primary-500 !bg-transparent;
                }
            }
        }

        > .fi-modal-content {
            position: relative;
        }

        > .fi-modal-footer {
            @apply pb-0;
        }

        .curator-picker-grid {
            @apply grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10;
        }

        .filepond--panel {
            @apply bg-transparent border-dashed border-2 border-gray-950/5 dark:border-white/20;
        }
    }
}