// ==========================================================================
// Materialize variables
// ==========================================================================
//
// Table of Contents:
//
//  0. Colors
//  1. Custom
//  2. Badges
//  3. Buttons
//  4. Cards
//  5. Carousel
//  6. Collapsible
//  7. Chips
//  8. Date + Time Picker
//  9. Dropdown
//  10. Forms
//  11. Global
//  12. Grid
//  13. Navigation Bar
//  14. Side Navigation
//  15. Photo Slider
//  16. Spinners | Loaders
//  17. Tabs
//  18. Tables
//  19. Toasts
//  20. Typography
//  21. Footer
//  22. Flow Text
//  23. Collections
//  24. Progress Bar



// 0. Colors
// ==========================================================================


// Background
$primary-color: #fff;

// Buttons, links
$secondary-color: #162e4f;

// Messages
$success-color: color("green", "base");
$error-color: color("red", "base");

// Globals
$text-color: $secondary-color;
$background-color: $primary-color;
$headers-color: $text-color;
$link-color: $secondary-color;

// Box
$box-color: $primary-color;
$box-headers-color: $box-color;
$box-background-color: $secondary-color;

// Card, episode...
$alt-text-color: $text-color;
$alt-headers-color: $text-color;
$alt-background-color: #e9e9e9;

// 1. Custom
// ==========================================================================

$font-family-name: 'Montserrat';
$font-family: $font-family-name, sans-serif;
$font-weight: 300;
$line-height: 1.5;

$font-family-name-headers: 'Montserrat';
$font-family-headers: $font-family-name-headers, sans-serif;
$font-weight-headers: 600;
$line-height-headers: 1.1;
$text-transform-headers: uppercase;

$background-image: false;
$global-radius: 0;

$show-box-title: true;
$box-ratio: 1 / 1;
$box-padding: 6px;
$box-radius: $global-radius;

$episode-ratio: 16 / 9;

$track-padding-small: 20px;
$track-padding-medium: 46px;
$track-padding-large: 60px;

// TODO: use @function instead
@import url(https://fonts.googleapis.com/css?family=Kulim+Park|Walter+Turncoat&display=swap);

// 2. Badges
// ==========================================================================

$badge-bg-color: $secondary-color;
$badge-height: 22px;


// 3. Buttons
// ==========================================================================

// Shared styles
$button-border: none;
$button-background-focus: lighten($secondary-color, 4%);
$button-font-size: 14px;
$button-icon-font-size: 1.3rem;
$button-height: 36px;
$button-padding: 0 20px;
$button-radius: $global-radius;

// Disabled styles
$button-disabled-background: #DFDFDF;
$button-disabled-color: #9F9F9F;

// Raised buttons
$button-raised-background: $secondary-color;
$button-raised-background-hover: lighten($button-raised-background, 5%);
$button-raised-color: #fff;

// Large buttons
$button-large-font-size: 15px;
$button-large-icon-font-size: 1.6rem;
$button-large-height: $button-height * 1.5;
$button-floating-large-size: 56px;

// Small buttons
$button-small-font-size: 13px;
$button-small-icon-font-size: 1.2rem;
$button-small-height: $button-height * .9;
$button-floating-small-size: $button-height * .9;

// Flat buttons
$button-flat-color: #343434;
$button-flat-disabled-color: lighten(#999, 10%);

// Floating buttons
$button-floating-background: $secondary-color;
$button-floating-background-hover: $button-floating-background;
$button-floating-color: #fff;
$button-floating-size: 40px;
$button-floating-radius: 50%;


// 4. Cards
// ==========================================================================

$card-padding: 24px;
$card-color: $alt-text-color;
$card-bg-color: $alt-background-color;
$card-link-color: $link-color;
$card-link-color-light: lighten($card-link-color, 20%);


// 5. Carousel
// ==========================================================================

$carousel-height: 400px;
$carousel-item-height: $carousel-height / 2;
$carousel-item-width: $carousel-item-height;


// 6. Collapsible
// ==========================================================================

$collapsible-height: 3rem;
$collapsible-line-height: $collapsible-height;
$collapsible-header-color: #fff;
$collapsible-border-color: #ddd;


// 7. Chips
// ==========================================================================

$chip-bg-color: #e4e4e4;
$chip-border-color: #9e9e9e;
$chip-selected-color: #26a69a;
$chip-margin: 5px;


// 8. Date + Time Picker
// ==========================================================================

$datepicker-display-font-size: 2.8rem;
$datepicker-calendar-header-color: #999;
$datepicker-weekday-color: rgba(0, 0, 0, .87);
$datepicker-weekday-bg: darken($secondary-color, 7%);
$datepicker-date-bg: $secondary-color;
$datepicker-year: rgba(255, 255, 255, .7);
$datepicker-focus: rgba(0,0,0, .05);
$datepicker-selected: $secondary-color;
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%);
$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75);
$datepicker-disabled-day-color: rgba(0, 0, 0, .3);

$timepicker-clock-color: rgba(0, 0, 0, .87);
$timepicker-clock-plate-bg: #eee;


// 9. Dropdown
// ==========================================================================

$dropdown-bg-color: $alt-background-color;
$dropdown-hover-bg-color: rgba($alt-text-color, .1);
$dropdown-color: $alt-text-color;
$dropdown-item-height: 40px;


// 10. Forms
// ==========================================================================

// Text Inputs + Textarea
$input-height: 3rem;
$input-border-color: $text-color;
$input-border: 1px solid $input-border-color;
$input-background: $background-color;
$input-error-color: $error-color;
$input-success-color: $success-color;
$input-focus-color: $secondary-color;
$input-font-size: 16px;
$input-margin-bottom: 8px;
$input-margin: 0 0 $input-margin-bottom 0;
$input-padding: 0;
$label-font-size: .8rem;
$input-disabled-color: rgba(0,0,0, .42);
$input-disabled-solid-color: #949494;
$input-disabled-border: 1px dotted $input-disabled-color;
$input-invalid-border: 1px solid $input-error-color;
$input-icon-size: 2rem;
$placeholder-text-color: lighten($input-border-color, 20%);

// Radio Buttons
$radio-fill-color: $secondary-color;
$radio-empty-color: #5a5a5a;
$radio-border: 2px solid $radio-fill-color;

// Range
$range-height: 14px;
$range-width: 14px;
$track-height: 3px;

// Select
$select-border: 1px solid #f2f2f2;
$select-background: rgba(255, 255, 255, 0.90);
$select-focus: 1px solid lighten($secondary-color, 47%);
$select-option-hover: rgba(0,0,0,.08);
$select-option-focus: rgba(0,0,0,.08);
$select-option-selected: rgba(0,0,0,.03);
$select-padding: 5px;
$select-radius: $global-radius;
$select-disabled-color: rgba(0,0,0,.3);

// Switches
$switch-bg-color: $secondary-color;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%);
$switch-unchecked-bg: #F1F1F1;
$switch-unchecked-lever-bg: rgba(0,0,0,.38);
$switch-radius: 15px;


// 11. Global
// ==========================================================================

// Media Query Ranges
$small-screen-up: 601px;
$medium-screen-up: 1001px;
$large-screen-up: 1501px;
$small-screen: 600px;
$medium-screen: 1000px;
$large-screen: 1500px;

$medium-and-up: "only screen and (min-width : #{$small-screen-up})";
$large-and-up: "only screen and (min-width : #{$medium-screen-up})";
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
$small-and-down: "only screen and (max-width : #{$small-screen})";
$medium-and-down: "only screen and (max-width : #{$medium-screen})";
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";


// 12. Grid
// ==========================================================================

$num-cols: 12;
$gutter-width: 1.5rem;
$element-top-margin: $gutter-width/3;
$element-bottom-margin: ($gutter-width*2)/3;


// 13. Navigation Bar
// ==========================================================================

$navbar-over-content: false;
$navbar-height: 64px;
$navbar-line-height: $navbar-height;
$navbar-height-mobile: 56px;
$navbar-line-height-mobile: $navbar-height-mobile;
$navbar-font-size: 1rem;
$navbar-font-color: $text-color;
$navbar-background-color: rgba($background-color,.9);
$navbar-brand-font-size: 2.1rem;

// 14. Side Navigation
// ==========================================================================

$sidenav-width: 280px;
$sidenav-font-size: 1.25rem;
$sidenav-font-color: $alt-text-color;
$sidenav-bg-color: $alt-background-color;
$sidenav-padding: 24px;
$sidenav-item-height: auto;
$sidenav-line-height: 1.1;


// 15. Photo Slider
// ==========================================================================

$slider-bg-color: color('grey', 'base');
$slider-bg-color-light: color('grey', 'lighten-2');
$slider-indicator-color: color('green', 'base');


// 16. Spinners | Loaders
// ==========================================================================

$spinner-default-color: $secondary-color;


// 17. Tabs
// ==========================================================================

$tabs-underline-color: $primary-color-light;
$tabs-text-color: $primary-color;
$tabs-bg-color: #fff;


// 18. Tables
// ==========================================================================

$table-border-color: rgba(0,0,0,.12);
$table-striped-color: rgba(242, 242, 242, 0.5);


// 19. Toasts
// ==========================================================================

$toast-height: 48px;
$toast-color: #323232;
$toast-text-color: #fff;
$toast-action-color: #eeff41;


// 20. Typography
// ==========================================================================

$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$off-black: rgba(0, 0, 0, 0.87);
// Header Styles
$h1-fontsize: 3.5rem;
$h2-fontsize: 2.75rem;
$h3-fontsize: 2rem;
$h4-fontsize: 1.5rem;
$h5-fontsize: 1rem;
$h6-fontsize: 1rem;


// 21. Footer
// ==========================================================================

$footer-font-color: $text-color;
$footer-bg-color: transparent;
$footer-copyright-font-color: rgba($text-color,.5);
$footer-copyright-bg-color: transparent;


// 22. Flow Text
// ==========================================================================

$range : $large-screen - $small-screen;
$intervals: 20;
$interval-size: $range / $intervals;


// 23. Collections
// ==========================================================================

$collection-border-color: #e0e0e0;
$collection-bg-color: #fff;
$collection-active-bg-color: $secondary-color;
$collection-active-color: lighten($secondary-color, 55%);
$collection-hover-bg-color: #ddd;
$collection-link-color: $secondary-color;
$collection-line-height: 1.5rem;


// 24. Progress Bar
// ==========================================================================

$progress-bar-color: $secondary-color;