// All global variables in here!

// import other variables defined in colors
@use '../themes/colors/color-variables' as *;
@use '../themes/colors/gray-shades' as *;

// ~~~~~~~~~~~~ config options ~~~~~~~~~~~ //

// Allow Native built in animations
$enable-native-animations: true !default;

// Enable or Disable hvr-css Animations
$hvr-animations-disabled: false !default;

// Enable or Disable font awesome Animations
$awesome-animations-disabled: false !default;

// ~~~ spacing, layout & responsiveness ~~ //

// gap variables & map
$gap-0: 0;
$gap-x: 0.25rem;
$gap-1: 0.5rem;
$gap-2: 1.5rem;
$gap-3: 2rem;
$gap-4: 2.5rem;
$gap-5: 3rem;
$gap-6: 4rem;

$gap-values: (
  '0': $gap-0,
  'x': $gap-x,
  '1': $gap-1,
  '2': $gap-2,
  '3': $gap-3,
  '4': $gap-4,
  '5': $gap-5,
  '6': $gap-6,
) !default;

// total columns in a single row
$total-columns: 12;
$serato-directions: (top, right, bottom, left) !default;

// width & height measures
$width-auto: auto;
$width-none: 0;
$width-small: 15%;
$width-normal: 25%;
$width-medium: 50%;
$width-full: 100%;
$width-content: fit-content;
$width-viewport: 100vw;

$height-auto: auto;
$height-none: 0;
$height-small: 15%;
$height-normal: 25%;
$height-medium: 50%;
$height-full: 100%;
$height-content: fit-content;
$height-viewport: 100vh;

// default gutter padding on elements eg grid
$serato-padding: 0.5rem 1rem !default;
$simple-components-padding: 0.375rem 0.75rem !default;
$medium-components-padding: 2rem 1rem !default;
$component-active-color: $white !default;
$component-active-bg: $primary !default;

// ~~~~~~~~ Components properties ~~~~~~~~ //

// border declarations...
$border-width: 1px !default;
$serato-border-color: $gray-200 !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
) !default;

// border-radius-variables
$serato-border-radius: 0.25rem !default;
$border-radius-small: 0.2rem !default;
$border-radius-large: 0.3rem !default;
$border-radius-round: 50rem !default;
$border-radius-circle: 50% !default;

$border-radius-map: (
  'small': $border-radius-small,
  'normal': $serato-border-radius,
  'large': $border-radius-large,
  'round': $border-radius-round,
  'circle': $border-radius-circle,
);

// box-shadow-variables
$serato-box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-small: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$box-shadow-large: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;

// margin and padding variables
$spacings: (margin, padding) !default;
$spacing-directions: (top, right, bottom, left) !default;
$responsive-spacing-directions: (left, right) !default;
$spacing-horizontal: 'x' !default;
$spacing-vertical: 'y' !default;
$spacing-values: (
  '0': 0,
  '1': 0.25rem,
  '2': 0.5rem,
  '3': 0.75rem,
  '4': 1rem,
  '5': 1.5rem,
  '6': 3rem,
  '7': 4rem,
  '8': 5rem,
  '9': 6rem,
  'auto': auto,
) !default;

// responsive spacings -- only for the horizontal (x) axis eg. width not height, for height use the default spacings!
$responsive-spacing-values: (
  'small': 1.5vw,
  'normal': 2.5vw,
  'medium': 6.5vw,
  'large': 10vw,
) !default;

// opacity variables
$opacity-none: 0;
$opacity-low: 0.5;
$opacity-medium: 0.6;
$opacity-normal: 1;

$opacities: (
  'none': $opacity-none,
  'low': $opacity-low,
  'medium': $opacity-medium,
  'normal': $opacity-normal,
) !default;

// transitions
$serato-transition: all 0.2s ease-in-out !default;
$transition-smooth: all 0.3s ease !default;
$transition-colors: color 0.2s ease-in-out !default;
$transition-linear: all 0.2s linear !default;
$transition-opacity: opacity 0.15s linear !default;
$transition-height: height 0.35s ease !default;
$transition-width: width 0.35s ease !default;

// aspect-ratio declarations...
$aspect-ratios: (
  'auto': auto,
  '1x1': 100%,
  '4x3': calc(3 / 4 * 100%),
  '16x9': calc(9 / 16 * 100%),
  '21x9': calc(9 / 21 * 100%),
) !default;

// list styles
$list-styles: (
  'auto': auto,
  'none': none,
  'circle': circle,
  'square': square,
  'disc': disc,
  'decimal': decimal,
  'disclosure-open': disclosure-open,
  'disclosure-closed': disclosure-closed,
);

// box shadows, todo: check cssscan.com box shadows!
$box-shadow-normal: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-small: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$box-shadow-large: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;

$shadows: (
  'small': $box-shadow-small,
  'normal': $box-shadow-normal,
  'large': $box-shadow-large,
  'inset': $box-shadow-inset,
) !default;

// border variables
$serato-border-width: 1px !default;
$serato-border-color: $gray-300 !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
) !default;

// ~~~~~~~~~~~~~~ Typography ~~~~~~~~~~~~~ //

// we use rem unit font scaling
$font-size-root: null !default;
$font-size-html: 100% !default; // for using rem units easily!
$font-size-body: 1rem !default; // rem unit scale, browser default, typically `16px`
$serato-font-size: $font-size-body;
$font-size-small: $serato-font-size * 0.875 !default;
$font-size-large: $serato-font-size * 1.25 !default;

// line height declarations...
$line-height-normal: 1.3 !default;
$line-height-small: 1.25 !default;
$line-height-large: 2 !default;

// font weights variables
$font-weights: (
  'thin': 100,
  'lighter': 200,
  'light': 300,
  'normal': 400,
  'medium': 500,
  'semibold': 600,
  'bold': 700,
  'bolder': 800,
  'extra-bold': 900,
) !default;
$serato-font-weight: map-get($font-weights, normal) !default;

// sizes
$size-1: 0.5rem !default;
$size-2: 0.75rem !default;
$size-3: 1rem !default;
$size-4: 1.25rem !default;
$size-5: 1.5rem !default;
$size-6: 2rem !default;
$size-7: 2.5rem !default;
$size-8: 3rem !default;
$size-9: 3.5rem !default;

// font-size declarations
$font-size-1: $serato-font-size !default;
$font-size-2: $serato-font-size * 2.25 !default;
$font-size-3: $serato-font-size * 3.5 !default;
$font-size-4: $serato-font-size * 4.75 !default;
$font-size-5: $serato-font-size * 5 !default;
$font-size-6: $serato-font-size * 5.5 !default;
$small-font-size: 0.875em !default;
$sub-sup-font-size: 0.75em !default;
$serato-text-muted: $gray-600 !default;

// font-size mapping
$font-sizes: (
  1: $font-size-1,
  2: $font-size-2,
  3: $font-size-3,
  4: $font-size-4,
  5: $font-size-5,
  6: $font-size-6,
) !default;

// display-headings
$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem,
) !default;

// font family declarations...
$serato-header-font: Arial, Helvetica, sans-serif;
$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
  'Liberation Mono', 'Courier New', monospace !default;