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

// main: compiled.less
@import "app";

*,
::before,
::after {
  box-sizing: border-box;
}

::selection {
  color: #fff;
  background-color: @osu-colour-h2;
}

::placeholder {
  color: inherit;
  opacity: 0.54; // stolen from firefox
}

:root {
  --font-default: @font-default;
  --font-default-vi: @font-default-vi;
  --font-default-zh: @font-default-zh;
  --font-default-th: @font-default-th;
  --font-default-zh-tw: @font-default-zh-tw;
  --font-content: @font-content;

  --navbar-height: @navbar-height;
  --scroll-padding-top: calc(
    var(--navbar-height) + 1em + var(--scroll-padding-top-extra, 0px)
  );
  --page-gutter: @gutter-v2;

  @media @desktop {
    --navbar-height: @nav2-height--pinned;
    --page-gutter: @gutter-v2-desktop;
  }
}

html,
body {
  height: 100%;
}

html {
  scroll-padding-top: var(--scroll-padding-top);
  scroll-padding-bottom: 1em;
}

body {
  .default-font();
  // no overlap between rightmost side and scrollbar
  -ms-overflow-style: scrollbar;
  // prevent moving navbar
  overflow-y: scroll;
  // fix tooltip positioning on edge when combined with overflow-y scroll above
  position: static;

  --z-index--nav-bar-mobile: @z-index--nav-bar;
  &.js-nav2--active {
    --z-index--nav-bar-mobile: @z-index--nav-bar-mobile-active;
  }

  --header-pinned-animation-duration: 0ms;
  &.js-animate-nav {
    --header-pinned-animation-duration: 300ms;
  }

  --beatmapset-status-colour-default: var(--hsl-b3);
  --beatmapset-graveyard-bg-hsl: 0, 0%, 0%;
  --beatmapset-graveyard-colour: hsl(var(--hsl-b1));
  --beatmapset-wip-bg-hsl: var(--hsl-darkorange-1);
  --beatmapset-wip-colour: hsl(var(--beatmapset-status-colour-default));
  --beatmapset-pending-bg-hsl: var(--hsl-orange-1);
  --beatmapset-pending-colour: hsl(var(--beatmapset-status-colour-default));
  --beatmapset-qualified-bg-hsl: var(--hsl-blue-1);
  --beatmapset-qualified-colour: hsl(var(--beatmapset-status-colour-default));
  --beatmapset-approved-bg-hsl: var(--hsl-lime-1);
  --beatmapset-approved-colour: hsl(var(--beatmapset-status-colour-default));
  --beatmapset-ranked-bg-hsl: var(--hsl-lime-1);
  --beatmapset-ranked-colour: hsl(var(--beatmapset-status-colour-default));
  --beatmapset-loved-bg-hsl: var(--hsl-pink-1);
  --beatmapset-loved-colour: hsl(var(--beatmapset-status-colour-default));

  --beatmapset-discussion-colour--hype: hsl(var(--hsl-blue-3));
  --beatmapset-discussion-colour--mapper_note: hsl(var(--hsl-purple-1));
  --beatmapset-discussion-colour--praise: hsl(var(--hsl-blue-3));
  --beatmapset-discussion-colour--problem: hsl(var(--hsl-red-3));
  --beatmapset-discussion-colour--resolved: hsl(var(--hsl-lime-3));
  --beatmapset-discussion-colour--review: hsl(var(--hsl-c2));
  --beatmapset-discussion-colour--suggestion: hsl(var(--hsl-orange-3));

  --forum-bg: hsl(var(--hsl-h1));
  --forum-text: @link-color;
  --forum-text: @link-hover-color;
  --forum-item-background-color: hsl(var(--hsl-b4));
  --forum-item-background-color-hover: hsl(var(--hsl-b3));

  // the referred variables are defined in blade layout
  --base-hue: var(--base-hue-override, var(--base-hue-default));
  --base-hue-deg: calc(var(--base-hue) * 1deg);

  // level tier gradients
  --level-tier-iron: #bab3ab, #bab3ab;
  --level-tier-bronze: #b88f7a, #855c47;
  --level-tier-silver: #e0e0eb, #a3a3c2;
  --level-tier-gold: #f0e4a8, #e0c952;
  --level-tier-platinum: #a8f0ef, #52e0df;
  --level-tier-rhodium: #d9f8d3, #a0cf96;
  --level-tier-radiant: #97dcff, #ed82ff;
  --level-tier-lustrous: #ffe600, #ed82ff;
}

#popup-container {
  backface-visibility: hidden;
  position: fixed;
  width: 100%;
  top: 155px;
  z-index: 9999;
  pointer-events: none;

  .alert {
    .default-box-shadow();
    border: none;
    pointer-events: auto;
  }

  .popup-text {
    vertical-align: middle;
    font-weight: 700;
  }
}