// Variables pro
$blue-accent-400: #2979ff !default;
$box-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;

// scss-docs-start zindex-stack pro
$zindex-timepicker: 1065 !default;
$zindex-datepicker: 1065 !default;
$zindex-datepicker-container: 1066 !default;
// scss-docs-end zindex-stack pro

// Timepicker

// $timepicker-wrapper-z-index: 1071 !default;
$timepicker-wrapper-background-color: rgba(0, 0, 0, 0.4) !default;

$timepicker-wrapper-inline-border-radius: 0.5rem !default;

$timepicker-elements-min-width: 310px !default;
$timepicker-elements-min-height: 325px !default;
$timepicker-elements-background: $white !default;
$timepicker-elements-border-top-right-radius: 0.6rem !default;
$timepicker-elements-border-top-left-radius: 0.6rem !default;
$timepicker-elements-media-border-bottom-left-radius: 0.5rem !default;

$timepicker-head-background-color: $blue-accent-400 !default;
$timepicker-head-height: 100px !default;
$timepicker-head-border-top-right-radius: 0.5rem !default;
$timepicker-head-border-top-left-radius: 0.5rem !default;
$timepicker-head-padding-y: 10px !default;
$timepicker-head-padding-right: 24px !default;
$timepicker-head-padding-left: 50px !default;

$timepicker-head-media-padding: 10px !default;
$timepicker-head-media-padding-right: 10px !default;
$timepicker-head-media-min-height: 305px !default;

$timepicker-button-font-size: 0.8rem !default;
$timepicker-button-min-width: 64px !default;
$timepicker-button-font-weight: 500 !default;
$timepicker-button-line-height: 40px !default;
$timepicker-button-border-radius: 10px !default;
$timepicker-button-letter-spacing: 0.1rem !default;
$timepicker-button-color: $blue-accent-400 !default;
$timepicker-button-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !default;
$timepicker-button-hover-background-color: rgba(0, 0, 0, 0.08) !default;
$timepicker-button-focus-background-color: $timepicker-button-hover-background-color !default;
$timepicker-button-padding-x: 10px !default;
$timepicker-button-height: 40px !default;
$timepicker-button-margin-bottom: 10px !default;

$timepicker-submit-inline-height: 48px !default;
$timepicker-submit-inline-min-width: 48px !default;
$timepicker-submit-inline-margin-left: 30px !default;
$timepicker-submit-inline-color: $white !default;

$timepicker-current-font-size: 3.75rem !default;
$timepicker-current-font-weight: 300 !default;
$timepicker-current-line-height: 1.2 !default;
$timepicker-current-letter-spacing: -0.00833em !default;
$timepicker-current-color: $white !default;
$timepicker-current-opacity: 0.54 !default;

$timepicker-mode-wrapper-font-size: 18px !default;
$timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54) !default;

$timepicker-clock-wrapper-min-width: 310px !default;
$timepicker-clock-wrapper-max-width: 325px !default;
$timepicker-clock-wrapper-min-height: 305px !default;

$timepicker-clock-width: 260px !default;
$timepicker-clock-height: 260px !default;
$timepicker-clock-background-color: rgba(0, 0, 0, 0.07) !default;

$timepicker-clock-inner-top: 50% !default;
$timepicker-clock-inner-left: 50% !default;
$timepicker-clock-inner-transform: translate(-50%, -50%) !default;
$timepicker-clock-inner-width: 160px !default;
$timepicker-clock-inner-height: 160px !default;

$timepicker-time-tips-inner-width: 32px !default;
$timepicker-time-tips-inner-height: 32px !default;
$timepicker-time-tips-inner-font-size: 1.1rem !default;
$timepicker-time-tips-inner-font-weight: 300 !default;
$timepicker-time-tips-inner-active-color: $white !default;
$timepicker-time-tips-inner-active-background-color: $blue-accent-400 !default;
$timepicker-time-tips-inner-active-font-weight: 400 !default;
$timepicker-time-tips-inner-disabled-color: #b3afaf !default;

$timepicker-dot-font-weight: 300 !default;
$timepicker-dot-line-height: 1.2 !default;
$timepicker-dot-letter-spacing: -0.00833em !default;
$timepicker-dot-color: $white !default;
$timepicker-dot-font-size: 3.75rem !default;
$timepicker-dot-opacity: 0.54 !default;
$timepicker-dot-media-font-size: 3rem !default;
$timepicker-dot-media-font-weight: 400 !default;

$timepicker-current-inline-font-size: 2.5rem !default;

$timepicker-item-width: 20px !default;
$timepicker-item-height: 20px !default;
$timepicker-item-padding: 10px !default;
$timepicker-item-font-size: 1.1em !default;

$timepicker-item-middle-dot-top: 50% !default;
$timepicker-item-middle-dot-left: 50% !default;
$timepicker-item-middle-dot-width: 6px !default;
$timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width !default;
$timepicker-item-middle-dot-transform: translate(-50%, -50%) !default;
$timepicker-item-middle-dot-border-radius: 50% !default;
$timepicker-item-middle-dot-background-color: $blue-accent-400 !default;

$timepicker-hand-pointer-background-color: $blue-accent-400 !default;
$timepicker-hand-pointer-bottom: 50% !default;
$timepicker-hand-pointer-height: 40% !default;
$timepicker-hand-pointer-left: calc(50% - 1px) !default;
$timepicker-hand-pointer-width: 2px !default;

$timepicker-transform-transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  height 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !default;

$timepicker-time-tips-width: 32px !default;
$timepicker-time-tips-height: 32px !default;
$timepicker-time-tips-font-size: 1.1rem !default;
$timepicker-time-tips-active-color: $white !default;

$timepicker-circle-top: -21px !default;
$timepicker-circle-left: -15px !default;
$timepicker-circle-width: 4px !default;
$timepicker-circle-border-width: 14px !default;
$timepicker-circle-border-color: $blue-accent-400 !default;
$timepicker-circle-height: 4px !default;

$timepicker-hour-mode-color: $white !default;
$timepicker-hour-mode-opacity: 0.54 !default;
$timepicker-hour-mode-hover-background-color: rgba(0, 0, 0, 0.15) !default;
$timepicker-hour-mode-active-color: $white !default;
$timepicker-hour-mode-font-size: 2.5rem !default;

$timepicker-footer-border-bottom-left-radius: 0.5rem !default;
$timepicker-footer-border-bottom-right-radius: 0.5rem !default;
$timepicker-footer-height: 56px !default;
$timepicker-footer-padding-x: 12px !default;
$timepicker-footer-background-color: $white !default;

$timepicker-container-max-height: calc(100% - 64px) !default;

$timepicker-icon-up-down-transition: 0.2s ease all !default;
$timepicker-icon-up-down-transform: translate(-50%, -50%) !default;
$timepicker-icon-up-down-left: 50% !default;
$timepicker-icon-up-down-width: 30px !default;
$timepicker-icon-up-down-height: 30px !default;
$timepicker-icon-up-top: -35px !default;
$timepicker-icon-down-bottom: -47px !default;

$timepicker-icon-btn-width: 30px !default;
$timepicker-icon-btn-height: 30px !default;
$timepicker-input-color: $blue-accent-400 !default;

$timepicker-btn-icon-right: 10px !default;
$timepicker-btn-icon-transform: translate(-50%, -50%) !default;
$timepicker-btn-icon-top: 50% !default;
$timepicker-btn-icon-transition: all 0.3s ease !default;
$timepicker-btn-icon-hover-color: $blue-accent-400 !default;
$timepicker-btn-icon-focus-color: $blue-accent-400 !default;

// Datepicker

$datepicker-toggle-right: 10px !default;
$datepicker-toggle-top: 50% !default;
$datepicker-toggle-focus-color: $blue-accent-400 !default;

$datepicker-backdrop-background-color: rgba(0, 0, 0, 0.4) !default;

$datepicker-dropdown-container-width: 328px !default;
$datepicker-dropdown-container-height: 380px !default;
$datepicker-dropdown-container-background-color: $white !default;
$datepicker-dropdown-container-border-radius: 0.5rem !default;
$datepicker-dropdown-container-box-shadow: $box-shadow-4 !default;

$datepicker-modal-container-transform: translate(-50%, -50%) !default;
$datepicker-modal-container-width: 328px !default;
$datepicker-modal-container-height: 512px !default;
$datepicker-modal-container-background-color: $white !default;
$datepicker-modal-container-border-radius: 0.6rem 0.6rem 0.5rem 0.5rem !default;
$datepicker-modal-container-box-shadow: $datepicker-dropdown-container-box-shadow !default;
// $datepicker-modal-container-z-index: 1072 !default;
$datepicker-modal-container-date-media-margin-top: 100px !default;
$datepicker-modal-container-day-cell-media-width: 32x !default;
$datepicker-modal-container-day-cell-media-height: $datepicker-modal-container-day-cell-media-width !default;
$datepicker-modal-container-media-width: 475px !default;
$datepicker-modal-container-media-height: 360px !default;
$datepicker-modal-container-media-day-cell-width: 36px !default;
$datepicker-modal-container-media-day-cell-height: $datepicker-modal-container-media-day-cell-width !default;

$datepicker-header-height: 120px !default;
$datepicker-header-padding-x: 24px !default;
$datepicker-header-background-color: $blue-accent-400 !default;
$datepicker-header-border-radius: 0.5rem 0.5rem 0 0 !default;

$datepicker-title-height: 32px !default;
$datepicker-title-text-font-size: 10px !default;
$datepicker-title-text-font-weight: 400 !default;
$datepicker-title-text-letter-spacing: 1.7px !default;
$datepicker-title-text-color: $white !default;

$datepicker-date-height: 72px !default;
$datepicker-date-text-font-size: 34px !default;
$datepicker-date-text-font-weight: 400 !default;
$datepicker-date-text-color: $white !default;

$datepicker-date-controls-padding-top: 10px !default;
$datepicker-date-controls-padding-x: 12px !default;

$datepicker-arrow-border-width: 5px !default;
$datepicker-arrow-margin-left: 5px !default;
$datepicker-arrow-transform: rotate(180deg) !default;

$datepicker-date-controls-color: rgba(0, 0, 0, 0.64) !default;

$datepicker-view-change-button-padding: 10px !default;
$datepicker-view-change-button-color: #666 !default;
$datepicker-view-change-button-font-weight: 500 !default;
$datepicker-view-change-button-font-size: 0.9rem !default;
$datepicker-view-change-button-border-radius: 10px !default;
$datepicker-view-change-button-state-background-color: #eee !default;
$datepicker-view-change-button-after-border-width: 5px !default;
$datepicker-view-change-button-after-margin-left: 5px !default;

$datepicker-arrow-controls-margin-top: 10px !default;

$datepicker-previous-button-width: 40px !default;
$datepicker-previous-button-height: $datepicker-previous-button-width !default;
$datepicker-previous-button-line-height: $datepicker-previous-button-height !default;
$datepicker-previous-button-color: rgba(0, 0, 0, 0.64) !default;
$datepicker-previous-button-margin-right: 24px !default;
$datepicker-previous-button-state-background-color: #eee !default;
$datepicker-previous-button-state-border-radius: 50% !default;

$datepicker-previous-button-after-margin: 15.5px !default;
$datepicker-previous-button-after-border-width: 2px !default;
$datepicker-previous-button-after-transform: translateX(2px) rotate(-45deg) !default;

$datepicker-next-button-width: 40px !default;
$datepicker-next-button-height: $datepicker-next-button-width !default;
$datepicker-next-button-line-height: $datepicker-next-button-height !default;
$datepicker-next-button-color: rgba(0, 0, 0, 0.64) !default;
$datepicker-next-button-margin-background-color: #eee !default;
$datepicker-next-button-state-border-radius: 50% !default;

$datepicker-next-button-after-margin: 15.5px !default;
$datepicker-next-button-after-border-width: 2px !default;
$datepicker-next-button-after-transform: translateX(-2px) rotate(45deg) !default;

$datepicker-view-padding-x: 12px !default;
$datepicker-table-width: 304px !default;

$datepicker-day-heading-width: 40px !default;
$datepicker-day-heading-height: $datepicker-day-heading-width !default;
$datepicker-day-heading-font-size: 12px !default;
$datepicker-day-heading-font-weight: 400 !default;

$datepicker-cell-disabled-color: #ccc !default;
$datepicker-cell-hover-background-color: #d3d3d3 !default;
$datepicker-cell-selected-background-color: $blue-accent-400 !default;
$datepicker-cell-selected-color: $white !default;
$datepicker-cell-focused-background-color: #eee !default;
$datepicker-cell-focused-selected-background-color: $blue-accent-400 !default;
$datepicker-cell-border-width: 1px !default;
$datepicker-cell-border-color: $black !default;

$datepicker-small-cell-width: 40px !default;
$datepicker-small-cell-height: $datepicker-small-cell-width !default;

$datepicker-small-cell-content-width: 36px !default;
$datepicker-small-cell-content-height: $datepicker-small-cell-content-width !default;
$datepicker-small-cell-content-line-height: $datepicker-small-cell-content-height !default;
$datepicker-small-cell-content-border-radius: 50% !default;
$datepicker-small-cell-content-font-size: 13px !default;

$datepicker-large-cell-width: 76px !default;
$datepicker-large-cell-height: 42px !default;

$datepicker-large-cell-content-width: 72px !default;
$datepicker-large-cell-content-height: 40px !default;
$datepicker-large-cell-content-line-height: $datepicker-large-cell-content-height !default;
$datepicker-large-cell-content-padding-y: 1px !default;
$datepicker-large-cell-content-padding-x: 2px !default;
$datepicker-large-cell-content-border-radius: 999px !default;

$datepicker-yearview-content-padding-x: $datepicker-view-padding-x !default;

$datepicker-footer-height: 56px !default;
$datepicker-footer-padding-x: $datepicker-yearview-content-padding-x !default;

$datepicker-footer-btn-background-color: $white !default;
$datepicker-footer-btn-color: $blue-accent-400 !default;
$datepicker-footer-btn-padding-x: 10px !default;
$datepicker-footer-btn-font-size: 0.8rem !default;
$datepicker-footer-btn-font-weight: 500 !default;
$datepicker-footer-btn-height: 40px !default;
$datepicker-footer-btn-line-height: $datepicker-footer-btn-height !default;
$datepicker-footer-btn-letter-spacing: 0.1rem !default;
$datepicker-footer-btn-border-radius: 10px !default;
$datepicker-footer-btn-margin-bottom: 10px !default;
$datepicker-footer-btn-state-background-color: #eee !default;