/* ──────────────────────────────────────────────────────────────
   battle-pass.css — /battle-pass page. Class prefix: .bp-*.

   Minimalist redesign (2026-08). Single info-cyan accent; success-green
   used only for the claim-all button + claimed-cell checkmark; warning-
   yellow reserved for the "unlocked but not claimed" premium track cells.

   Layout owned by CSS Grid inside `.bp-ladder`:

     Desktop (>= 768px) — horizontal ladder scrolls on x:
       ┌────────┬────┬────┬────┬────┬────
       │ FREE   │ □  │ □  │ □  │ □  │  ...    (row 1 = free lane)
       ├────────┼────┼────┼────┼────┼──── 
       │ PROG   │ ● ─── rail ── ● ─── ...    (row 2 = progress + circles)
       ├────────┼────┼────┼────┼────┼──── 
       │ PREM   │ □  │ □  │ □  │ □  │  ...    (row 3 = premium lane)
       └────────┴────┴────┴────┴────┴────
         └── sticky-left labels column ──┘

     Mobile (< 768px) — vertical ladder scrolls on y:
       ┌────────────────────────┐
       │ FREE │ PROG │ PREM     │  ← sticky-top labels row
       ├────────────────────────┤
       │ □    │   ●  │  □       │  tier 1
       │ □    │   ●  │  □       │  tier 2
       │ ...                    │

   Cell state (added by C# `BuildCellClass`):
     empty            → dashed border, opacity 0.35, no accent
     locked           → opacity 0.35, muted border
     unlocked-free    → cyan border + inset glow
     unlocked-premium → yellow border + inset glow
     claimed          → success border + opacity 0.65 + corner check badge

   Tier circle state (added by C# `BuildTierCircleClass`):
     past    → success green
     current → info cyan with glow
     future  → muted dark

   Zero-glitch hover rule: every transition below animates ONLY
   background-color / border-color / opacity / box-shadow / color.
   Never transform / width / height / padding / margin / font-size /
   top / left / right / bottom. Typography sizing is Bootstrap-utility
   only (fs-*, .small) — no `font-size` declarations in this file.   Cell hover states were deliberately removed — cells are static (no
   click affordance), so hover styles would be misleading.   ────────────────────────────────────────────────────────────── */

/* ─── Reward thumbnail (still used by RewardSlot) ──────────────── */

.bp-thumb,
.bp-thumb-placeholder {
    object-fit: cover;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.bp-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 202, 240, 0.08);
    border: 1px dashed rgba(13, 202, 240, 0.3);
}

.bp-thumb-compact { width: 48px; height: 48px; border-radius: 6px; }
.bp-thumb-medium  { width: 56px; height: 56px; }
.bp-thumb-large   { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 12px; }

/* Compact ladder-cell thumbs — real images fill ~80% of the cell so item
   art reads clearly; icon placeholders stay small (icons don't need the
   room, and small icons keep the ladder rhythm consistent). */
.bp-thumb.bp-thumb-compact {
    width: 104px;
    height: 104px;
    border-radius: 8px;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .bp-thumb.bp-thumb-compact { width: 80px; height: 80px; }
}

/* Locked dim used by RewardSlot when it renders its own state. The ladder
   passes IsLocked=false / Claim=null and handles state on the wrapper cell
   modifiers instead, so this only fires for out-of-page usages of the
   RewardSlot component. */
.bp-cell-locked-slot { opacity: 0.55; }

/* ─── Outer panel ─────────────────────────────────────────────── */

/* Semi-transparent black surface that wraps the entire Battle Pass
   (hero + claim row + ladder). `overflow: hidden` on rounded-4 lets the
   hero banner image bleed cleanly to the panel's rounded corners. */
.bp-panel {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ─── Hero band ────────────────────────────────────────────────── */

.bp-hero {
    min-height: 340px;
    overflow: hidden;
}

/* Absolute-positioned background image that bleeds to the hero's right
   + top + bottom edges. Kept as its own layer (rather than a background
   on `.bp-hero`) so the `bp-hero-image-fallback` variant can swap the
   background without fighting the inline style. */
.bp-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
}

.bp-hero-image-fallback {
    background: linear-gradient(135deg, #0a2f3d 0%, #0a1a25 100%);
}

/* Horizontal scrim keeps the left column's text readable on top of any
   operator-uploaded banner. Fades from ~90% dark on the left to fully
   transparent past the midpoint so the character/banner art still shows. */
.bp-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.bp-hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 60%;
}

.bp-hero-picker {
    z-index: 3;
}

@media (max-width: 991.98px) {
    .bp-hero-content { max-width: 75%; }
}

@media (max-width: 767.98px) {
    .bp-hero { min-height: auto; }

    .bp-hero-content {
        padding: 1.25rem 1rem;
        max-width: 100%;
        gap: 1rem;
    }

    /* On mobile the banner scales down and the scrim covers more of the
       hero so text stays readable regardless of the banner's composition. */
    .bp-hero-scrim {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.95) 100%);
    }
}

/* Documented exception (per user request): the reference layout demands a
   display-scale title beyond Bootstrap's fs-1. Kept out of any `fs-*`
   override — this is the ONLY custom `font-size` in this file. */
.bp-hero-title {
    font-size: 2.75rem;
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767.98px) {
    .bp-hero-title { font-size: 1.85rem; }
}

.bp-season-select {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(13, 202, 240, 0.4);
    color: #fff;
    max-width: 160px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-season-select:focus {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(13, 202, 240, 0.7);
    box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.2);
    color: #fff;
}

/* ─── Hero: countdown boxes ────────────────────────────────────── */

.bp-countdown-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bp-countdown-label {
    letter-spacing: 1.5px;
    line-height: 1;
}

.bp-countdown-boxes {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.bp-countdown-box {
    width: 76px;
    padding: 0.55rem 0.35rem 0.5rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bp-countdown-num {
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.bp-countdown-unit {
    margin-top: 0.25rem;
    letter-spacing: 1px;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .bp-countdown-box { width: 64px; padding: 0.45rem 0.25rem 0.4rem; }
}

/* ─── Hero: LVL badge + XP bar row ─────────────────────────────── */

.bp-level-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* LVL counter — pure text, no circle. Info cyan color for both the LVL
   label and the number. Kept as a flex column via the outer .bp-level-row. */
.bp-level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: center;
}

.bp-xp-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* On lg viewports and up, cap the XP row width so it doesn't stretch the
   whole hero-content width when the banner column is dominant. */
@media (min-width: 992px) {
    .bp-xp-info {
        flex-grow: 0;
        max-width: 660px;
    }
}

.bp-xp-header {
    line-height: 1;
}

/* Thin XP progress bar. Cyan fill (info) to match the new circular LVL badge. */
.bp-xp-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    overflow: hidden;
}

.bp-xp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.7) 0%, rgb(13, 202, 240) 100%);
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-xp-tier-label {
    letter-spacing: 1.5px;
    line-height: 1;
}

/* Below ~400px there isn't room for the badge + xp bar side-by-side
   without the header labels wrapping under each other, so stack them. */
@media (max-width: 399.98px) {
    .bp-level-row {
        flex-direction: column;
        align-items: stretch;
    }
    .bp-level-badge { align-self: flex-start; }
}

/* ─── Claim-all row ────────────────────────────────────────────── */

.bp-claim-row {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

/* ─── Premium status badge (bp-hero-status-badge) ──────────────── */

.bp-hero-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(255, 203, 49, 0.15);
    border: 1px solid rgba(255, 203, 49, 0.6);
    color: rgb(255, 203, 49);
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Info button uses the shared .action-btn from app.css (rounded-circle
   override in markup makes it circular). Design-system class — no local
   overrides here. */

/* ─── Boost modal rows (BoostInfoModal.razor) ──────────────────── */

.bp-boost-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-boost-row-active {
    background: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.55);
}

.bp-boost-mult {
    width: 60px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── Ladder wrap ──────────────────────────────────────────────── */

/* Sits inside `.bp-panel` — the panel already provides the surface, so
   the wrap is transparent with only a subtle top-border separator from
   the claim-all row above. `overflow: hidden` keeps the ladder's own
   horizontal scroll from bleeding past the panel's rounded corners. */
.bp-ladder-wrap {
    overflow: hidden;
    padding: 0.75rem;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bp-ladder {
    display: grid;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 202, 240, 0.4) transparent;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-ladder::-webkit-scrollbar { width: 8px; height: 8px; }
.bp-ladder::-webkit-scrollbar-track { background: transparent; }
.bp-ladder::-webkit-scrollbar-thumb {
    background: rgba(13, 202, 240, 0.4);
    border-radius: 9999px;
}

/* ─── Ladder shell — labels sidebar + scrollable ladder ─────────── */

.bp-ladder-shell {
    display: flex;
    gap: 0.5rem;
}

.bp-ladder-labels {
    display: grid;
    flex-shrink: 0;
}

/* Track-color border on Free (info cyan) and Premium (warning yellow). Uses
   the `border-color` shorthand so both desktop (left) and mobile (top) pick
   up the color from the same rule. Applied to actual label children (1 + 3);
   child 2 is the spacer. */
.bp-ladder-labels > div:nth-child(1) {
    border-color: rgb(13, 202, 240);
}

.bp-ladder-labels > div:nth-child(3) {
    border-color: rgb(255, 203, 49);
}

/* ─── Ladder grid — desktop (>= 768px) ─────────────────────────── */

@media (min-width: 768px) {
    .bp-ladder-shell {
        flex-direction: row;
        align-items: stretch;
    }

    .bp-ladder-labels {
        width: 44px;
        grid-template-rows: 130px 44px 130px;
        row-gap: 10px;
        padding: 4px 0;
    }

    /* Vertical rotated text for the Free/Premium labels (children 1 + 3). */
    .bp-ladder-labels > div:nth-child(1),
    .bp-ladder-labels > div:nth-child(3) {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        padding-left: 0.5rem;
        border-left-width: 3px;
        border-left-style: solid;
        letter-spacing: 2px;
    }

    .bp-ladder {
        grid-template-columns: repeat(var(--bp-tier-count, 40), 140px);
        grid-template-rows: [free] 130px [prog] 44px [prem] 130px;
        column-gap: 8px;
        row-gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 4px 8px 4px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .bp-cell-free    { grid-column: var(--tier); grid-row: 1; }
    .bp-cell-premium { grid-column: var(--tier); grid-row: 3; }
    .bp-tier-circle  { grid-column: var(--tier); grid-row: 2; align-self: center; justify-self: center; }

    .bp-progress-lane {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        height: 2px;
        align-self: center;
        justify-self: stretch;
        pointer-events: none;
    }

    .bp-progress-fill {
        width: var(--bp-progress-length, 0%);
        height: 100%;
    }
}

/* ─── Ladder grid — mobile (< 768px) ───────────────────────────── */

@media (max-width: 767.98px) {
    .bp-ladder-shell {
        flex-direction: column;
    }

    .bp-ladder-labels {
        grid-template-columns: 1fr 60px 1fr;
        column-gap: 8px;
        padding: 0 4px 4px 4px;
    }

    /* Horizontal labels on mobile — top-border treatment (was left on desktop). */
    .bp-ladder-labels > div:nth-child(1),
    .bp-ladder-labels > div:nth-child(3) {
        padding-top: 0.5rem;
        border-top-width: 3px;
        border-top-style: solid;
        letter-spacing: 2px;
    }

    .bp-ladder {
        grid-template-columns: [free] 1fr [prog] 60px [prem] 1fr;
        grid-template-rows: repeat(var(--bp-tier-count, 40), 100px);
        column-gap: 8px;
        row-gap: 6px;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px;
    }

    .bp-cell-free    { grid-column: 1; grid-row: var(--tier); }
    .bp-cell-premium { grid-column: 3; grid-row: var(--tier); }
    .bp-tier-circle  { grid-column: 2; grid-row: var(--tier); align-self: center; justify-self: center; }

    .bp-progress-lane {
        grid-column: 2;
        grid-row: 1 / -1;
        position: relative;
        width: 2px;
        align-self: stretch;
        justify-self: center;
        pointer-events: none;
    }

    .bp-progress-fill {
        width: 100%;
        height: var(--bp-progress-length, 0%);
    }
}

/* ─── Progress rail + fill (shared) ────────────────────────────── */

.bp-progress-rail {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.bp-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.7) 0%, #0dcaf0 100%);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Tier circles ─────────────────────────────────────────────── */

.bp-tier-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-tier-circle-past {
    background: rgb(25, 238, 25);
    border: 0;
    color: #041018;
}

.bp-tier-circle-current {
    background: #0dcaf0;
    color: #041018;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 12px rgba(13, 202, 240, 0.5);
}

.bp-tier-circle-future {
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ─── Ladder cells (Free / Premium tracks) ─────────────────────── */

.bp-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Locked = tier not yet reached. Muted, no accent color. */
.bp-cell-locked { opacity: 0.35; }

/* Unlocked but unclaimed — track color as the visual cue. */
.bp-cell-unlocked-free {
    border-color: rgba(13, 202, 240, 0.6);
    box-shadow: inset 0 0 0 1px rgba(13, 202, 240, 0.4);
}

.bp-cell-unlocked-premium {
    border-color: rgba(255, 203, 49, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 203, 49, 0.4);
}

/* Premium row: prize icon fallback carries the warning-yellow track color
   (overrides RewardSlot's default white icon). `!important` is required to
   beat Bootstrap's `.text-white-50` / `.text-info` utility classes which
   themselves use `!important`. Claimed cells still keep the yellow tint —
   the check badge already conveys the success state. */
.bp-cell-premium .bp-thumb-placeholder {
    background: rgba(255, 203, 49, 0.08);
    border-color: rgba(255, 203, 49, 0.3);
}

.bp-cell-premium .bp-thumb-placeholder i {
    color: rgb(255, 203, 49) !important;
}

/* Claimed. Success-tinted border + dim + corner check badge. */
.bp-cell-claimed {
    opacity: 0.65;
    border-color: rgba(25, 238, 25, 0.6);
    box-shadow: inset 0 0 0 1px rgba(25, 238, 25, 0.35);
}

/* Empty slot — dashed border, no accent. Dashed border alone conveys "empty";
   no inline "—" placeholder mark (would add visual noise across most cells
   under the current sparse-ladder seed data). */
.bp-cell-empty {
    opacity: 0.35;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Premium track keeps a warning-yellow accent on empty + locked states so
   the whole premium row reads yellow (until claimed → success). Alpha matches
   the unlocked-unclaimed state so all premium cells are consistently warning-themed. */
.bp-cell-premium.bp-cell-empty,
.bp-cell-premium.bp-cell-locked {
    border-color: rgba(255, 203, 49, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 203, 49, 0.25);
}

/* Corner check badge for claimed cells. Sits above the reward thumbnail. */
.bp-cell-check-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(25, 238, 25);
    color: #041018;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    line-height: 1;
}

/* Cells are static — no click affordance, so no hover styles.
   The zero-glitch hover invariant is trivially satisfied here since
   there are no hover rules to animate on ladder cells. */

/* ── Admin panel: CatalogPicker (searchable dropdown for reward pickers) ── */

.bp-picker-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.bp-picker-thumb-sm {
    width: 42px;
    height: 32px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.bp-picker-thumb-placeholder {
    background: rgba(13, 202, 240, 0.08);
}

.bp-picker-dropdown {
    max-height: 320px;
    overflow-y: auto;
}

.bp-picker-row {
    background: transparent;
    border: 0;
    color: inherit;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-picker-row:hover,
.bp-picker-row:focus {
    background: rgba(13, 202, 240, 0.12);
    outline: none;
}

/* ── Admin panel: RandomPreviewPicker + BattlePassPreviewIcon ── */

.bp-preview-tiles {
    padding: 0.25rem 0;
}

.bp-preview-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 72px;
    height: 72px;
    padding: 0.35rem 0.25rem;
    background: rgba(15, 22, 33, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-preview-tile:hover {
    background: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.5);
}

.bp-preview-tile-active {
    background: rgba(13, 202, 240, 0.28);
    border-color: #0dcaf0;
    box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.45);
}

.bp-preview-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    color: #0dcaf0;
}

.bp-preview-tile-icon svg,
.bp-preview-tile-icon i {
    max-width: 100%;
    max-height: 100%;
    font-size: 1.5rem;
}

.bp-preview-tile-label {
    font-size: 0.7rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bp-preview-tile-active .bp-preview-tile-label {
    color: #fff;
}

/* Preview icon rendered inside ladder thumbs (bp-thumb-compact / medium / large). */
.bp-preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #0dcaf0;
}

.bp-preview-icon svg {
    max-width: 80%;
    max-height: 80%;
}

.bp-preview-icon i {
    font-size: 1.4rem;
}