//
//  Config and variables
//
//  Copy this file to override
//  the Flystyles defaults without modifying key, versioned files.

//  Colors
//

// Brand colors

@use "sass:math";

$color-brand-primary-light: #0090d2 !default;
$color-brand-primary: #1274c4 !default;
$color-brand-primary-dark: #0f476b !default;

// UI colors

$color-info: #008bff !default;
$color-success: #48b985 !default;
$color-danger: #d63442 !default;
$color-warning: #edc200 !default;
$color-white: #fff !default;
$color-black: #000 !default;
$color-rating: #edc200 !default;

// Grayscale colors

$color-gray-lighter: #eee !default;
$color-gray-light: #ccc !default;
$color-gray: #5a687b !default;
$color-gray-dark: #666 !default;
$color-gray-darker: #333 !default;
$border-grey-color: #dae0e4 !default;

$colors: (
  'primary': $color-brand-primary,
  'white': $color-white,
  'black': $color-black,
  'info': $color-info,
  'success': $color-success,
  'warning': $color-warning,
  'danger': $color-danger,
  'grayLighter': $color-gray-lighter,
  'grayLight': $color-gray-light,
  'gray': $color-gray,
  'grayDark': $color-gray-dark,
  'grayDarker': $color-gray-darker
) !default;

// Spacing
//
// Control the default styling of most Flystyles elements by modifying these
// variables. Mostly focused on spacing.

$spacer: 16px !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$spacer-xs: 4px !default;
$spacer-sm: 8px !default;
$spacer-md: $spacer !default;
$spacer-lg: 24px !default;
$spacer-xl: 32px !default;
$spacer-xxl: 40px !default;
$spacer-xxxl: 56px !default;
$spacer-xxxxl: 64px !default;

$spacers: (
  0: 0,
  xs: $spacer-xs,
  sm: $spacer-sm,
  md: $spacer-md,
  lg: $spacer-lg,
  xl: $spacer-xl,
  xxl: $spacer-xxl,
  xxxl: $spacer-xxxl,
  xxxxl: $spacer-xxxxl
);

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xSmall: 0,
  small: 576px,
  medium: 768px,
  large: 992px,
  xLarge: 1200px
) !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-gutter: 32px !default;
$grid-columns: 12 !default;

// Typography
//
// Font, line-height, and color for body text, headings, and more.

$font-family-rubik: 'Rubik', 'Open Sans', 'Lucida Grande', Verdana, Arial,
  sans-serif !default;
$font-family-base: $font-family-rubik !default;

$font-size-root: 16px !default;
$font-size-base: 1rem !default;

$font-size-xs: 13px !default;
$font-size-sm: 14px !default;
$font-size-md: 16px !default;
$font-size-lg: 18px !default;
$font-size-xl: 24px !default;

$font-sizes: (
  'xs': $font-size-xs,
  'sm': $font-size-sm,
  'md': $font-size-md,
  'lg': $font-size-lg,
  'xl': $font-size-xl
);

$line-height-base: 1.4 !default;
$line-height-lg: math.div(4, 3) !default;
$line-height-sm: 1.5 !default;

$font-weight-light: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-semi-bold: 500 !default;
$font-weight-bold: 700 !default;
$font-weight-extra-bold: 700 !default;
$font-weight-base: $font-weight-regular !default;

// Border radius

$border-radius: 2px !default;
$border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.2rem !default;
$global-border-radius: $border-radius !default;

//  Base
//
//  Base HTML tags config

$body-background: #fff !default;
$body-color: #1b2733 !default;

// Headings

$headings-margin-bottom: $spacer-y !default;
$headings-font-family: inherit !default;
$headings-line-height: 1.4 !default;
$headings-color: inherit !default;

$type-h1-font-size: 2.5rem !default;
$type-h2-font-size: 2rem !default;
$type-h3-font-size: 1.75rem !default;
$type-h4-font-size: 1.5rem !default;
$type-h5-font-size: 1.2rem !default;
$type-h6-font-size: 1rem !default;

$type-h1-font-weight: $font-weight-regular !default;
$type-h2-font-weight: $font-weight-regular !default;
$type-h3-font-weight: $font-weight-regular !default;
$type-h4-font-weight: $font-weight-regular !default;
$type-h5-font-weight: $font-weight-semi-bold !default;
$type-h6-font-weight: $font-weight-semi-bold !default;

$hr-border-width: 1px !default;
$hr-border-color: $color-gray-light !default;
$hr-border: $hr-border-width solid $hr-border-color !default;

$dt-font-weight: $font-weight-semi-bold !default;

$link-color: $color-brand-primary !default;
$link-text-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-text-decoration: underline !default;

$paragraph-margin-bottom: $spacer-y !default;

// forms

$form-field-border-radius: $global-border-radius !default;
$form-field-font-family: $font-family-base !default;
$form-field-font-size: $font-size-sm !default;
$form-field-background: #fdfdfd !default;
$form-field-color: $body-color !default;
$form-field-border-width: 1px !default;
$form-field-border-color: #dae0e4 !default;
$form-field-border: $form-field-border-width solid $form-field-border-color !default;

$form-field-border-color-focus: $color-brand-primary !default;
$form-field-border-width-focus: 1px !default;
$form-field-border-focus: $form-field-border-width-focus solid
  $form-field-border-color-focus !default;

$form-field-border-color-hover: darken($form-field-border-color, 10%) !default;
$form-field-border-width-hover: 1px !default;
$form-field-border-hover: $form-field-border-width-hover solid
  $form-field-border-color-hover !default;

$form-field-placeholder-color: rgba(#5a687b, 0.6) !default;

$form-field-height-base: 48px !default;

$form-field-disabled-color: rgba($body-color, 0.5) !default;
$form-field-disabled-border-color: #eaeef1 !default;
$form-field-disabled-background-color: #f8f9f9 !default;
$form-field-disabled-cursor: not-allowed !default;

$form-field-read-only-color: inherit !default;
$form-field-read-only-border-color: #dae0e4 !default;
$form-field-read-only-background-color: #f4f5f6 !default;
$form-field-read-only-cursor: not-allowed !default;

$form-field-border-success: 1px solid $color-success !default;
$form-field-border-error: 1px solid $color-danger !default;

$form-field-box-shadow: inset 0 0 0 1px transparent !default;
$form-field-box-shadow-hover: inset 0 0 0 1px transparent !default;
$form-field-box-shadow-focus: inset 0 0 0 1px $color-brand-primary !default;
$form-field-box-shadow-error: inset 0 0 0 1px $color-danger,
  0 0 4px 0 rgba($color-danger, 0.5) !default;
$form-field-box-shadow-success: inset 0 0 0 1px $color-success,
  0 0 4px 0 rgba($color-success, 0.5) !default;

// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding: 0.75rem !default;
$table-cell-padding-sm: 0.3rem !default;

// Transitions

$transition-default: 200ms all cubic-bezier(0.4, 0, 0.2, 1) !default;