lila/ui/bits/css/_markdown-textarea.scss

.markdown-textarea {
  overflow: visible; // don't clip textarea focus ring

  $c-bg-preview: $c-bg-input;

  @include if-transp {
    $c-bg-preview: $c-bg-opaque;
  }

  .comment-header {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    gap: 4px;
    align-items: center;
    z-index: 1;

    &:has(.header-tab:first-of-type:hover) + .comment-content textarea,
    &:has(.header-tab:first-of-type.active) + .comment-content textarea {
      border-top-left-radius: 0;
    }
  }

  .header-tab {
    all: unset;
    font-family: Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 112px;
    height: 40px;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: $c-font-dimmer;
    cursor: pointer;
  }

  .header-tab.active {
    position: relative;
    background: $c-bg-preview;
    border-color: $c-border;
    color: $c-font;
    font-weight: bold;
    cursor: default;

    &.write {
      background-color: $c-bg-input;
    }
  }

  .header-tab.active::after {
    position: absolute;
    content: ''; // hide a bit of textarea focus ring
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background-color: $c-bg-preview;
  }

  .header-tab.active.write::after {
    background-color: $c-bg-input;
  }

  &:has(textarea:focus) .write.active {
    outline: $outline;
    outline-offset: -2px;

    &::after {
      left: 1px;
      right: 1px;
    }
  }

  .upload-image {
    all: unset;
    margin: 0 16px;
    width: 24px;
    height: 24px;
    background-color: $c-font-dimmer;
    cursor: pointer;
    mask: url('../images/buttons/add-photo-outline-material.svg') 0 0 / contain no-repeat;
  }

  .upload-image.disabled {
    background-color: $c-border;
    cursor: default;
  }

  .comment-content {
    overflow: visible; // don't clip textarea focus ring
    position: relative;
  }

  .comment-preview {
    position: absolute;
    inset: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.8em 1em 0;
    border-radius: 6px 6px 24px 6px;
    background: $c-bg-preview;
  }

  .comment-preview img {
    max-width: 100%;
    margin: 0 auto;
    height: auto;
  }

  &:has(.uploading) {
    .comment-preview {
      background: $m-bg--alpha-50;
    }

    button {
      pointer-events: none;
    }

    .spinner {
      margin: 24px 0 0;
    }
  }

  .comment-preview .uploading {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }
}

@media (hover: hover) and (pointer: fine) {
  .markdown-textarea .header-tab:hover:not(.active) {
    background-color: $m-border--fade-80;
    border-color: $m-border--fade-60;
    color: $c-font;
  }

  .markdown-textarea .upload-image:hover:not(.disabled) {
    background-color: $c-primary;
  }
}