@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;
@use '_form-mixins' as *;

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

  textarea {
    @include peertube-textarea(100%, 170px);
  }

  .preview,
  .preview-maximized {
    @include peertube-word-wrap;
  }

  .buttons {
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  &.maximized {
    z-index: #{z(root-header) - 1};
    position: fixed;
    top: pvar(--header-height);

    width: calc(100% - #{pvar(--menu-width)} - (#{pvar(--x-margin-content)} * 2));
    height: calc(100vh - #{pvar(--header-height)});

    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;

    background-color: pvar(--bg);

    @include left(calc(#{pvar(--menu-width)} + #{pvar(--x-margin-content)}));

    .buttons {
      grid-row: 1;
      grid-column: 1 / 3;

      border-bottom: 2px solid pvar(--primary);

      padding: 20px 0;
      width: 100% !important;
    }

    textarea,
    .preview-maximized {
      height: 100% !important;
      max-height: none !important;
      border-radius: 0;

      padding: 1rem;
    }

    textarea {
      grid-column: 1;
      grid-row: 2;

      border: 0;
      border-right: 1px dashed pvar(--input-border-color);
      resize: none;

      // Prevent "outline" overflow with left menu
      box-shadow: none !important;
    }

    .preview-maximized {
      grid-column: 2;
      grid-row: 2;

      display: block;
      overflow-y: auto;
      word-wrap: break-word;

      scrollbar-color: pvar(--fg-300) pvar(--bg);
    }
  }
}

.show-more-toggle {
  font-weight: $font-bold;
  color: pvar(--fg-300);
  margin-top: 1rem;

  @include font-size(14px);
}

@include on-small-main-col () {
  .maximize-button {
    display: none;
  }
}

.monospace textarea {
  font-family: monospace;
  font-size: 14px;
}
