// 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.

@import "app";

.bbcode {
  @_top: bbcode;
  .content-font();
  overflow-wrap: anywhere;
  line-height: 1.5;

  code {
    .default-border-radius();
    background-color: hsl(var(--hsl-b5));
    padding: 1px 4px;
  }

  h2,
  h4 {
    font-style: normal;
    font-weight: bold;
  }

  // heading tag
  h2 {
    font-size: 1.5em;
    color: @osu-colour-l1;
  }

  blockquote {
    font-size: inherit;
    padding: 0 0 0 20px;
    border: none;
    color: @osu-colour-c2;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 100%;
      border-radius: 10000px;
      background-color: @osu-colour-c2;
    }

    // quote tag
    h4 {
      font-size: inherit;
      color: @osu-colour-c1;
      margin: 0;
      margin-bottom: 10px;
    }

    // second and deeper levels
    blockquote {
      font-size: 0.9em;

      &::before {
        display: none;
      }

      h4 {
        color: inherit;
      }

      // flatten quotes fifth level and onwards
      blockquote blockquote blockquote {
        padding-left: 0;
        font-size: 1em;
      }
    }
  }

  img {
    max-width: 100%;
  }

  ol,
  ul {
    padding-left: 20px;
  }

  pre {
    .default-border-radius();
    white-space: pre-wrap;
    background-color: @osu-colour-b5;
    color: inherit;
    padding: 10px;
    border: none;
    font-size: inherit;
  }

  .unordered {
    list-style-type: disc;
  }

  .spoiler {
    background-color: #000 !important;
    color: #000 !important;
  }

  // overrides bootstrap styling for [notice]
  .well {
    margin: 0;
    background: @osu-colour-b5;
    border: 2px solid @osu-colour-b1;
  }

  &--normal-line-height {
    line-height: inherit;
  }

  &__list-title {
    list-style: none;
    margin: 0;
  }
}