// =============================================================================
// Block Colors
// Notion-style block-level backgrounds and text colors. Applied when the
// BlockColor extension (@domternal/core) sets `data-bg-color` /
// `data-text-color` attributes on block elements. Token definitions live
// in `_variables.scss` (light) and `themes/_dark.scss` (dark).
// =============================================================================

// -----------------------------------------------------------------------------
// Background
// Tint the whole block. Scoped under `.dm-editor .ProseMirror` so it only
// applies inside a Domternal editor instance - won't leak to host content.
// Small inline padding so the tint visually "hugs" the text instead of
// bleeding edge-to-edge on narrow blocks.
// -----------------------------------------------------------------------------
.dm-editor .ProseMirror {
  [data-bg-color="gray"]   { background-color: var(--dm-block-bg-gray); }
  [data-bg-color="brown"]  { background-color: var(--dm-block-bg-brown); }
  [data-bg-color="orange"] { background-color: var(--dm-block-bg-orange); }
  [data-bg-color="yellow"] { background-color: var(--dm-block-bg-yellow); }
  [data-bg-color="green"]  { background-color: var(--dm-block-bg-green); }
  [data-bg-color="blue"]   { background-color: var(--dm-block-bg-blue); }
  [data-bg-color="purple"] { background-color: var(--dm-block-bg-purple); }
  [data-bg-color="pink"]   { background-color: var(--dm-block-bg-pink); }
  [data-bg-color="red"]    { background-color: var(--dm-block-bg-red); }

  // Inline padding is pre-applied to colorable blocks in `_content.scss`
  // (and to the editor itself for lists/blockquotes) so toggling a color
  // does NOT shift text - the tint paints into existing padding. This
  // rule is therefore minimal: only the rounded corners + a hair of
  // vertical padding so the tint reads as a "pill" around short text
  // instead of an edge-to-edge band.
  [data-bg-color] {
    padding-block: 0.125rem;
    border-radius: 0.25rem;
  }

  // Task items keep zero vertical padding when colored: their checkbox is
  // absolutely positioned against the li's padding box, so growing the box
  // would shift the label text down while the checkbox stays put (~2px
  // misalignment). Bullet/ordered markers ride the line box and are unaffected,
  // so this restores symmetry. The tint still reads as a band around the label.
  li[data-type="taskItem"][data-bg-color] {
    padding-block: 0;
  }

  [data-text-color="gray"]   { color: var(--dm-block-text-gray); }
  [data-text-color="brown"]  { color: var(--dm-block-text-brown); }
  [data-text-color="orange"] { color: var(--dm-block-text-orange); }
  [data-text-color="yellow"] { color: var(--dm-block-text-yellow); }
  [data-text-color="green"]  { color: var(--dm-block-text-green); }
  [data-text-color="blue"]   { color: var(--dm-block-text-blue); }
  [data-text-color="purple"] { color: var(--dm-block-text-purple); }
  [data-text-color="pink"]   { color: var(--dm-block-text-pink); }
  [data-text-color="red"]    { color: var(--dm-block-text-red); }
}

// -----------------------------------------------------------------------------
// Swatch row - horizontal strip of color swatches, one per row in the
// BlockContextMenu Colors section (one for text, one for background).
// -----------------------------------------------------------------------------
.dm-block-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.dm-block-color-row-label {
  // Visually hidden but readable by screen readers. The visible row label
  // comes from `.dm-block-context-menu-group-label` ("Colors") above.
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// -----------------------------------------------------------------------------
// Color swatches - used by BlockContextMenu's color picker and available
// for host apps that render their own pickers. One ring per palette entry
// plus a neutral "clear" swatch.
// -----------------------------------------------------------------------------
.dm-block-color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--dm-border-color, #e5e7eb);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--dm-accent-surface, rgba(37, 99, 235, 0.15));
  }

  &:focus-visible,
  // Currently-applied color for the targeted block. BlockContextMenu writes
  // `aria-pressed="true"` on the swatch whose value matches the block's
  // current text/bg color (`null` for "Default"); mirror the inline picker's
  // `.dm-ncp-active` treatment so the active state reads the same in both UIs.
  &[aria-pressed="true"] {
    // OUTSET ring (offset > 0): swatch dot fills almost the entire button
    // surface, so an inset outline would render UNDER the dot. Pulling the
    // ring outward keeps it visible against any palette tint.
    outline: 2px solid var(--dm-accent, #2563eb);
    outline-offset: 1px;
  }

  // Inner tint dot - used for both bg and text variants so rows look uniform.
  &::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
  }

  // "No color" swatch - strike-through slash rendered via gradient.
  &[data-color="null"]::before {
    background:
      linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        var(--dm-muted, #6b7280) calc(50% - 1px),
        var(--dm-muted, #6b7280) calc(50% + 1px),
        transparent calc(50% + 1px)
      );
    border: 1px solid var(--dm-border-color, #e5e7eb);
  }
}

// Background swatches render the tint as the dot interior.
.dm-block-color-swatch--bg {
  &[data-color="gray"]::before   { background: var(--dm-block-bg-gray); }
  &[data-color="brown"]::before  { background: var(--dm-block-bg-brown); }
  &[data-color="orange"]::before { background: var(--dm-block-bg-orange); }
  &[data-color="yellow"]::before { background: var(--dm-block-bg-yellow); }
  &[data-color="green"]::before  { background: var(--dm-block-bg-green); }
  &[data-color="blue"]::before   { background: var(--dm-block-bg-blue); }
  &[data-color="purple"]::before { background: var(--dm-block-bg-purple); }
  &[data-color="pink"]::before   { background: var(--dm-block-bg-pink); }
  &[data-color="red"]::before    { background: var(--dm-block-bg-red); }
}

// Text swatches render a capital "A" in the named color on a neutral dot
// background, mirroring Notion's convention so users can tell at a glance
// which row sets text vs background. The "A" comes from the `content`
// pseudo-element; the dot background stays neutral (var(--dm-surface)) so
// the colored glyph is readable regardless of palette tint.
.dm-block-color-swatch--text {
  &::before {
    content: 'A';
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dm-editor-font-family, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--dm-surface, #f8f9fa);
    color: var(--dm-editor-text, #333);
  }

  // "Default" text swatch keeps its "A" and gets the diagonal slash from the
  // base `[data-color="null"]::before` rule painted as the dot's background.
  // The "A" glyph sits on top of the slash so users see "letterform crossed
  // out" rather than an empty stroke (mirrors the inline-picker treatment).

  &[data-color="gray"]::before   { color: var(--dm-block-text-gray); }
  &[data-color="brown"]::before  { color: var(--dm-block-text-brown); }
  &[data-color="orange"]::before { color: var(--dm-block-text-orange); }
  &[data-color="yellow"]::before { color: var(--dm-block-text-yellow); }
  &[data-color="green"]::before  { color: var(--dm-block-text-green); }
  &[data-color="blue"]::before   { color: var(--dm-block-text-blue); }
  &[data-color="purple"]::before { color: var(--dm-block-text-purple); }
  &[data-color="pink"]::before   { color: var(--dm-block-text-pink); }
  &[data-color="red"]::before    { color: var(--dm-block-text-red); }
}