.autocomplete__list {
  background-color: var(--color-bg);
  border-radius: 0.8em;
  border: 1px solid var(--color-border);
  max-block-size: 10em;
  max-inline-size: 30ch;
  min-inline-size: 15ch;
  overflow-y: auto;
  position: absolute;
  z-index: 3;
}

.autocomplete__item {
  --avatar-size: 2.5ch;
}

.autocomplete__btn {
  --btn-border-radius: 0;
  --outline-size: 0 !important;

  font-weight: normal !important;

  &:hover,
  &:focus-visible {
    background-color: var(--color-text);
    box-shadow: none !important;
    color: var(--color-text-reversed);
  }
}

[data-trix-content-type~='application/vnd.campfire.mention'] {
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;

  .attachment__toolbar {
    inset-block-start: auto;
    inset-inline-start: 0;
    top: 0;
    z-index: 2;
  }
}

.mention {
  --avatar-size: 2ch;
  --avatar-border-radius: 2em;

  color: inherit;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-inline-start: 2.25ch !important;
  position: relative;
  z-index: 2;

  .avatar {
    aspect-ratio: 1;
    block-size: auto;
    border-radius: var(--avatar-border-radius);
    inline-size: var(--avatar-size);
    inset-block-start: 0.07em;
    inset-inline-start: 0;
    margin: 0;
    overflow: clip;
    position: absolute;
  }

  figcaption {
    display: none;
  }
}

blockquote .attachment--preview {
  --avatar-size: 2.5ch;
  --avatar-border-radius: 2em;

  color: inherit;
  display: inline-flex;
  margin: 0;
  padding-inline-start: 2.75ch !important;
  position: relative;
  z-index: 2;

  img {
    aspect-ratio: 1;
    block-size: auto;
    border-radius: var(--avatar-border-radius);
    inline-size: var(--avatar-size);
    inset-block-start: -1em;
    inset-inline-start: 0;
    margin: 0;
    overflow: clip;
    position: absolute;
  }

  figcaption {
    display: none;
  }
}

suggestion-select {
  .autocompletable__unselect {
    display: none;
  }
}

suggestion-option {
  color: var(--color-text-reversed);

  &[selected]:not(.flashing-off) {
    background: var(--color-text);

    .autocomplete__btn {
      background: var(--color-text);
      color: var(--color-text-reversed);
    }
  }
}

.autocomplete__container {
  --input-padding: 0.3em 0;

  @media (min-width: 100ch) {
    max-inline-size: calc(var(--sidebar-width) - (var(--btn-size) * 2) - (var(--column-gap) * 2) - (var(--sidebar-inline-space) * 2));
  }
}

.autocomplete__input {
  --input-padding: 0.3em !important;

  flex: 1;
  gap: var(--input-padding);
}

.autocomplete__pill {
  --avatar-size: 2ch;

  align-items: center;
  background-color: var(--color-message-bg);
  border-radius: var(--btn-border-radius, 2em);
  color: currentColor;
  display: inline-flex;
  font-family: inherit;
  gap: var(--input-padding);
  justify-content: center;
  line-height: inherit;
  padding: var(--input-padding) calc(var(--input-padding) * 2);
  text-align: start;
}