// Common
// *******************************************************************************

$ui-star-size: 1.1em !default;
$ui-stars-spacer: -.1em !default;
$ui-star-filled-color: $yellow !default;

// Navbar (custom navbar)
// *******************************************************************************
$navbar-height: 4rem !default;
$navbar-suggestion-width: 100% !default;
$navbar-suggestion-height: 28rem !default;
$navbar-suggestion-border-radius: .5rem !default;
$navbar-dropdown-width: 22rem !default;
$navbar-dropdown-content-height: 30rem !default;
$navbar-dropdown-hover-bg: var(--#{$prefix}gray-60) !default;
$navbar-dropdown-icon-bg: var(--#{$prefix}gray-80) !default;
$navbar-notifications-dropdown-item-padding-y: .75rem !default;
$navbar-notifications-dropdown-item-padding-x: 1rem !default;

// Menu
// *******************************************************************************

$menu-width: 16.25rem !default;
$menu-collapsed-width: 5.25rem !default;
$menu-collapsed-layout-breakpoint: xl !default;
$menu-font-size: $font-size-base !default;

$menu-item-spacer: .125rem !default;
$menu-link-spacer-x: .5rem !default;

$menu-vertical-link-margin-x: 1rem !default;
$menu-vertical-link-padding-y: .3125rem !default;
$menu-vertical-link-padding-x: .9375rem !default;
$menu-vertical-header-margin-y: 1rem !default;
$menu-vertical-header-margin-x: 0 !default;
$menu-vertical-menu-link-padding-y: .3125rem !default;
$menu-vertical-menu-level-spacer: .65rem !default;

$menu-horizontal-spacer-x: .375rem !default;
$menu-horizontal-item-spacer: .5rem !default;
$menu-horizontal-link-padding-y: .625rem !default;
$menu-horizontal-link-padding-x: 1rem !default;
$menu-horizontal-menu-link-padding-y: .625rem !default;
$menu-horizontal-menu-level-spacer: 2rem !default;
$menu-horizontal-menu-box-shadow: $dropdown-box-shadow !default;

$menu-sub-width: $menu-width !default;
$menu-control-width: 2.25rem !default;
$menu-control-arrow-size: .5rem !default;

$menu-icon-expanded-width: 1.5rem !default;
$menu-icon-expanded-left-spacer: 1.675rem !default;
$menu-icon-expanded-font-size: 1.375rem !default;
$menu-icon-expanded-spacer: .5rem !default;

$menu-animation-duration: .3s !default;

$menu-bg: var(--#{$prefix}paper-bg) !default;
$menu-bg-rgb: var(--#{$prefix}paper-bg-rgb) !default;
$menu-color: $headings-color !default;
$menu-color-rgb: #{to-rgb($menu-color)} !default;
$menu-hover-bg: $gray-60 !default;
$menu-hover-color: $headings-color !default;
$menu-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$menu-active-color: var(--#{$prefix}primary) !default;
$menu-active-toggle-bg: $gray-80 !default;
$menu-box-shadow: $box-shadow-sm !default;
$menu-divider-color: transparent !default;


$menu-max-levels: 5 !default;

// Footer
// *******************************************************************************


$footer-bg: var(--#{$prefix}paper-bg) !default;
$footer-color: var(--#{$prefix}body-color) !default;
$footer-border-width: 0 !default;
$footer-border-color: var(--#{$prefix}border-color) !default;
$footer-link-color: var(--#{$prefix}primary) !default;
$footer-link-hover-color: rgba(var(--#{$prefix}primary-rgb), .8) !default;
$footer-link-disabled-color: var(--#{$prefix}gray-300) !default;
$footer-link-active-color: var(--#{$prefix}primary) !default;
$footer-brand-color: $footer-link-active-color !default;
$footer-brand-hover-color: color-mix(in sRGB, #{$footer-link-active-color} #{$bg-label-tint-amount}, var(--#{$prefix}paper-bg)) !default;
$footer-box-shadow: var(--#{$prefix}box-shadow-lg) !default;

// Custom Options
// *******************************************************************************

$custom-option-padding: 1.065em !default;
$custom-option-cursor: pointer !default;
$custom-option-border-color: var(--#{$prefix}border-color) !default;
$custom-option-border-width: var(--#{$prefix}border-width) !default;
$custom-option-image-border-width: 2px !default;
$custom-option-border-hover-color: $input-hover-border-color !default;

// Switches
// *******************************************************************************

$switch-font-size: .625rem !default;
$switch-border-radius: 30rem !default;

$switch-width: 2.5rem !default;
$switch-width-sm: 1.875rem !default;
$switch-width-lg: 3.25rem !default;

$switch-height: 1.35rem !default;
$switch-height-sm: 1.125rem !default;
$switch-height-lg: 1.75rem !default;

$switch-label-font-size: $font-size-base !default;
$switch-label-font-size-sm: $font-size-xs !default;
$switch-label-font-size-lg: $font-size-lg !default;

$switch-label-line-height: 1.4 !default;
$switch-label-line-height-sm: 1.6 !default;
$switch-label-line-height-lg: 1.47 !default;

$switch-spacer-x: .75rem !default;
$switch-spacer-y: .75rem !default;
$switch-gutter: .5rem !default;
$switch-inner-spacer: .25rem !default;
$switch-inner-spacer-sm: .17rem !default;

$switch-square-border-radius: $border-radius !default;

$switch-label-color: var(--#{$prefix}heading-color) !default;
$switch-label-disabled-color: var(--#{$prefix}secondary-color) !default;
$switch-disabled-opacity: .45 !default;

$switch-off-color: rgba(var(--#{$prefix}base-color), .4) !default;
$switch-off-bg: var(--#{$prefix}gray-100) !default;
$switch-off-border: var(--#{$prefix}gray-100) !default;
$switch-holder-bg: var(--#{$prefix}white) !default;
$switch-holder-shadow: var(--#{$prefix}box-shadow-xs) !default;
$switch-focus-box-shadow: $input-btn-focus-box-shadow !default;

// Avatars
// *******************************************************************************

// (Height & Width, Font Size, status indicator position)

$avatar-size: 2.375rem !default; /* Default */
$avatar-sizes: (
  xs: (1.5rem, .625rem, 1px),
  sm: (2rem, .8125rem, 2px),
  md: (3rem, 1.125rem, 3px),
  lg: (3.5rem, 1.5rem, 4px),
  xl: (4rem, 1.875rem, 5px)
) !default;

$avatar-group-border: var(--#{$prefix}paper-bg) !default;
$avatar-initial-bg: #eeedf0 !default;

// Timeline
// *******************************************************************************
$timeline-line-border-styles: (
  solid: solid,
  dotted: dotted,
  dashed: dashed,
  hidden: none
) !default;

$timeline-border-color: var(--#{$prefix}border-color) !default;

$timeline-indicator-size: 2rem !default;
$timeline-point-size: .75rem !default;
$timeline-point-color: var(--#{$prefix}primary) !default;
$timeline-point-indicator-color: var(--#{$prefix}primary) !default;
$timeline-end-indicator-font-size: 1.5rem !default;
$timeline-point-indicator-bg-scale: 88% !default;

$timeline-item-icon-font-size: .85rem !default;
$timeline-item-min-height: 4rem !default;
$timeline-item-padding-x: 0 !default;
$timeline-item-padding-y: .5rem !default;
$timeline-item-bg-color: var(--#{$prefix}paper-bg) !default;
$timeline-item-border-radius: var(--#{$prefix}border-radius) !default;

$timeline-event-time-size: .8125rem !default;
$timeline-event-time-color: var(--#{$prefix}secondary-color) !default;

// Text Divider
// *******************************************************************************
$divider-color: var(--#{$prefix}gray-200) !default;
$divider-text-color: var(--#{$prefix}heading-color) !default;

$divider-margin-y: 1rem !default;
$divider-margin-x: 0 !default;
$divider-text-padding-y: 0 !default;
$divider-text-padding-x: .677rem !default;

$divider-font-size: $font-size-base !default;
$divider-icon-size: 1rem !default;

// Pickers - for all the pickers
// *******************************************************************************

$picker-bg: var(--#{$prefix}paper-bg) !default;
$picker-color: var(--#{$prefix}heading-color) !default;
$picker-box-shadow: var(--#{$prefix}box-shadow) !default;
$picker-padding: .5rem !default;
$picker-spacer: .125rem !default;
$picker-border-radius: $border-radius !default;
$picker-border-width: $dropdown-border-width !default;
$picker-border-color: var(--#{$prefix}border-color) !default;
$picker-arrow-wrapper-size: 1.875rem !default;
$picker-arrow-size: .45rem !default;
$picker-arrow-bg: rgba(var(--#{$prefix}base-color-rgb), .08) !default;
$picker-arrow-color: var(--#{$prefix}body-color) !default;
$picker-header-size: 3.25rem !default;
$picker-header-padding-y: .5rem !default;
$picker-header-color: var(--#{$prefix}heading-color) !default;
$picker-select-bg: var(--#{$prefix}gray-100) !default;
$picker-select-width: 3.125rem !default;
$picker-select-timer-radius: $border-radius-sm !default;
$picker-disabled-color: var(--#{$prefix}secondary-color) !default;
$picker-timer-border-width: 1px !default;
$picker-timer-border-color: var(--#{$prefix}border-color) !default;
$picker-cell-size: 2.25rem !default;
$picker-cell-padding: .5rem !default;
$picker-cell-border-radius: var(--#{$prefix}border-radius) !default;
$picker-cell-active-bg: var(--#{$prefix}primary) !default;
$picker-cell-active-color: var(--#{$prefix}primary-contrast) !default;
$picker-cell-active-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}primary-rgb), .4) !default;
$picker-cell-hover-bg: rgba(var(--#{$prefix}base-color-rgb), .1) !default;
$picker-cell-today-bg: var(--#{$prefix}primary-bg-subtle) !default;
$picker-cell-today-color: var(--#{$prefix}primary) !default;
$picker-range-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$picker-range-active-color: var(--#{$prefix}primary) !default;
$picker-width: ($picker-cell-size * 7) + ($picker-padding * 2) !default;
$picker-zindex: $zindex-menu-fixed - 6 !default;