@import "./utils";
@import "./constants";

/*************************************
 *            Suggestions            *
 *************************************/

.lb-lexical-suggestions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*************************************
 *          Elevation lists          *
 *************************************/

.lb-lexical-suggestions {
  padding: $lb-elevation-padding;
  animation-duration: var(--lb-transition-duration);
  animation-timing-function: var(--lb-transition-easing);
  will-change: transform, opacity;
}

.lb-lexical-suggestions-list-item {
  display: flex;
  align-items: center;
  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-padding);
  color: var(--lb-foreground-secondary);
  outline: none;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition-property: background, color, opacity;
  scroll-margin-block: $lb-elevation-padding;
}

:is(.lb-lexical-suggestions-list-item) {
  &:where(
    [data-highlighted]:not([data-highlighted="false"]),
    [data-selected]:not([data-selected="false"])
  ) {
    background: var(--lb-foreground-subtle);
    transition-duration: calc(var(--lb-transition-duration) / 2);
  }

  &:where(:disabled, [data-disabled]:not([data-disabled="false"])) {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/*************************************
 *        Floating animations        *
 *************************************/

:is(.lb-lexical-suggestions) {
  &:where([data-side="top"]) {
    animation-name: lb-animation-slide-up;
  }

  &:where([data-side="bottom"]) {
    animation-name: lb-animation-slide-down;
  }

  &:where([data-state="closed"]) {
    animation-name: lb-animation-disappear;
  }
}

@media (prefers-reduced-motion) {
  .lb-lexical-suggestions:where(:not([data-state="closed"])) {
    animation-name: lb-animation-appear;
  }
}

/*************************************
 *              Mention              *
 *************************************/

.lb-lexical-mention {
  padding: 0.1em 0.3em;
  border-radius: calc(0.675 * var(--lb-radius));
  background: var(--lb-accent-subtle);
  color: var(--lb-accent);
  box-decoration-break: clone;
  font-weight: 500;

  @include invisible-selection;

  &:where([data-selected]:not([data-selected="false"])) {
    background: var(--lb-accent);
    color: var(--lb-accent-foreground);
  }
}

/*************************************
 *        Mention suggestions        *
 *************************************/

.lb-lexical-mention-suggestions {
  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;
}

.lb-lexical-mention-suggestion {
  padding-inline-start: calc(0.5 * var(--lb-spacing));
  padding-inline-end: calc(0.625 * var(--lb-spacing));
  padding-block: calc(0.25 * var(--lb-spacing));
}

.lb-lexical-mention-suggestion-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);
  block-size: var(--lb-lexical-mention-suggestion-avatar-size);
  margin-inline-start: calc(-0.125 * var(--lb-spacing));
  margin-inline-end: calc(0.5 * var(--lb-spacing));
  margin-block: calc(0.125 * var(--lb-spacing));

  &:where(.lb-avatar) {
    background: var(--lb-foreground-subtle);
    color: var(--lb-foreground-moderate);
  }

  :where(.lb-icon) {
    color: var(--lb-foreground-moderate);
  }
}

.lb-lexical-mention-suggestion-group-description {
  align-self: baseline;
  margin-inline-start: calc(0.625 * var(--lb-spacing));
  color: var(--lb-foreground-tertiary);
  font-size: 0.875em;
}

/*************************************
 *            Thread mark            *
 *************************************/

.lb-lexical-thread-mark {
  background: var(--lb-accent-subtle);
  color: var(--lb-foreground);
  outline: none;
  font-weight: 500;
  transition-property: color, text-decoration-color;
  text-decoration-line: underline;
  text-decoration-color: var(--lb-foreground-moderate);
  text-underline-offset: 2px;

  &:where([data-state="active"]) {
    color: var(--lb-accent);
    text-decoration-color: var(--lb-accent-moderate);
  }
}

/*************************************
 *          Anchored threads         *
 *************************************/

.lb-lexical-anchored-threads {
  --lb-lexical-anchored-threads-gap: 1.25rem;
  --lb-lexical-anchored-threads-active-thread-offset: -0.75rem;
}

.lb-lexical-anchored-threads-thread-container {
  transition-duration: calc(var(--lb-transition-duration) * 2);
  transition-property: transform;
}

@media (prefers-reduced-motion) {
  .lb-lexical-anchored-threads-thread-container {
    transition-duration: 0s;
  }
}

.lb-lexical-anchored-threads-thread {
  position: relative;
  overflow: hidden;
  border-radius: var(--lb-radius);
  background: var(--lb-dynamic-background);
  box-shadow: $lb-lexical-anchored-threads-shadow;
  transition-property: background, box-shadow;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: var(--lb-inset-shadow);
    pointer-events: none;
  }

  &:where([data-state="active"]) {
    box-shadow: $lb-lexical-anchored-threads-active-shadow;
  }
}

/*************************************
 *        Floating components        *
 *************************************/

.lb-lexical-floating {
  --lb-lexical-floating-size: 350px;
}

/*************************************
 *         Floating threads          *
 *************************************/

.lb-lexical-floating-threads-thread {
  inline-size: var(--lb-lexical-floating-size);

  &:where(:not(:last-of-type)) {
    border-block-end: 1px solid var(--lb-foreground-subtle);
  }
}

/*************************************
 *         Floating composer         *
 *************************************/

.lb-lexical-floating-composer {
  inline-size: var(--lb-lexical-floating-size);
}

/*************************************
 *              Toolbar              *
 *************************************/

.lb-lexical-toolbar {
  --lb-lexical-toolbar-spacing: calc(0.25 * var(--lb-spacing));

  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--lb-lexical-toolbar-spacing);
  align-items: center;
  padding: var(--lb-lexical-toolbar-spacing);
  background: var(--lb-background);
}

.lb-lexical-floating-toolbar {
  --lb-lexical-toolbar-spacing: $lb-elevation-padding;
}

.lb-lexical-toolbar-separator {
  position: relative;
  align-self: stretch;
  inline-size: 1px;
  margin-inline: 1px;
  pointer-events: none;

  &::before {
    content: "";
    position: absolute;
    inset: 10% 0;
    background: var(--lb-foreground-subtle);
  }
}

/*************************************
 *       Collaboration cursors       *
 *************************************/

.lb-lexical-cursors {
  z-index: 1;
  isolation: isolate;

  /* stylelint-disable-next-line selector-max-specificity */
  span[style*="font-family: Arial"] {
    /* Lexical hardcodes the font family to Arial, we force it back to inherit */
    font-family: inherit !important;
  }
}