// 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";

@fa-weight-regular: 400;
@fa-weight-solid: 900;

@font-grade: Venera, sans-serif;
@font-content: Inter, sans-serif;
@font-default: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
  "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
  sans-serif;
@font-default-vi: Quicksand, Torus, Inter, "Helvetica Neue", Tahoma, Arial,
  "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
  sans-serif;
@font-default-th: Torus, Inter, "Helvetica Neue", "Prompt", Tahoma, Arial,
  "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
  sans-serif;
@font-default-zh: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
  "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", system-ui,
  sans-serif;
@font-default-zh-tw: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
  "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
  sans-serif;

@screen-mobile-max: (@screen-sm-min - 1px);
@desktop: ~"(min-width: @{screen-sm-min})";
@mobile: ~"(max-width: @{screen-mobile-max})";
@narrow: ~"(max-width: 479px)";
@narrow-up: ~"(min-width: 480px)";

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

@hover-transition-duration: 120ms;

@header-pinned: js-header-is-pinned;

@admin-menu-icon-width: 50px;

// update app-deps.ts when changing the height of the header.
@nav2-avatar-height: 60px;
@nav2-avatar-height--pinned: 40px;
@nav2-height: 90px;
@nav2-height--pinned: 50px;
@nav2-header-height: 360px;
@nav2-header-image-height: 310px;

// mobile nav
// TODO: un-bootstrap names
@navbar-height: @nav2-height--pinned; // also in lib/app-deps.ts
@navbar-padding-horizontal: 10px;
@navbar-padding-vertical: 10px;
@navbar-mobile--content-height: @navbar-height - (@navbar-padding-vertical * 2);

@bar-size: 3px;
@logo-size: 100px;
// header left margin (20) + logo (100) + menu left margin (10)
@padding-big: (20px + @logo-size + 10px);

@gutter-beatmapset: @gutter-v2;
@gutter-beatmapset-desktop: 40px;

@md-paragraph-space: 1.5em;

// ┐(ﾟ ヮﾟ)┌
@gutter-v2: 10px;
@gutter-v2-desktop: 50px;

@gutter-small-desktop: 20px;

@gutter-sidebar-desktop: 30px;

@height--nav-popup: 210px; // min-height; actual height will be calculated by js.

@border-radius--nav-avatar: 10px;
@border-radius--extra: 20px;
@border-radius--large: 10px;

@forum-item-overflow: @gutter-v2 - 2px;
@forum-item-overflow-desktop: @gutter-v2-desktop - 20px;
@forum-item-animate: all 120ms;

@forum-signature-height: 150px;

// here be z-indexes
@z-index--header-bg: -1;

@z-index--body-background: -1;

@z-index--beatmapset-header: 1;
@z-index--contest-header: 1;
@z-index--header-nav-v4-active: 1;
@z-index--page-header: 1;
@z-index--notification-banner-v2: 1;
@z-index--forum-post-edit-mode: 1;
@z-index--forum-topic-reply-stick: 1; // inside fixed-bar
@z-index--wiki-search: 1;

@z-index--beatmaps-panel: 4;
@z-index--profile-previous-usernames: 10;
@z-index--page-extra-tabs: 99;
@z-index--profile-page-cover-selector: 100; // must be at least 1 more than @z-index--page-extra-tabs
@z-index--beatmap-discussion-editor-insertion-menu: 100;
@z-index--simple-menu: 101;
@z-index--simple-menu-hover-object: 102;
@z-index--admin-menu: 499;
@z-index--floating-toolbar: 500;
@z-index--audio-player-floating: 501;
@z-index--fixed-bar: 502;
@z-index--nav-bar: 509;
@z-index--blackout: 510;
@z-index--nav-bar-mobile-active: 511;
@z-index--blackout-visible: 512;
@z-index--user-card-tooltip: 512;
@z-index--nav-float: 999;
// Xsolla overlay: 1000
// navbar-static-top: 1000 (bootstrap nav for mobile)
// modal-backdrop: 1040
// modal: 1050
@z-index--overlay: 9990;

@box-shadow-x: 0;
@box-shadow-y: 1px;
@box-shadow-radius: 3px;
@box-shadow-color: fade(#000, 25%);

@avatar-size--base: 128px;

@landing-dot-size: 17px;

@profile-badge-size: 50px;
@profile-user-bar-height: 60px;
@profile-avatar-size: 120px;
@profile-stats-box-width-desktop: 300px;

@beatmap-picker-size: 38px;
@beatmapset-avatar-size: 50px;

@beatmapset-float-box-width: 275px;

@header-container-min-height: @nav2-height + 70px;
@header-title-height: 55px;

// top padding + menu + page title
@nav-avatar-size: 70px;
@nav-sm-height: 20px + @nav-menu-height + @nav-page-title-height;
@nav-page-title-height: 40px;
@nav-menu-height: 20px;
@nav-search-icon-width: 30px;

// here be font-sizes
@font-size--tiny: 8px;
@font-size--small: 10px;
@font-size--small-2: 11px;
@font-size--normal: 12px;
@font-size--normal-2: 13px;
@font-size--title-small: 14px;
@font-size--title-small-2: 15px;
@font-size--title-small-3: 16px;
@font-size--title-small-4: 18px;
@font-size--large: 20px;
@font-size--title: 24px;
@font-size--large-2: 35px;
@font-size--large-3: 40px;
@font-size--large-4: 50px;
@font-size--extra-large: 70px;

@font-size--wiki: 14px;
@font-size--wiki-search: 18px;

@font-size--header-title: 32px;
@font-size--header-title-mobile: 24px;
@font-size--header-subtitle: 16px;
@font-size--header-description: 12px;

@font-size--header-wiki-2: 26px;
@font-size--header-wiki-3: @font-size--large;
@font-size--header-wiki-4: @font-size--title-small-4;
@font-size--header-wiki-5: @font-size--title-small-3;
@font-size--header-wiki-6: @font-size--title-small;

@font-size--new-header-title: 30px;

@font-size--forum-topic-entry-icon: 16px;
@font-size--forum-topic-entry-icon-small: 10px;
@font-size--forum-post-heading: 20px;
@font-size--forum-quote-heading: 13px;

@font-size--store-notice-text: 15px;
@font-size--store-notice-title: 13px;

@font-size--livestream-header: 15px;
@font-size--livestream-featured-name: 30px;
@font-size--livestream-featured-detail: 15px;
@font-size--livestream-item-name: 15px;
@font-size--livestream-item-detail: 10px;

@font-size--nav-popup-link: 14px;
@font-size--nav-popup-section: 12px;
@font-size--nav-popup-title-large: 20px;
@font-size--nav-popup-title: 15px;

@font-size--paginator: 12px;
@font-size--phone-input: 16px;

@font-size--warning: 13px;
@font-size--warning-icon: 20px;

@flex-grid--gutter-width: 20px;

@header-icon-size: 50px;
@header-icon-margin: 8px;

@forum-category-colour--osu-bg: @pink;
@forum-category-colour--osu-link: @pink-text;
@forum-category-colour--osu-link-hover: @pink;

@forum-category-colour--language-specific-bg: @yellow;
@forum-category-colour--language-specific-link: @yellow-text;
@forum-category-colour--language-specific-link-hover: @yellow-dark;

@forum-category-colour--other-bg: @green;
@forum-category-colour--other-link: @green-text;
@forum-category-colour--other-link-hover: @green;

@forum-category-colour--beatmaps-bg: @purple;
@forum-category-colour--beatmaps-link: @purple-text;
@forum-category-colour--beatmaps-link-hover: @purple;

@forum-category-colour--osu-bg: @pink;
@forum-category-colour--osu-link: @pink-text;
@forum-category-colour--osu-link-hover: @pink;

@forum-category-colour--management-bg: @gray;
@forum-category-colour--management-link: @gray-text;
@forum-category-colour--management-link-hover: @gray;

@forum-post--xs-avatar: 50px;

@forum-topic-new-topic-button--width: 150px;
@forum-topic-entry--main-margin: 40px;

@forum-topic-nav-item--gutter: 2px;
@forum-topic-nav-item--gutter-desktop: 3px;

@beatmapset-panel-bg: hsl(var(--hsl-b2));
@beatmapset-panel-height: 120px;
@beatmapset-panel-extra-height-desktop: 140px;
@beatmapset-panel-normal-height-desktop: 100px;

@beatmap-discussion--avatar-size: 40px;
@beatmap-discussion--reply-padding: (20px + @beatmap-discussion--avatar-size);
@beatmap-discussion--timestamp-width: 110px;

@beatmap-discussion--color-hype: @osu-colour-blue-3;
@beatmap-discussion--color-mapper-note: @osu-colour-purple-1;
@beatmap-discussion--color-praise: @osu-colour-blue-3;
@beatmap-discussion--color-problem: @osu-colour-red-3;
@beatmap-discussion--color-resolved: @osu-colour-lime-3;
@beatmap-discussion--color-review: @osu-colour-c2;
@beatmap-discussion--color-suggestion: @osu-colour-orange-3;

@beatmap-score--hsl-perfect: var(--hsl-lime-1);

@beatmappack-listing--gutter: 20px;

@user-color-default: @blue-darker;

@changelog-stream--stable: @blue;
@changelog-stream--stable-fallback: @blue-darker;
@changelog-stream--beta: @yellow-light;
@changelog-stream--cutting-edge: @yellow-dark;
@changelog-stream--lazer: @red;
@changelog-stream--lazer-experimental: @red;
@changelog-stream--web: @purple;
@changelog-stream--wiki: #999;

// FIXME: see FIXME for .fn-changelog-stream
@changelog-stream--all: #fff;
@changelog-stream--online: @green-light;
@changelog-stream--offline: #000;

@changelog-fg: #fff;
@changelog-fg-content: @pink-lighter;

@comment-dark-bg: @osu-colour-b5;
@comment-dark-bg-extra: #222;
@comment-dark-border-bg: @osu-colour-b2;
@comment-dark-fg: #fff;

@contest-selected-colour: #ffa500;

@mod-width: 45px;
@mod-height: 32px;

@mod-height-normal: 22px;
@mod-width-normal: (@mod-height-normal / @mod-height * @mod-width);

@mod-height-small: 18px;
@mod-width-small: (@mod-height-small / @mod-height * @mod-width);

@page-spacing: 10px;

@rank-width: 60px;
@rank-height: 40px;

@ranking-page-header-inset: 40px;

@btn-circle-diameter: 30px;

// store slider
@slider-callout--arrow-height: 12px;
@slider-callout--arrow-gap: 2px;
@slider-callout--width: 128px;
@slider-handle-protrusion: 5px;
@slider-handle-height: @slider-height + 2 * @slider-handle-protrusion;
@slider-handle-width: 10px;
@slider-height: 10px;

@user-card-icon-size: 26px; // starts becoming a muddled mess lower than this.
@user-card-width: 290px;
@user-card-width-min: 280px;
@user-card-height: 120px;

@user-list-icon-size: 20px;

@flag-size-medium: 20px;