// Both of these should probably die and become variables as well
$spacing-vertical: 24px;
$spacing-width: 36px;

$medium-breakpoint: 1279px;
$large-breakpoint: 1921px;

:root {
  // Width & spacing
  --side-nav-width: 160px;
  --side-nav-width-m: 240px;
  --side-nav-width-l: 320px;
  --font-size-subtext-multiple: 0.92;

  --video-aspect-ratio: 56.25%; // 9 x 16
  --snack-bar-width: 756px;

  // Text
  --text-max-width: 660px;
  --text-link-padding: 4px;

  // Input
  --input-border-size: 1px;

  // Select
  --select-height: 30px;

  // Button
  --btn-radius: 20px;
  --btn-height: 36px;

  // Header
  --header-height: 60px;

  // Header -> search
  --search-modal-input-height: 70px;

  // Card
  --card-radius: 2px;
  --card-max-width: 1000px;

  // File
  --file-tile-media-height: 125px;
  --file-tile-media-width: calc(125px * (16 / 9));
  --file-tile-media-height-small: 60px;
  --file-tile-media-width-small: calc(60px * (16 / 9));
  --file-tile-media-height-large: 200px;
  --file-tile-media-width-large: calc(200px * (16 / 9));
  --file-page-min-width: 400px;
  --recommended-content-width: 300px;
  --recommended-content-width-medium: 400px;

  // Modal
  --modal-width: 440px;

  // Animation :)
  --animation-duration: 0.3s;
  --animation-style: cubic-bezier(0.55, 0, 0.1, 1);

  // Image
  --thumbnail-preview-height: 100px;
  --thumbnail-preview-width: 177px;
}