@layer components {
  /* Editor
  /* ------------------------------------------------------------------------ */

  lexxy-editor {
    display: block;
    position: relative;
    overflow: visible;

    figure.node--selected {
      &:has(img) {
        img {
          outline: var(--focus-ring-size) solid var(--focus-ring-color);
          outline-offset: var(--focus-ring-offset);
        }
      }

      &:not(:has(img)) {
        outline: var(--focus-ring-size) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
      }
    }
  }

  /* Lexical uses the `lexxy-editor--empty` class even if you have a list
   * started but haven't added other characters. Here, we hide the placeholder
   * when you click the List button in the toolbar. */
  .lexxy-editor--empty {
    .lexxy-editor__content:not(:has(ul, ol))::before {
      content: attr(placeholder);
      color: currentColor;
      cursor: text;
      opacity: 0.66;
      pointer-events: none;
      position: absolute;
      white-space: pre-line;
    }
  }

  .lexxy-editor__content {
    margin-block-start: var(--block-space-half);
    min-block-size: calc(7lh + var(--block-space));
    outline: 0;

    /* Allow color highlights to show through a bit */
    ::selection {
      background: oklch(var(--lch-blue-light) / 0.5);
    }

    > :last-child {
      margin-block-end: 0;
    }
  }

  .lexxy-editor--drag-over {
    background-color: var(--color-selected);
    border-radius: 4px;
    outline: 2px dashed var(--color-selected-dark);
  }

  .lexxy-code-language-picker {
    --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
    --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");

    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-canvas);
    background-image: var(--caret-icon);
    background-position: center right 0.9em;
    background-repeat: no-repeat;
    background-size: 0.5em;
    border: 1px solid var(--color-ink-light);
    border-radius: 99rem;
    color: var(--color-ink);
    cursor: pointer;
    font-family: var(--font-base);
    font-size: var(--text-x-small);
    font-weight: 500;
    inset-inline-end: 0;
    line-height: 1.15lh;
    margin: 0.75ch 0.75ch 0 0;
    padding-inline: 1.5ch 1.8em;
    text-align: start;

    html[data-theme="dark"] & {
      --caret-icon: var(--caret-icon-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --caret-icon: var(--caret-icon-dark);
      }
    }

    option {
      background-color: var(--color-canvas);
      color: var(--color-ink);
    }
  }

  /* Toolbar
  /* ------------------------------------------------------------------------ */

  lexxy-toolbar {
    --lexxy-toolbar-icon-size: 1em;

    background-color: var(--lexxy-bg-color, var(--color-canvas));
    border-block-end: 1px solid var(--color-ink-light);
    color: currentColor;
    display: flex;
    font-size: inherit;
    margin: 0;
    max-inline-size: 100%;
    padding: 0.2em 0;
    position: relative;
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
  }

  .lexxy-editor__toolbar-button {
    --toolbar-button-size: 44px;

    appearance: none;
    aspect-ratio: 1;
    background-color: transparent;
    block-size: var(--toolbar-button-size);
    border: none;
    border-radius: 0.2em;
    color: currentColor;
    cursor: pointer;
    display: grid;
    font-size: inherit;
    place-items: center;

    &:is(:focus, :hover) {
      background-color: var(--color-ink-lighter);
      box-shadow: none;
    }

    &:is(:active),
    &[aria-pressed="true"] {
      background-color: var(--color-selected);
    }

    svg {
      -webkit-touch-callout: none;
      block-size: var(--lexxy-toolbar-icon-size);
      fill: currentColor;
      grid-area: 1/1;
      inline-size: var(--lexxy-toolbar-icon-size);
      user-select: none;
    }

    @media (min-width: 640px) {
      --toolbar-button-size: 2em;
    }
  }

  .lexxy-editor__toolbar-overflow-menu {
    background-color: var(--color-canvas);
    border-radius: 0.5ch;
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    inset-inline-end: 0;
    padding: 4px;
    position: absolute;
    z-index: 1;
  }

  .lexxy-editor__toolbar-spacer {
    flex: 1;
  }

  /* Dropdowns
  /* ------------------------------------------------------------------------ */

  .lexxy-editor__toolbar-dropdown-content {
    --lexxy-dropdown-padding: 0.75rem;
    --lexxy-dropdown-btn-size: 2rem;

    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.5em;
    box-shadow: var(--shadow);
    color: var(--color-ink);
    font-size: var(--text-small);
    padding: var(--lexxy-dropdown-padding);
    position: absolute;
    z-index: 1;

    button {
      block-size: var(--lexxy-dropdown-btn-size);
    }
  }

  .lexxy-editor__toolbar-dropdown-actions {
    display: flex;
    font-size: var(--text-x-small);
    flex: 1 1 0%;
    gap: var(--lexxy-dropdown-padding);
    margin-block-start: var(--lexxy-dropdown-padding);

    .btn {
      --radius: 99rem;

      inline-size: 100%;
    }

    .btn[type="submit"] {
      --btn-background: var(--card-color, var(--color-link));
      --btn-color: var(--color-ink-inverted);
      --focus-ring-color: var(--card-color, var(--color-link));
    }

    span {
      inline-size: 100%;
    }
  }

  lexxy-link-dropdown {
    .input {
      min-inline-size: 30ch;
    }
  }

  lexxy-highlight-dropdown {
    --gap: 0.5ch;

    [data-button-group] {
      display: flex;
      flex-direction: row;
      gap: var(--gap);

      + & {
        margin-block-start: var(--gap);
      }

      @media (max-width: 639px) {
        flex-wrap: wrap;
      }
    }
  }

  .lexxy-highlight-button {
    --outline-color: oklch(var(--lch-ink-darkest) / 0.2);

    appearance: none;
    background: var(--color-canvas);
    border: none;
    border-radius: 0.5ch;
    color: inherit;
    display: grid;
    font-weight: 500;
    inline-size: var(--lexxy-dropdown-btn-size);
    place-content: center;
    position: relative;
    outline: none;

    &:after {
      content: "Aa";
    }

    &:hover,
    &[aria-pressed="true"] {
      box-shadow: 0 0 0 1px var(--color-canvas), 0 0 0 3px var(--outline-color);
    }

    &[aria-pressed="true"] {
      --outline-color: var(--color-link);

      &:after {
        content: "✓";
      }
    }
  }

  .lexxy-editor__toolbar-dropdown-reset {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-light);
    border-radius: 99rem;
    inline-size: 100%;
    margin-block-start: var(--lexxy-dropdown-padding);

    &[disabled] {
      display: none;
    }
  }

  /* Prompt ,enu (@mentions, etc.)
  /* ------------------------------------------------------------------------ */

  .lexxy-prompt-menu {
    --lexxy-prompt-avatar-size: 24px;
    --lexxy-prompt-min-width: 20ch;
    --lexxy-prompt-padding: 0.5ch;

    background-color: var(--color-canvas);
    border-radius: calc(var(--lexxy-prompt-padding) * 2);
    box-shadow: var(--shadow);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    list-style: none;
    margin: 0;
    max-height: 200px;
    min-inline-size: var(--lexxy-prompt-min-width);
    overflow: auto;
    padding: var(--lexxy-prompt-padding);
    visibility: hidden;
    z-index: var(--z-popup);
  }

  .lexxy-prompt-menu--visible {
    visibility: initial;
  }

  .lexxy-prompt-menu__item {
    align-items: center;
    border-radius: 0.5ch;
    cursor: pointer;
    display: flex;
    gap: var(--lexxy-prompt-padding);
    padding: var(--lexxy-prompt-padding);
    white-space: nowrap;

    &:hover {
      background-color: var(--color-ink-lightest);
    }

    &[aria-selected] {
      background-color: var(--color-selected);
    }

    img {
      block-size: var(--lexxy-prompt-avatar-size);
      border-radius: 50%;
      flex-shrink: 0;
      inline-size: var(--lexxy-prompt-avatar-size);
      margin: 0;
    }

    + & {
      margin-top: 2px;
    }

    code {
      background-color: var(--color-terminal-text-light);
      border-radius: 0.25ch;
      font-size: 0.95em;
      padding-inline: 0.5ch;
    }
  }

  /* Empty state */
  .lexxy-prompt-menu__item--empty {
    color: var(--color-ink-medium);
    padding: var(--lexxy-prompt-padding);
  }
}