@import 'colors';

// Options
$enable-shadows: false;
$enable-print-styles: false;

// Colors
$yiq-contrasted-threshold: 200;

// Grid
$grid-columns: 12;
$grid-gutter-width: 1rem;

// Fonts
$font-family-base: 'Helvetica', 'Roboto', 'Arial', sans-serif;
$font-family-asap: 'Asap', 'Helvetica', 'Roboto', 'Arial', sans-serif;
$headings-font-family: $font-family-base;
$font-weight-normal: 500;

$font-size-base: 1.4rem;
$lead-font-size: 1.5rem;
$font-size-lg: 1.8rem;
$font-size-sm: 1.2rem;
$font-size-xs: 1.1rem;

$line-height-base: 2.5rem;
$line-height-base-sm: 1.5rem;
$line-height-base-md: 2rem;

$h1-font-size: $font-size-base * 2;
$h2-font-size: $font-size-base * 1.75;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;

$display1-size: $h1-font-size;
$display2-size: $h2-font-size;
$display3-size: $h3-font-size;
$display4-size: $h4-font-size;

// Media queries
$container-max-widths: (
    xs: 450px,
    sm: 768px,
    md: 1025px,
    lg: 1250px
);

$grid-breakpoints: (
    xs: 0,
    sm: 450px,
    md: 768px,
    lg: 1025px,
    xl: 1250px
);
// Border-radius
$border-radius: 0.4rem;
$border-radius-lg: 0.45rem;
$border-radius-sm: 0.3rem;
// Pagination
$pagination-padding-y: 0.75rem;
$pagination-padding-x: 1rem;
$pagination-padding-y-sm: 0.75rem;
$pagination-padding-x-sm: 0.75rem;
$pagination-padding-y-lg: 0.75rem;
$pagination-padding-x-lg: 1.5rem;
// $pagination-line-height: 1.25rem;
$pagination-hover-color: $black;
$pagination-hover-bg: $light;
$pagination-color: $black;
// Alerts
// Define alert colors, border radius, and padding.
$alert-padding-y: 0.75rem;
$alert-padding-x: 1.25rem;
$alert-margin-bottom: 1rem;
// Buttons + Forms
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: 0.375rem;
$input-btn-padding-x: 0.75rem;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: 0.2rem;
$input-btn-focus-color: rgba($component-active-bg, 0.25);
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: 0.25rem;
$input-btn-padding-x-sm: 0.5rem;
$input-btn-line-height-sm: $line-height-sm;
$input-btn-padding-y-lg: 0.5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-line-height-lg: $line-height-lg;
$input-btn-border-width: $border-width;
// Buttons
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y * 1.75;
$btn-padding-x: $input-btn-padding-x * 2.5;
$btn-line-height: $input-btn-line-height;
$btn-padding-y-sm: $btn-padding-y * 0.75;
$btn-padding-x-sm: $btn-padding-x * 0.75;
$btn-line-height-sm: $input-btn-line-height-sm;
$btn-padding-y-lg: $btn-padding-y * 1.25;
$btn-padding-x-lg: $btn-padding-x * 1.25;
$btn-line-height-lg: $input-btn-line-height-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: 0.65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);
$btn-link-disabled-color: $gray-600;
$btn-block-spacing-y: 0.5rem;
// Forms
$input-box-shadow: none;
$input-focus-box-shadow: none;
// Select
$select-color: $black;
$select-background-color: $secondary;
// Icons
$icon-size-base: 1.6rem;
$icon-size-xsmall: 1rem;
$icon-size-small: 1.2rem;
$icon-size-mlarge: 1.8rem;
$icon-size-large: 2rem;
$icon-size-largest: 3rem;