// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.bbcode-editor {
  @_top: bbcode-editor;
  @buttons-margin: 5px;
  @content-padding: 10px;
  @editor-padding: 15px;

  .fancy-scrollbar();
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; // prevent preview overflow in mobile
  min-width: 0; // prevent image overflow

  &--create {
    .default-gutter-v2();
    padding-top: @editor-padding;
    padding-bottom: $padding-top;
    background-color: @osu-colour-b2;
  }

  &--beatmapset-description-editor {
    .default-gutter-v2();
    padding-top: @editor-padding;
    padding-bottom: $padding-top;
    background-color: hsl(var(--hsl-b2));
    border-radius: @border-radius-large;
  }

  &--profile-page {
    padding-right: var(--inner-gutter);
  }

  &__body {
    .reset-input();
    font-family: @font-family-monospace;
    font-size: @font-size--phone-input;
    resize: vertical;
    width: 100%;
    min-height: 150px;
    flex: 1 0 auto;

    &:invalid {
      box-shadow: none; // disable highlight on firefox
    }

    @media @desktop {
      min-height: 300px;
      font-size: @font-size--title-small;
    }

    .@{_top}[data-state="preview"] & {
      display: none;
    }

    .@{_top}[data-state="loading-preview"] & {
      opacity: 0.5;
      pointer-events: none;
    }

    .@{_top}--beatmapset-description-editor & {
      // approximation of 80vh - 3 lines of button bars and editor padding
      max-height: calc(
        80vh - 2 * @editor-padding - 2 * @content-padding - 3 *
          (1em + 2 * @buttons-margin)
      );
    }
  }

  &__button {
    margin: @buttons-margin;

    &--deactivate {
      display: none;

      .js-forum-topic-reply[data-state="stick"] & {
        display: block;
      }
    }

    &--hide-on-preview {
      .@{_top}[data-state="loading-preview"] &,
      .@{_top}[data-state="preview"] & {
        display: none;
      }
    }

    &--hide-on-write {
      .@{_top}[data-state="write"] & {
        display: none;
      }
    }
  }

  &__buttons {
    margin: @buttons-margin;
    display: flex;

    &--actions {
      margin: 0;
      flex: 1;
      justify-content: flex-end;
    }

    &--toolbar {
      .@{_top}[data-state="loading-preview"] &,
      .@{_top}[data-state="preview"] & {
        display: none;
      }
    }
  }

  &__buttons-bar {
    margin: auto -@buttons-margin -@buttons-margin;
    display: flex;
    flex-direction: column;
    align-items: center;

    @media @desktop {
      flex-direction: row;
    }
  }

  &__content {
    background-color: hsl(var(--hsl-b3));
    border-radius: @border-radius-large;
    padding: @content-padding;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; // prevent preview overflow in mobile

    .@{_top}--create & {
      padding: 20px 20px 10px;
    }

    .@{_top}--profile-page & {
      background-color: transparent;
      padding: 0 0 var(--padding-vertical); // defined by page-extra
    }
  }

  &__header {
    margin-bottom: 10px;
    margin-left: 10px;
    display: flex;
    align-items: center;
  }

  &__input-title {
    .reset-input();
    font-size: @font-size--title;
    margin-bottom: 10px;
  }

  &__preview {
    display: none;

    .@{_top}[data-state="preview"] & {
      display: block;
      min-height: 0;
      overflow-y: auto;
      margin-bottom: 5px;
    }
  }

  &__title {
    font-size: @font-size--title-small;
    color: @osu-colour-c1;
    padding: 0;
    margin: 0;
    font-style: normal;
    flex: 1;
  }
}