fizzy/app/assets/stylesheets/actiontext-lexical.css

@layer components {
  lexical-editor {
    display: block;
    position: relative;
    overflow: visible;

    figure.node--selected {
      &:not(:has(img)) {
        box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
      }

      &:has(img) {
        img {
          box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
        }
      }
    }

    &.lexical-editor--empty {
      .lexical-editor__content::before {
        content: attr(placeholder);
        color: currentColor;
        cursor: text;
        opacity: 0.66;
        pointer-events: none;
        position: absolute;
        white-space: pre-line;
      }
    }
  }

  .lexical-dialog-actions {
    display: flex;
    font-size: var(--text-x-small);
    flex: 1 1 0%;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);

    .btn {
      --radius: 0.3em;

      inline-size: 100%;
      justify-content: center;

      &:is([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%;
    }
  }

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

    * {
      &:first-child {
        margin-block-start: 0;
      }

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

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

  lexical-toolbar {
    background-color: inherit;
    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;

    dialog {
      background-color: var(--color-canvas);
      border: 1px solid var(--color-ink-lighter);
      border-radius: 0.5em;
      box-shadow: var(--shadow);
      color: var(--color-ink);
      padding: var(--block-space) calc(var(--inline-space) * 1.5);
      position: absolute;
      z-index: 1;

      .input[type="url"] {
        min-inline-size: 30ch;
      }
    }

    > button {
      aspect-ratio: 4/3.5;
      appearance: none;
      background-color: transparent;
      block-size: 2em;
      border: none;
      border-radius: 0.2em;
      color: currentColor;
      cursor: pointer;
      display: grid;
      font-size: inherit;
      inline-size: auto;
      place-items: center;
      transition: background-color 300ms ease;

      svg {
        -webkit-touch-callout: none;
        block-size: 0.85em;
        fill: currentColor;
        grid-area: 1/1;
        inline-size: auto;
        user-select: none;
      }

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

      &:is(:active) {
        background-color: var(--color-selected);
      }
    }
  }

  /* Prompt
  /* ------------------------------------------------------------------------ */

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

    background-color: var(--color-canvas);
    border-radius: calc(var(--lexical-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;
    min-inline-size: var(--lexical-prompt-min-width);
    padding: var(--lexical-prompt-padding);
    visibility: hidden;
    z-index: var(--z-popup);

    max-height: 200px;
    overflow: scroll;
  }

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

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

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

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

    img {
      block-size: var(--lexical-prompt-avatar-size);
      border-radius: 50%;
      flex-shrink: 0;
      inline-size: var(--lexical-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 */
  .lexical-prompt-menu__item--empty {
    color: var(--color-ink-medium);
    padding: var(--lexical-prompt-padding);
  }
}