/*
 * Theme CSS for the showcase and Lab tables. Fast Tables renders Filament's own row markup,
 * so these rules style the virtualised rows and the native table alike.
 */

/* Density: the padding of Filament's cell content sets the row height. */
.demo-compact .fi-ta-text:not(.fi-inline),
.demo-compact .fi-ta-header-cell {
    padding-block: 0.5rem;
}

.demo-comfortable .fi-ta-text:not(.fi-inline),
.demo-comfortable .fi-ta-header-cell {
    padding-block: 1.25rem;
}

/* A fixed row height: rows no longer grow to fit wrapped text. */
.demo-tall .fi-ta-row > .fi-ta-cell {
    height: 72px;
}

.demo-tall .fi-ta-header-cell {
    height: 48px;
}

/* Soft grid lines between all cells, as in a spreadsheet. */
.demo-soft-borders .fi-ta-cell + .fi-ta-cell,
.demo-soft-borders .fi-ta-header-cell + .fi-ta-header-cell {
    border-inline-start: 1px solid rgba(148, 163, 184, 0.35);
}

/* The photo gallery: a 4:3 tile that the image fills, with the actions laid over it on hover.
   Filament sizes the <img> inline (height: 2.5rem), so the overrides are !important. */
.fi-ta-record:has(.gallery-tile) .gallery-photo {
    display: block !important;
    position: relative;
    width: 100% !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
}

.fi-ta-record:has(.gallery-tile) .gallery-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

.fi-ta-record-content-ctn:has(.gallery-tile) {
    position: relative;
}

.fi-ta-record-content-ctn:has(.gallery-tile) > .fi-ta-actions {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 10;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fi-ta-record-content-ctn:has(.gallery-tile):hover > .fi-ta-actions,
.fi-ta-record-content-ctn:has(.gallery-tile):focus-within > .fi-ta-actions {
    opacity: 1;
}

.fi-ta-record-content-ctn:has(.gallery-tile) > .fi-ta-actions svg {
    color: #fff;
}