@use "sass:map";
@use "sass:meta";

// Needed maps whether populated below of not. //-- DO NOT DELETE
$config-colors: () !default;
$site-colors: () !default;


// ------------------
// Colors
// ------------------
// Add custom colors here to support your theme.

$brand-colors: (
  'navy':   #003f70,
  'skyblue':#91b9dc,
  'lightblue': #E5F5FF,
  'med-blue': #3f7bad,
  'beige':  #ecd7b1,
  'peach':  #dfa278,
  'salmon': #e58967,
  'brown':  #866657,
  'orange': #f48418
) !default;

// $brand-colors and $secondary colors will be made available as text and background colors
// e.g., .text--{color} .background--{color}

$config-colors: map.merge($brand-colors, $config-colors);

// Default colors used in the Ritter Platform

$site-focus-color: map.get($config-colors, 'med-blue') !default;
$site-menu-color: map.get($config-colors, 'navy') !default;
$site-link-color: map.get($config-colors, 'med-blue') !default;
$site-help-color: map.get($config-colors, 'lightblue') !default;
$site-note-color: #FFFDF5 !default;
$site-help-text-color: map.get($config-colors, 'navy') !default;

// Site colors need to be placed back in a map
// Removing site-colors will not affect compilation

$site-colors-vars: (
  'focus' : $site-focus-color,
  'menu' : $site-menu-color,
  'link' : $site-link-color,
  'help' : $site-help-color,
  'note' : $site-note-color,
  'help-text' : $site-help-text-color
) !default;

@if meta.type-of($site-colors-vars) == 'map' {
  $site-colors: map.merge($site-colors-vars, $site-colors);
}


// --------------------
// Breakpoints
// --------------------

// Breakpoints map used in our breakpoints mixin
// as well as some of our utility classes

$breakpoints: (
  mobile: 0px,
  tablet: 768px,
  lg-tablet: 991px,
  laptop: 1240px,
  desktop: 1800px
);

// Show Mobile menu
$show-mobile-menu: 991px;


// --------------------
// Sizes
// --------------------

// image radius
$image-size: (
  'small' : 100px,
  'medium': 150px,
  'large':  200px
);

// Some height variables
$menu-height: 4.5rem;
$menu-banner-height: 14rem;

$max-height: 600px; // NOTE: define where we're using this

$radius: (
  'button': 5rem,
  'default': .3rem,
  'round': 50%
);


// --------------------
// Header
// --------------------

// colors
$primary-menu-color: map.get($site-colors, 'menu');


// --------------------
// Timing
// --------------------

// milliseconds; animations, transitions

$duration: .2s;
$transitions: .2s;
$hue-threshold: .1;   // NOTE: Set to .1 to use with math.percentage
$opacity: .9;


// --------------------
// Drawers
// --------------------

$drawer-background: #fff !default;

$drawer-primary-padding: 2rem;

$drawer-side-height: calc(100% - #{$menu-height});
$drawer-side-width: 27rem;


// --------------------
// Button specific
// --------------------

$button-border-radius: 5rem !default;

$button-primary-background: #FFFFFF !default;
$button-primary-color: #666666 !default;
$button-primary-hover: #C3552A !default;
$button-secondary-background: map.get($config-colors, 'salmon') !default;
$button-secondary-color: #FFFFFF !default;
$button-filter-color: map.get($brand-colors, 'med-blue') !default;

$button-primary-padding: .25rem 1rem;
$button-large-padding: .5rem 1rem;
$button-group-margin: 0 .25rem;


// --------------------
// Cards
// --------------------

$card-padding: 1rem;
$card-footer-top-margin: 1rem;
$card-min-height: 23rem;


// --------------------
// Loader
// --------------------

$loader-color-primary: map.get($config-colors, "navy") !default;
$loader-border-top-primary: transparent !default;
$loader-color-inverted: #fff !default;
$loader-border-top-inverted: transparent !default;

$loader-colors: (
  'primary': $loader-color-primary,
  'primary-top': $loader-border-top-primary,
  'inverted': $loader-color-inverted,
  'inverted-top': $loader-border-top-inverted
) !default;


// ---------------------
// For Ratio
// ---------------------
$bg-size: (
  1_1: 100%,
  2_1: 50%,
  4_3: 75%,
  16_9: 56.25%
);