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

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

  .node--selected:not(.attachment--custom) {
    &:not(:has(img)) {
      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }

    &:has(img) {
      img {
        box-shadow: 0 0 0 var(--hover-size) var(--hover-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);
      --outline-color: var(--card-color, var(--color-link));
    }
  }

  span {
    inline-size: 100%;
  }
}

.lexical-editor__content {
  --outline-size: max(2px, 0.08em);

  margin: var(--block-space-half) 0;
  min-block-size: calc(7lh + var(--block-space));
  outline: 0;
  padding: var(--block-space-half) var(--inline-space);

  * {
    &: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);
    }
  }
}

/* Debug styles by Jorge */
.lexical-prompt-menu {
  background: white;
  border: 2px solid black;
  list-style: none;

  margin: 0;
  padding: 0;
  min-height: 100px;
  min-width: 300px;

  visibility: hidden;

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

  [aria-selected] {
    border: 1px solid red;
  }

  .lexical-prompt-menu__item {
    cursor: pointer;
  }
}

.attachment--custom.node--selected {
  box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
}