@import url("/assets/lexxy-overrides/lexxy-variables-498ad74f.css");

.lexxy-content__table-cell--header p {
  font-weight: var(--font-weight--medium)
}

:where(lexxy-editor) {
  --lexxy-editor-padding: var(--input-padding);

  background-color: var(--lexxy-color-canvas);
  border: none;
  border-radius: 0;
  overflow: visible;
}

:where(.lexxy-editor__content) {
  padding: var(--lexxy-editor-padding);
  position: relative;

  :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption) {
    text-wrap: wrap;
    text-wrap: stable;
  }

  table {
    border-block-start: var(--border--light);
  }

  .attachment-gallery {
    --lexxy-attachment-gallery-columns: 2;
  }

  .attachment {
    background-color: var(--lexxy-color-canvas);

    progress {
      margin: auto;
      max-inline-size: 10ch;
    }

    &.attachment--preview {
      progress {
        inset-block-start: 2ch;
        inset-inline: 0;
        position: absolute;
      }

      lexxy-node-delete-button {
        inset-block-start: 1.5ch;
        inset-inline-end: 1.5ch;
        inset-inline-start: unset;
      }
    }

    &.attachment--error {
      background: color-mix(in oklch, var(--lexxy-color-red) 10%, transparent);
      padding: 2ch;

      &:before {
        align-items: center;
        aspect-ratio: 1;
        background: var(--lexxy-color-red);
        block-size: 1.5lh;
        border-radius: 50%;
        color: white;
        content: "!";
        display: flex;
        justify-content: center;
        margin: auto;
      }

      > div {
        flex: 1;
        font-size: 0.85em;
        padding: 1ch;
        text-align: start;
      }
    }
  }

  .attachment[draggable] {
    cursor: grab;
  }

  .attachment.lexxy-dragging {
    opacity: 0.4;
  }

  [class*="lexxy-drop-target--"] {
    position: relative;
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-before::before,
  .lexxy-drop-target--list-after::after {
    background-color: var(--lexxy-focus-ring-color);
    block-size: 3px;
    border-radius: 1px;
    content: "";
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(0, 0.5ch);
  }

  .lexxy-drop-target--block-before::before,
  .lexxy-drop-target--list-before::before {
    inset-block-start: -2px;
    transform: translate(0, -0.5ch);
  }

  .lexxy-drop-target--block-after::after,
  .lexxy-drop-target--list-after::after {
    inset-block-end: -2px;
  }

  .lexxy-drop-target--gallery-before::before,
  .lexxy-drop-target--gallery-after::after {
    background-color: var(--lexxy-focus-ring-color);
    border-radius: 1px;
    content: "";
    inline-size: 3px;
    inset-block: 0;
    pointer-events: none;
    position: absolute;
  }

  .lexxy-drop-target--gallery-before::before {
    inset-inline-start: -4px;
  }

  .lexxy-drop-target--gallery-after::after {
    inset-inline-end: -4px;
  }

  .attachment--file {
    lexxy-node-delete-button {
      inset-block-start: 50%;
      inset-inline-end: 1ch;
      inset-inline-start: unset;
      transform: translate(0, -50%);
    }
  }
}

lexxy-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: transparent;
}

:where(lexxy-toolbar) {
  --lexxy-toolbar-icon-size: 1rem;
  border-block-end: 1px solid var(--color--border-low-contrast);
  color: currentColor;
  display: flex;
  font-size: inherit;
  gap: var(--lexxy-toolbar-gap);
  max-inline-size: 100%;
  padding: 2px;
  position: relative;

  &[data-attachments="false"] button[name="image"],
  &[data-attachments="false"] button[name="file"],
  &[data-upload="file"] button[name="image"],
  &[data-upload="image"] button[name="file"] {
    display: none;
  }
}

:where(lexxy-editor.sandbox-basic-rich-text-editor) {
  :where(lexxy-toolbar) {
    button[name="quote"],
    button[name="code"],
    button[name="table"],
    button[name="divider"],
    details:has(> summary[name="format"]),
    details:has(> summary[name="highlight"]) {
      display: none;
    }
  }
}

:where(.lexxy-editor--empty) {
  .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
    inset-block-start: var(--lexxy-editor-padding);
    inset-inline-start: var(--lexxy-editor-padding);
  }
}

:where(lexxy-toolbar) > .lexxy-editor__toolbar-dropdown {
  flex: 0 0 var(--lexxy-toolbar-button-size);
}

:where(lexxy-toolbar) > .lexxy-editor__toolbar-dropdown--chevron {
  flex-basis: auto;
}

:where(lexxy-toolbar) > .lexxy-editor__toolbar-button,
:where(lexxy-toolbar) > .lexxy-editor__toolbar-dropdown > summary.lexxy-editor__toolbar-button {
  aspect-ratio: 1;
  display: grid;
  block-size: var(--lexxy-toolbar-button-size);
  inline-size: var(--lexxy-toolbar-button-size);
  place-items: center;
  padding: 0;
}

:where(lexxy-toolbar) > .lexxy-editor__toolbar-dropdown--chevron > summary.lexxy-editor__toolbar-button {
  aspect-ratio: unset;
  gap: 0.5ch;
  grid-template-columns: auto auto;
  inline-size: auto;
  min-inline-size: var(--lexxy-toolbar-button-size);
  padding-inline: 0.75ch;

  &:after {
    block-size: 0.3ch;
    border-block-end: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    content: "";
    display: inline-block;
    inline-size: 0.3ch;
    transform: rotate(45deg);
  }
}

:where(lexxy-toolbar) .lexxy-editor__toolbar-button {
  background-color: transparent;
  color: currentColor;

  &[aria-disabled="true"] {
    cursor: default;
    opacity: 1;
  }

  svg {
    color: var(--color--aa-text);
  }

  &:is(:active):not([aria-disabled="true"]),
  &[aria-pressed="true"] {
    background-color: transparent;

    svg {
      color: var(--color--aaa-text);
    }
  }

  &.lexxy-editor__toolbar-group-end:after {
    background-color: var(--color--border-low-contrast);
  }
}

:where(.lexxy-editor__toolbar-dropdown) {
  &:is([open]) > .lexxy-editor__toolbar-button {
    border-end-end-radius: var(--lexxy-radius);
    border-end-start-radius: var(--lexxy-radius);
  }

  button {
    color: var(--lexxy-color-text);
  }

  .lexxy-editor__toolbar-dropdown-list {
    border-start-start-radius: 0;
    flex-direction: column;
    padding: 0.1ch;

    button {
      align-items: center;
      color: var(--color--aa-text);
      display: flex;
      flex-direction: row;
      gap: 1ch;
      padding: 1ch;
      position: relative;

      span {
        font-size: var(--lexxy-text-small);
      }

      svg {
        block-size: 1lh;
        fill: currentColor;
        inline-size: 1lh;
      }
    }

    .lexxy-editor__toolbar-separator {
      background: var(--color--border-low-contrast);
      block-size: 1px;
      inline-size: 100%;
    }

    [overflowing] & {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      button span {
        display: none;
      }

      .lexxy-editor__toolbar-separator {
        grid-column: 1 / -1;
      }
    }
  }
}

lexxy-link-dropdown {
  gap: 0.5rem;
  padding: 0.5rem;

  form {
    gap: 0.5rem;

    [overflowing] & {
      .lexxy-editor__toolbar-dropdown-actions {
        margin-block-start: 0.5rem;
      }
    }
  }

  .lexxy-editor__toolbar-dropdown-actions {
    gap: 0.5rem;
  }
}

[overflowing] [open] lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
  margin-block-start: 0.5rem;
}

:where(.lexxy-floating-controls) {
  z-index: var(--lexxy-z-popup);
}

:where(.lexxy-prompt-menu) {
  --lexxy-prompt-avatar-size: 24px;
  --lexxy-prompt-offset-x: 0;
  --lexxy-prompt-offset-y: 0;
  --lexxy-prompt-padding: 0.5ch;

  background-color: var(--lexxy-color-canvas);
  border-radius: calc(var(--lexxy-prompt-padding) * 2);
  box-shadow: var(--lexxy-shadow);
  color: var(--lexxy-color-ink);
  font-family: var(--lexxy-font-base);
  font-size: var(--lexxy-text-small);
  inset-block-start: var(--lexxy-prompt-offset-y);
  inset-inline-start: var(--lexxy-prompt-offset-x);
  list-style: none;
  margin: 0;
  max-block-size: 200px;
  max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
  min-inline-size: 20ch;
  overflow: auto;
  padding: var(--lexxy-prompt-padding);
  position: absolute;
  visibility: hidden;
  z-index: var(--lexxy-z-popup);

  &[data-clipped-at-right] {
    inset-inline-end: 1ch;
    inset-inline-start: unset;
    max-inline-size: calc(100% - 1ch);
  }

  &[data-clipped-at-bottom] {
    inset-block-end: var(--lexxy-prompt-offset-y);
    inset-block-start: unset;
  }
}

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

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

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

  &[aria-selected] {
    background-color: var(--lexxy-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;
  }
}

:where(.lexxy-prompt-menu__item--empty) {
  color: var(--lexxy-color-ink-medium);
  padding: var(--lexxy-prompt-padding);
}