.funkwhale {
  &.textarea-label {
    > .label {
      margin-top: -18px;
      font-size: 14px;
      font-weight: 600;
    }
  }
  &.textarea {
    background-color: var(--fw-bg-color);
    box-shadow: inset 0 0 0 4px var(--fw-border-color);

    &.has-preview {
      background-color: var(--fw-bg-color);
    }

    > textarea {
      resize: none;
      order: 0;
      outline: none;
      border: none;
      color: currentcolor;
    }

    overflow: hidden;

    > .textarea-buttons {
      flex-wrap: wrap;
      // Offset padding of the textarea
      margin: -8px;

      > button+button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      > button:has(+button) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    @include light-theme {
      --fw-border-color: var(--fw-bg-color);
      --fw-buttons-border-color: var(--fw-gray-400);
      --fw-bg-color: var(--fw-gray-100);
      --fw-buttons-color: var(--fw-gray-100);

      &:hover {
        --fw-border-color: var(--fw-gray-300);
      }

      &.has-preview,
      &:hover:focus-within {
        --fw-border-color: transparent;
        --fw-bg-color: var(--fw-blue-010);
      }
    }

    @include dark-theme {
      --fw-bg-color: var(--fw-gray-850);
      --fw-border-color: var(--fw-bg-color);
      --fw-buttons-border-color: var(--fw-gray-950);
      --fw-buttons-color: var(--fw-gray-700);

      &:hover {
        --fw-border-color: var(--fw-gray-700);
      }

      &.has-preview,
      &:hover:focus-within {
        --fw-border-color: transparent;
        --fw-bg-color: var(--fw-gray-800);
      }
    }

    position: relative;
    padding: 8px;

    // Make border trace the radius of the buttons smoothly
    border-radius: calc(var(--fw-border-radius) + 4px);

    &.has-preview,
    &:focus-within {
      > .textarea-buttons {
        opacity: 1;
        transform: translateY(0rem);
        pointer-events: auto;
      }
    }

    &.has-preview > .preview {
      opacity: 1;
      transform: translateY(0rem);
      pointer-events: auto;
    }

    > .preview {
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      bottom: 42px;
      overflow-y: auto;
      background-color: inherit;
      opacity: 0;
      transform: translateY(.5rem);
      pointer-events: none;
      transition: all .2s ease;
    }

    > textarea {
      line-height: 1.5rem;
      display: block;
      width: 100%;
      padding: 8px 12px 8px;
      font-family: monospace;
      background: transparent;

      &:placeholder-shown {
        font-family: $font-main;
      }
    }

    > .textarea-buttons {
      display: flex;
      align-items: center;

      position: relative;

      opacity: 0;
      transform: translateY(1rem) scale(1.03);
      pointer-events: none;
      transition: all .2s ease;
    }
  }
}
