/* ==========================================================================
   Peerly Draw — Toolbar (Material 3)
   ==========================================================================
   Les outils sont présentés comme des FilterChips M3 :
   - État par défaut : outlined (border outline)
   - État sélectionné : fond primary-container, icône checked
   ========================================================================== */

/* ==========================================================================
   TOOL GRID
   ========================================================================== */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--md-sys-spacing-half);
}

/* ==========================================================================
   FILTER CHIP (outil de dessin)
   ========================================================================== */

.tool-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-spacing-half);
  padding: var(--md-sys-spacing-1) var(--md-sys-spacing-half);
  min-height: 64px;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-sm);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  cursor: pointer;
  user-select: none;
}

.tool-btn .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}

.tool-btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent);
}

.tool-btn:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* État sélectionné M3 (FilterChip selected) */
.tool-btn--active {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}

.tool-btn--active:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-opacity), var(--md-sys-color-secondary-container));
}

/* ==========================================================================
   COLOR PALETTE (swatches)
   ========================================================================== */

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-spacing-1);
  padding: var(--md-sys-spacing-half) 0;
}

.color-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--md-sys-shape-full);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition:
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.color-swatch:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* État sélectionné M3 : ring outline + check */
.color-swatch--active {
  border-color: var(--md-sys-color-surface);
  box-shadow:
    0 0 0 2px var(--md-sys-color-surface),
    0 0 0 4px var(--md-sys-color-primary);
}

/* ==========================================================================
   SLIDER LABEL
   ========================================================================== */

.sidebar__section .slider {
  margin-top: var(--md-sys-spacing-1);
}