.inline-text-field, .inline-rich-text-area {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  inline-size: 100%;
  outline: none;
  transition: background-color 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  &:focus,
  &:focus-within {
    background: rgba(0, 0, 0, 0.1);
    cursor: text;
  }
}

lexxy-editor.inline-rich-text-area {
  --lexxy-editor-padding: 0;
  --lexxy-color-canvas: transparent;
  --lexxy-editor-rows: auto;

  .lexxy-editor__toolbar-dropdown-content,
  .lexxy-editor__toolbar-overflow-menu {
    --lexxy-color-canvas: white;
  }

  lexxy-toolbar {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: white;
    border: 1px solid var(--lexxy-color-ink-lighter);
    border-block-end: none;
    border-radius: var(--lexxy-radius) var(--lexxy-radius) 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    inline-size: max-content;
    max-inline-size: none;
    min-inline-size: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  &:focus-within lexxy-toolbar {
    display: flex;
  }
}