/* ============================================================
 * /scene-editor — rotating tileset cube chip inside the Basemap Select.
 * Ported from SailsBoard (piratesbargain.com) assets/tile_cube.css.
 * The `tlp-` prefix is unique within 2plot so it coexists cleanly.
 * ============================================================ */

.tlp-cube-stage {
    width:       52px;
    height:      52px;
    perspective: 280px;
    position:    relative;
    flex-shrink: 0;
}

.tlp-cube {
    position:        relative;
    width:           100%;
    height:          100%;
    transform-style: preserve-3d;
    animation:       tlp-cube-rotate 14s linear infinite;
}

.tlp-cube-face {
    position:           absolute;
    width:              52px;
    height:             52px;
    /* Fallback fill ONLY for faces with no tile URL — `has-tile` (added in JS) strips it
       so painted tiles render clean (no tint bleeding through transparent tiles). */
    background-color:   light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
    background-size:    cover;
    background-position:center;
    background-repeat:  no-repeat;
    border-radius:      4px;
    box-shadow:         inset 0 0 2px rgba(0, 0, 0, 0.18);
    border:             1px solid color-mix(in srgb, var(--mantine-color-text, #1a1b1e) 14%, transparent);
    backface-visibility:hidden;
}

.tlp-cube-face.has-tile { background-color: transparent; }

/* Gradient fallback ONLY for faces with no tile (e.g. a piratesbargain set offline, or a
   404) so the chip is still textured. */
.tlp-cube-face:not(.has-tile)::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 30% 25%,
            light-dark(var(--mantine-color-twoplot-3), var(--mantine-color-twoplot-7)) 0%,
            light-dark(var(--mantine-color-gray-5),  var(--mantine-color-dark-7)) 80%);
    z-index:       -1;
    opacity:       0.75;
}

.tlp-cube-front  { transform: rotateY(   0deg) translateZ(26px); }
.tlp-cube-back   { transform: rotateY( 180deg) translateZ(26px); }
.tlp-cube-right  { transform: rotateY(  90deg) translateZ(26px); }
.tlp-cube-left   { transform: rotateY( -90deg) translateZ(26px); }
.tlp-cube-top    { transform: rotateX(  90deg) translateZ(26px); }
.tlp-cube-bottom { transform: rotateX( -90deg) translateZ(26px); }

@keyframes tlp-cube-rotate {
    0%   { transform: rotateX(-14deg) rotateY(   0deg); }
    100% { transform: rotateX(-14deg) rotateY( 360deg); }
}

/* Pause the spin while a row is hovered/active so the user can read the front face. */
.tlp-option:hover .tlp-cube,
.tlp-option[data-combobox-active] .tlp-cube { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .tlp-cube { animation: none; }
}

/* ---------- dropdown row polish ---------- */
.tlp-dropdown { padding-block: 6px; }

.tlp-option {
    border-radius: 8px;
    padding:       6px 8px;
    margin-block:  2px;
    border:        1px solid transparent;
    transition:    background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.tlp-option:hover,
.tlp-option[data-combobox-active] {
    background:   light-dark(var(--mantine-color-white), var(--mantine-color-dark-5));
    border-color: light-dark(var(--mantine-color-twoplot-3), var(--mantine-color-twoplot-7));
    box-shadow:   0 1px 4px rgba(0, 0, 0, 0.06);
}

.tlp-option[data-combobox-active] { --mantine-color-default-hover: transparent; }
.tlp-option .tlp-cube-stage { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); }