@import url("/assets/lexxy-variables-3fef4323.css") layer(base);
@import url("/assets/lexxy-editor-2d5c7ebe.css") layer(base);

:root {
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-border-darker);
  --lexxy-color-ink-light: var(--color-border-darker);
  --lexxy-color-ink-lighter: var(--color-border-dark);
  --lexxy-color-ink-lightest: var(--color-border);
  --lexxy-color-ink-inverted: var(--color-text-reversed);
  --lexxy-color-canvas: var(--color-bg);
  --lexxy-color-link: var(--color-link);
  --lexxy-color-red: var(--color-negative);
  --lexxy-color-selected: var(--color-selected);
  --lexxy-color-selected-dark: var(--color-selected-dark);
  --lexxy-color-selected-hover: var(--color-selected-dark);
  --lexxy-focus-ring-color: var(--color-selected-dark);
  --lexxy-radius: 0.3em;
  --lexxy-toolbar-button-size: 1.75rem;
}

lexxy-editor {
  --lexxy-editor-padding: 0;
  --lexxy-editor-rows: 24px;

  /* The gem's container-type: inline-size zeroes the editor's intrinsic width,
     collapsing the fit-content message bubble around the edit form */
  container-type: normal;
  display: flex;
  flex-direction: column;
}

/* Toolbar markup is chalet's own slimmed-down template: app/views/rich_text/_toolbar.html.erb */
lexxy-toolbar {
  border: 0;
  display: none;
  padding: 0;

  /* Dropdown panels open upward so they stay in the viewport, like trix dialogs did */
  [data-dropdown-panel] {
    inset-block-start: auto;
    inset-block-end: 100%;
    margin-block-end: 0.5em;
  }

  .lexxy-editor__toolbar-button {
    &[aria-pressed="true"],
    &[aria-expanded="true"] {
      background-color: var(--color-text);
      color: var(--color-text-reversed);
    }

    /* trix showed button groups without separators */
    &.lexxy-editor__toolbar-group-end {
      margin-inline-end: 0;

      &:after {
        display: none;
      }
    }
  }
}

/* Link dialog: lexxy's default panel with chalet colors, fizzy-style pill buttons */
lexxy-link-dropdown [data-dropdown-panel] {
  --lexxy-toolbar-spacing: 1.5ch;

  input[type="url"] {
    flex: 1;
    inline-size: auto;
    min-inline-size: 0; /* chalet's .input forces 100%, which wraps the buttons */
  }

  .lexxy-editor__toolbar-dropdown-actions .lexxy-editor__toolbar-button {
    border-radius: 99rem;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(0.9);
      }
    }

    &[value="link"] {
      background-color: var(--color-link);
      color: var(--color-text-reversed);

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

    &[value="unlink"] {
      border: 1px solid var(--color-border-darker);
    }
  }
}

/* Lexical renders combined text formats as theme classes inside the editor */
.lexxy-content__bold {
  font-weight: bold;
}

.lexxy-content__italic {
  font-style: italic;
}

.lexxy-content__strikethrough {
  text-decoration: line-through;
}

.lexxy-content__underline {
  text-decoration: underline;
}

.lexxy-content__strikethrough.lexxy-content__underline {
  text-decoration: line-through underline;
}

/* Mention chips in the editor */
action-text-attachment[content-type~="application/vnd.chalet.mention"] {
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Unfurled link previews in the editor */
action-text-attachment[content-type~="application/vnd.actiontext.opengraph-embed"] {
  * {
    text-decoration: none;
  }

  lexxy-editor & {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
  }
}

/* Mention picker, skinned like the old autocomplete popup */
.lexxy-prompt-menu {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.8em;
  box-shadow: none;
  font-size: inherit;
  max-block-size: 10em;
  max-inline-size: 30ch;
  min-inline-size: 15ch;
  padding: 0;
  z-index: 3;
}

.lexxy-prompt-menu__item {
  --avatar-size: 2.5ch;

  border-radius: 0;
  font-weight: normal;
  gap: var(--inline-space-half);
  padding: 0.4em 0.6em;

  + .lexxy-prompt-menu__item {
    margin-top: 0;
  }

  &[aria-selected],
  &:hover {
    background-color: var(--color-text);
    color: var(--color-text-reversed);
  }
}