$include-column-box-sizing: true !default;

@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";

// Fonts
$font-family-base: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue",
  Helvetica, sans-serif;
$headings-font-weight: 400;

//
// Custom Components
//

// Card list
$card-list-color: #848484;

// Plyr
$plyr-color-main: gray;
$plyr-tooltip-radius: 0;

:root {
  // Base
  --body-bg: white;
  --body-color: #{$body-color};

  // Navbar
  --dark: #{$dark};

  // Input
  --input-bg: #{$input-bg};
  --input-border-color: #{$input-border-color};
  --input-group-addon-bg: #{$input-group-addon-bg};
  --input-color: #{$input-color};

  // List Group
  --list-group-border-color: #{$list-group-border-color};
  --list-group-hover-bg: #{$list-group-hover-bg};
  --list-group-hover-bg: #{$list-group-hover-bg};
  --list-group-bg: #{$list-group-bg};

  // Card
  --card-bg: #{$card-bg};
  --card-border-color: #{$card-border-color};
  --card-color: #{$card-color};

  // Components
  --component-active-bg: #{$component-active-bg};
  --headings-color: #{$headings-color};
  --navbar-dark-color: #{$navbar-dark-color};
  --modal-content-bg: #{$modal-content-bg};
}

//
//  Bootstrap variables override
//

$gray: var(--gray);
$gray-dark: var(--gray-dark);
$gray-light: var(--gray-light);
$gray-lighter: var(--gray-lighter);
$gray-lightest: var(--gray-lightest);

// Base
$body-bg: var(--body-bg);
$body-color: var(--body-color);
$link-color: var(--link-color);
$brand-primary: var(--brand-primary);

// Navbar
$dark: var(--dark);

// Input
$input-bg: var(--input-bg);
$input-border-color: var(--input-border-color);
$input-group-addon-bg: var(--input-group-addon-bg);
$input-color: var(--input-color);

// List Group
$list-group-border-color: var(--list-group-border-color);
$list-group-link-color: var(--list-group-link-color);
$list-group-hover-bg: var(--list-group-hover-bg);
$list-group-hover-bg: var(--list-group-hover-bg);
$list-group-active-border: var(--list-group-active-border);
$list-group-bg: var(--list-group-bg);

// Card
$card-bg: var(--card-bg);
$card-border-color: var(--card-border-color);
$card-color: var(--card-color);

// Components
$component-active-bg: var(--component-active-bg);
$headings-color: var(--headings-color);
$navbar-dark-color: var(--navbar-dark-color);
$modal-content-bg: var(--modal-content-bg);
