/* ==========================================================================
   ASSETS
   ========================================================================== */

.asset-modal {
    .saving {
        @apply absolute inset-0 flex items-center rounded-xs bg-white/90;
        z-index: var(--z-index-modal);

        .inner {
            text-align: center;
            padding: 50px;
            margin: 0 auto;
        }

        i {
            position: relative;
            top: -1px;
            margin-right: 10px;
            [dir='rtl'] & {
                margin-left: 10px;
                margin-right: 0;
            }
        }
    }
}

.drag-notification {
    @apply absolute inset-0 flex items-center justify-center rounded-xl p-1 text-center text-xs leading-tight @sm:text-lg;
    border: 1px dashed var(--color-gray-600);
    pointer-events: none;
    z-index: var(--z-index-draggable);
    background: rgba(255, 255, 255, 0.9);

    .dark & {
        @apply bg-gray-900/90;
        border-color: var(--color-gray-700);
    }
}

/* Table Listing
   ========================================================================== */

.asset-table-listing {
    @apply relative overflow-hidden rounded-sm border dark:border-gray-900;

    table {
        @apply m-0 w-full select-none rounded-b border-none;
    }
    tbody tr {
        @apply outline-hidden;
    }

    tbody tr:not(:last-child) {
        @apply border-b dark:border-gray-900;
    }

    tbody tr td {
        @apply p-2;
    }
}

.assets-fieldtype-picker + .asset-table-listing {
    @apply rounded-t-none;
}

.asset-listing .actions {
    margin-bottom: 15px;
    display: flex;

    .search {
        flex: 1;
        margin-right: 15px;
        [dir='rtl'] & {
            margin-left: 15px;
            margin-right: 0;
        }
        margin-left: 0;
        [dir='rtl'] & {
            margin-right: 0;
            margin-left: 0;
        }
    }

    > .btn {
        margin-right: 15px;
        [dir='rtl'] & {
            margin-left: 15px;
            margin-right: 0;
        }
    }
}

/* Fieldtype
  ========================================================================== */

.asset-tile.draggable-source--is-dragging {
    @apply opacity-50;
}
.asset-tile.draggable-mirror {
    @apply shadow-lg;
}

/* Grid Listing
  ========================================================================== */

.asset-grid-listing {
    @apply relative grid gap-5 md:gap-6 xl:gap-10;
}

.data-table,
.folder-grid-listing {
    [data-placeholder-shown]:has(+ .st-has-error) {
        @apply text-red-600 dark:text-red-500;
    }
}

.folder-grid-listing {
    @apply relative grid gap-5 md:gap-7;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    [data-placeholder-shown] {
        @apply overflow-hidden mt-2 text-center text-xs text-ellipsis whitespace-nowrap lowercase;
        &:has(+ .st-has-error) {
            @apply text-red-600 dark:text-red-500;
        }
    }
}

/* Asset Tile
   ========================================================================== */

.asset-tile {
    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700;

    > button {
        /* Shift the focus outline offset slightly to account for the grey border. Target direct descendents so we don't target inner buttons like the three-dot menu. */
        --focus-outline-offset: 1px;
        .selected & {
            /* Shift the focous outline even more to account for the "selected" border */
            --focus-outline-offset: 1px;
            --focus-outline-width: 3px;
        }
    }

    .selected & {
        @apply outline-3 outline-blue-500;
    }

    .asset-thumb {
        @apply flex items-center justify-center size-full;
        > img,
        > svg,
        > .svg-img {
            @apply absolute max-h-full max-w-full;
        }
    }
}

.asset-filename {
    @apply text-xs text-gray-500 dark:text-gray-300 mt-2 whitespace-nowrap text-center st-text-legibility;
    font-variant: tabular-nums; /* Disable common-ligatures from body default */
    .selected & {
        @apply text-blue-500;
        .dark & {
            @apply text-blue-400;
        }
    }
}

/* The Asset Editor
  ========================================================================== */

.asset-editor {

    .loading {
        @apply absolute inset-0 flex items-center justify-center rounded-sm bg-white/70;
        z-index: var(--z-index-portal);
    }

    .publish-fields {
        @apply grid grid-cols-none!;
        --grid-columns: none !important;
    }
}

/* Lazyloading
  ========================================================================== */

.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 180ms;
}
