// --------------
//    General
// --------------

// Prefix used for all Zusty's selectors
$prefix: 'zust-' !default;

// Separator used for conditions
$condition-separator: '\\@' !default;

// Screen breakpoint sizes as of Chrome Dev Tools
$medium-breakpoint: 768px !default;
$large-breakpoint: 1024px !default;

// Font Sizes
$xlarge-text: 2.2rem !default;
$large-text: 1.6rem !default;
$medium-text: 1rem !default;
$small-text: 0.8rem !default;

// z-indexes
$dropdown-z-index: 5 !default;
$modal-z-index: 20 !default;
$tooltip-z-index: 1 !default;
$navbar-z-index: 4 !default;

// Transition
$primary-transition: 0.2s !default;


// --------------
//    Elements
// --------------

// Avatar
$avatar-size: 45px !default;
$avatar-size-small: 30px !default;
$avatar-size-large: 56px !default;

// Body
$body-font-size: $medium-text !default;
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

// Anchor
$anchor-border-width: 2px !default;

// Button
$button-margin: 0px 8px 8px 0px !default;
$button-border-radius: 6px !default;
$button-border-width: 2px !default;
$button-border-spread: 4px !default;
$button-outlined-border-width: 2px !default;

// Chip
$chip-border-radius: 1000px !default;
$chip-margin: 0 8px 8px 0 !default;

// Icon
$icon-size-small: 0.8rem !default;
$icon-size-default: 1.2rem !default;
$icon-size-large: 1.6rem !default;
$icon-size-xlarge: 2rem !default;

// Note Block
$note-block-border-radius: 10px !default;
$note-block-margin: 20px 0 !default;
$note-block-padding: 3px 18px !default;
$note-block-line-width: 4px !default;

// Progress Bar
$progress-bar-border-radius: 6px !default;

// Table
$table-cell-border-width: 2px !default;
$table-cell-padding: 5px 10px !default;

// Tooltip
$tooltip-margin: 10px;
$tooltip-translate: 20px;
$tooltip-font-size: 12px !default;
$tooltip-border-radius: 8px !default;
$tooltip-padding: 5px 10px !default;
$tooltip-shadow: 0 0 5px 0px hsla(0, 0%, 0%, 0.08) !default;



// --------------
//   Container
// --------------

$container-margin: 5px !default;
$container-padding: 0px !default;
$container-column-margin: 10px !default;
$container-column-padding: 5px !default;



// --------------
//      Form
// --------------
$form-label-margin: 5px;
$form-label-font-size: $medium-text;
$form-help-margin: 5px;
$form-help-font-size: $small-text;

// Checkbox
$checkbox-margin: 0 0 6px 6px !default;
$checkbox-border-width: 2px !default;
$checkbox-border-radius: 8px !default;
$checkbox-padding: 10px !default;
$checkbox-label-margin: 8px !default;

// Input
$input-margin: 4px !default;
$input-border-radius: 8px !default;
$input-border-spread: 2px !default;

// Radio
$radio-margin: 0 0 6px 6px !default;
$radio-border-width: 2px !default;
$radio-border-radius: 100px !default;
$radio-padding: 10px !default;
$radio-label-margin: 8px !default;

// Range
$range-height: 5px !default;
$range-border-radius: 9999px !default;
$range-thumb-height: 18px !default;
$range-thumb-width: $range-thumb-height !default;
$range-thumb-border-radius: 6px !default;

// Select
$select-border-radius: $input-border-radius !default;
$select-border-spread: $input-border-spread !default;

// Switch
$switch-border-width: 2px !default;
$switch-border-radius: 100px !default;
$switch-margin: 0 0 8px 8px !default;
$switch-label-margin: 8px !default;

// Textarea
$textarea-border-radius: $input-border-radius !default;
$textarea-border-spread: $input-border-spread !default;



// --------------
//   Components
// --------------

// Badge
$badge-border-radius: 6px !default;
$badge-font-size: 0.8em !default;

// Breadcrumb
$breadcrumb-font-size: $medium-text !default;

// Cards
$card-border-radius: 10px !default;
$card-padding: 10px 20px !default;
$card-margin: 10px !default;
$card-max-width: 200px !default;
$card-min-width: 180px !default;
$card-box-shadow: 0 0 10px 0px hsla(0, 0%, 0%, 0.1) !default;
$card-border-width: 2px !default;
$card-landscape-max-width: 350px !default;
$card-landscape-min-width: 260px !default;
$card-hover-translate: -8px !default;
$card-hovered-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1) !default;

// Dropdown
$dropdown-margin: 12px !default;
$dropdown-child-margin: 12px !default;
$dropdown-translate: 10px !default;
$dropdown-shadow: 0 3px 12px rgba(27, 31, 35, 0.04) !default;
$dropdown-border-radius: 8px !default;
$dropdown-item-border-radius: 6px !default;
$dropdown-padding: 4px !default;
$dropdown-child-padding: 4px !default;
$dropdown-item-padding: 10px !default;
$dropdown-item-margin: 0px !default;

// Modal
$modal-border-radius: 14px !default;
$modal-transition: 0.3s !default;

// Navbar
$navbar-shadow: 0px 3px 3px var(--navbar-shadow-color) !default;
$navbar-border-bottom-width: 2px !default;
$navbar-selected-indicator-height: 3px !default;

// Pagination
$pagination-item-margin: 5px 10px !default;
$pagination-item-padding: 8px 12px !default;
$pagination-item-border-width: 2px !default;
$pagination-item-border-radius: 8px !default;

// Tabs
$tab-top-border-radius: 4px !default;
$tab-border-bottom-width: 2px !default;


// --------------
//  Theme Colors
// --------------

// Status Colors
$status-colors: (
  // $name, $color, $text-color, $hovered-color, $light-color
  ('primary', var(--primary-color), var(--primary-text-color), var(--primary-hovered-color), var(--primary-color-light)),
  ('success', var(--success-color), var(--success-text-color), var(--success-hovered-color), var(--success-color-light)),
  ('warning', var(--warning-color), var(--warning-text-color), var(--warning-hovered-color), var(--warning-color-light)),
  ('error', var(--error-color), var(--error-text-color), var(--error-hovered-color), var(--error-color-light)),
  ('link', var(--link-color), var(--link-text-color), var(--link-hovered-color), var(--link-color-light))
);

// Custom Color's List. User will made it by themselves.
$custom-colors: () !default;

$item-colors: join($status-colors, $custom-colors);

// Breakpoints
$default-breakpoints: (
  ('small', null, $medium-breakpoint - 1px),
  ('medium', $medium-breakpoint, $large-breakpoint - 1px),
  ('until-large', null, $large-breakpoint - 1px),
  ('large', $large-breakpoint, null)
);

$custom-breakpoints: () !default;

$breakpoints: join($default-breakpoints, $custom-breakpoints);

$breakpoint-names: getListItems($breakpoints, 1);

// Misc.
$css-variable-enabled: false !default;