/* The Markdown editor of the content forms (frontend/src/editor.ts): a
   toolbar above the text area, and the preview in its place. */

@layer components {
  .editor__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-end: var(--space-2);

    &[hidden] {
      display: none;
    }
  }

  .editor__button,
  .editor__tab {
    min-block-size: 2.25rem;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;

    &:hover:not(:disabled) {
      background: var(--yellow);
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  }

  .editor__button--bold {
    font-weight: 700;
  }

  .editor__button--italic {
    font-style: italic;
  }

  .editor__tabs {
    display: flex;
    gap: var(--space-1);
    margin-inline-start: auto;
  }

  .editor__tab[aria-pressed="true"] {
    color: var(--color-on-accent);
    background: var(--color-accent);
  }

  .editor__preview {
    min-block-size: 12rem;
    padding: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-control);
    text-align: start;
    background: var(--paper);
  }

  .editor__preview img {
    max-inline-size: 100%;
    block-size: auto;
  }

  .editor__message {
    color: var(--color-text-muted);
  }

  .editor__status:empty {
    display: none;
  }
}