/*
 * Copyright (c) 2024 Biovisuals Private Limited
 * All rights reserved.
 *
 * Scientific Brushes panel (scientificBrush/scientificBrushPanel.js).
 *
 * A two-column tile grid inside #sliderContent, plus the larger hover / keyboard-focus
 * preview ("peek") that the panel renders into document.body.
 *
 * The tiles keep the shared `.preview-item` / `.preview-image` / `.icon-name` classes (the
 * library-card look and the selectors other code and tests use), and every rule here is
 * scoped under `.bv-sbrush-*` with enough specificity to override the 75 px icon-tile
 * defaults in svg-item.css: fixed 75 × 75 box, scale-on-hover, a one-line ellipsis name and
 * the tiny dark `.tooltip`. Nothing outside the Scientific Brushes panel is affected.
 */

/* ── grid ────────────────────────────────────────────────────────────────────── */
#sliderContent > .bv-sbrush-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Every row as tall as the tallest tile, so the lone third tile lines up with the first row. */
  grid-auto-rows: 1fr;
  gap: 8px;
  margin: 4px 0 8px;
}

/* Portrait sheet: #sliderContent is itself an auto-fill grid of 88 px tracks
   (slider-container.css). The brush grid spans it and stays panel-sized instead of
   stretching two tiles across the whole 768–899 px sheet. */
#app-studio[data-bv-mode="portrait"] #sliderContent > .bv-sbrush-grid {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 360px;
}

/* ── tile ────────────────────────────────────────────────────────────────────── */
#sliderContent .bv-sbrush-grid > .bv-sbrush-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 6px 8px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  /* No scale-on-hover (svg-item.css): the tile stays put and the peek shows the detail. */
  transform: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-align: center;
}

#sliderContent .bv-sbrush-grid > .bv-sbrush-tile:hover {
  transform: none;
  border-color: #E8B04B;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
}

#sliderContent .bv-sbrush-grid > .bv-sbrush-tile[aria-pressed="true"] {
  border-color: #FF6F00;
  box-shadow: inset 0 0 0 1px #FF6F00;
}

#sliderContent .bv-sbrush-grid > .bv-sbrush-tile:focus {
  outline: none;
}

#sliderContent .bv-sbrush-grid > .bv-sbrush-tile:focus-visible {
  outline: 2px solid #FF6F00;
  outline-offset: 2px;
}

#sliderContent .bv-sbrush-tile .bv-sbrush-tile-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  margin: 0;
  object-fit: contain;
}

/* The FULL name, always visible: wraps onto a second (or, in the narrowest panel, third)
   line instead of truncating. Two lines are reserved so single-line names keep the tiles
   aligned. */
#sliderContent .bv-sbrush-tile .bv-sbrush-tile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: #7A561A;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  hyphens: none;
}

.bv-sbrush-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── hover / keyboard-focus preview ("peek") ─────────────────────────────────── */
/* Rendered into document.body, `position: fixed`, so the panel's own scroll box cannot clip
   it; placed beside the panel (toward the canvas) or above the tile in the portrait sheet.
   Purely visual: it never takes the pointer, so it cannot get in the way of a tile click
   or a canvas drag. */
.bv-sbrush-peek {
  position: fixed;
  z-index: 10030;
  box-sizing: border-box;
  width: 236px;
  padding: 10px 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1F2937;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow:
    0 10px 24px rgba(16, 24, 40, 0.16),
    0 2px 6px rgba(16, 24, 40, 0.10);
  pointer-events: none;
  /* `visibility` (not display) keeps it measurable for positioning before it is revealed. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.bv-sbrush-peek.is-visible {
  visibility: visible;
  opacity: 1;
}

.bv-sbrush-peek-image {
  display: block;
  width: 214px;
  height: 150px;
  margin: 0 auto 8px;
  border-radius: 4px;
  background: #FAFAFA;
  object-fit: contain;
}

.bv-sbrush-peek-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #7A561A;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

.bv-sbrush-peek-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #4B5563;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #sliderContent .bv-sbrush-grid > .bv-sbrush-tile,
  .bv-sbrush-peek {
    transition: none;
  }
}