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

$breakpoint-xsmall: 600px;
$breakpoint-small: 900px;
$breakpoint-medium: 1150px;

:root {
  // Width & spacing
  --page-max-width: 1420px;
  --mac-titlebar-height: 1.5rem;
  --mobile: 600px;
  --side-nav-width: 170px;
  --spacing-miniscule: calc(2rem / 5);
  --spacing-xsmall: calc(2rem / 4);
  --spacing-small: calc(2rem / 3);
  --spacing-medium: calc(2rem / 2);
  --spacing-large: 2rem;
  --spacing-xlarge: 3rem;
  --spacing-main-padding: var(--spacing-xlarge);
  --floating-viewer-width: 32rem;
  --floating-viewer-height: 18rem; // 32 * 9/16
  --floating-viewer-info-height: 5rem;
  --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
  --option-select-width: 8rem;

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

  // Tabs
  --tab-indicator-size: 0.5rem;

  // Header
  --header-height: 5rem;

  // Inline Player
  --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-large) * 2);

  // Card
  --card-radius: var(--border-radius);
  --card-max-width: 1000px;
  --card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

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

  // Animation :)
  --animation-duration: 0.2s;
  --animation-style: ease-in-out;

  // Image
  --thumbnail-preview-height: 100px;
  --thumbnail-preview-width: 177px;
  --cover-photo-height: 210px;
  --channel-thumbnail-width: 10rem;
  --channel-thumbnail-width--small: 4rem;
  --file-list-thumbnail-width: 10rem;

  --tag-height: 1.5rem;
}

@media (max-width: $breakpoint-small) {
  :root {
    --font-base: 16px;
  }
}