@import url("/assets/lexxy-variables-3fef4323.css") layer(base);
@import url("/assets/lexxy-content-0ff2f961.css") layer(base);
@import url("/assets/lexxy-editor-5b842411.css") layer(base);

@layer components {
  :root {
    --lexxy-color-ink: var(--color-ink);
    --lexxy-color-ink-medium: var(--color-muted);
    --lexxy-color-ink-light: var(--color-muted);
    --lexxy-color-ink-lighter: var(--color-rule);
    --lexxy-color-ink-lightest: var(--color-shade);
    --lexxy-color-ink-inverted: var(--color-page);

    --lexxy-color-accent-dark: var(--color-accent-strong);
    --lexxy-color-accent-medium: var(--color-accent);
    --lexxy-color-accent-light: var(--color-accent-wash);
    --lexxy-color-accent-lightest: var(--color-accent-wash);

    --lexxy-color-canvas: var(--color-page);
    --lexxy-font-base: var(--font-sans);
    --lexxy-font-mono: var(--font-mono);
    --lexxy-radius: var(--radius-tight);
  }
}

@layer components {
  lexxy-toolbar {
    &[data-strikethrough="false"] button[name="strikethrough"],
    &[data-highlight="false"] button[name="highlight"],
    &[data-quote="false"] button[name="quote"],
    &[data-code="false"] button[name="code"],
    &[data-table="false"] button[name="table"],
    &[data-divider="false"] button[name="divider"] {
      display: none;
    }
  }
}