@use 'sass:color';
@use 'variables' as *;
@use 'mixins' as *;

.app-body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.animated-number {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.inline-alert {
  color: var(--color-text-success);
  font-weight: 400;

  .no-reduce-motion & {
    transition: opacity 200ms ease;
  }
}

.link-button {
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-brand);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-decoration: none;

  &--destructive {
    color: var(--color-text-error);
  }

  &:not(:disabled):hover,
  &:not(:disabled):active {
    text-decoration: underline;
  }

  &:disabled {
    color: var(--color-text-primary);
    cursor: default;
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
  }
}

.help-button {
  color: var(--color-text-on-brand-base);
  background: var(--color-bg-brand-base);
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active,
  &:focus,
  &:hover {
    background: var(--color-bg-brand-base-hover);
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
  }

  .icon {
    width: 14px;
    height: 14px;
  }
}

.button {
  background-color: var(--color-bg-brand-base);
  border: 10px none;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--color-text-on-brand-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 22px;
  overflow: hidden;
  padding: 7px 18px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;

  &:active,
  &:focus,
  &:hover {
    background-color: var(--color-bg-brand-base-hover);
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
    outline-offset: 2px;
  }

  &--compact {
    font-size: 14px;
    line-height: normal;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
  }

  &--dangerous {
    background-color: var(--color-bg-error-base);
    color: var(--color-text-on-error-base);

    &:active,
    &:focus,
    &:hover {
      background-color: var(--color-bg-error-base-hover);
      transition: none;
    }
  }

  &--destructive {
    &:active,
    &:focus,
    &:hover {
      color: var(--color-text-on-error-base);
      background-color: var(--color-bg-error-base);
      transition: none;
    }
  }

  &:disabled,
  &.disabled {
    color: var(--color-text-on-disabled);
    background-color: var(--color-bg-disabled);
    cursor: not-allowed;
  }

  &.copyable {
    transition: background 300ms linear;
  }

  &.copied {
    color: var(--color-text-on-success-base);
    background-color: var(--color-bg-success-base);
    transition: none;
  }

  &.button-secondary {
    color: var(--color-text-brand);
    background: transparent;
    padding: 6px 17px;
    border: 1px solid var(--color-border-brand);

    &:active,
    &:focus,
    &:hover {
      border-color: var(--color-border-brand);
      color: var(--color-text-brand);
      background-color: transparent;
      text-decoration: none;
    }

    &.button--destructive {
      &:active,
      &:focus,
      &:hover {
        border-color: var(--color-border-error);
        color: var(--color-text-error);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--color-text-disabled);
      color: var(--color-text-disabled);

      &:active,
      &:focus,
      &:hover {
        border-color: var(--color-text-disabled);
        color: var(--color-text-disabled);
      }
    }
  }

  &.button--plain {
    color: var(--color-text-brand);
    background: transparent;
    padding: 6px;

    // The button has no outline, so we use negative margin to
    // visually align its label with its surroundings while maintaining
    // a generous click target
    margin-inline: -6px;
    border: 1px solid transparent;

    &:active,
    &:focus,
    &:hover {
      border-color: transparent;
      color: var(--color-text-brand-soft);
      background-color: transparent;
      text-decoration: none;
    }

    &:disabled,
    &.disabled {
      opacity: 0.7;
      border-color: transparent;
      color: var(--color-text-disabled);

      &:active,
      &:focus,
      &:hover {
        border-color: transparent;
        color: var(--color-text-disabled);
      }
    }
  }

  &.button--block {
    width: 100%;
  }

  &.loading {
    cursor: wait;

    .button__label-wrapper {
      // Hide the label only visually, so that
      // it keeps its layout and accessibility
      opacity: 0;
    }

    .loading-indicator {
      position: absolute;
      inset: 0;
    }
  }

  .icon {
    width: 18px;
    height: 18px;
  }
}

.column__wrapper {
  display: flex;
  flex: 1 1 auto;
  position: relative;
}

.icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;

  &:not(.icon--no-fill) path {
    fill: currentColor;
  }
}

.icon-button {
  --default-icon-color: var(--color-text-secondary);
  --default-bg-color: transparent;
  --hover-icon-color: var(--color-text-primary);
  --hover-bg-color: var(--color-bg-brand-softest);
  --focus-outline-color: var(--color-border-brand);

  display: inline-flex;
  color: var(--default-icon-color);
  border: 0;
  padding: 0;
  border-radius: 4px;
  background: var(--default-bg-color);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 4px;
  flex: 0 0 auto;

  a {
    display: flex;
    color: inherit;
    text-decoration: none;
  }

  &:hover,
  &:active,
  &:focus-visible {
    color: var(--hover-icon-color);
    background-color: var(--hover-bg-color);
  }

  &:focus-visible {
    outline: 2px solid var(--focus-outline-color);
  }

  &.disabled {
    color: var(--color-text-disabled);
    background-color: var(--default-bg-color);
    cursor: default;
  }

  &.inverted {
    --default-icon-color: var(--color-text-primary);
    --hover-icon-color: var(--color-text-secondary);
  }

  &.active {
    --default-icon-color: var(--color-text-brand);
    --hover-icon-color: var(--color-text-brand);
    --hover-bg-color: transparent;
  }

  &.overlayed {
    --default-icon-color: rgb(from var(--color-text-on-media) r g b / 70%);
    --default-bg-color: var(--color-bg-media);
    --hover-icon-color: var(--color-text-brand);
    --hover-bg-color: rgb(from var(--color-bg-media-base) r g b / 90%);

    box-sizing: content-box;
    backdrop-filter: $backdrop-blur-filter;
    border-radius: 4px;
    padding: 2px;
  }

  &--with-counter {
    padding-inline-end: 4px;
  }

  &__counter {
    display: block;
    width: auto;
    font-size: 12px;
    font-weight: 500;
  }

  &.copyable {
    transition: all 300ms linear;
  }

  &.copied {
    color: var(--color-text-success);
    transition: none;
    background-color: var(--color-bg-success-softest);
    border-color: var(--color-border-success-soft);
  }
}

body > [data-popper-placement] {
  z-index: 9999;
}

.invisible {
  font-size: 0;
  line-height: 0;
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;

  img,
  svg {
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
}

.ellipsis {
  &::after {
    content: '…';
  }
}

.autosuggest-textarea {
  &__textarea {
    background: transparent;
    min-height: 100px;
    padding-bottom: 0;
    resize: none;
    scrollbar-color: initial;

    &::-webkit-scrollbar {
      all: unset;
    }
  }

  &__suggestions {
    box-shadow: var(--dropdown-shadow);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 0 0 4px 4px;
    color: var(--color-text-primary);
    font-size: 14px;
    padding: 0;

    &__item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 48px;
      cursor: pointer;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.25px;
      color: var(--color-text-primary);

      &:last-child {
        border-radius: 0 0 4px 4px;
      }

      &:hover,
      &:focus,
      &:active {
        background: var(--color-bg-secondary);

        .autosuggest-account .display-name__account {
          color: inherit;
        }
      }

      &.selected {
        color: var(--color-text-on-brand-base);
        background: var(--color-bg-brand-base);

        .autosuggest-account .display-name__account {
          color: inherit;
        }
      }
    }
  }
}

.autosuggest-account,
.autosuggest-emoji,
.autosuggest-hashtag {
  flex: 1 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autosuggest-account {
  .display-name {
    font-weight: 400;
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
  }

  .display-name__account {
    display: block;
    line-height: 16px;
    font-size: 12px;
    color: var(--color-text-secondary);
  }
}

.autosuggest-hashtag {
  justify-content: space-between;

  &__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__uses {
    flex: 0 0 auto;
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.autosuggest-emoji {
  &__name {
    flex: 1 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.autosuggest-account .account__avatar,
.autosuggest-emoji img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.compose-form {
  display: flex;
  flex-direction: column;
  gap: 32px;

  .layout-multiple-columns &,
  .column & {
    padding: 15px;
  }

  &__highlightable {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    border-radius: 4px;
    border: 1px solid var(--color-border-primary);
    transition: border-color 300ms linear;
    position: relative;
    background: var(--color-bg-secondary);

    &.active {
      transition: none;
      border-color: var(--color-border-brand);
    }
  }

  &__warning {
    color: var(--color-text-primary);
    background: var(--color-bg-warning-softest);
    border: 1px solid var(--color-border-warning-soft);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;

    strong {
      font-weight: 500;

      @each $lang in $cjk-langs {
        &:lang(#{$lang}) {
          font-weight: 700;
        }
      }
    }

    a {
      color: var(--color-text-brand);
      font-weight: 500;
      text-decoration: underline;

      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }
  }

  .spoiler-input {
    display: flex;
    align-items: stretch;

    &__border {
      background: url('@/images/warning-stripes.svg') repeat-y;
      width: 5px;
      flex: 0 0 auto;
    }

    .autosuggest-input {
      flex: 1 1 auto;
      border: 1px solid var(--color-border-primary);
      border-width: 1px 0;
    }
  }

  .autosuggest-textarea__textarea,
  .spoiler-input__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    color: var(--color-text-primary);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    padding: 12px;
    line-height: normal;
    border: 0;
    outline: 0;

    &:focus {
      outline: 0;
    }
  }

  .spoiler-input__input {
    padding: 12px 12px - 5px;
    background: var(--color-bg-brand-softest);
    color: var(--color-text-brand);
  }

  &__dropdowns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
    flex-wrap: wrap;
  }

  &__uploads {
    padding: 0 12px;
    aspect-ratio: 3/2;
    flex-shrink: 0;
  }

  .media-gallery {
    gap: 8px;
  }

  &__upload {
    position: relative;

    &.draggable {
      will-change: transform, opacity;
      touch-action: none;
      cursor: grab;
    }

    &.dragging {
      opacity: 0;
    }

    &.overlay {
      height: 100%;
      border-radius: 8px;
      pointer-events: none;
    }

    &__actions {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 8px;
    }

    &__preview,
    &__visualizer {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      top: 0;
    }

    &__preview {
      border-radius: 6px;
      inset-inline-start: 0;
    }

    &__visualizer {
      padding: 16px;
      box-sizing: border-box;

      .audio-player__visualizer {
        margin: 0 auto;
        display: block;
        height: 100%;
      }

      .icon {
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.75;
        color: var(--player-foreground-color);
        filter: var(--overlay-icon-shadow);
        width: 48px;
        height: 48px;
      }
    }

    &__thumbnail {
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .icon-button {
      flex: 0 0 auto;
      color: var(--color-text-on-media);
      background: var(--color-bg-media);
      backdrop-filter: $backdrop-blur-filter;
      border-radius: 6px;
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
      padding: 4px 8px;
      font-family: inherit;

      .icon {
        width: 15px;
        height: 15px;
      }
    }

    .icon-button.compose-form__upload__delete {
      padding: 2px;
      border-radius: 50%;

      .icon {
        width: 20px;
        height: 20px;
      }
    }

    &__warning {
      position: absolute;
      z-index: 2;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      padding: 8px;

      .icon-button.active {
        color: var(--color-text-on-warning-base);
        background: var(--color-bg-warning-base);
      }
    }
  }

  &__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  &__submit {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 100%;
  }

  &__buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;

    & > div {
      display: flex;
    }

    .icon-button {
      padding: 2px;
    }

    .icon-button .icon {
      width: 20px;
      height: 20px;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    flex-wrap: wrap;

    .icon-button {
      box-sizing: content-box;
      color: var(--color-text-brand);

      &:hover,
      &:focus,
      &:active {
        color: var(--color-text-brand);
      }

      &.disabled {
        color: var(--color-text-disabled);
      }

      &.active {
        background: var(--color-bg-brand-base);
        color: var(--color-text-on-brand-base);
      }
    }
  }

  &__poll {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 8px;

    .poll__option {
      padding: 0 12px;
      gap: 8px;

      &.empty:not(:focus-within) {
        opacity: 0.5;
      }
    }

    .poll__input {
      width: 17px;
      height: 17px;
      border-color: var(--color-text-secondary);
    }

    &__footer {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-inline-start: 37px;
      padding-inline-end: 40px;

      &__sep {
        width: 1px;
        height: 22px;
        background: var(--color-border-primary);
        flex: 0 0 auto;
      }
    }

    &__select {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1 1 auto;
      min-width: 0;

      &__label {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.5px;
        color: var(--color-text-secondary);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &__value {
        flex: 0 0 auto;
        appearance: none;
        background: transparent;
        border: none;
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.1px;
        color: var(--color-text-brand);
        background-color: var(--color-bg-secondary);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .status__quote {
    margin: 0 8px;
    max-height: 220px;

    // Override .status__content .status__content__text.status__content__text--visible
    .status__content__text.status__content__text {
      display: -webkit-box;
    }

    .status__content__text {
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

.dropdown-button {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-brand);
  background: transparent;
  border: 1px solid var(--color-border-brand);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: normal;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:focus-visible {
    outline: var(--outline-focus-default);
    outline-offset: 2px;
  }

  &[disabled] {
    cursor: default;
    color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
  }

  .icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  &__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
  }

  &.active {
    color: var(--color-text-on-brand-base);
    border-color: var(--color-bg-brand-base);
    background: var(--color-bg-brand-base);
  }

  &.warning {
    color: var(--color-text-warning);
    border-color: var(--color-text-warning);

    &.active {
      color: var(--color-text-on-warning-base);
      border-color: var(--color-bg-warning-base);
      background-color: var(--color-bg-warning-base);
    }
  }
}

.character-counter {
  cursor: default;
  font-family: $font-sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-text-secondary);
  flex: 1 0 auto;
  text-align: end;

  &.character-counter--over {
    color: var(--color-text-error);
  }
}

.no-reduce-motion .spoiler-input {
  transition:
    height 0.4s ease,
    opacity 0.4s ease;
}

.sign-in-banner {
  padding: 10px;

  p {
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-primary);
    margin-bottom: 20px;

    strong {
      font-weight: 700;
    }

    a {
      color: var(--color-text-primary);
      text-decoration: none;
      unicode-bidi: isolate;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .button {
    margin-bottom: 10px;
  }
}

.emojione {
  font-size: inherit;
  vertical-align: middle;
  object-fit: contain;
  margin: -0.2ex 0.15em 0.2ex;
  width: 16px;
  height: 16px;

  img {
    width: auto;
  }
}

.status__content--with-action {
  cursor: pointer;
}

.status__content {
  clear: both;
}

.status__content,
.edit-indicator__content,
.reply-indicator__content {
  position: relative;
  overflow-wrap: break-word;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  text-autospace: normal;
  font-size: 15px;
  line-height: 22px;
  padding-top: 2px;
  color: var(--color-text-primary);

  &:focus {
    outline: 0;
  }

  &.status__content--with-spoiler {
    white-space: normal;

    .status__content__text {
      white-space: pre-wrap;
    }
  }

  .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0;
  }

  p {
    margin-bottom: 22px;
    white-space: pre-wrap;
    unicode-bidi: plaintext;

    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    --text-decoration-default: none;
    --text-decoration-hover: underline;

    [data-contrast='high'] & {
      --text-decoration-default: underline;
      --text-decoration-hover: none;
    }

    color: var(--color-text-status-links);
    text-decoration: var(--text-decoration-default);
    unicode-bidi: isolate;

    &:hover,
    &:focus,
    &:active {
      text-decoration: var(--text-decoration-hover);
    }

    &.mention {
      text-decoration: none;

      span {
        text-decoration: var(--text-decoration-default);
      }

      &:hover,
      &:focus,
      &:active {
        span {
          text-decoration: var(--text-decoration-hover);
        }
      }
    }
  }

  a.unhandled-link {
    color: var(--color-text-brand);
  }

  .status__content__text {
    display: none;

    &.status__content__text--visible {
      display: block;
    }
  }
}

.reply-indicator {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 46px max-content;
  gap: 0 10px;

  .detailed-status__display-name {
    margin-bottom: 4px;
  }

  .detailed-status__display-avatar {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: span 1;
  }

  &__main {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: span 2;
  }

  .display-name {
    font-size: 14px;
    line-height: 16px;

    &__account {
      display: none;
    }
  }

  &__line {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-row-end: span 1;
    position: relative;

    &::before {
      display: block;
      content: '';
      position: absolute;
      inset-inline-start: 50%;
      top: 4px;
      transform: translateX(-50%);
      background: var(--color-border-primary);
      width: 2px;
      height: calc(100% + 32px - 8px); // Account for gap to next element
    }
  }

  &__content {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    padding: 0;
    max-height: 4 * 20px;
    overflow: hidden;
    color: var(--color-text-secondary);
  }

  &__attachments {
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;

    .icon {
      width: 18px;
      height: 18px;
    }
  }
}

.edit-indicator {
  border-radius: 4px 4px 0 0;
  background: var(--color-bg-tertiary);
  padding: 12px;
  overflow-y: auto;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  gap: 4px;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__cancel {
    display: flex;

    .icon {
      width: 18px;
      height: 18px;
    }
  }

  &__display-name {
    display: flex;
    gap: 4px;

    a {
      color: inherit;
      text-decoration: none;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }

  &__content {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    padding-top: 0 !important;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-height: 4 * 20px;
    overflow: hidden;

    a {
      color: var(--color-text-brand);
    }
  }

  &__attachments {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 16px;
    opacity: 0.75;
    display: flex;
    align-items: center;
    gap: 4px;

    .icon {
      width: 18px;
      height: 18px;
    }
  }
}

.edit-indicator__content,
.reply-indicator__content {
  .emojione {
    width: 18px;
    height: 18px;
    margin: -3px 0 0;
  }
}

.announcements__content {
  overflow-wrap: break-word;
  overflow-y: auto;

  .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0;
  }

  p {
    margin-bottom: 10px;
    white-space: pre-wrap;

    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    color: var(--color-text-primary);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &.mention {
      &:hover {
        text-decoration: none;

        span {
          text-decoration: underline;
        }
      }
    }

    &.unhandled-link {
      color: var(--color-text-brand);
    }
  }
}

@each $lang in $vertical-lr-langs {
  // writing-mode and width must be applied to a single element. When
  // this element inherits a text direction that is opposite to its own,
  // the start of this element's text is cut off.

  .status:not(.status--is-quote)
    > .status__content
    > .status__content__text:lang(#{$lang}),
  .conversation
    > .conversation__content
    > .status__content
    > .status__content__text:lang(#{$lang}) {
    writing-mode: vertical-lr;
    width: 100%; // detecting overflow
    max-width: calc(100% - mod(100%, 22px)); // avoid cut-offs
    max-height: 209px; // roughly above 500 characters, readable
    overflow-x: hidden; // read more
  }

  .autosuggest-textarea > .autosuggest-textarea__textarea:lang(#{$lang}) {
    writing-mode: vertical-lr;
    min-height: 209px; // writable
    max-height: 209px; // suppress autosizing by react-textarea-autosize
    overflow-x: auto;
    scrollbar-color: unset;
  }

  .detailed-status > .status__content > .status__content__text:lang(#{$lang}) {
    writing-mode: vertical-lr;
    width: 100%; // detecting overflow
    max-height: 50vh;
    overflow-x: auto;
  }
}

.status__content.status__content--collapsed {
  max-height: 22px * 15; // 15 lines is roughly above 500 characters
}

.status__content__read-more-button,
.status__content__translate-button {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-brand);
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 16px;
  text-decoration: none;
  text-wrap: nowrap;

  .status--is-quote & {
    // Needed to prevent buttons from stretching across whole
    // status width in Safari due to line-clamp
    width: min-content;
    white-space: nowrap;
  }

  &:hover,
  &:active {
    text-decoration: underline;
  }

  [data-contrast='high'] & {
    text-decoration: underline;

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  .icon {
    width: 15px;
    height: 15px;
  }
}

.translate-button {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  color: var(--color-text-tertiary);
}

.status__wrapper--filtered {
  color: var(--color-text-tertiary);
  border: 0;
  font-size: inherit;
  text-align: center;
  line-height: inherit;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  border-bottom: 1px solid var(--color-border-primary);

  &__button {
    display: inline;
    color: var(--color-text-brand);
    border: 0;
    background: transparent;
    padding: 0;
    font-size: inherit;
    line-height: inherit;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }
}

.focusable {
  &:focus-visible {
    outline: 2px solid var(--color-border-brand);
    outline-offset: -2px;
    background: var(--color-bg-brand-softest);
  }
}

.status {
  padding: 16px;
  min-height: 54px;
  border-bottom: 1px solid var(--color-border-primary);
  cursor: auto;
  opacity: 1;
  animation: fade 150ms linear;

  @keyframes fade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .content-warning {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .media-gallery,
  .video-player,
  .audio-player,
  .attachment-list,
  .collection-preview {
    margin-top: 14px;
  }

  &--in-thread {
    --thread-margin: calc(46px + 8px);

    border-bottom: 0;

    & > .status__content,
    & > .status__action-bar,
    & > .media-gallery,
    & > div > .video-player,
    & > .audio-player,
    & > .attachment-list,
    & > .picture-in-picture-placeholder,
    & > .more-from-author,
    & > .status-card,
    & > .collection-preview,
    & > .hashtag-bar,
    & > .content-warning,
    & > .filter-warning,
    & > .status__quote {
      margin-inline-start: var(--thread-margin);
      width: calc(100% - var(--thread-margin));
    }

    .more-from-author {
      width: calc(100% - var(--thread-margin) + 2px);
    }

    .status__content__read-more-button {
      margin-inline-start: var(--thread-margin);
    }
  }

  &__action-bar__button-wrapper {
    flex-basis: 0;
    flex-grow: 1;

    &:last-child {
      flex-grow: 0;
    }
  }

  &--first-in-thread {
    border-top: 1px solid var(--color-border-primary);
  }

  &__line {
    --thread-line-color: var(--color-border-primary);

    height: 16px - 4px;
    border-inline-start: 2px solid var(--thread-line-color);
    width: 0;
    position: absolute;
    top: 0;
    inset-inline-start: 16px + ((46px - 2px) * 0.5);

    &--full {
      top: 0;
      height: 100%;

      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 16px - 4px;
        height: 46px + 4px + 4px;
        width: 2px;
        background: var(--thread-line-color);
        inset-inline-start: -2px;
      }
    }

    &--first {
      top: 16px + 46px + 4px;
      height: calc(100% - (16px + 46px + 4px));

      &::before {
        display: none;
      }
    }
  }

  .no-reduce-motion &--highlighted-entry::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg-brand-softest);
    opacity: 0;
    animation: fade 0.7s reverse both 0.3s;
    pointer-events: none;
  }
}

.status__relative-time {
  display: block;
  font-size: 15px;
  line-height: 22px;
  height: 40px;
  order: 2;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

.notification__relative_time {
  color: var(--color-text-tertiary);
  float: right;
  font-size: 14px;
  padding-bottom: 1px;
}

.status__visibility-icon {
  padding: 0 4px;

  .icon {
    width: 1em;
    height: 1em;
    margin-bottom: -2px;
  }
}

.status__display-name {
  color: var(--color-text-secondary);
}

.status__info .status__display-name {
  max-width: 100%;
  display: flex;
  font-size: 15px;
  line-height: 22px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  margin-inline-end: auto;

  .display-name {
    bdi {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__account {
      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.status__quote-cancel {
  align-self: self-start;
  order: 5;
}

.status__info {
  font-size: 15px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.status-check-box__status {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px;

  .detailed-status__display-name {
    color: var(--color-text-tertiary);

    span:not(.account__avatar) {
      display: inline;
    }

    &:hover strong {
      text-decoration: none;
    }
  }

  .media-gallery,
  .audio-player,
  .video-player {
    margin-top: 15px;
    max-width: 250px;
  }

  .status__content {
    padding: 0;
    white-space: normal;
  }

  .media-gallery__item-thumbnail {
    cursor: default;
  }
}

.status__prepend {
  padding: 16px;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--color-text-secondary);

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    .icon {
      width: 16px;
      height: 16px;
    }
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.status__wrapper-direct,
.notification-ungrouped--direct,
.notification-group--direct,
.notification-group--annual-report {
  background: var(--color-bg-brand-softest);

  &:focus {
    background: var(--color-bg-brand-soft);
  }
}

.status__wrapper-direct,
.notification-ungrouped--direct {
  .status__prepend,
  .notification-ungrouped__header {
    color: var(--color-text-brand);
  }
}

.status__action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.detailed-status__action-bar-dropdown {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.detailed-status {
  padding: 16px;
  border-top: 1px solid var(--color-border-primary);

  .status__content {
    font-size: 19px;
    line-height: 24px;

    .emojione {
      width: 24px;
      height: 24px;
      margin: -1px 0 0;
    }
  }

  .media-gallery,
  .video-player,
  .audio-player,
  .collection-preview {
    margin-top: 16px;
  }

  .status__prepend {
    padding: 0;
    margin-bottom: 16px;
  }

  .content-warning {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .logo {
    width: 40px;
    height: 40px;
    color: var(--color-text-tertiary);
  }
}

.embed {
  position: relative;

  &__overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .detailed-status {
    border-top: 0;
  }
}

.scrollable > div:first-child .detailed-status {
  border-top: 0;
}

.detailed-status__meta {
  margin-top: 24px;
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 18px;

  &__line {
    border-bottom: 1px solid var(--color-border-primary);
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  .icon {
    width: 18px;
    height: 18px;
  }

  .animated-number {
    color: var(--color-text-primary);
    font-weight: 500;
  }
}

.detailed-status__action-bar {
  border-top: 1px solid var(--color-border-primary);
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}

.detailed-status__wrapper-direct {
  .detailed-status,
  .detailed-status__action-bar {
    background: var(--color-bg-brand-softest);
  }

  .status__prepend {
    color: var(--color-text-brand);
  }
}

.status__quote {
  // --status-gutter-width is currently only set inside of
  // .notification-ungrouped, so everywhere else this will fall back
  // to the pixel values
  --quote-margin: var(--status-gutter-width);

  position: relative;
  overflow: hidden;
  margin-block-start: 16px;
  margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
  border-radius: 12px;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
}

.status__quote--error {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  min-height: 56px;

  .link-button {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
}

.status__quote-author-button {
  position: relative;
  overflow: hidden;
  display: flex;
  margin-top: 8px;
  padding: 8px 12px;
  align-items: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--color-text-secondary);
  background: var(--color-bg-brand-softest);
  border-radius: 8px;
  cursor: default;
}

.status--is-quote {
  border: none;
  padding: 12px;

  .status__info {
    padding-bottom: 8px;
  }

  .display-name,
  .status__relative-time {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
  }

  .display-name__account {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
  }

  .status__content {
    display: -webkit-box;
    font-size: 14px;
    letter-spacing: 0.25px;
    line-height: 20px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;

    p {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .media-gallery,
  .video-player,
  .audio-player,
  .attachment-list,
  .poll {
    margin-top: 8px;
  }
}

.detailed-status__link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  gap: 6px;
}

.domain {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  align-items: center;
  gap: 8px;

  &__domain-name {
    flex: 1 1 auto;
    color: var(--color-text-primary);
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
  }
}

.account {
  --account-outer-spacing: 16px;
  --account-name-color: var(--color-text-primary);
  --account-name-size: 14px;
  --account-handle-color: var(--color-text-secondary);
  --account-handle-size: 14px;
  --account-bio-color: var(--color-text-secondary);
  --account-bio-size: 14px;

  padding: var(--account-outer-spacing);

  // Using :where keeps specificity low, allowing for existing
  // .account overrides to still apply
  &:where(:not(&--without-border)) {
    border-bottom: 1px solid var(--color-border-primary);
  }

  .account__display-name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--account-handle-color);
    overflow: hidden;
    text-decoration: none;
    font-size: var(--account-handle-size);

    .display-name {
      margin-bottom: 4px;
    }

    .display-name strong {
      display: inline;
      font-size: var(--account-name-size);
      color: var(--account-name-color);
    }
  }

  &--minimal {
    .account__display-name {
      .display-name {
        margin-bottom: 0;
      }

      .display-name strong {
        display: block;
      }
    }
  }

  &__avatar-wrapper .account__avatar {
    @container (width < 360px) {
      width: 35px !important;
      height: 35px !important;
    }
  }

  &__domain-pill {
    display: inline-flex;
    background: var(--color-bg-brand-softest);
    border-radius: 4px;
    border: 0;
    color: var(--color-text-brand);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;

    &.active {
      color: var(--color-text-on-brand-base);
      background: var(--color-bg-brand-base);
    }

    &__popout {
      background: var(--color-bg-primary);
      backdrop-filter: $backdrop-blur-filter;
      border: 1px solid var(--color-border-primary);
      box-shadow: var(--dropdown-shadow);
      max-width: 320px;
      padding: 16px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      font-size: 14px;
      line-height: 20px;
      color: var(--color-text-secondary);

      .link-button {
        display: inline;
        font-size: inherit;
        line-height: inherit;
      }

      &__header {
        display: flex;
        align-items: center;
        gap: 12px;

        &__icon {
          width: 40px;
          height: 40px;
          color: var(--color-text-on-brand-base);
          background: var(--color-bg-brand-base);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          flex-shrink: 0;
        }

        h3 {
          font-size: 17px;
          line-height: 22px;
          color: var(--color-text-primary);
        }
      }

      &__handle {
        border: 2px dashed var(--color-border-on-brand-softer);
        background: var(--color-bg-brand-softest);
        padding: 12px 8px;
        color: var(--color-text-brand);
        border-radius: 4px;

        &__label {
          font-size: 11px;
          line-height: 16px;
          font-weight: 500;
        }

        &__handle {
          overflow: hidden;
          text-overflow: ellipsis;
          user-select: all;
        }
      }

      &__parts {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
        line-height: 16px;

        & > div {
          display: flex;
          align-items: flex-start;
          gap: 12px;
        }

        &__icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          color: var(--color-text-brand);
        }

        h6 {
          font-size: 14px;
          line-height: 20px;
          font-weight: 500;
          color: var(--color-text-primary);
        }
      }
    }
  }

  &__note {
    font-size: var(--account-bio-size);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: 10px;
    color: var(--account-bio-color);

    &--missing {
      color: var(--color-text-tertiary);
    }

    p {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      color: inherit;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }
}

.learn-more__popout {
  gap: 8px;

  &__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  h6 {
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    letter-spacing: 0.1px;
  }

  .link-button {
    font-weight: 500;
  }
}

.account__wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
}

.account__wrapper--with-bio {
  align-items: start;
}

.account__info-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.account__avatar {
  display: block;
  position: relative;
  border-radius: var(--avatar-border-radius);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--avatar-border-radius);
    display: inline-block; // to not show broken images
  }

  &--loading {
    background-color: var(--color-bg-tertiary);
  }

  &--inline {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 5px;
  }

  &-composite {
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    & > div {
      float: left;
      position: relative;
      box-sizing: border-box;
    }

    .account__avatar {
      width: 100% !important;
      height: 100% !important;
    }

    &__label {
      display: block;
      position: absolute;
      top: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      color: var(--color-text-primary);
      text-shadow: 1px 1px 2px
        rgb(from var(--color-shadow-primary) r g b / 100%);
      font-weight: 700;
      font-size: 15px;
    }
  }

  &__counter {
    $height: 16px;
    $h-padding: 5px;

    position: absolute;
    bottom: -3px;
    inset-inline-end: -3px;
    padding-left: $h-padding;
    padding-right: $h-padding;
    height: $height;
    border-radius: $height;
    min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
    line-height: $height + 1px; // to visually center the numbers
    color: var(--color-text-on-brand-base);
    background: var(--color-bg-brand-base);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-bg-primary);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
  }
}

a .account__avatar {
  cursor: pointer;
}

.avatar-group {
  display: flex;

  --avatar-height: 28px;

  &:not(.avatar-group--compact) {
    gap: 8px;
    flex-wrap: wrap;
    height: var(--avatar-height);
    overflow-y: clip;
  }
}

.avatar-group--compact {
  & > :not(:first-child) {
    margin-inline-start: -12px;
  }

  & > :first-child {
    transform: rotate(-4deg);
  }

  & > :nth-child(2) {
    transform: rotate(-2deg);
  }

  .account__avatar {
    box-shadow: 0 0 0 2px var(--color-bg-primary);
  }
}

.account__avatar-overlay {
  position: relative;

  &-overlay {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1;
  }
}

.account__relationship {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account__relationship,
.explore-suggestions-card {
  .icon-button {
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    box-sizing: content-box;
    padding: 5px;

    .icon {
      width: 24px;
      height: 24px;
    }
  }
}

.account-authorize {
  padding: 14px 10px;

  .detailed-status__display-name {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
  }
}

.account-authorize__avatar {
  float: left;
  margin-inline-end: 10px;
}

.status__display-name,
.status__relative-time,
.detailed-status__display-name,
.detailed-status__datetime,
.detailed-status__application,
.detailed-status__link,
.account__display-name {
  text-decoration: none;
}

.status__display-name,
.account__display-name {
  .display-name strong {
    color: var(--color-text-primary);
  }
}

.muted {
  .emojione {
    opacity: 0.5;
  }
}

.status__display-name,
.detailed-status__display-name,
a.account__display-name {
  &:hover .display-name strong {
    text-decoration: underline;
  }
}

.account__display-name .display-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailed-status__application,
.detailed-status__datetime,
.detailed-status__link {
  color: inherit;
}

.detailed-status__display-name {
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 16px;
  overflow: hidden;

  strong,
  span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  strong {
    color: var(--color-text-primary);
  }
}

.muted {
  .status__content,
  .status__content p,
  .status__content a {
    color: var(--color-text-tertiary);
  }

  .status__display-name strong {
    color: var(--color-text-tertiary);
  }

  .status__avatar {
    opacity: 0.5;
  }
}

.notification__report {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  gap: 10px;

  &__avatar {
    flex: 0 0 auto;
  }

  &__details {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-secondary);
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;

    & > div {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    strong {
      font-weight: 500;
    }
  }

  &__actions {
    flex: 0 0 auto;
  }
}

.notification-group--link {
  color: var(--color-text-primary);
  text-decoration: none;

  .notification-group__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-grow: 1;
    font-size: 15px;
    line-height: 22px;

    strong,
    bdi {
      font-weight: 700;
    }

    .link-button {
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
    }
  }
}

.notification__message {
  padding: 16px;
  padding-bottom: 0;
  cursor: default;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;

  .icon {
    color: var(--color-text-brand);
    width: 18px;
    height: 18px;
  }

  .icon-star {
    color: var(--color-text-favourite-highlight);
  }

  > span {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.icon-button.star-icon.active {
  color: var(--color-text-favourite-highlight);
}

.icon-button.bookmark-icon.active {
  color: var(--color-text-bookmark-highlight);
}

.no-reduce-motion .icon-button.star-icon {
  &.activate {
    & > .icon {
      animation: spring-rotate-in 1s linear;
      transform-origin: 50% 52%;
    }
  }

  &.deactivate {
    & > .icon {
      animation: spring-rotate-out 1s linear;
      transform-origin: 50% 52%;
    }
  }
}

.notification__display-name {
  color: inherit;
  font-weight: 500;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.display-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &__account {
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.display-name__html {
  font-weight: 500;
}

.status__relative-time,
.detailed-status__datetime,
.detailed-status__link {
  &:is(a):hover {
    text-decoration: underline;
  }
}

.zoomable-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scrollbar-width: none;
  overflow: hidden;
  user-select: none;

  img {
    max-width: $media-modal-media-max-width;
    max-height: $media-modal-media-max-height;
    width: auto;
    height: auto;
    outline: 1px solid var(--color-border-media);
    outline-offset: -1px;
    border-radius: 8px;
    touch-action: none;
    user-select: none;
  }

  &--zoomed-in {
    z-index: 9999;
    cursor: grab;

    img {
      outline: none;
      border-radius: 0;
    }
  }

  &--dragging {
    cursor: grabbing;
  }

  &--error img {
    visibility: hidden;
  }

  &__preview {
    max-width: $media-modal-media-max-width;
    max-height: $media-modal-media-max-height;
    position: absolute;
    z-index: 1;
    outline: 1px solid var(--color-border-media);
    outline-offset: -1px;
    border-radius: 8px;
    overflow: hidden;

    canvas {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }
  }

  .loading-indicator {
    z-index: 2;
    mix-blend-mode: luminosity;
  }
}

.navigation-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: default;
  gap: 10px;

  .column > & {
    padding: 15px;
  }

  .account {
    border-bottom: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;

    &__display-name {
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;

      .display-name__account {
        font-size: 14px;
        font-weight: 400;
      }
    }
  }

  .icon-button {
    padding: 8px;
    color: var(--color-text-primary);
  }

  .icon-button .icon {
    width: 24px;
    height: 24px;
  }
}

.dropdown-animation {
  animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);

  @keyframes dropdown {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .reduce-motion & {
    animation: none;
  }
}

.dropdown {
  display: inline-block;
}

.dropdown__content {
  display: none;
  position: absolute;
}

.dropdown-menu__separator {
  border-bottom: 1px solid var(--color-border-primary);
  margin: 5px 0;
  height: 0;
}

.dropdown-menu {
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  padding: 4px;
  border-radius: 4px;
  box-shadow: var(--dropdown-shadow);
  z-index: 9999;

  &__text-button {
    display: inline-flex;
    align-items: center;
    color: inherit;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    &:focus-visible {
      outline: 1px dotted;
    }

    &:hover {
      text-decoration: underline;
    }

    .icon {
      width: 15px;
      height: 15px;
    }
  }

  &__container {
    &__header {
      border-bottom: 1px solid var(--color-border-primary);
      padding: 10px 14px;
      padding-bottom: 14px;
      margin-bottom: 4px;
      font-size: 13px;
      line-height: 18px;
      color: var(--color-text-secondary);
    }

    &__list {
      list-style: none;

      &--scrollable {
        max-height: 300px;
        overflow-y: scroll;
      }
    }

    &--loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 45px;
    }
  }

  &.left {
    transform-origin: 100% 50%;
  }

  &.top {
    transform-origin: 50% 100%;
  }

  &.bottom {
    transform-origin: 50% 0;
  }

  &.right {
    transform-origin: 0 50%;
  }
}

.dropdown-menu__item {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  display: block;

  &--dangerous {
    color: var(--color-text-error);
  }

  &--highlighted {
    color: var(--color-text-brand);
  }

  &-content {
    display: flex;
    flex-direction: column;
  }

  &-subtitle {
    color: var(--color-text-tertiary);
    font-weight: 400;
  }

  a,
  button {
    font: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: inherit;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    text-align: inherit;
    border-radius: 4px;

    &:focus,
    &:hover,
    &:active {
      &:where(:not(:disabled, [aria-disabled='true'])) {
        background: var(--color-bg-brand-softest);
        outline: 0;
      }
    }

    &:focus-visible {
      outline: var(--outline-focus-default);
    }
  }

  button:disabled,
  button[aria-disabled='true'] {
    color: var(--color-text-disabled);
    cursor: default;

    &:focus {
      color: var(--color-text-on-disabled);
      background: var(--color-bg-disabled);
      outline: 0;
    }
  }

  button:is(:disabled, [aria-disabled='true']) &-subtitle {
    color: inherit;
  }
}

.reblog-menu-item {
  max-width: 360px;
}

.inline-account {
  display: inline-flex;
  align-items: center;
  vertical-align: top;

  .account__avatar {
    margin-inline-end: 5px;
    border-radius: 50%;
  }

  strong {
    font-weight: 600;
  }
}

.columns-area {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;

  .layout-multiple-columns & {
    overflow-x: auto;

    &.unscrollable {
      overflow-x: hidden;
    }
  }

  &__panels {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-inline: 10px;
    padding-bottom: env(safe-area-inset-bottom);

    &__pane {
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      min-width: 285px;

      &--start {
        justify-content: flex-start;
      }

      &__inner {
        position: fixed;
        width: 285px;
        height: 100%;
      }
    }

    &__main {
      box-sizing: border-box;
      width: 100%;
      flex: 0 1 auto;
      display: flex;
      flex-direction: column;
      contain: inline-size layout paint style;
      container: column / inline-size;
      color: var(--color-text-primary);
      background-color: var(--color-bg-primary);

      @media screen and (min-width: $no-gap-breakpoint) {
        max-width: 600px;
      }
    }
  }
}

.ui__navigation-bar {
  position: fixed;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border-top: 1px solid var(--color-border-primary);
  box-sizing: border-box;

  .layout-multiple-columns & {
    display: none;
  }

  &__items {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 0 16px;

    &.active {
      flex: 1;
      padding: 0;
    }
  }

  &__sign-up {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline-start: 16px;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding-top: 11px;
    padding-bottom: 15px;
    border-top: 4px solid transparent;
    text-decoration: none;
    color: inherit;

    &.active {
      color: var(--color-text-brand);
    }

    &:focus {
      outline: 0;
    }

    &:focus-visible {
      border-top-color: var(--color-border-brand);
      border-radius: 0;
    }
  }
}

.tabs-bar__wrapper {
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  position: sticky;
  top: 0;
  z-index: 2;
  border-top: 0;

  @media screen and (min-width: $no-gap-breakpoint) {
    border-top: 10px solid var(--color-bg-primary);
  }
}

.react-swipeable-view-container {
  &,
  .columns-area,
  .drawer,
  .column {
    height: 100%;
  }
}

.react-swipeable-view-container > * {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.column {
  width: clamp(380px, calc((100% - 350px) / 4), 400px);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  > .scrollable {
    border: 1px solid var(--color-border-primary);
    border-top: 0;
    border-radius: 0 0 4px 4px;

    &.about,
    &.privacy-policy {
      border-top: 1px solid var(--color-border-primary);
      border-radius: 4px;

      @media screen and (max-width: $no-gap-breakpoint) {
        border-top: 0;
        border-bottom: 0;
      }
    }
  }
}

.column__alert {
  --alert-height: 54px;

  position: sticky;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(var(--alert-height), max-content);
  align-items: end;
  width: 100%;
  max-width: 360px;
  padding: 1rem;
  margin: auto auto 0;
  overflow: clip;
  pointer-events: none;

  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
    // Compensate for mobile menubar
    bottom: var(--mobile-bottom-nav-height);
  }

  & > * {
    // Make all nested alerts occupy the same space
    // rather than stack
    grid-area: 1 / 1;
    pointer-events: initial;
  }
}

.ui {
  --mobile-bottom-nav-height: 55px;
  --last-content-item-border-width: 2px;

  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
    padding-bottom: calc(
      var(--mobile-bottom-nav-height) - var(--last-content-item-border-width)
    );
  }
}

.drawer {
  width: 350px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.drawer__tab {
  display: flex;
  flex: 1 1 auto;
  padding: 13px 3px 11px;
  color: var(--color-text-secondary);
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}

.column,
.drawer {
  flex: 1 1 100%;
}

@media screen and (width > $mobile-breakpoint) {
  .columns-area {
    padding: 0;
  }

  .column,
  .drawer {
    flex: 0 0 auto;
    padding: 10px;
    padding-inline-start: 5px;
    padding-inline-end: 5px;

    &:first-child {
      padding-inline-start: 10px;
    }

    &:last-child {
      padding-inline-end: 10px;
    }
  }

  .columns-area > div {
    .column,
    .drawer {
      padding-inline-start: 5px;
      padding-inline-end: 5px;
    }
  }
}

.columns-area--mobile {
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  .column,
  .drawer {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .account-card {
    margin-bottom: 0;
  }

  .filter-form {
    display: flex;
    flex-wrap: wrap;
  }

  .autosuggest-textarea__textarea {
    font-size: 16px;
  }

  .search__input {
    line-height: 18px;
    font-size: 16px;
    padding-block: 15px;
    padding-inline-end: 30px;
  }

  .scrollable {
    overflow: visible;

    @supports (display: grid) {
      contain: content;
    }
  }

  @media screen and (min-width: $no-gap-breakpoint) {
    padding: 10px 0;
    padding-top: 0;
  }
}

@media screen and (min-width: $no-gap-breakpoint) {
  .react-swipeable-view-container .columns-area--mobile {
    height: calc(100% - 10px) !important;
  }

  .getting-started__wrapper {
    margin-bottom: 10px;
  }

  .search-page .search {
    display: none;
  }

  .navigation-panel__legal,
  .navigation-panel__compose-button,
  .navigation-panel .navigation-bar {
    display: none !important;
  }
}

@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
  $sidebar-width: 285px;

  .columns-area__panels__main {
    width: calc(100% - $sidebar-width);
  }

  .columns-area__panels {
    min-height: 100vh;
    min-height: 100dvh;
    gap: 0;
    padding-inline: 0;
  }

  .columns-area__panels__pane--navigational {
    min-width: $sidebar-width;

    .columns-area__panels__pane__inner {
      width: $sidebar-width;
    }

    .navigation-panel {
      margin: 0;
      border-inline-start: 1px solid var(--color-border-primary);
      height: 100dvh;
    }

    .navigation-panel__banner,
    .navigation-panel__logo,
    .getting-started__trends {
      display: none;
    }
  }

  .layout-single-column {
    .column > .scrollable,
    .tabs-bar__wrapper .column-header,
    .tabs-bar__wrapper .column-back-button,
    .explore__search-header,
    .column-search-header {
      border-left: 0;
      border-right: 0;
    }

    .column-header,
    .column-back-button,
    .scrollable,
    .error-column {
      border-radius: 0 !important;
    }

    .column-header,
    .column-back-button {
      border-top: 0;
    }
  }
}

@media screen and (width <= 759px) {
  .columns-area__panels__main {
    width: 100%;
  }

  .columns-area__panels__pane--navigational {
    position: fixed;
    inset-inline-end: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
    pointer-events: auto;
    background: var(--color-bg-primary);
    position: fixed;
    width: 284px + 70px;
    inset-inline-end: -70px;
    touch-action: pan-y;

    .navigation-panel {
      width: 284px;
      overflow-y: auto;
      scrollbar-width: thin;

      &__menu {
        flex-shrink: 0;
        min-height: none;
        overflow: hidden;
        padding-bottom: calc(65px + env(safe-area-inset-bottom));
      }

      &__logo {
        display: none;
      }
    }
  }
}

.columns-area__panels__pane--navigational {
  transition: background 500ms;
}

.columns-area__panels__pane--overlay {
  pointer-events: auto;
  background: rgb(from var(--color-bg-overlay) r g b / 50%);
  z-index: 3;

  .columns-area__panels__pane__inner {
    box-shadow: var(--dropdown-shadow);
  }
}

@media screen and (width >= 760px) {
  .ui__navigation-bar {
    display: none;
  }
}

.explore-suggestions-card {
  padding: 12px 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border-primary);

  &:last-child {
    border-bottom: 0;
  }

  &__source {
    font-size: 13px;
    line-height: 16px;
    color: var(--color-text-tertiary);

    @container (width >= 400px) {
      padding-inline-start: 60px;
    }
  }

  &__body {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: end;
  }

  &__avatar {
    flex-shrink: 0;

    @container (width < 360px) {
      width: 35px !important;
      height: 35px !important;
    }
  }

  &__link {
    flex: 1 1 auto;
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    min-width: 0;

    &:hover,
    &:focus-visible {
      .display-name__html {
        text-decoration: underline;
      }
    }

    .display-name {
      font-size: 15px;
      line-height: 20px;
      color: var(--color-text-primary);

      strong {
        font-weight: 700;
      }

      &__account {
        color: var(--color-text-secondary);
        display: block;
      }
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: end;

    .button {
      min-width: 80px;
    }
  }

  &__dismiss-button {
    @container (width < 400px) {
      display: none;
    }
  }
}

@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
  .columns-area__panels__pane--compositional {
    display: none;
  }
}

.icon-with-badge {
  display: inline-flex;
  position: relative;

  &__badge {
    position: absolute;
    inset-inline-start: 9px;
    top: -13px;
    color: var(--color-text-on-brand-base);
    background: var(--color-bg-brand-base);
    border: 2px solid var(--color-bg-primary);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
  }

  &__issue-badge {
    position: absolute;
    inset-inline-start: 11px;
    bottom: 1px;
    display: block;
    background: var(--color-text-error);
    border-radius: 50%;
    width: 0.625rem;
    height: 0.625rem;
  }
}

.column-link--transparent .icon-with-badge__badge {
  border-color: var(--color-bg-primary);
}

.column-title {
  text-align: center;
  padding-bottom: 32px;

  h3 {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-text-secondary);
  }

  @media screen and (width >= 600px) {
    padding: 40px;
  }
}

.copy-paste-text {
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border-primary);
  padding: 16px;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: border-color 300ms linear;
  margin-bottom: 30px;

  &:focus,
  &.focused {
    transition: none;
    outline: 0;
    border-color: var(--color-border-brand);
  }

  &.copied {
    border-color: var(--color-text-success);
    transition: none;
  }

  textarea {
    width: 100%;
    height: auto;
    background: transparent;
    color: inherit;
    font: inherit;
    border: 0;
    padding: 0;
    margin-bottom: 30px;
    resize: none;

    &:focus {
      outline: 0;
    }
  }
}

.onboarding__profile {
  position: relative;
  margin-bottom: 40px + 20px;
  margin-top: -20px;

  .app-form__avatar-input {
    border: 2px solid var(--color-bg-primary);
    position: absolute;
    inset-inline-start: -2px;
    bottom: -40px;
    z-index: 2;
  }

  .app-form__header-input {
    margin: 0 -20px;
    border-radius: 0;

    img {
      border-radius: 0;
    }
  }
}

.compose-panel {
  width: 285px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px);
  overflow-y: auto;
  scrollbar-width: thin;

  .compose-form {
    flex: 1 1 auto;
  }
}

.navigation-panel {
  margin-top: 10px;
  margin-bottom: 10px;
  height: calc(100% - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &__menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  &__list-panel {
    &__header {
      display: flex;
      align-items: center;
      padding-inline-end: 4px;

      &__sep {
        width: 0;
        height: 24px;
        border-left: 1px solid var(--color-border-primary);
      }

      .column-link {
        flex: 1 1 auto;
      }

      .icon-button {
        padding: 8px;
      }
    }

    &__items {
      padding-inline-start: 24px + 8px;

      .icon {
        display: none;
      }
    }
  }

  &__compose-button {
    display: flex;
    justify-content: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-inline-start: 12px - 7px;
    padding-inline-end: 12px;
    gap: 8px;
    margin: 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;

    .icon {
      width: 24px;
      height: 24px;
    }
  }

  .navigation-bar {
    padding: 16px;
  }

  .search {
    margin: 16px;
    margin-bottom: 12px;
  }

  .logo {
    height: 30px;
    width: auto;
  }

  &__logo {
    margin-bottom: 12px;
  }

  .getting-started__trends h4 {
    padding: 10px 12px;
    padding-inline-start: 16px;
  }

  .getting-started__trends .trends__item {
    padding: 10px 12px;
    padding-inline-start: 16px;
  }

  @media screen and (height <= 930px) {
    &__portal .trends__item:nth-child(n + 5) {
      display: none;
    }
  }

  @media screen and (height <= (930px - 56px)) {
    &__portal .trends__item:nth-child(n + 4) {
      display: none;
    }
  }

  @media screen and (height <= (930px - 56px * 2)) {
    &__portal .trends__item:nth-child(n + 3) {
      display: none;
    }
  }

  @media screen and (height <= (930px - 56px * 3)) {
    &__portal {
      display: none;
    }
  }
}

.navigation-panel,
.compose-panel {
  hr {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    border-top: 1px solid var(--color-border-primary);
    margin: 10px 0;
  }

  .flex-spacer {
    background: transparent;
  }
}

.drawer__pager {
  box-sizing: border-box;
  padding: 0;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 4px;
  border: 1px solid var(--color-border-primary);
}

.drawer__inner {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--color-bg-primary);
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.drawer__inner__mastodon {
  position: relative;
  background: var(--color-bg-primary);
  flex: 1;
  min-height: 47px;
  display: none;
  contain: content;

  > img {
    display: block;
    object-fit: contain;
    object-position: bottom left;
    width: 85%;
    height: 100%;
    pointer-events: none;
    user-select: none;
  }

  @media screen and (height >= 640px) {
    display: block;
  }
}

.drawer__header {
  flex: 0 0 auto;
  font-size: 16px;
  border: 1px solid var(--color-border-primary);
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;

  a:hover,
  a:focus,
  a:active {
    color: var(--color-text-primary);
  }
}

.scrollable {
  overflow-y: scroll;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  &.optionally-scrollable {
    overflow-y: auto;
  }

  @supports (display: grid) {
    // hack to fix Chrome <57
    contain: strict;
  }

  &--flex {
    display: flex;
    flex-direction: column;
  }

  &__append {
    flex: 1 1 auto;
    position: relative;
    min-height: 120px;
  }

  .scrollable {
    flex: 1 1 auto;
  }
}

.scrollable.fullscreen {
  @supports (display: grid) {
    // hack to fix Chrome <57
    contain: none;
  }
}

.column-back-button {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px 4px 0 0;
  color: var(--color-text-brand);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 16px;
  line-height: inherit;
  text-align: unset;
  padding: 13px;
  margin: 0;
  z-index: 3;
  outline: 0;
  display: flex;
  align-items: center;
  gap: 5px;

  &:hover {
    text-decoration: underline;
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
    outline-offset: -2px;
  }
}

.column-header__back-button {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  font-family: inherit;
  color: var(--color-text-brand);
  cursor: pointer;
  white-space: nowrap;
  font-size: 16px;
  padding: 13px;
  z-index: 3;

  &:hover {
    text-decoration: underline;
  }

  &.compact {
    padding-inline-end: 5px;
    flex: 0 0 auto;
  }
}

.react-toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.react-toggle--focus,
.react-toggle:focus-within {
  outline: var(--outline-focus-default);
  outline-offset: 2px;

  .react-toggle-track {
    border-color: transparent;
  }
}

.react-toggle-screenreader-only,
.sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.react-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transition: opacity 0.25s;
}

.react-toggle-track {
  width: 32px;
  height: 20px;
  padding: 0;
  border-radius: 10px;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  box-sizing: border-box;

  .react-toggle--checked & {
    background-color: var(--color-bg-brand-base);
    border-color: var(--color-bg-brand-base);
  }
}

.react-toggle-track-check,
.react-toggle-track-x {
  display: none;
}

.react-toggle-thumb {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-text-on-brand-base);
  box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%);
  box-sizing: border-box;
  transition: all 0.25s ease;
  transition-property: border-color, left;

  .react-toggle--checked & {
    inset-inline-start: 32px - 16px - 2px;
    border-color: var(--color-bg-brand-base);
  }
}

.follow_requests-unlocked_explanation,
.switch-to-advanced {
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  padding: 15px;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 18px;

  a {
    color: var(--color-text-brand);
    font-weight: bold;
  }
}

.column-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  padding-inline-start: 14px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  color: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-secondary)
  );
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;

  &:hover,
  &:active,
  &:focus-visible {
    color: var(--color-text-primary);
  }

  &.active {
    color: var(--color-text-brand);
  }

  &:focus-visible {
    outline: none;
    border-color: var(--color-border-brand);
    background: var(--color-bg-brand-softest);
  }

  &--logo {
    padding: 8px;
    padding-inline-start: 12px;
  }
}

.column-link__badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  line-height: 19px;
  font-weight: 500;
  background: var(--color-bg-primary);
  padding: 4px 8px;
  margin: -6px 10px;
}

.getting-started__wrapper {
  flex: 0 0 auto;
}

.flex-spacer {
  flex: 1 1 auto;
}

.getting-started {
  color: var(--color-text-tertiary);
  overflow: auto;
  border: 1px solid var(--color-border-primary);
  border-top: 0;

  &__trends {
    flex: 0 1 auto;
    opacity: 1;
    animation: fade 150ms linear;
    margin-top: 10px;

    h4 {
      border-bottom: 1px solid var(--color-border-primary);
      padding: 10px;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 500;

      a {
        color: var(--color-text-secondary);
        text-decoration: none;
      }
    }

    .trends__item {
      border-bottom: 0;
      padding: 10px;

      &__current {
        color: var(--color-text-secondary);
      }
    }
  }
}

.keyboard-shortcuts {
  padding: 8px 0 0;
  overflow: hidden;

  thead {
    position: absolute;
    inset-inline-start: -9999px;
  }

  td {
    padding: 0 10px 8px;
  }

  kbd {
    display: inline-block;
  }
}

.status-card {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 14px;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  contain: inline-size layout paint style;

  &.bottomless {
    border-radius: 8px 8px 0 0;
  }

  &__actions {
    bottom: 0;
    inset-inline-start: 0;
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > div {
      color: var(--color-text-on-media);
      background: rgb(from var(--color-bg-media) r g b / 60%);
      border-radius: 8px;
      padding: 12px 9px;
      backdrop-filter: $backdrop-blur-filter;
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    button,
    a {
      display: inline;
      color: var(--color-text-on-media);
      background: transparent;
      border: 0;
      padding: 0 8px;
      text-decoration: none;
      font-size: 18px;
      line-height: 18px;

      &:hover,
      &:active,
      &:focus {
        color: var(--color-text-on-media);
      }
    }

    a {
      font-size: 19px;
      position: relative;
      bottom: -1px;
    }
  }
}

a.status-card {
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    .status-card__title,
    .status-card__host,
    .status-card__author,
    .status-card__description {
      color: var(--color-text-brand);
    }
  }
}

.status-card a {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    .status-card__title,
    .status-card__host,
    .status-card__author,
    .status-card__description {
      color: var(--color-text-brand);
    }
  }
}

.status-card-photo {
  cursor: zoom-in;
  display: block;
  text-decoration: none;
  width: 100%;
  height: auto;
  margin: 0;
}

.status-card-video {
  // Firefox has a bug where frameborder=0 iframes add some extra blank space
  // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
  overflow: hidden;

  iframe {
    width: 100%;
    height: 100%;
  }
}

.status-card__title {
  display: block;
  font-weight: 700;
  font-size: 19px;
  line-height: 24px;
  color: var(--color-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.status-card.expanded .status-card__title {
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.status-card__content {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  max-width: 100%;
}

.status-card__host {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-card__author {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  strong {
    font-weight: 500;
  }
}

.status-card__description {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-card__image {
  flex: 0 0 auto;
  width: 120px;
  aspect-ratio: 1;
  background: var(--color-bg-secondary);
  position: relative;

  & > .icon {
    width: 18px;
    height: 18px;
    position: absolute;
    transform-origin: 50% 50%;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }
}

.status-card__image-image {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center center;
}

.status-card__image-preview {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 0;
  background: var(--color-bg-primary);

  &--hidden {
    display: none;
  }
}

.status-card.expanded {
  flex-direction: column;
  align-items: flex-start;
}

.status-card.expanded .status-card__image {
  width: 100%;
  aspect-ratio: auto;
}

.status-card__image,
.status-card__image-image,
.status-card__image-preview {
  border-start-start-radius: 8px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 8px;
}

.status-card.expanded .status-card__image,
.status-card.expanded .status-card__image-image,
.status-card.expanded .status-card__image-preview {
  border-start-end-radius: 8px;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.status-card.bottomless .status-card__image,
.status-card.bottomless .status-card__image-image,
.status-card.bottomless .status-card__image-preview {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.status-card.expanded > a {
  width: 100%;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  background-color: transparent;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  text-decoration: none;

  &--large {
    padding-block: 32px;
  }

  &:is(button) {
    &:hover {
      background: var(--color-bg-secondary);
    }

    &:focus-visible {
      outline: var(--outline-focus-default);
      outline-offset: -2px;
    }
  }

  .icon {
    width: 22px;
    height: 22px;
  }
}

.load-gap {
  border-bottom: 1px solid var(--color-border-primary);
}

.timeline-hint {
  text-align: center;
  color: var(--color-text-secondary);
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  font-size: 14px;
  line-height: 21px;

  strong {
    font-weight: 500;
  }

  a {
    color: var(--color-text-brand);
    text-decoration: none;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
      color: var(--color-text-brand-soft);
    }
  }

  &--with-descendants {
    border-top: 1px solid var(--color-border-primary);
  }
}

.regeneration-indicator {
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  border-top: 0;
  cursor: default;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;

  &__figure {
    display: block;
    width: 100%;
    height: auto;
    max-width: 350px;
    margin-top: -50px;
  }

  &__label {
    text-align: center;
    font-size: 16px;

    strong {
      font-weight: 500;
      display: block;
      margin-bottom: 10px;
      color: var(--color-text-secondary);
    }

    span {
      font-size: 15px;
    }
  }
}

.column-header__wrapper {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;

  &.active {
    box-shadow: 0 1px 0 var(--color-bg-brand-softest);

    &::before {
      display: block;
      content: '';
      position: absolute;
      bottom: -13px;
      inset-inline-start: 0;
      inset-inline-end: 0;
      margin: 0 auto;
      width: 60%;
      pointer-events: none;
      height: 28px;
      z-index: 1;
      background: radial-gradient(
        ellipse,
        rgb(from var(--color-bg-brand-base) r g b / 23%) 0%,
        transparent 60%
      );
    }
  }

  .announcements {
    z-index: 1;
    position: relative;
  }
}

.column-header__select-row {
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: var(--color-border-primary);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 8px;

  &__checkbox .check-box {
    display: flex;
  }

  &__select-menu:disabled {
    visibility: hidden;
  }

  &__mode-button {
    margin-left: auto;
    color: var(--color-text-brand);
    font-weight: bold;
    font-size: 14px;

    &:hover {
      color: var(--color-text-brand-soft);
    }
  }
}

.column-header {
  display: flex;
  font-size: 16px;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px 4px 0 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  outline: 0;

  &__title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    border: 0;
    padding: 13px;
    padding-inline-end: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: start;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;

    &:focus-visible {
      outline: var(--outline-focus-default);
    }

    .logo {
      height: 24px;
    }
  }

  .column-header__back-button + &__title {
    padding-inline-start: 0;
  }

  .column-header__back-button {
    flex: 1;
    color: var(--color-text-brand);

    &.compact {
      flex: 0 0 auto;
      color: var(--color-text-primary);
    }
  }

  &.active {
    .column-header__icon {
      color: var(--color-text-brand);
      text-shadow: 0 0 10px var(--color-bg-brand-softest);
    }
  }

  &:focus,
  &:active {
    outline: 0;
  }

  &__advanced-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    padding-top: 0;

    &:first-child {
      padding-top: 16px;
    }
  }
}

.column-header__buttons {
  height: 48px;
  display: flex;
}

.column-header__links {
  margin-bottom: 14px;
}

.column-header__links .text-btn {
  margin-inline-end: 10px;
}

.column-header__button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  color: var(--color-text-primary);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 0 15px;

  &:last-child {
    border-start-end-radius: 4px;
  }

  &:hover {
    color: var(--color-text-secondary);
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
  }

  &.active {
    color: var(--color-text-brand);

    &:hover {
      color: var(--color-text-brand);
    }
  }

  &:disabled {
    color: var(--color-text-disabled);
    cursor: default;
  }
}

.no-reduce-motion .column-header__button .icon-sliders {
  transition: transform 150ms ease-in-out;
}

.column-header__collapsible {
  max-height: 70vh;
  overflow: hidden;
  overflow-y: auto;
  color: var(--color-text-secondary);
  transition:
    max-height 150ms ease-in-out,
    opacity 300ms linear;
  opacity: 1;
  z-index: 1;
  position: relative;
  border-left: 1px solid var(--color-border-primary);
  border-right: 1px solid var(--color-border-primary);
  border-bottom: 1px solid var(--color-border-primary);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-left: 0;
    border-right: 0;
  }

  &.collapsed {
    max-height: 0;
    opacity: 0.5;
    border-bottom: 0;
  }

  &.animating {
    overflow-y: hidden;
  }

  hr {
    height: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border-primary);
    margin: 10px 0;
  }
}

.column-header__collapsible-inner {
  border-top: 0;
}

.column-header__setting-btn {
  &:hover,
  &:focus {
    color: var(--color-text-secondary);
    text-decoration: underline;
  }
}

.column-header__collapsible__extra + .column-header__setting-btn {
  padding-top: 5px;
}

.column-header__permission-btn {
  display: inline;
  font-weight: inherit;
  text-decoration: underline;
}

.column-header__setting-arrows {
  display: flex;
  align-items: center;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;

  .icon {
    width: 13px;
    height: 13px;
  }
}

.column-header__issue-btn {
  color: var(--color-text-error);

  &:hover {
    text-decoration: underline;
  }
}

.loading-indicator {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  overflow: visible;
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-more .loading-indicator,
.button .loading-indicator,
.icon-button .loading-indicator {
  position: static;
  transform: none;
  color: inherit;

  .circular-progress {
    color: inherit;
    width: 22px;
    height: 22px;
  }
}

.button--compact .loading-indicator .circular-progress {
  width: 17px;
  height: 17px;
}

.icon-button .loading-indicator .circular-progress {
  color: var(--color-text-tertiary);
  width: 12px;
  height: 12px;
  margin: 6px;
}

.load-more .loading-indicator .circular-progress {
  color: var(--color-text-tertiary);
}

.circular-progress {
  color: var(--color-text-tertiary);
  animation: 1.4s linear 0s infinite normal none running simple-rotate;

  circle {
    stroke: currentColor;
    stroke-dasharray: 80px, 200px;
    stroke-dashoffset: 0;
    animation: circular-progress 1.4s ease-in-out infinite;
  }
}

@keyframes circular-progress {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }

  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}

@keyframes simple-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spring-rotate-in {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-484.8deg);
  }

  60% {
    transform: rotate(-316.7deg);
  }

  90% {
    transform: rotate(-375deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spring-rotate-out {
  0% {
    transform: rotate(-360deg);
  }

  30% {
    transform: rotate(124.8deg);
  }

  60% {
    transform: rotate(-43.27deg);
  }

  90% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.video-error-cover {
  align-items: center;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin-top: 8px;
  position: relative;
  text-align: center;
  z-index: 100;
}

.spoiler-button {
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;

  &--hidden {
    display: none;
  }

  &--click-thru {
    pointer-events: none;
  }

  &__overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    color: var(--color-text-on-media);
    line-height: 20px;
    font-size: 14px;

    &__label {
      background-color: var(--color-bg-media);
      backdrop-filter: $backdrop-blur-filter;
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-direction: column;
      font-weight: 600;
    }

    &__action {
      font-weight: 400;
      font-size: 13px;
    }

    &:hover,
    &:focus {
      .spoiler-button__overlay__label {
        background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
      }
    }

    &:focus-visible {
      .spoiler-button__overlay__label {
        outline: 2px solid var(--color-text-on-media);
        outline-offset: -4px;
      }
    }
  }
}

.account--panel {
  border-top: 1px solid var(--color-border-primary);
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}

.account--panel__button,
.detailed-status__button {
  flex: 1 1 auto;
  text-align: center;
}

.column-settings {
  display: flex;
  flex-direction: column;

  &__section {
    // FIXME: Legacy
    color: var(--color-text-secondary);
    cursor: default;
    display: block;
    font-weight: 500;
  }

  .column-header__links {
    margin: 0;
  }

  section {
    padding: 16px;
    border-bottom: 1px solid var(--color-border-primary);

    &:last-child {
      border-bottom: 0;
    }
  }

  h3 {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 16px;
  }

  &__row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .app-form__toggle {
    &__toggle > div {
      border: 0;
    }
  }
}

.column-settings__hashtags {
  margin-top: 15px;

  .column-settings__row {
    margin-bottom: 15px;
  }

  .column-select {
    &__control {
      @include search-input;

      &::placeholder {
        color: color-mix(
          in oklab,
          var(--color-text-primary),
          var(--color-text-secondary)
        );
      }

      &::-moz-focus-inner {
        border: 0;
      }

      &::-moz-focus-inner,
      &:focus,
      &:active {
        outline: 0 !important;
      }

      &:focus {
        background: var(--color-bg-secondary);
      }

      @media screen and (width <= 600px) {
        font-size: 16px;
      }
    }

    &__placeholder {
      color: var(--color-text-tertiary);
      padding-inline-start: 2px;
      font-size: 12px;
    }

    &__value-container {
      padding-inline-start: 6px;
    }

    &__multi-value {
      background: var(--color-bg-secondary);

      &__remove {
        cursor: pointer;

        &:hover,
        &:active,
        &:focus {
          background: var(--color-bg-brand-softest);
          color: color-mix(
            in oklab,
            var(--color-text-primary),
            var(--color-text-secondary)
          );
        }
      }
    }

    &__multi-value__label,
    &__input,
    &__input-container {
      color: var(--color-text-secondary);
    }

    &__clear-indicator,
    &__dropdown-indicator {
      cursor: pointer;
      transition: none;
      color: var(--color-text-tertiary);

      &:hover,
      &:active,
      &:focus {
        color: var(--color-text-secondary);
      }
    }

    &__indicator-separator {
      background-color: var(--color-border-primary);
    }

    &__menu {
      @include search-popout;

      padding: 0;
      background: var(--color-bg-primary);
    }

    &__menu-list {
      padding: 6px;
    }

    &__option {
      color: var(--color-text-primary);
      border-radius: 4px;
      font-size: 14px;

      &--is-focused,
      &--is-selected {
        color: var(--color-text-on-brand-base);
        background: var(--color-bg-brand-base);
      }
    }
  }
}

.column-settings__row {
  .text-btn:not(.column-header__permission-btn) {
    margin-bottom: 15px;
  }
}

.setting-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-toggle__label {
  color: var(--color-text-secondary);
}

.limited-account-hint {
  p {
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
  }
}

.empty-column-indicator {
  color: var(--color-text-secondary);
  text-align: center;
  padding: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  cursor: default;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;

  & > span {
    max-width: 500px;
  }

  a {
    color: var(--color-text-brand);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.empty-column-indicator {
  &__arrow {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    pointer-events: none;
    transform: translate(100%, -100%) rotate(12deg);
    transform-origin: center;
  }
}

.follow_requests-unlocked_explanation {
  margin: 16px;
  margin-bottom: 0;
}

.error-column {
  padding: 20px;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;

  &__image {
    width: 70%;
    max-width: 350px;
    margin-top: -50px;
  }

  &__message {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 22px;

    h1 {
      font-size: 28px;
      line-height: 33px;
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--color-text-primary);
    }

    p {
      max-width: 48ch;
    }

    &__actions {
      margin-top: 30px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }

  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }

  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }

  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

.no-reduce-motion .pulse-loading {
  transform-origin: center center;
  animation: heartbeat 1.5s ease-in-out infinite both;
}

.emoji-picker-dropdown__menu {
  position: relative;
  margin-top: 5px;
  z-index: 2;
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--dropdown-shadow);
  border-radius: 5px;

  .emoji-mart-scroll {
    transition: opacity 200ms ease;
  }

  &.selecting .emoji-mart-scroll {
    opacity: 0.5;
  }
}

.emoji-picker-dropdown__modifiers {
  position: absolute;
  top: 60px;
  inset-inline-end: 11px;
  cursor: pointer;
}

.emoji-picker-dropdown__modifiers__menu {
  position: absolute;
  z-index: 4;
  top: -5px;
  inset-inline-start: -9px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  box-shadow: var(--dropdown-shadow);
  overflow: hidden;

  button {
    display: block;
    cursor: pointer;
    border: 0;
    padding: 4px 8px;
    background: transparent;

    &:hover,
    &:focus,
    &:active {
      background: var(--color-border-primary);
    }
  }

  .emoji-mart-emoji {
    height: 22px;
  }
}

.emoji-mart-emoji {
  span {
    background-repeat: no-repeat;
  }
}

.upload-area {
  align-items: center;
  background: rgb(from var(--color-bg-overlay) r g b / 80%);
  display: flex;
  height: 100vh;
  justify-content: center;
  inset-inline-start: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100vw;
  z-index: 2000;

  * {
    pointer-events: none;
  }
}

.upload-area__drop {
  width: 320px;
  height: 160px;
  display: flex;
  box-sizing: border-box;
  position: relative;
  padding: 8px;
}

.upload-area__background {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: -1;
  border-radius: 4px;
  background: var(--color-bg-primary);
  box-shadow: 0 0 5px var(--color-shadow-primary);
}

.upload-area__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 500;
  border: 2px dashed var(--color-border-primary);
  border-radius: 4px;
}

.upload-progress {
  color: var(--color-text-secondary);
  overflow: hidden;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 12px;

  .icon {
    width: 24px;
    height: 24px;
    color: var(--color-text-brand);
  }

  span {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
  }
}

.upload-progress__message {
  flex: 1 1 auto;
}

.upload-progress__backdrop {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: var(--color-bg-primary);
  position: relative;
  margin-top: 5px;
}

.upload-progress__tracker {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 6px;
  background: var(--color-text-brand);
  border-radius: 6px;
}

.emoji-button {
  display: block;
  padding-top: 5px;
  padding-bottom: 2px;
  padding-inline-start: 2px;
  padding-inline-end: 5px;
  outline: 0;
  cursor: pointer;

  img {
    filter: grayscale(100%);
    opacity: 0.8;
    display: block;
    margin: 0;
    width: 22px;
    height: 22px;
  }

  &:hover,
  &:active,
  &:focus {
    img {
      opacity: 1;
      filter: none;
      border-radius: 100%;
    }
  }

  &:focus-visible {
    img {
      outline: var(--outline-focus-default);
    }
  }
}

.dropdown--active .emoji-button img {
  opacity: 1;
  filter: none;
}

.privacy-dropdown__dropdown,
.language-dropdown__dropdown,
.visibility-dropdown__dropdown {
  box-shadow: var(--dropdown-shadow);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  padding: 4px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;

  &.top {
    transform-origin: 50% 100%;
  }

  &.bottom {
    transform-origin: 50% 0;
  }
}

.modal-root__container .privacy-dropdown {
  flex-grow: 0;
}

.modal-root__container .privacy-dropdown__dropdown {
  pointer-events: auto;
  z-index: 9999;
}

.privacy-dropdown__option,
.visibility-dropdown__option {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  color: var(--color-text-primary);

  // Make sure adjacent hover/active states don't have a meeting radius.
  &:hover + &:is(:focus, .active),
  &:is(:focus, .active) + &:hover,
  &:is(:focus, .active) + &:is(:focus, .active) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &:hover:has(+ :focus, .active),
  &:is(:focus, .active):has(+ :hover),
  &:is(:focus, .active):has(+ :is(:focus, .active)) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:hover,
  &:active {
    background: var(--color-bg-secondary);
  }

  &:focus,
  &.active {
    background: var(--color-bg-brand-base);
    color: var(--color-text-on-brand-base);
    outline: 0;

    .privacy-dropdown__option__content,
    .privacy-dropdown__option__content strong,
    .privacy-dropdown__option__additional,
    .visibility-dropdown__option__content,
    .visibility-dropdown__option__content strong,
    .visibility-dropdown__option__additional {
      color: var(--color-text-on-brand-base);
    }
  }

  &__additional {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    cursor: help;
  }
}

.privacy-dropdown__option__icon,
.visibility-dropdown__option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-dropdown__option__content,
.visibility-dropdown__option__content {
  flex: 1 1 auto;
  color: var(--color-text-secondary);

  strong {
    color: var(--color-text-primary);
    font-weight: 500;
    display: block;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }
}

.language-dropdown {
  &__dropdown {
    width: 300px;
    padding: 0;

    .emoji-mart-search {
      padding: 10px;
      background: var(--color-bg-primary);

      input {
        padding: 8px 12px;
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        color: var(--color-text-secondary);

        @media screen and (width <= 600px) {
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0.5px;
        }
      }
    }

    .emoji-mart-search-icon {
      inset-inline-end: 15px;
      opacity: 1;
      color: var(--color-text-primary);

      .icon {
        width: 18px;
        height: 18px;
      }

      &:disabled {
        color: var(--color-text-secondary);
      }
    }

    .emoji-mart-scroll {
      padding: 0 10px 10px;
      background: var(--color-bg-primary);
    }

    &__results {
      &__item {
        display: flex;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        color: var(--color-text-primary);
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.25px;
        font-weight: 500;
        padding: 8px 12px;
        border-radius: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &__common-name {
          color: var(--color-text-secondary);
          font-weight: 400;
        }

        &:active,
        &:hover {
          background: var(--color-bg-secondary);
        }

        &:focus,
        &.active {
          background: var(--color-bg-brand-base);
          color: var(--color-text-on-brand-base);
          outline: 0;

          .language-dropdown__dropdown__results__item__common-name {
            color: var(--color-text-on-brand-base);
          }
        }
      }
    }
  }
}

.visibility-modal {
  &__quote-warning {
    color: var(--color-text-primary);
    background: var(--color-bg-warning-softest);
    padding: 16px;
    border-radius: 4px;

    h3 {
      font-weight: 500;
      margin-bottom: 4px;
    }

    p {
      font-size: 0.8em;
    }
  }
}

.visibility-dropdown {
  &__overlay[data-popper-placement] {
    z-index: 9999;
  }

  &.disabled {
    opacity: 0.6;
    cursor: default;
  }

  &__label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
  }

  &__button {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    padding: 8px 12px;
    width: 100%;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    height: 40px;

    &:disabled {
      cursor: default;
    }
  }

  &__icon {
    margin-inline: auto -4px;
    width: 18px;
    height: 18px;
    opacity: 0.5;
  }

  &__helper {
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--color-text-tertiary);
  }
}

.search {
  margin-bottom: 32px;
  position: relative;

  .layout-multiple-columns & {
    margin-bottom: 10px;
  }

  &__popout {
    box-sizing: border-box;
    display: none;
    position: absolute;
    inset-inline-start: 0;
    margin-top: -2px;
    width: 100%;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--dropdown-shadow);
    z-index: 99;
    font-size: 13px;
    padding: 15px 5px;

    h4 {
      text-transform: uppercase;
      color: var(--color-text-secondary);
      font-weight: 500;
      padding: 0 10px;
      margin-bottom: 10px;
    }

    .icon-button {
      padding: 0;

      --default-icon-color: inherit;
    }

    .icon {
      width: 18px;
      height: 18px;
    }

    &__menu {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      &__message {
        color: var(--color-text-secondary);
        padding: 0 10px;
      }

      &__item {
        display: block;
        box-sizing: border-box;
        width: 100%;
        border: 0;
        font: inherit;
        background: transparent;
        color: var(--color-text-secondary);
        padding: 10px;
        cursor: pointer;
        border-radius: 4px;
        text-align: start;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &--flex {
          display: flex;
          justify-content: space-between;
        }

        .icon-button {
          transition: none;
        }

        &:hover,
        &:focus,
        &:active,
        &.selected {
          color: var(--color-text-on-brand-base);
          background: var(--color-bg-brand-base);

          .icon-button {
            --default-icon-color: inherit;
            --default-bg-color: transparent;
            --hover-icon-color: inherit;
            --hover-bg-color: var(--color-bg-brand-base-hover);
          }
        }

        mark {
          background: transparent;
          font-weight: 700;
          color: var(--color-text-primary);
        }

        span {
          overflow: inherit;
          text-overflow: inherit;
        }
      }
    }
  }

  &.active {
    .search__input {
      border-radius: 4px 4px 0 0;
    }

    .search__popout {
      display: block;
    }
  }
}

.search__input {
  @include search-input;

  display: block;
  padding: 12px 16px;
  padding-inline-start: 16px + 15px + 8px;
  line-height: normal;

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus,
  &:active {
    outline: 0 !important;
  }
}

.search__icon-wrapper {
  position: absolute;
  top: 14px;
  display: grid;
  margin-inline-start: 16px - 2px;
  width: 20px;
  height: 20px;

  .icon {
    width: 100%;
    height: 100%;
  }

  &:not(.has-value) {
    pointer-events: none;
  }
}

.search__icon {
  grid-area: 1 / 1;
  transition: all 100ms linear;
  transition-property: transform, opacity;
  color: var(--color-text-secondary);
}

.search__icon.icon-search {
  .has-value & {
    pointer-events: none;
    opacity: 0;
    transform: rotate(90deg);
  }
}

.search__icon--clear-button {
  background: transparent;
  border: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus {
    outline: 0 !important;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--color-border-brand);
  }

  &[aria-hidden='true'] {
    pointer-events: none;
    opacity: 0;
    transform: rotate(-90deg);
  }
}

.search-results__section {
  border-bottom: 1px solid var(--color-border-primary);

  &:last-child {
    border-bottom: 0;
  }

  &__header {
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-tertiary);
    padding: 15px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
    display: flex;
    justify-content: space-between;

    h3 {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    button {
      color: var(--color-text-brand);
      padding: 0;
      border: 0;
      background: 0;
      font: inherit;

      &:hover,
      &:active,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  .account:last-child,
  & > div:last-child .status {
    border-bottom: 0;
  }
}

.search-results__info {
  padding: 20px;
  color: var(--color-text-secondary);
  text-align: center;
}

.modal-root {
  position: relative;
  z-index: 9998;
}

.modal-root__overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  opacity: 0.9;
  background: var(--color-bg-overlay);
  transition: background 0.5s;
}

.modal-root__container {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: space-around;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  overscroll-behavior: none;
}

.modal-root__modal {
  pointer-events: auto;
  user-select: text;
  display: flex;
  max-width: 100vw;

  @media screen and (width <= $mobile-breakpoint) {
    margin-top: auto;

    &.video-modal {
      margin-top: 0;
    }
  }
}

.video-modal .video-player {
  max-height: 80vh;
  max-width: 100vw;
}

.audio-modal__container {
  width: 50vw;
}

.media-modal {
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: pan-y;

  &__buttons {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
    z-index: 100;
    display: flex;
    gap: 8px;
    align-items: center;

    .icon-button {
      --default-icon-color: var(--color-text-on-media);
      --default-bg-color: transparent;
      --hover-icon-color: var(--color-text-on-media);
      --hover-bg-color: rgb(
        from var(--color-text-on-media) r g b /
          var(--overlay-strength-secondary)
      );

      padding: 8px;

      .icon {
        width: 24px;
        height: 24px;
        filter: var(--overlay-icon-shadow);
      }
    }
  }
}

.media-modal__closer {
  display: flex;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;

  > div {
    flex-shrink: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

.media-modal__navigation {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
  will-change: opacity;

  * {
    pointer-events: auto;
  }

  &.media-modal__navigation--hidden {
    opacity: 0;

    * {
      pointer-events: none;
    }
  }
}

.media-modal__nav {
  background: transparent;
  box-sizing: border-box;
  border: 0;
  color: var(--color-text-on-media);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 24px;
  height: 20vmax;
  margin: auto 0;
  padding: 30px 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: scaleX(var(--text-x-direction));

  .icon {
    border-radius: 5px;
    padding: 10px;
  }

  &:hover .icon,
  &:focus .icon,
  &:active .icon {
    background: rgb(
      from var(--color-text-on-media) r g b / var(--overlay-strength-secondary)
    );
  }
}

.media-modal__nav--prev {
  inset-inline-start: 0;
}

.media-modal__nav--next {
  inset-inline-end: 0;
}

.media-modal__overlay {
  max-width: 600px;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  margin: 0 auto;

  .picture-in-picture__footer {
    border-radius: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    padding: 16px;

    .icon-button {
      --default-icon-color: var(--color-text-on-media);
      --default-bg-color: transparent;
      --hover-icon-color: var(--color-text-on-media);
      --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%);

      .icon {
        filter: var(--overlay-icon-shadow);
      }

      &.active {
        --default-icon-color: var(--color-text-brand);
        --hover-icon-color: var(--color-text-brand);
        --hover-bg-color: var(--color-bg-brand-soft);
      }

      &.star-icon.active {
        --default-icon-color: var(--color-text-favourite-highlight);
        --hover-icon-color: var(--color-text-favourite-highlight);
        --hover-bg-color: rgb(
          from var(--color-text-favourite-highlight) r g b / 10%
        );
      }

      &.disabled {
        --default-icon-color: var(--color-text-on-media);
        --default-bg-color: transparent;

        cursor: default;
        opacity: 0.4;
      }
    }
  }
}

.media-modal__pagination {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.media-modal__page-dot {
  flex: 0 0 auto;
  background-color: rgb(from var(--color-text-on-media) r g b / 40%);
  filter: var(--overlay-icon-shadow);
  height: 6px;
  width: 6px;
  border-radius: 50%;
  margin: 0 4px;
  padding: 0;
  border: 0;
  font-size: 0;
  transition: background-color 0.2s ease-in-out;

  &.active {
    background-color: var(--color-text-on-media);
  }

  &:focus {
    opacity: 1;
    outline: 2px solid var(--color-text-on-media);
    outline-offset: 2px;
  }
}

.modal-placeholder {
  width: 588px;
  min-height: 478px;
  flex-direction: column;
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;

  &__error {
    padding: 24px;
    display: flex;
    align-items: center;
    flex-direction: column;

    &__image {
      width: 70%;
      max-width: 350px;
    }

    &__message {
      text-align: center;
      text-wrap: balance;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.25px;

      &__actions {
        margin-top: 24px;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.safety-action-modal {
  width: 600px;
  flex-direction: column;

  &__top,
  &__bottom {
    display: flex;
    gap: 8px;
    padding: 24px;
    flex-direction: column;
    background: var(--color-bg-primary);
    backdrop-filter: $backdrop-blur-filter;
    border: 1px solid var(--color-border-primary);
  }

  &__top {
    border-radius: 16px 16px 0 0;
    border-bottom-width: 0;
    gap: 16px;
  }

  &__bottom {
    border-radius: 0 0 16px 16px;
    border-top: 0;

    @media screen and (max-width: $mobile-breakpoint) {
      border-radius: 0;
      border-bottom: 0;
      padding-bottom: 32px;
    }
  }

  &__header {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);

    &__icon {
      border-radius: 64px;
      color: var(--color-text-on-brand-base);
      background: var(--color-bg-brand-base);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      flex-shrink: 0;

      .icon {
        width: 24px;
        height: 24px;
      }
    }

    h1 {
      font-size: 22px;
      line-height: 28px;
      color: var(--color-text-primary);
    }
  }

  &__confirmation {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);

    /*
     * Using the :where selector to lower specificity and allow for
     * easy customisation of modal heading styles
     */
    :where(h1) {
      font-size: 16px;
      line-height: 24px;
      color: var(--color-text-primary);
      font-weight: 500;
    }

    :where(h1:not(:only-child)) {
      margin-bottom: 8px;
    }

    strong {
      font-weight: 700;
      color: var(--color-text-primary);
    }
  }

  &__status {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;

    &__account {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 8px;
      color: var(--color-text-tertiary);

      bdi {
        color: inherit;
      }
    }

    &__content {
      display: -webkit-box;
      font-size: 15px;
      line-height: 22px;
      color: var(--color-text-tertiary);
      line-clamp: 4;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      max-height: 4 * 22px;
      overflow: hidden;

      p,
      a {
        color: inherit;
      }
    }

    .reply-indicator__attachments {
      margin-top: 0;
      font-size: 15px;
      line-height: 22px;
      color: var(--color-text-tertiary);
    }
  }

  &__bullet-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    line-height: 24px;

    & > li,
    & > div {
      display: flex;
      gap: 16px;
      align-items: start;
      text-wrap: pretty;

      strong {
        font-weight: 700;
      }
    }

    &--deemphasized {
      color: var(--color-text-primary);
    }

    &__icon {
      width: 40px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      .icon {
        width: 24px;
        height: 24px;
      }
    }
  }

  &__field-group {
    display: flex;
    flex-direction: column;

    label {
      display: flex;
      gap: 16px;
      align-items: center;
      font-size: 16px;
      line-height: 24px;
      height: 32px;
      padding: 0 12px;
    }
  }

  &__caveats {
    font-size: 14px;
    padding: 0 12px;

    strong {
      font-weight: 500;
    }
  }

  &__bottom {
    padding-top: 0;

    &__collapsible {
      display: none;
      flex-direction: column;
      gap: 16px;
    }

    &.active {
      background: var(--color-bg-secondary);
      padding-top: 24px;

      .safety-action-modal__bottom__collapsible {
        display: flex;
      }
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;

    &__hint {
      font-size: 14px;
      line-height: 20px;
      color: var(--color-text-tertiary);
    }

    .link-button {
      padding: 10px 12px;
      font-weight: 600;
    }
  }
}

.dialog-modal {
  width: 588px;
  max-height: 80vh;
  flex-direction: column;
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;

  &__header {
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 12px 24px;
    min-height: 61px;

    &__title {
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: 0.15px;
    }
  }

  &__content {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    overflow-y: auto;

    &__description {
      margin: 24px 24px 0;
      color: var(--color-text-secondary);

      a {
        color: inherit;
      }
    }

    &__form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 24px;
    }

    &__preview {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--color-bg-media-base);

      img {
        display: block;
      }

      img,
      .gifv video {
        outline: 1px solid var(--color-border-media);
        outline-offset: -1px;
        border-radius: 8px;
      }

      img,
      .gifv video,
      .video-player,
      .audio-player {
        max-width: 360px;
        max-height: 45vh;
      }
    }

    &__actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      padding: 0 24px 24px;
    }
  }

  &__popout {
    background: var(--color-bg-primary);
    backdrop-filter: $backdrop-blur-filter;
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--dropdown-shadow);
    max-width: 320px;
    padding: 16px;
    border-radius: 8px;
    z-index: 9999 !important;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
  }

  .copy-paste-text {
    margin-bottom: 0;
  }
}

.hotkey-combination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.boost-modal,
.report-modal,
.actions-modal,
.compare-history-modal {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-radius: 4px;
  border: 1px solid var(--color-border-primary);
  overflow: hidden;
  max-width: 90vw;
  width: 480px;
  position: relative;
  flex-direction: column;

  @media screen and (max-width: $no-columns-breakpoint) {
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.boost-modal__container {
  overflow-y: auto;
  padding: 10px;

  .status {
    user-select: text;
    border-bottom: 0;
  }
}

.report-modal {
  width: 90vw;
  max-width: 700px;
  border: 1px solid var(--color-border-primary);
}

.report-dialog-modal {
  max-width: 90vw;
  width: 480px;
  height: 80vh;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-radius: 4px;
  border: 1px solid var(--color-border-primary);
  overflow: hidden;
  position: relative;
  flex-direction: column;
  display: flex;

  &__container {
    box-sizing: border-box;
    border-top: 1px solid var(--color-border-primary);
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
  }

  &__title {
    font-size: 28px;
    line-height: 33px;
    font-weight: 700;
    margin-bottom: 15px;

    @media screen and (height <= 800px) {
      font-size: 22px;
    }
  }

  &__subtitle {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 4px;
  }

  &__lead {
    font-size: 17px;
    line-height: 22px;
    color: var(--color-text-primary);
    margin-bottom: 30px;

    a {
      text-decoration: none;
      color: var(--color-text-brand);
      font-weight: 500;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__actions {
    margin-top: 30px;
    display: flex;

    .button {
      flex: 1 1 auto;
    }
  }

  &__statuses {
    flex-grow: 1;
    min-height: 0;
    overflow: auto;
  }

  .status__content a {
    color: var(--color-text-brand);
  }

  .status__content,
  .status__content p {
    color: var(--color-text-primary);
  }

  .dialog-option {
    align-items: center;
    gap: 12px;
  }

  .dialog-option .poll__input {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 15px;
      height: 15px;
    }

    &:active,
    &:focus,
    &:hover {
      border-color: var(--color-text-success);
      border-width: 4px;
    }

    &.active {
      color: var(--color-text-on-success-base);
      background: var(--color-bg-success-base);
      border-color: var(--color-bg-success-base);
    }
  }

  .poll__option.dialog-option {
    padding: 15px 0;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--color-border-primary);

    &:last-child {
      border-bottom: 0;
    }

    & > .poll__option__text {
      font-size: 13px;
      color: var(--color-text-primary);

      strong {
        font-size: 17px;
        font-weight: 500;
        line-height: 22px;
        color: var(--color-text-primary);
        display: block;
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .flex-spacer {
    background: transparent;
  }

  &__textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    padding: 10px;
    font-family: inherit;
    font-size: 17px;
    line-height: 22px;
    resize: vertical;
    border: 0;
    border: 1px solid var(--color-border-primary);
    outline: 0;
    border-radius: 4px;
    margin: 20px 0;

    &:focus {
      outline: 0;
    }
  }

  &__toggle {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;

    & > span {
      display: block;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
    }
  }

  .button.button-secondary {
    border-color: var(--color-border-error);
    color: var(--color-text-error);
    flex: 0 0 auto;

    &:hover,
    &:focus,
    &:active {
      color: var(--color-text-on-error-base);
      background: var(--color-bg-error-base);
      border-color: var(--color-bg-error-base);
    }
  }

  hr {
    border: 0;
    background: transparent;
    margin: 15px 0;
  }

  .emoji-mart-search {
    padding-inline-end: 10px;
  }

  .emoji-mart-search-icon {
    inset-inline-end: 10px + 5px;
  }
}

.setting-divider {
  background: transparent;
  border: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 29px;
}

.actions-modal {
  border-radius: 8px 8px 0 0;
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border-color: var(--color-border-primary);
  box-shadow: var(--dropdown-shadow);
  max-height: 80vh;
  max-width: 80vw;

  ul {
    overflow-y: auto;
    padding-bottom: 8px;
  }

  a,
  button {
    color: inherit;
    display: flex;
    padding: 16px;
    font-size: 15px;
    line-height: 21px;
    background: transparent;
    border: none;
    align-items: center;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;

    &:hover,
    &:active,
    &:focus {
      background: var(--color-bg-brand-softest);
    }
  }
}

.report-modal__target {
  padding: 30px;
  font-size: 16px;

  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }
}

.report-modal__target {
  text-align: center;
}

.report-modal__target {
  padding: 15px;

  .report-modal__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
  }
}

.compare-history-modal {
  .report-modal__target {
    border-bottom: 1px solid var(--color-border-primary);
  }

  &__container {
    padding: 30px;
    pointer-events: all;
    overflow-y: auto;
  }

  .status__content {
    color: var(--color-text-primary);
    font-size: 19px;
    line-height: 24px;

    .emojione {
      width: 24px;
      height: 24px;
      margin: -1px 0 0;
    }

    a {
      color: var(--color-text-brand);
    }

    hr {
      height: 0.25rem;
      padding: 0;
      background-color: var(--color-text-primary);
      border: 0;
      margin: 20px 0;
    }
  }

  .media-gallery,
  .audio-player,
  .video-player {
    margin-top: 15px;
  }
}

.loading-bar {
  background-color: var(--color-bg-brand-base);
  height: 3px;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 9999;
}

.media-gallery__actions {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: flex;
  gap: 2px;
  z-index: 2;

  &__pill {
    display: block;
    color: var(--color-text-on-media);
    background: var(--color-bg-media);
    backdrop-filter: $backdrop-blur-filter;
    border: 0;
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;

    &:focus-visible {
      outline: none;
      box-shadow:
        inset 0 0 0 2px var(--color-text-on-media),
        0 0 0 2px var(--color-bg-media);
    }
  }
}

.media-gallery__item__badges {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.media-gallery__alt__label,
.relationship-tag {
  display: block;
  text-align: center;
  color: var(--color-text-on-media);
  background: var(--color-bg-media);
  backdrop-filter: $backdrop-blur-filter;
  border: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
  line-height: 20px;
  cursor: pointer;
  pointer-events: auto;

  &:focus-visible {
    outline: none;
    box-shadow:
      inset 0 0 0 2px var(--color-text-on-media),
      0 0 0 2px var(--color-bg-media);
  }

  &--non-interactive {
    pointer-events: none;
  }
}

.relationship-tag {
  text-transform: uppercase;
  cursor: default;
}

.info-tooltip {
  color: var(--color-text-on-media);
  background: var(--color-bg-media);
  backdrop-filter: $backdrop-blur-filter;
  border-radius: 4px;
  box-shadow: var(--dropdown-shadow);
  padding: 16px;
  min-width: 16em;
  min-height: 2em;
  max-width: 22em;
  max-height: 30em;
  overflow-y: auto;
  z-index: 10;

  &:focus-visible {
    box-shadow:
      var(--dropdown-shadow),
      inset 0 0 0 2px var(--color-text-on-media);

    // Extend background color for better visibility of the
    // inset box-shadow "outline"
    outline: 2px solid var(--color-bg-media);
  }

  &--solid {
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
  }

  h4 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  p {
    font-size: 15px;
    line-height: 20px;
    opacity: 0.85;
    white-space: pre-line;
  }

  .button {
    margin-block-start: 8px;
  }
}

.attachment-list {
  display: flex;
  font-size: 14px;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  margin-top: 16px;
  overflow: hidden;

  &__icon {
    flex: 0 0 auto;
    color: var(--color-text-tertiary);
    padding: 8px 18px;
    cursor: default;
    border-inline-end: 1px solid var(--color-border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
  }

  &__list {
    list-style: none;
    padding: 4px 0;
    padding-inline-start: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    li {
      display: block;
      padding: 4px 0;
    }

    a {
      text-decoration: none;
      color: var(--color-text-tertiary);
      font-weight: 500;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &.compact {
    border: 0;

    .attachment-list__list {
      padding: 0;
      display: block;
    }

    .icon {
      color: var(--color-text-tertiary);
      vertical-align: middle;
    }
  }
}

/* Media Gallery */
.media-gallery {
  box-sizing: border-box;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;

  &--layout-1 {
    // The size of single images is determined by their
    // aspect-ratio, applied via inline style attribute
    width: initial;

    // Prevent extremely tall images from essentially becoming invisible
    min-width: 120px;
    max-height: var(--max-media-height-small);

    @container (width > 500px) {
      max-height: var(--max-media-height-large);
    }

    .detailed-status & {
      max-height: calc(2 * var(--max-media-height-large));
    }
  }

  &--layout-2 {
    & > .media-gallery__item:nth-child(1) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }

    & > .media-gallery__item:nth-child(2) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }

  &--layout-3 {
    min-height: calc(64px * 2 + 8px);

    & > .media-gallery__item:nth-child(1) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }

    & > .media-gallery__item:nth-child(2) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    & > .media-gallery__item:nth-child(3) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-start-end-radius: 0;
    }
  }

  &--layout-4 {
    min-height: calc(64px * 2 + 8px);

    & > .media-gallery__item:nth-child(1) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
      border-end-start-radius: 0;
    }

    & > .media-gallery__item:nth-child(2) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    & > .media-gallery__item:nth-child(3) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    & > .media-gallery__item:nth-child(4) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-start-end-radius: 0;
    }
  }
}

.media-gallery__item {
  border: 0;
  box-sizing: border-box;
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  outline: 1px solid var(--color-border-media);
  outline-offset: -1px;
  z-index: 1;

  &--tall {
    grid-row: span 2;
  }

  &--wide {
    grid-column: span 2;
  }

  &--square {
    aspect-ratio: 1;
  }

  &__overlay {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: 8px;
    z-index: 1;

    &--corner {
      align-items: flex-start;
      justify-content: flex-end;
    }

    .icon {
      color: var(--color-text-on-media);
      filter: drop-shadow(0 0 6px var(--color-bg-media-base));
    }
  }

  &--error img {
    visibility: hidden;
  }
}

.media-gallery__item-thumbnail {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: var(--color-text-primary);
  position: relative;
  z-index: -1;
  border-radius: inherit;

  &,
  img {
    height: 100%;
    width: 100%;
  }

  img {
    object-fit: cover;
  }

  &:focus {
    outline: none;
    border-radius: inherit;
  }

  // Double focus outline for better visibility on photos
  &:focus-visible::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: 1;
    border-radius: inherit;
    border: 2px solid var(--color-text-inverted);
    outline: 2px solid var(--color-bg-inverted);
    pointer-events: none;
  }
}

.media-gallery__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: -2;
  background: var(--color-bg-overlay);

  &--hidden {
    display: none;
  }
}

.media-gallery__gifv {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: -1;
}

.media-gallery__item-gifv-thumbnail {
  cursor: pointer;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* End Media Gallery */

.detailed,
.fullscreen {
  .video-player__volume__current,
  .video-player__volume::before {
    bottom: 27px;
  }

  .video-player__volume__handle {
    bottom: 23px;
  }
}

.audio-player {
  /* These are only fallback values, the AudioPlayer component inserts
   * the real colours dynamically as inline styles */
  --player-foreground-color: var(--color-text-on-media);
  --player-background-color: var(--color-bg-media-base);
  --player-accent-color: var(--color-text-brand);

  box-sizing: border-box;
  container: audio-player / inline-size;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: var(--player-foreground-color);
  background: var(--player-background-color);
  border-radius: 8px;
  outline: 1px solid var(--color-border-media);
  outline-offset: -1px;

  &__controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 100%;

    &__play {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .player-button {
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
      }

      .icon {
        filter: var(--overlay-icon-shadow);
      }
    }

    .player-button {
      display: inline-block;
      outline: 0;
      padding: 5px;
      flex: 0 0 auto;
      background: transparent;
      border: 0;
      color: var(--player-foreground-color);
      opacity: 0.75;

      .icon {
        width: 48px;
        height: 48px;
      }

      &:active,
      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  &__visualizer {
    width: 100%;
    max-width: 200px;
  }

  .video-player__seek {
    position: absolute;
    inset: 0 0 auto;
    height: 24px;
    z-index: 1; /* Ensure this renders on top of audio player controls */
  }

  &.inactive {
    .video-player__seek,
    .audio-player__controls,
    .video-player__controls {
      visibility: hidden;
    }
  }

  .video-player__volume::before,
  .video-player__seek::before {
    background: currentColor;
    opacity: 0.15;
  }

  .video-player__seek__buffer {
    background: currentColor;
    opacity: 0.2;
  }

  .video-player__seek__progress,
  .video-player__seek__handle,
  .video-player__volume__current,
  .video-player__volume__handle {
    background-color: var(--player-accent-color);
  }

  .video-player__buttons button,
  .video-player__buttons a {
    color: currentColor;
    opacity: 0.75;

    &:active,
    &:hover,
    &:focus {
      color: currentColor;
      opacity: 1;
    }
  }

  .video-player__time-sep,
  .video-player__time-total,
  .video-player__time-current {
    color: currentColor;
  }

  @container audio-player (max-width: 400px) {
    .video-player__time,
    .player-button.video-player__download__icon {
      display: none;
    }
  }

  .video-player__seek::before,
  .video-player__seek__buffer,
  .video-player__seek__progress {
    top: 0;
  }

  .video-player__seek__handle {
    top: -4px;
  }

  .video-player__controls {
    padding-top: 10px;
    background: transparent;
    z-index: 1;
  }
}

.video-player {
  overflow: hidden;
  position: relative;
  color: var(--color-text-on-media);
  background: var(--color-bg-media);
  max-height: var(--max-media-height-small);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  outline: 1px solid var(--color-border-media);
  outline-offset: -1px;
  z-index: 2;

  @container (width > 500px) {
    max-height: var(--max-media-height-large);
  }

  video {
    display: block;
    z-index: -2;
  }

  &.fullscreen {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    aspect-ratio: auto !important;
    outline: none;
    border-radius: 0;

    video {
      width: 100% !important;
      height: 100% !important;
      outline: 0;
    }
  }

  &__controls {
    position: absolute;
    direction: ltr;
    z-index: -1;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    box-sizing: border-box;
    background: linear-gradient(
      0deg,
      rgb(from var(--color-bg-media-base) r g b / 85%) 0,
      rgb(from var(--color-bg-media-base) r g b / 45%) 60%,
      transparent
    );
    padding: 0 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    will-change: opacity, pointer-events;

    &.active {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .media-gallery__actions {
    opacity: 0;
    transition: opacity 0.1s ease;

    &.active {
      opacity: 1;
    }
  }

  &.inactive {
    video,
    .video-player__controls {
      visibility: hidden;
    }
  }

  &__spoiler {
    display: none;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    border: 0;
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    transition: none;
    pointer-events: none;

    &.active {
      display: block;
      pointer-events: auto;

      &:hover,
      &:active,
      &:focus {
        color: color-mix(
          in oklab,
          var(--color-text-primary),
          var(--color-text-secondary)
        );
      }
    }

    &__title {
      display: block;
      font-size: 14px;
    }

    &__subtitle {
      display: block;
      font-size: 11px;
      font-weight: 500;
    }
  }

  &__buttons-bar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    margin: 0 -5px;

    .video-player__download__icon {
      color: inherit;
    }
  }

  &__buttons {
    display: flex;
    flex: 0 1 auto;
    min-width: 30px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 5px;

    .player-button {
      display: inline-block;
      outline: 0;
      padding: 5px;
      flex: 0 0 auto;
      background: transparent;
      border: 0;
      color: rgb(from var(--color-text-on-media) r g b / 75%);
      font-weight: 500;

      &:active,
      &:hover,
      &:focus {
        color: var(--color-text-on-media);
      }
    }
  }

  &__time {
    display: inline;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 5px;

    // Ensure digits maintain a consistent width
    font-variant-numeric: tabular-nums;
  }

  &__time-sep,
  &__time-total,
  &__time-current {
    color: var(--color-text-on-media);
    font-size: 14px;
    font-weight: 500;
  }

  &__time-sep {
    display: inline-block;
    margin: 0 6px;
  }

  &__volume {
    flex: 0 0 auto;
    display: inline-flex;
    cursor: pointer;
    height: 24px;
    position: relative;
    overflow: hidden;

    .no-reduce-motion & {
      transition: all 100ms linear;
    }

    &.active {
      overflow: visible;
      width: 50px;
      margin-inline-end: 16px;
    }

    &::before {
      content: '';
      width: 50px;
      background: rgb(from var(--color-text-on-media) r g b / 35%);
      border-radius: 4px;
      display: block;
      position: absolute;
      height: 4px;
      inset-inline-start: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    &__current {
      display: block;
      position: absolute;
      height: 4px;
      border-radius: 4px;
      inset-inline-start: 0;
      top: 50%;
      transform: translate(0, -50%);
      background: var(--color-text-on-media);
    }

    &__handle {
      position: absolute;
      z-index: 3;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      top: 50%;
      inset-inline-start: 0;
      margin-inline-start: -6px;
      transform: translate(0, -50%);
      background: var(--color-text-on-media);
      box-shadow: 1px 2px 6px var(--color-shadow-primary);
      opacity: 0;

      .no-reduce-motion & {
        transition: opacity 100ms linear;
      }
    }

    &.active &__handle {
      opacity: 1;
    }
  }

  &__link {
    padding: 2px 10px;

    a {
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-on-media);

      &:hover,
      &:active,
      &:focus {
        text-decoration: underline;
      }
    }
  }

  &__seek {
    cursor: pointer;
    height: 24px;
    position: relative;

    &::before {
      content: '';
      width: 100%;
      background: rgb(from var(--color-text-on-media) r g b / 35%);
      border-radius: 4px;
      display: block;
      position: absolute;
      height: 4px;
      top: 14px;
    }

    &__progress,
    &__buffer {
      display: block;
      position: absolute;
      height: 4px;
      border-radius: 4px;
      top: 14px;
      background: var(--color-text-on-media);
    }

    &__buffer {
      background: rgb(from var(--color-text-on-media) r g b / 20%);
    }

    &__handle {
      position: absolute;
      z-index: 3;
      opacity: 0;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      top: 10px;
      margin-inline-start: -6px;
      background: var(--color-text-on-media);
      box-shadow: 1px 2px 6px var(--color-shadow-primary);

      .no-reduce-motion & {
        transition: opacity 0.1s ease;
      }

      &.active {
        opacity: 1;
        cursor: grabbing;
      }
    }

    &:hover {
      .video-player__seek__handle {
        opacity: 1;
      }
    }
  }

  &__hotkey-indicator {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-on-media);
    background: var(--color-bg-media);
    backdrop-filter: $backdrop-blur-filter;
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &__label {
      font-size: 15px;
      font-weight: 500;
    }
  }

  &.detailed,
  &.fullscreen {
    .video-player__buttons {
      .player-button {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  }
}

.gifv {
  position: relative;

  canvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  video {
    max-width: 100vw;
    max-height: 80vh;
  }
}

.scrollable .account-card {
  margin: 10px;
}

.scrollable .account-card__title__avatar {
  img {
    border: 2px solid var(--color-bg-primary);
  }

  .account__avatar {
    border: none;
  }
}

.scrollable .account-card__header {
  img {
    border-radius: 4px;
  }
}

.scrollable .account-card__bio::after {
  background: linear-gradient(to left, var(--color-bg-primary), transparent);
}

.account-gallery__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;

  .media-gallery__item {
    border-radius: 0;
  }

  .load-more,
  .timeline-hint {
    grid-column: span 3;
  }
}

.notification__filter-bar,
.account__section-headline {
  border: 1px solid var(--color-border-primary);
  border-top: 0;
  cursor: default;
  display: flex;
  flex-shrink: 0;

  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
    border-right: 0;
    border-left: 0;
  }

  button {
    background: transparent;
    border: 0;
    margin: 0;
  }

  button,
  a {
    display: block;
    flex: 1 1 auto;
    color: var(--color-text-secondary);
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    position: relative;
    width: 100%;
    white-space: nowrap;

    &.active {
      color: var(--color-text-primary);

      &::before {
        display: block;
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        border-radius: 4px 4px 0 0;
        background: var(--color-text-brand);
      }
    }
  }

  .scrollable & {
    border-left: 0;
    border-right: 0;
  }
}

.filter-form {
  border-bottom: 1px solid var(--color-border-primary);

  &__column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }

  .radio-button {
    display: flex;
  }
}

.column-settings__row .radio-button {
  display: flex;
}

.radio-button,
.check-box {
  font-size: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  gap: 10px;
  color: var(--color-text-primary);

  input[type='radio'],
  input[type='checkbox'] {
    display: none;
  }

  &__input {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--color-text-primary);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;

    &.checked,
    &.indeterminate {
      border-color: var(--color-border-brand);
    }

    .icon {
      width: 18px;
      height: 18px;
    }
  }
}

.radio-button__input.checked::before {
  content: '';
  display: block;
  border-radius: 50%;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: var(--color-text-brand);
}

.check-box {
  &__input {
    width: 18px;
    height: 18px;
    border-radius: 2px;

    &.checked,
    &.indeterminate {
      background: var(--color-bg-brand-base);
      color: var(--color-text-on-brand-base);
    }
  }
}

noscript {
  text-align: center;

  img {
    width: 200px;
    opacity: 0.5;
    animation: flicker 4s infinite;
  }

  div {
    font-size: 14px;
    margin: 30px auto;
    color: var(--color-text-primary);
    max-width: 400px;

    a {
      color: var(--color-text-brand);
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

.column-inline-form {
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
  border: 1px solid var(--color-border-primary);
  border-top: 0;

  label {
    flex: 1 1 auto;

    input {
      width: 100%;
    }
  }

  @media screen and (max-width: $no-gap-breakpoint) {
    border-left: 0;
    border-right: 0;
  }
}

.drawer__backdrop {
  cursor: pointer;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background: rgb(from var(--color-bg-overlay) r g b / 50%);
}

.focal-point {
  position: relative;
  cursor: grab;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &.dragging {
    cursor: grabbing;
  }

  &__reticle {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-text-on-media);
    border-radius: 50%;
    box-shadow: 0 0 0 9999em var(--color-shadow-primary);
    pointer-events: none;
  }
}

.account__contents {
  overflow: hidden;
}

.account__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1em;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-success);
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;

  > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  a {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
  }

  .icon {
    width: 16px;
    height: 16px;
  }
}

.trends {
  &__item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-border-primary);
    gap: 8px;

    &__name {
      flex: 1 1 auto;
      color: var(--color-text-secondary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      strong {
        font-weight: 500;
      }

      a {
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover,
        &:focus,
        &:active {
          span {
            text-decoration: underline;
          }
        }
      }
    }

    &__current {
      flex: 0 0 auto;
      font-size: 24px;
      font-weight: 500;
      text-align: end;
      color: var(--color-text-primary);
      text-decoration: none;
    }

    &__sparkline {
      flex: 0 0 auto;
      width: 50px;

      path:first-child {
        fill: var(--color-graph-primary-fill) !important;
        fill-opacity: 1 !important;
      }

      path:last-child {
        stroke: var(--color-graph-primary-stroke) !important;
        fill: none !important;
      }
    }

    &--requires-review {
      .trends__item__name {
        color: var(--color-text-warning);

        a {
          color: var(--color-text-warning);
        }
      }

      .trends__item__current {
        color: var(--color-text-warning);
      }

      .trends__item__sparkline {
        path:first-child {
          fill: var(--color-graph-warning-fill) !important;
        }

        path:last-child {
          stroke: var(--color-graph-warning-stroke) !important;
        }
      }
    }

    &--disabled {
      .trends__item__name {
        color: var(--color-text-disabled);

        a {
          color: var(--color-text-disabled);
        }
      }

      .trends__item__current {
        color: var(--color-text-disabled);
      }

      .trends__item__sparkline {
        path:first-child {
          fill: var(--color-graph-disabled-fill) !important;
        }

        path:last-child {
          stroke: var(--color-graph-disabled-stroke) !important;
        }
      }
    }
  }

  &--compact &__item {
    padding: 12px;
  }
}

.conversation {
  display: flex;
  border-bottom: 1px solid var(--color-border-primary);
  padding: 5px;
  padding-bottom: 0;

  &:focus {
    background: var(--color-bg-secondary);
    outline: 0;
  }

  &__avatar {
    flex: 0 0 auto;
    padding: 10px;
    padding-top: 12px;
    position: relative;
    cursor: pointer;
  }

  &__unread {
    display: inline-block;
    background: var(--color-text-brand);
    border-radius: 50%;
    width: 0.625rem;
    height: 0.625rem;
    margin: -0.1ex 0.15em 0.1ex;
  }

  &__content {
    flex: 1 1 auto;
    padding: 10px 5px;
    padding-inline-end: 15px;
    overflow: hidden;

    &__info {
      overflow: hidden;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }

    &__relative-time {
      font-size: 15px;
      color: var(--color-text-secondary);
      padding-inline-start: 15px;
    }

    &__names {
      color: var(--color-text-secondary);
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
      flex-basis: 90px;
      flex-grow: 1;

      a {
        color: var(--color-text-primary);
        text-decoration: none;

        &:hover,
        &:focus,
        &:active {
          text-decoration: underline;
        }
      }
    }

    a {
      overflow-wrap: anywhere;
    }
  }
}

.announcements {
  width: calc(100% - 124px);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;

  .layout-multiple-columns & {
    width: 100%;
  }

  @media screen and (max-width: (124px + 300px)) {
    width: 100%;
  }

  &__root {
    background: var(--color-bg-brand-softest);
    font-size: 13px;
    display: flex;
    align-items: flex-end;
  }

  &__mastodon {
    width: 124px;
    flex: 0 0 auto;

    @media screen and (max-width: (124px + 300px)) {
      display: none;
    }
  }

  &__slides {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
  }

  &__slide {
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 100%;
    padding: 15px;
    position: relative;
    font-size: 15px;
    line-height: 20px;
    overflow-wrap: break-word;
    font-weight: 400;
    max-height: 50vh;
    overflow: hidden;
    flex-direction: column;
  }

  &__range {
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
    padding-inline-end: 18px;
  }

  &__unread {
    position: absolute;
    top: 19px;
    inset-inline-end: 19px;
    display: block;
    background: var(--color-text-brand);
    border-radius: 50%;
    width: 0.625rem;
    height: 0.625rem;
  }

  &__pagination {
    padding: 15px;
    color: var(--color-text-secondary);
    position: absolute;
    bottom: 3px;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    z-index: 1;
  }
}

.layout-multiple-columns .announcements__mastodon {
  display: none;
}

.layout-multiple-columns .announcements__container {
  width: 100%;
}

.reactions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 15px;
  margin-inline-start: -2px;
  width: calc(100% - (90px - 33px));

  &__item {
    flex-shrink: 0;
    background: var(--color-bg-brand-softest);
    color: color-mix(
      in oklab,
      var(--color-text-primary),
      var(--color-text-secondary)
    );
    border: 1px solid var(--color-border-brand-soft);
    border-radius: 3px;
    box-sizing: border-box;
    margin: 2px;
    cursor: pointer;
    user-select: none;
    padding: 0 6px;
    display: flex;
    align-items: center;
    transition: all 100ms ease-in;
    transition-property: background-color, color;

    &__emoji {
      display: block;
      margin: 3px 0;
      width: 16px;
      height: 16px;

      img {
        display: block;
        margin: 0;
        width: 100%;
        height: 100%;
        min-width: auto;
        min-height: auto;
        object-fit: contain;
      }
    }

    &__count {
      display: block;
      min-width: 9px;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      margin-inline-start: 6px;
    }

    &:hover,
    &:focus,
    &:active {
      color: var(--color-text-primary);
      background: var(--color-bg-brand-soft);
      transition: all 200ms ease-out;
      transition-property: background-color, color;
    }

    &.active {
      color: var(--color-text-brand);
      background-color: var(--color-bg-brand-softest);
      border-color: var(--color-border-brand);
      transition: all 100ms ease-in;
      transition-property: background-color, color;
    }
  }

  .emoji-picker-dropdown {
    display: flex;
    margin: 2px;
  }

  &:hover .emoji-button {
    opacity: 0.85;
  }

  .emoji-button {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 16px;
    width: auto;
    flex-shrink: 0;
    padding: 0 6px;
    height: 22px;
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: all 100ms ease-in;
    transition-property: background-color, color;

    &:hover,
    &:active,
    &:focus {
      opacity: 1;
      color: color-mix(
        in oklab,
        var(--color-text-primary),
        var(--color-text-secondary)
      );
      transition: all 200ms ease-out;
      transition-property: background-color, color;
    }
  }

  &--empty {
    .emoji-button {
      padding: 0;
    }
  }
}

.notification,
.status__wrapper,
.conversation {
  position: relative;

  &.unread {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      width: 100%;
      height: 100%;
      border-inline-start: 4px solid var(--color-border-brand);
      pointer-events: none;
    }
  }
}

.picture-in-picture {
  position: fixed;
  bottom: 20px;
  inset-inline-end: 20px;
  width: 300px;
  box-shadow: var(--dropdown-shadow);

  &__footer {
    border-radius: 0 0 4px 4px;
    background: var(--color-bg-secondary);
    backdrop-filter: $backdrop-blur-filter;
    border: 1px solid var(--color-border-primary);
    border-top: 0;
    padding: 12px;
    display: flex;
    justify-content: space-between;
  }

  &__header {
    border-radius: 4px 4px 0 0;
    background: var(--color-bg-secondary);
    backdrop-filter: $backdrop-blur-filter;
    border: 1px solid var(--color-border-primary);
    border-bottom: 0;
    padding: 12px;
    display: flex;
    justify-content: space-between;

    .icon-button {
      padding: 6px;
    }

    &__account {
      display: flex;
      text-decoration: none;
      overflow: hidden;
    }

    .account__avatar {
      margin-inline-end: 8px;
    }

    .display-name {
      color: var(--color-text-primary);
      text-decoration: none;

      strong,
      span {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      span {
        color: var(--color-text-secondary);
      }
    }
  }

  .video-player,
  .audio-player {
    border-radius: 0;
  }
}

.picture-in-picture-placeholder {
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px dashed var(--color-border-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-tertiary);
  aspect-ratio: 16 / 9;

  .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  &:hover,
  &:active,
  &:focus {
    color: var(--color-text-secondary);
  }

  &:focus-visible {
    outline: var(--outline-focus-default);
    border-color: transparent;
  }
}

.notifications-permission-banner {
  padding: 30px;
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  &__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
  }

  h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
  }

  p {
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    text-align: center;

    .icon {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
  }
}

.explore__search-header {
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border-primary);
  border-top: 0;
  border-bottom: 0;
  padding: 16px;
  padding-bottom: 8px;

  .search {
    width: 100%;
    margin-bottom: 0;
  }

  .search__input {
    padding-block: 12px;
    padding-inline-end: 30px;
  }

  .search__popout {
    border: 1px solid var(--color-border-primary);
  }

  .search__icon {
    top: 12px;
    inset-inline-end: 12px;
    color: var(--color-text-tertiary);
  }
}

.layout-single-column .explore__search-header {
  display: none;

  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
    display: flex;
  }
}

.explore__search-results {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $no-gap-breakpoint) {
    border: 1px solid var(--color-border-primary);
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.story {
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
  padding: 16px;
  border-bottom: 1px solid var(--color-border-primary);
  gap: 16px;

  &:last-child {
    border-bottom: 0;
  }

  &__details {
    flex: 1 1 auto;

    &__publisher {
      color: var(--color-text-secondary);
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 20px;
    }

    &__title {
      display: block;
      font-size: 19px;
      line-height: 24px;
      font-weight: 500;
      margin-bottom: 8px;
      text-decoration: none;
      color: var(--color-text-primary);

      &:hover,
      &:active,
      &:focus {
        color: var(--color-text-brand);
      }
    }

    &__shared {
      display: flex;
      align-items: baseline;
      color: var(--color-text-secondary);
      gap: 8px;
      justify-content: space-between;
      font-size: 14px;
      line-height: 20px;

      &__pill {
        background: var(--color-bg-tertiary);
        border-radius: 4px;
        color: inherit;
        text-decoration: none;
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        flex-shrink: 0;
      }

      &__author-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-text-primary);
        font-weight: 500;
        text-decoration: none;

        &:hover,
        &:active,
        &:focus {
          color: var(--color-text-brand);
        }
      }
    }

    strong {
      font-weight: 500;
    }
  }

  &__thumbnail {
    flex: 0 0 auto;
    position: relative;
    width: 120px;
    aspect-ratio: 1;

    .skeleton {
      width: 100%;
      height: 100%;
    }

    img {
      border-radius: 8px;
      display: block;
      margin: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &__preview {
      border-radius: 8px;
      display: block;
      margin: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      z-index: 0;

      &--hidden {
        display: none;
      }
    }
  }

  &.expanded {
    flex-direction: column;

    .story__thumbnail {
      order: 1;
      width: 100%;
      height: auto;
      aspect-ratio: 1.91 / 1;
    }

    .story__details {
      order: 2;
      width: 100%;
      flex: 0 0 auto;
    }
  }
}

.server-banner {
  &__introduction {
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;

    strong {
      font-weight: 700;
    }

    a {
      color: inherit;
      text-decoration: underline;

      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }
  }

  &__hero {
    display: block;
    border-radius: 4px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    aspect-ratio: 1.9;
    border: 0;
    background: var(--color-bg-tertiary);
    object-fit: cover;
  }

  &__description {
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
  }

  &__meta {
    display: flex;
    gap: 10px;
    max-width: 100%;

    &__column {
      flex: 0 0 auto;
      width: calc(50% - 5px);
      overflow: hidden;
    }
  }

  &__number {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 14px;
  }

  &__number-label {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 14px;
  }

  h4 {
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    font-weight: 600;
  }

  .account {
    padding: 0;
    border: 0;
  }

  .account__avatar-wrapper {
    margin-inline-start: 0;
  }

  .spacer {
    margin: 10px 0;
  }
}

.safety-action-modal,
.interaction-modal {
  max-width: 100vw;
  width: 600px;
  overflow-y: auto;
}

.interaction-modal {
  overflow: visible;
  position: relative;
  display: block;
  border-radius: 16px;
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  padding: 24px;
  box-sizing: border-box;

  @media screen and (max-width: $mobile-breakpoint) {
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding-bottom: 32px;
  }

  h3 {
    font-size: 22px;
    line-height: 33px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  p {
    text-align: center;
    font-size: 17px;
    line-height: 22px;
    color: var(--color-text-secondary);

    strong {
      color: var(--color-text-primary);
      font-weight: 700;
    }
  }

  p.hint {
    margin-bottom: 14px;
    font-size: 14px;
  }

  &__lead {
    margin-bottom: 20px;

    h3 {
      margin-bottom: 15px;
    }
  }

  &__login {
    position: relative;
    margin-bottom: 20px;

    &__input {
      @include search-input;

      border: 1px solid var(--color-border-primary);
      padding: 4px 6px;
      color: var(--color-text-primary);
      font-size: 16px;
      line-height: 18px;
      display: flex;
      align-items: center;

      input {
        background: transparent;
        color: inherit;
        font: inherit;
        border: 0;
        padding: 15px - 4px 15px - 6px;
        flex: 1 1 auto;
        min-width: 0;

        &::placeholder {
          color: color-mix(
            in oklab,
            var(--color-text-primary),
            var(--color-text-secondary)
          );
        }

        &:focus {
          outline: 0;
        }
      }

      .button {
        flex: 0 0 auto;
      }
    }

    .search__popout {
      margin-top: -1px;
      padding-top: 5px;
      padding-bottom: 5px;
      border: 1px solid var(--color-border-primary);
    }

    &.invalid &__input {
      border-color: var(--color-border-error);
    }

    &.expanded .search__popout {
      display: block;
    }

    &.expanded &__input {
      border-radius: 4px 4px 0 0;
    }
  }

  &__choices {
    display: flex;
    gap: 40px;

    &__choice {
      flex: 1;
      box-sizing: border-box;

      h3 {
        margin-bottom: 20px;
      }

      p {
        color: var(--color-text-secondary);
        margin-bottom: 20px;
        font-size: 15px;
      }

      .button {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
    &__choices {
      flex-direction: column;

      &__choice {
        margin-top: 40px;
      }
    }
  }

  .link-button {
    font-size: inherit;
    display: inline;
  }
}

.privacy-policy {
  padding: 20px;

  @media screen and (min-width: $no-gap-breakpoint) {
    border-radius: 4px;
  }

  &__body {
    margin-top: 20px;
  }
}

.prose {
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 22px;

  p,
  ul,
  ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  img {
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
  }

  video {
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
  }

  figure {
    margin-top: 2em;
    margin-bottom: 2em;

    figcaption {
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
  }

  figure > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  h1 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 1em;
    line-height: 1.33;
  }

  h2 {
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }

  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
  }

  ol {
    counter-reset: list-counter;
  }

  li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  ol > li {
    counter-increment: list-counter;

    &::before {
      content: counter(list-counter) '.';
      position: absolute;
      inset-inline-start: 0;
    }
  }

  ul > li::before {
    content: '';
    position: absolute;
    background-color: var(--color-text-secondary);
    border-radius: 50%;
    width: 0.375em;
    height: 0.375em;
    top: 0.5em;
    inset-inline-start: 0.25em;
  }

  ul > li,
  ol > li {
    position: relative;
    padding-inline-start: 1.75em;
  }

  & > ul > li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  & > ul > li > *:first-child {
    margin-top: 1.25em;
  }

  & > ul > li > *:last-child {
    margin-bottom: 1.25em;
  }

  & > ol > li > *:first-child {
    margin-top: 1.25em;
  }

  & > ol > li > *:last-child {
    margin-bottom: 1.25em;
  }

  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b {
    color: var(--color-text-primary);
    font-weight: 700;
  }

  em,
  i {
    font-style: italic;
  }

  a {
    color: var(--color-text-brand);
    text-decoration: underline;

    &:focus,
    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  code {
    font-size: 0.875em;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    padding: 0.2em 0.3em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border-primary);
    margin-top: 3em;
    margin-bottom: 3em;
  }

  hr + * {
    margin-top: 0;
  }

  h2 + * {
    margin-top: 0;
  }

  h3 + * {
    margin-top: 0;
  }

  h4 + *,
  h5 + *,
  h6 + * {
    margin-top: 0;
  }

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

.dismissable-banner,
.warning-banner {
  position: relative;
  margin: 10px;
  margin-bottom: 5px;
  border-radius: 8px;
  border: 1px solid var(--color-border-brand-soft);
  background: var(--color-bg-brand-softest);
  overflow: hidden;
  flex-shrink: 0;

  &__background-image {
    width: 125%;
    position: absolute;
    bottom: -25%;
    inset-inline-end: -25%;
    z-index: -1;
    opacity: 0.15;
    mix-blend-mode: luminosity;
  }

  &__message {
    flex: 1 1 auto;
    padding: 15px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--color-text-primary);

    p {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    h1 {
      color: var(--color-text-brand);
      font-size: 22px;
      line-height: 33px;
      font-weight: 700;
      margin-bottom: 15px;
    }

    &__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;

      &__wrapper {
        display: flex;
        margin-top: 30px;
      }

      .button {
        display: block;
        flex-grow: 1;
      }
    }
  }

  &__action {
    float: right;
    padding: 15px 10px;

    .icon-button {
      color: var(--color-text-brand);
    }
  }
}

.warning-banner {
  border: 1px solid var(--color-border-error-soft);
  background: var(--color-bg-error-softest);

  &__message {
    h1 {
      color: var(--color-text-error);
    }

    a {
      color: var(--color-text-primary);
    }
  }
}

.image {
  position: relative;
  overflow: hidden;

  &__preview {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &.loaded &__preview {
    display: none;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    background: transparent;
    opacity: 0;
  }

  &.loaded img {
    opacity: 1;
  }
}

.link-footer {
  flex: 0 0 auto;
  padding-top: 20px;
  z-index: 1;
  font-size: 13px;

  .column & {
    padding: 15px;
  }

  p {
    color: var(--color-text-secondary);
    margin-bottom: 20px;

    .version {
      white-space: nowrap;
    }

    strong {
      font-weight: 500;
    }

    a {
      color: var(--color-text-secondary);
      text-decoration: underline;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }
}

.about {
  padding: 20px;
  border-top: 1px solid var(--color-border-primary);

  @media screen and (min-width: $no-gap-breakpoint) {
    border-radius: 4px;
  }

  &__footer {
    color: var(--color-text-tertiary);
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    margin-top: 20px;
  }

  &__header {
    margin-bottom: 30px;

    &__hero {
      width: 100%;
      height: auto;
      aspect-ratio: 1.9;
      background: var(--color-bg-tertiary);
      border-radius: 8px;
      margin-bottom: 30px;
    }

    h1,
    p {
      text-align: center;
    }

    h1 {
      font-size: 24px;
      line-height: 1.5;
      font-weight: 700;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: var(--color-text-secondary);
    }
  }

  &__meta {
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    display: flex;
    margin-bottom: 30px;
    font-size: 15px;

    &__column {
      box-sizing: border-box;
      width: 50%;
      padding: 20px;
    }

    &__divider {
      width: 0;
      border: 0;
      border-style: solid;
      border-color: var(--color-border-primary);
      border-left-width: 1px;
      min-height: calc(100% - 60px);
      flex: 0 0 auto;
    }

    h4 {
      font-size: 15px;
      text-transform: uppercase;
      color: var(--color-text-secondary);
      font-weight: 500;
      margin-bottom: 20px;
    }

    @media screen and (width <= 600px) {
      display: block;

      h4 {
        text-align: center;
      }

      &__column {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      &__divider {
        min-height: 0;
        width: 100%;
        border-left-width: 0;
        border-top-width: 1px;
      }
    }

    .layout-multiple-columns & {
      display: block;

      h4 {
        text-align: center;
      }

      &__column {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      &__divider {
        min-height: 0;
        width: 100%;
        border-left-width: 0;
        border-top-width: 1px;
      }
    }
  }

  &__mail {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
    }
  }

  .link-footer {
    padding: 0;
    margin-top: 60px;
    text-align: center;
    font-size: 15px;
    line-height: 22px;

    @media screen and (min-width: $no-gap-breakpoint) {
      display: none;
    }
  }

  .account {
    padding: 0;
    border: 0;
  }

  .account__avatar-wrapper {
    margin-inline-start: 0;
  }

  .account__relationship {
    display: none;
  }

  &__section {
    margin-bottom: 10px;

    &__title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 17px;
      font-weight: 600;
      line-height: 22px;
      padding: 20px;
      border-radius: 4px;
      border: 1px solid var(--color-border-primary);
      color: var(--color-text-brand);
      cursor: pointer;
      width: 100%;
      background: none;
    }

    &.active &__title {
      border-radius: 4px 4px 0 0;
    }

    &__body {
      border: 1px solid var(--color-border-primary);
      border-top: 0;
      padding: 20px;
      font-size: 15px;
      line-height: 22px;
    }
  }

  &__domain-blocks {
    margin-top: 30px;
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;

    &__domain {
      border-bottom: 1px solid var(--color-border-primary);
      padding: 10px;
      font-size: 15px;
      color: var(--color-text-secondary);

      &:nth-child(2n) {
        background: var(--color-bg-secondary);
      }

      &:last-child {
        border-bottom: 0;
      }

      &__header {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        font-weight: 500;
        margin-bottom: 4px;
      }

      h6 {
        color: var(--color-text-primary);
        font-size: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.notification-list {
  position: fixed;
  bottom: 2rem;
  inset-inline-start: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-bar {
  --alert-edge-spacing: 1rem;

  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  padding: 15px;
  margin: 0;
  color: var(--color-text-inverted);
  background: var(--color-bg-inverted);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px var(--color-shadow-primary),
    0 4px 6px -4px var(--color-shadow-primary);
  cursor: default;
  font-size: 15px;
  line-height: 21px;

  &.from-side {
    translate: calc(
      -1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction)
    );
  }

  &.from-below {
    translate: 0 calc(100% + var(--alert-edge-spacing));
  }

  &.notification-bar--active {
    translate: none;
  }

  .no-reduce-motion & {
    transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
    will-change: translate;
  }
}

.notification-bar__content {
  margin-inline-end: auto;
}

.notification-bar__title {
  margin-inline-end: 5px;
  font-weight: 700;
}

.notification-bar__action {
  display: inline-block;
  border: 0;
  background: transparent;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-text-brand-on-inverted);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 4px;

  &:hover,
  &:active {
    background: rgb(from var(--color-text-inverted) r g b / 10%);
  }

  &:focus-visible {
    outline: 2px solid var(--color-text-brand-on-inverted);
    outline-offset: 2px;
  }
}

.notification-bar__dismiss-button {
  margin-top: -2px;
  color: rgb(from currentColor r g b / 85%);

  &:hover,
  &:focus,
  &:active {
    color: currentColor;
  }
}

.notification-bar__loading-indicator {
  --spinner-size: 22px;

  position: relative;
  height: var(--spinner-size);
  width: var(--spinner-size);
  margin-inline-start: 2px;

  svg {
    color: var(--color-text-on-media);
    height: var(--spinner-size);
    width: var(--spinner-size);
  }
}

.hashtag-header {
  border-bottom: 1px solid var(--color-border-primary);
  padding: 15px;
  font-size: 17px;
  line-height: 22px;
  color: var(--color-text-secondary);

  strong {
    font-weight: 700;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;

    h1 {
      color: var(--color-text-primary);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 22px;
      line-height: 33px;
      font-weight: 700;
    }

    &__buttons {
      display: flex;
      align-items: center;
      gap: 8px;

      .button {
        flex-shrink: 1;
        white-space: nowrap;
        min-width: 80px;
      }

      .icon-button {
        border: 1px solid var(--color-border-primary);
        border-radius: 4px;
        box-sizing: content-box;
        padding: 5px;

        .icon {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

.hashtag-bar {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 16px;
  gap: 6px;
  color: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-secondary)
  );

  a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
    padding: 4px 12px;
    background: var(--color-bg-brand-softest);
    border-radius: 4px;
    font-weight: 500;

    &:hover,
    &:focus,
    &:active,
    .focusable:focus-visible &,
    .detailed-status__wrapper-direct .detailed-status &,
    .status__wrapper-direct & {
      background: var(--color-bg-brand-soft);
    }
  }

  .link-button {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
  }
}

.inline-follow-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-brand-softest);

  &.focusable:focus-visible {
    background: var(--color-bg-brand-softest);
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    h3 {
      font-size: 15px;
      line-height: 22px;
      font-weight: 500;
    }

    &__actions {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .link-button {
      font-size: 13px;
      font-weight: 500;
    }
  }

  &__body {
    position: relative;

    &__scroll-button {
      --scroll-button-bg: var(--color-bg-brand-base);

      position: absolute;
      height: 100%;
      background: transparent;
      border: none;
      cursor: pointer;
      top: 0;
      color: var(--color-text-primary);

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }

      &__icon {
        border-radius: 50%;
        color: var(--color-text-on-brand-base);
        background: var(--scroll-button-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        padding: 8px;

        .icon {
          width: 24px;
          height: 24px;
        }
      }

      &:hover,
      &:focus,
      &:active {
        --scroll-button-bg: var(--color-bg-brand-base-hover);
      }
    }

    &__scrollable {
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      min-height: 228px;
      gap: 16px;
      padding: 16px;
      scroll-snap-type: x mandatory;
      scroll-padding: 16px;
      scroll-behavior: smooth;
      overflow-x: scroll;
      scrollbar-width: none;

      &__card {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border-primary);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        padding: 12px;
        scroll-snap-align: start;
        flex: 0 0 auto;
        width: 200px;
        box-sizing: border-box;
        position: relative;

        a {
          text-decoration: none;
        }

        & > .icon-button {
          position: absolute;
          inset-inline-end: 8px;
          top: 8px;
          opacity: 0.75;
        }

        &__avatar {
          height: 48px;
          display: flex;

          a {
            display: flex;
            text-decoration: none;
          }
        }

        .account__avatar {
          flex-shrink: 0;
          align-self: flex-end;
          border: 1px solid var(--color-border-primary);
          background-color: var(--color-bg-tertiary);
        }

        &__text-stack {
          display: flex;
          flex-direction: column;
          gap: 4px;
          align-items: center;
          max-width: 100%;

          a {
            max-width: 100%;
          }

          &__source {
            cursor: help;
          }
        }

        .display-name {
          display: flex;
          flex-direction: column;
          gap: 4px;
          align-items: center;

          & > * {
            max-width: 100%;
          }

          &__html {
            font-size: 15px;
            font-weight: 500;
            color: var(--color-text-primary);
          }

          &__account {
            font-size: 14px;
            color: var(--color-text-secondary);
          }
        }

        .button {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

.filtered-notifications-banner {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-primary);
  padding: 16px 24px;
  gap: 8px;
  color: var(--color-text-secondary);
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    color: var(--color-text-primary);
  }

  .notification-group__icon {
    color: inherit;
  }

  &__text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 20px;

    strong {
      font-size: 16px;
      line-height: 24px;
      display: block;
    }
  }

  &__badge {
    color: var(--color-text-on-brand-base);
    background: var(--color-bg-brand-base);
    border-radius: 100px;
    padding: 2px 8px;
  }
}

.notification-request {
  $padding: 15px;

  display: flex;
  padding: $padding;
  gap: 8px;
  position: relative;
  border-bottom: 1px solid var(--color-border-primary);

  &__checkbox {
    position: absolute;
    inset-inline-start: $padding;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    opacity: 0;

    .check-box {
      display: flex;
    }
  }

  &__link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    text-decoration: none;
    color: inherit;
    overflow: hidden;

    .account__avatar {
      flex-shrink: 0;
    }
  }

  &__name {
    flex: 1 1 auto;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;

    &__display-name {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      letter-spacing: 0.5px;
      line-height: 24px;
      color: var(--color-text-primary);

      bdi {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .filtered-notifications-banner__badge {
      color: var(--color-text-on-brand-base);
      background: var(--color-bg-brand-base);
      border-radius: 4px;
      padding: 1px 6px;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .icon-button {
      border-radius: 4px;
      border: 1px solid var(--color-border-primary);
      padding: 5px;
    }
  }

  .notification-request__link {
    transition: padding-inline-start 0.1s ease-in-out;
  }

  &--forced-checkbox {
    cursor: pointer;

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

    .notification-request__checkbox {
      opacity: 1;
      width: 30px;
    }

    .notification-request__link {
      padding-inline-start: 30px;
    }

    .notification-request__actions {
      display: none;
    }
  }
}

.more-from-author {
  box-sizing: border-box;
  font-size: 14px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;

  .logo {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
  }

  a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 0;

    &:hover,
    &:focus,
    &:active {
      color: var(--color-text-brand);
    }
  }
}

.notification-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-primary);

  &__icon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-text-tertiary);

    .icon {
      width: 28px;
      height: 28px;
    }
  }

  &--follow &__icon,
  &--follow-request &__icon {
    color: var(--color-text-brand);
  }

  &--favourite &__icon {
    color: var(--color-text-favourite-highlight);
  }

  &--reblog &__icon {
    color: var(--color-text-success);
  }

  &--relationships-severance-event &__icon,
  &--admin-report &__icon,
  &--admin-sign-up &__icon {
    color: var(--color-text-tertiary);
  }

  &--moderation-warning &__icon {
    color: var(--color-text-bookmark-highlight);
  }

  &--follow-request &__actions {
    align-items: center;
    display: flex;
    gap: 8px;

    .icon-button {
      border: 1px solid var(--color-border-primary);
      border-radius: 50%;
      padding: 1px;
    }
  }

  &__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    overflow: hidden;
    container-type: inline-size;

    &__header {
      display: flex;
      flex-direction: column;
      gap: 8px;

      &__wrapper {
        display: flex;
        justify-content: space-between;
      }

      &__label {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 8px;
        font-size: 15px;
        line-height: 22px;
        color: var(--color-text-secondary);

        a {
          color: inherit;
          text-decoration: none;
        }

        bdi {
          font-weight: 700;
          color: var(--color-text-primary);
        }

        time {
          color: var(--color-text-tertiary);
        }

        @container (width < 350px) {
          time,
          &-separator {
            display: none;
          }
        }
      }
    }

    &__status {
      border: 1px solid var(--color-border-primary);
      border-radius: 8px;
      padding: 8px;
    }

    &__additional-content {
      color: var(--color-text-tertiary);
      margin-top: -8px; // to offset the parent's `gap` property
      font-size: 15px;
      line-height: 22px;
    }
  }

  .status {
    padding: 0;
    border: 0;
  }

  &__embedded-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;

    &__account {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--color-text-tertiary);
      font-size: 15px;
      line-height: 22px;

      bdi {
        color: var(--color-text-secondary);
      }

      .account__avatar {
        flex: 0 0 auto;
      }
    }

    &__content {
      display: -webkit-box;
      font-size: 15px;
      line-height: 22px;
      color: var(--color-text-secondary);
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      max-height: none;
      overflow: hidden;

      p,
      a {
        color: inherit;
      }

      p {
        margin-bottom: 8px;
      }
    }

    .reply-indicator__attachments {
      margin-top: 0;
      font-size: 15px;
      line-height: 22px;
      color: var(--color-text-tertiary);
    }
  }
}

.notification-group__actions,
.compose-form__actions {
  .button {
    display: block; // Otherwise text-ellipsis doesn't work
    flex: 1 1 auto;
  }
}

.notification-ungrouped {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-primary);

  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-tertiary);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    padding-inline-start: 24px;
    margin-bottom: 16px;

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;

      .icon {
        width: 16px;
        height: 16px;
      }
    }

    a {
      color: inherit;
      text-decoration: none;
    }
  }

  .status:not(.status--is-quote) {
    border: 0;
    padding: 0;
  }

  .status__wrapper-direct {
    background: transparent;
  }

  .status {
    // 40px avatar + 8px gap
    --status-gutter-width: 48px;
  }

  .status--is-quote {
    --status-gutter-width: 0;
  }

  .status__content,
  .status__action-bar,
  .media-gallery,
  .video-player,
  .audio-player,
  .attachment-list,
  .picture-in-picture-placeholder,
  .more-from-author,
  .status-card,
  .collection-preview,
  .hashtag-bar,
  .content-warning,
  .filter-warning {
    margin-inline-start: var(--status-gutter-width);
    width: calc(100% - var(--status-gutter-width));
  }

  .more-from-author {
    width: calc(100% - var(--status-gutter-width) + 2px);
  }

  .status__content__read-more-button {
    margin-inline-start: var(--status-gutter-width);
  }

  .notification__report {
    border: 0;
    padding: 0;
  }
}

.notification-group--unread,
.notification-ungrouped--unread {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    border-inline-start: 4px solid var(--color-border-brand);
    pointer-events: none;
  }
}

.hover-card-controller[data-popper-reference-hidden='true'] {
  opacity: 0;
  pointer-events: none;
}

.hover-card {
  box-shadow: var(--dropdown-shadow);
  background: var(--color-bg-primary);
  backdrop-filter: $backdrop-blur-filter;
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 16px;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  &--loading {
    position: relative;
    min-height: 100px;
  }

  &__name {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
  }

  &__numbers,
  &__familiar-followers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  &__numbers {
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-primary);

    strong {
      font-weight: 700;
    }
  }

  &__text-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__bio {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 20px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2 * 20px;
    overflow: hidden;

    p {
      margin-bottom: 0;
    }

    a {
      color: inherit;
      text-decoration: underline;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }

  &__note {
    &-label {
      color: var(--color-text-tertiary);
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
    }

    dd {
      white-space: pre-line;
      color: var(--color-text-primary);
      overflow: hidden;
      line-clamp: 3; // Not yet supported in browers
      display: -webkit-box; // The next 3 properties are needed
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  &__limited-account-note {
    text-align: center;
    font-weight: 500;
  }

  .display-name {
    font-size: 15px;
    line-height: 22px;

    bdi {
      font-weight: 500;
      color: var(--color-text-primary);
    }

    &__account {
      display: block;
      color: var(--color-text-tertiary);
    }
  }

  .account-fields {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 20px;

    a {
      color: inherit;
      text-decoration: none;

      &:focus,
      &:hover,
      &:active {
        text-decoration: underline;
      }
    }

    dl {
      display: flex;
      align-items: center;
      gap: 4px;

      dt {
        flex: 0 1 auto;
        color: var(--color-text-tertiary);
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      dd {
        flex: 1 1 auto;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: end;
      }

      &.verified {
        dd {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 4px;
          overflow: hidden;
          white-space: nowrap;
          color: var(--color-text-success);

          & > span {
            overflow: hidden;
            text-overflow: ellipsis;
          }

          a {
            font-weight: 500;
          }

          .icon {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

.content-warning {
  display: block;
  box-sizing: border-box;
  color: var(--color-text-primary);
  background: var(--color-bg-brand-softest);
  border: 1px solid var(--color-border-brand-soft);
  border-radius: 8px;
  padding: 8px (5px + 8px);
  position: relative;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;

  p {
    margin-bottom: 8px;
    font-weight: 500;
  }

  .link-button {
    font-size: inherit;
    line-height: inherit;
    font-weight: 500;
  }

  &--filter {
    color: var(--color-text-secondary);

    p {
      font-weight: normal;
    }

    .filter-name {
      font-weight: 500;
      color: var(--color-text-primary);
    }
  }
}

.lists__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline-end: 13px;
  border-bottom: 1px solid var(--color-border-primary);

  &__title {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 16px 13px;
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
    text-decoration: none;

    &:is(a):hover,
    &:is(a):focus,
    &:is(a):active {
      color: var(--color-text-primary);
    }

    input {
      display: block;
      width: 100%;
      background: transparent;
      border: 0;
      padding: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      color: inherit;

      &::placeholder {
        color: var(--color-text-secondary);
        opacity: 1;
      }

      &:focus {
        outline: 0;
      }
    }
  }
}

.column-search-header {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--color-border-primary);
  border-top: 0;
  border-bottom: 0;
  padding: 16px;
  padding-bottom: 8px;

  input {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
    padding: 12px;
    font-size: 16px;
    line-height: normal;
    border-radius: 4px;
    display: block;
    flex: 1 1 auto;

    &::placeholder {
      color: var(--color-text-secondary);
      opacity: 1;
    }

    &:focus {
      outline: 0;
    }
  }
}

.column-footer {
  padding: 16px;
  position: sticky;
  bottom: 0;
  background: var(--color-bg-primary);
}

.lists-scrollable {
  min-height: 50vh;
}

.featured-carousel {
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-primary);
  touch-action: pan-y;

  &__slides {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
  }

  &__slide {
    flex: 0 0 auto;
    flex-basis: 100%;
    width: 100%;
    overflow: hidden;
  }

  .status {
    border-bottom: 0;
  }

  &__header {
    padding: 8px 16px;
    color: var(--color-text-secondary);
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &__title {
    flex-grow: 1;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;

    .icon {
      width: 16px;
      height: 16px;
    }
  }

  &__pagination {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}