@use "sass:math";
@use "sass:color";
@use "sass:map";

$medium-view: 1000px;
$small-view: 800px;
$mobile-view: 500px;

$main-fonts: "Source Sans Pro", sans-serif;
$font-regular: 400;
$font-semibold: 600;
$font-bold: 700;
$line-height-normal: 1.2;

$support-button: inherit;
$support-button-heart: #e83e8c;

$red: #dc3545;
$green: #198754;
$white: #fff;

$button-font-size: 1rem;

$header-height: 94px;
$header-height-small-view: 78px;
$header-height-mobile-view: 128px;
$header-height-mobile-view-without-search: 80px;
$header-mobile-msg-height: 48px;

$menu-width: 248px;
$menu-border-radius: 14px;
$menu-collapsed-width: 50px;
$menu-margin-left: 2rem;
$menu-overlay-view: 1200px;

$banner-inverted-ratio: math.div(1, 6);

$max-channels-width: 1200px;

$footer-height: 30px;
$footer-margin: 30px;

// ---------------------------------------------------------------------------

$miniature-fs-small: 0.75rem;
$miniature-fs-medium: 0.875rem;
$miniature-fs-big: 1rem;

$miniature-fs-row-small: 0.875rem;
$miniature-fs-row-medium: 1rem;
$miniature-fs-row-big: 1.25rem;

$miniature-fs-mobile-small: 0.875rem;
$miniature-fs-mobile-medium: 0.875rem;
$miniature-fs-mobile-big: 1rem;

$video-thumbnail-height: 153px;
$video-thumbnail-width: 280px;
$video-thumbnail-medium-height: 114px;
$video-thumbnail-medium-width: 201px;
$video-thumbnail-small-height: 71px;
$video-thumbnail-small-width: 125px;

// ---------------------------------------------------------------------------

$instance-img-radius: 31%;
$channel-avatar-radius: 5px;
$account-avatar-radius: 50%;

// ---------------------------------------------------------------------------

$theater-bottom-space: 115px;
$player-portrait-bottom-space: 50px;

$sub-menu-margin-bottom: 30px;
$sub-menu-margin-bottom-small-view: 10px;

$focus-box-shadow-dimensions: 0 0 0 0.2rem;

$form-input-font-size: 16px;

$video-watch-info-margin-left: 44px;

// ---------------------------------------------------------------------------
// Theme variables with key check using pvar() function
// ---------------------------------------------------------------------------

$variables: (
  --x-margin-content: var(--x-margin-content),
  --tmp-header-height: var(--tmp-header-height),
  --header-height: var(--header-height),
  --header-fg: var(--header-fg),
  --header-bg: var(--header-bg),
  --fg: var(--fg),
  --bg: var(--bg),
  --red: var(--red),
  --green: var(--green),
  --input-fg: var(--input-fg),
  --input-bg: var(--input-bg),
  --input-bg-550: var(--input-bg-550),
  --input-bg-600: var(--input-bg-600),
  --input-bg-in-secondary: var(--input-bg-in-secondary),
  --input-bg-in-modal: var(--input-bg-in-modal),
  --input-danger-fg: var(--input-danger-fg),
  --input-danger-bg: var(--input-danger-bg),
  --input-placeholder-color: var(--input-placeholder-color),
  --input-placeholder-font-size: var(--input-placeholder-font-size),
  --input-border-color: var(--input-border-color),
  --input-border-radius: var(--input-border-radius),
  --input-border-width: var(--input-border-width),
  --input-check-active-fg: var(--input-check-active-fg),
  --input-check-active-bg: var(--input-check-active-bg),
  --input-x-padding: var(--input-x-padding),
  --input-y-padding: var(--input-y-padding),
  --textarea-x-padding: var(--textarea-x-padding),
  --textarea-y-padding: var(--textarea-y-padding),
  --textarea-fg: var(--textarea-fg),
  --textarea-bg: var(--textarea-bg),
  --textarea-bg-in-secondary: var(--textarea-bg-in-secondary),
  --textarea-bg-in-modal: var(--textarea-bg-in-modal),
  --support-btn-bg: var(--support-btn-bg),
  --support-btn-fg: var(--support-btn-fg),
  --support-btn-heart-bg: var(--support-btn-heart-bg),
  --secondary-icon-color: var(--secondary-icon-color),
  --active-icon-color: var(--active-icon-color),
  --active-icon-bg: var(--active-icon-bg),
  --fg-500: var(--fg-500),
  --fg-450: var(--fg-450),
  --fg-400: var(--fg-400),
  --fg-350: var(--fg-350),
  --fg-300: var(--fg-300),
  --fg-250: var(--fg-250),
  --fg-200: var(--fg-200),
  --fg-150: var(--fg-150),
  --fg-100: var(--fg-100),
  --fg-50: var(--fg-50),
  --bg-secondary-600: var(--bg-secondary-600),
  --bg-secondary-550: var(--bg-secondary-550),
  --bg-secondary-500: var(--bg-secondary-500),
  --bg-secondary-450: var(--bg-secondary-450),
  --bg-secondary-400: var(--bg-secondary-400),
  --bg-secondary-350: var(--bg-secondary-350),
  --bg-secondary-300: var(--bg-secondary-300),
  --bg-secondary-250: var(--bg-secondary-250),
  --bg-secondary-200: var(--bg-secondary-200),
  --menu-fg: var(--menu-fg),
  --menu-fg-600: var(--menu-fg-600),
  --menu-fg-550: var(--menu-fg-550),
  --menu-fg-500: var(--menu-fg-500),
  --menu-fg-450: var(--menu-fg-450),
  --menu-fg-400: var(--menu-fg-400),
  --menu-fg-350: var(--menu-fg-350),
  --menu-fg-300: var(--menu-fg-300),
  --menu-fg-250: var(--menu-fg-250),
  --menu-fg-200: var(--menu-fg-200),
  --menu-fg-150: var(--menu-fg-150),
  --menu-fg-100: var(--menu-fg-100),
  --menu-fg-50: var(--menu-fg-50),
  --menu-bg: var(--menu-bg),
  --menu-bg-600: var(--menu-bg-600),
  --menu-bg-550: var(--menu-bg-550),
  --menu-bg-500: var(--menu-bg-500),
  --menu-bg-450: var(--menu-bg-450),
  --menu-bg-400: var(--menu-bg-400),
  --menu-bg-350: var(--menu-bg-350),
  --menu-bg-300: var(--menu-bg-300),
  --menu-bg-250: var(--menu-bg-250),
  --menu-bg-200: var(--menu-bg-200),
  --menu-margin-left: var(--menu-margin-left),
  --menu-width: var(--menu-width),
  --menu-border-radius: var(--menu-border-radius),
  --on-primary: var(--on-primary),
  --on-primary-700: var(--on-primary-700),
  --on-primary-650: var(--on-primary-650),
  --on-primary-600: var(--on-primary-600),
  --on-primary-550: var(--on-primary-550),
  --on-primary-500: var(--on-primary-500),
  --on-primary-450: var(--on-primary-450),
  --on-primary-400: var(--on-primary-400),
  --on-primary-350: var(--on-primary-350),
  --on-primary-300: var(--on-primary-300),
  --on-primary-250: var(--on-primary-250),
  --on-primary-200: var(--on-primary-200),
  --on-primary-150: var(--on-primary-150),
  --on-primary-100: var(--on-primary-100),
  --on-primary-50: var(--on-primary-50),
  --primary: var(--primary),
  --primary-700: var(--primary-700),
  --primary-650: var(--primary-650),
  --primary-600: var(--primary-600),
  --primary-550: var(--primary-550),
  --primary-500: var(--primary-500),
  --primary-450: var(--primary-450),
  --primary-400: var(--primary-400),
  --primary-350: var(--primary-350),
  --primary-300: var(--primary-300),
  --primary-250: var(--primary-250),
  --primary-200: var(--primary-200),
  --primary-150: var(--primary-150),
  --primary-100: var(--primary-100),
  --primary-50: var(--primary-50),
  --border-primary: var(--border-primary),
  --border-secondary: var(--border-secondary),
  --alert-primary-fg: var(--alert-primary-fg),
  --alert-primary-bg: var(--alert-primary-bg),
  --alert-primary-border-color: var(--alert-primary-border-color),
  --pt-player-fg: var(--pt-player-fg),
  --pt-player-big-play-bg: var(--pt-player-big-play-bg),
  --pt-player-overlay-secondary-fg: var(--pt-player-overlay-secondary-fg),
  --pt-player-overlay-secondary-bg: var(--pt-player-overlay-secondary-bg)
);

// SASS type check our CSS variables
@function pvar($variable) {
  @if map.has-key($variables, $variable) {
    @return map.get($variables, $variable);
  } @else {
    @error "ERROR: Variable #{$variable} does not exist";
  }
}

@function pvar-fallback($variable, $fallback) {
  @if map.has-key($variables, $variable) and map.has-key($variables, $fallback) {
    @return var($variable, map.get($variables, $fallback));
  } @else {
    @error "ERROR: Variable #{$variable} or #{$fallback} does not exist";
  }
}

// ---------------------------------------------------------------------------
// z-index groups
// ---------------------------------------------------------------------------

$zindex: (
  miniature: 10,
  overlay: 12550,
  menu: 12600,
  search-typeahead: 12650,
  popover: 13000,
  tooltip: 14000,
  loadbar: 15000,
  privacymsg: 17500,
  root-header: 17500,
  help-popover: 17600,
  dropdown: 17600,
  modal: 19000,
  hotkeys: 19000,
  notification: 20000
);

@function z($label) {
  @return map.get($zindex, $label);
}

// ---------------------------------------------------------------------------
// Other variables that use pvar()
// ---------------------------------------------------------------------------

$separator-border-color: pvar(--bg-secondary-400);
$separator-border-color-on-secondary: pvar(--bg-secondary-450);
$focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};
