Timepicker

React Bootstrap 5 Timepicker component

Use MDB custom Timepicker component to select time.

Note: Read the API tab to find all available options and advanced customization

Basic example

MDB allows us to automatically initialize a Timepicker when the page is loaded. 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker />
  );
}

Inline Timepicker with 12h

MDBTimepicker allows you to use a inline version timepicker. Default version is with 12h. 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker inline />
  );
}

Inline Timepicker with 24h

MDB Timepicker allows you to use a inline version timepicker. You have to add options format24 to true. 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker inline format="24h" />
  );
}

Custom Icon

You can set your custom icon to input. If you will add the icon, the main icon from the input will be replaced with yours.

With button

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker customIconSize='2x' customIcon='fab fa-react' />
  );
}

With icon

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker customIconSize='2x' customIcon='fab fa-react' btnIcon={false} />
  );
}

Without icon

MDBTimepicker allows to set input without icon. 

import React, { useRef } from 'react';
import { MDBTimepicker, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const customToggle1 = useRef(null);
  const customToggle2 = useRef(null);

  return (
    <>
      <div className='me-3'>
        <MDBTimepicker openRef={customToggle1} noIcon />
        <MDBBtn className='mt-2' ref={customToggle1} size='sm'>
          Toggle TimePicker above
        </MDBBtn>
      </div>

      <div>
        <MDBTimepicker openRef={customToggle2} noIcon />
        <MDBBtn className='mt-2' ref={customToggle2} size='sm'>
          Toggle TimePicker above
        </MDBBtn>
      </div>
    </>
  );
}

Default time

MDB Timepicker allows to initialize a default time in the picker and input. You can set it with option defaultTime. This options accepts strings like:

  • 12:34
  • 12:34 PM
  • 12:34 AM

and also new Date() format like:

  • new Date()
  • new Date().toLocaleTimeString([],{timeStyle: 'short'})

Note: If you are using string with PM/AM, you have to have option format24 set to false otherwise your default time will be formate to 24h. Also if you are using string without PM/AM and you would like have 24h format hour you have to set option format24 to true. If you will only put a string without PM/AM and format24 set to false you are gonna have a timepicker with 12h and format set to AM with default. 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

const date = new Date()

export default function App() {
  return (
    <>
      <MDBTimepicker defaultTime='02:12 PM' />
      <MDBTimepicker defaultTime='05:12 AM' />
      <MDBTimepicker defaultTime='05:12' />
      <MDBTimepicker format='24h' defaultTime='23:44' />
      <MDBTimepicker format='12h' defaultTime={date} />
      <MDBTimepicker format='24h' defaultTime={date} />
    </>
  );
}

Handle input value

If you want handle input value on modal approve, you have to add custom event to selected picker.

Input value: 
import React, { useState } from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  const [value, setValue] = useState('');
  return (
    <>
      <MDBTimepicker onChange={(e) => setValue(e)} />
      <div className='my-2'>
        Input value: <span id='span-input-value'>{value}</span>
      </div>
    </>
  );
}

Format 24h

Timepicker allows you to use time format with 24 hours. You can set it with the format="24h" property. 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker format='24h' />
  );
}

Just Input

You can set a timepicker to just an input.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker justInput />
  );
}

Increment

You can set a increment value by 5 to a minutes.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker increment />
  );
}

Max time

You can max time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker maxTime="6:35" />
  );
}

Max time with PM

You can max time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker maxTime="6:35 PM" />
  );
}

Max time with AM

You can max time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker maxTime="6:35 AM" />
  );
}

Min time

You can min time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker minTime="10:15" />
  );
}

Min time with PM

You can min time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker minTime="6:35 PM" />
  );
}

Min time with AM

You can min time to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker minTime="6:35 AM" />
  );
}

Max/Min hours

You can max and min hour to timepicker with options.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker maxHour={12} minHour={5} />
  );
}

Maximum hour

You can set only maximum hour to timepicker.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker maxHour={5} />
  );
}

Minimum hour

You can set only minimum hour to timepicker.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker minHour={8} />
  );
}

Disable past

Use the disablePast option to disallow past time selection.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker disablePast />
  );
}

Disable future

Use the disableFuture option to disallow future time selection.

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker disableFuture />
  );
}

Accessibility

We added proper aria attributes to the timepicker controls to make the component accessible. It's possible to change the values of those attributes by modyfing the component options: 

import React from 'react';
import { MDBTimepicker } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTimepicker
      inputLabel='Select a time'
      invalidLabel='Invalid Time Format'
      clearLabel='Clear'
      submitLabel='Ok'
      cancelLabel='Cancel'
    />
  );
}

Timepicker - API

Import

import { MDBTimepicker } from 'mdb-react-ui-kit';

Properties

MDBTimepicker

Name Type Default Description Example
amLabel string 'AM' Allows to set custom text to the AM button <MDBTimepicker amLabel='Ante Meridiem' />
pmLabel string 'PM' Allows to set custom text to the PM button <MDBTimepicker pmLabel='Post Meridiem' />
bodyId string '' Set the ID to the Timepicker's body. <MDBTimepicker bodyId='bodyID' />
headId string '' Set the ID to the Timepicker's head. <MDBTimepicker headId='headID' />
btnIcon boolean 'true' Appends an icon as a button. Set it to false to keep icon only. <MDBTimepicker btnIcon={false} />
cancelLabel string 'Cancel' Changes a cancel button label <MDBTimepicker cancelLabel='Close' />
clearLabel string 'Clear' Changes a clear button label <MDBTimepicker clearLabel='Clear a picker' />
customIcon string '' Sets a custom icon. You have to provide an icon type as well (i.e. "far", "fas", "fab" <MDBTimepicker customIcon='fab fa-react' />
customIconSize string '' Sets a size for the custom icon <MDBTimepicker customIcon='fab fa-react' customIconSize='2x' />
customValue string '' Custom value to control the input <MDBTimepicker customIcon='fab fa-react' customValue={value} />
defaultValue string | date '' Sets picker default value <MDBTimepicker defaultValue="12:33 AM" />
disabled boolean false Disables picker <MDBTimepicker disabled />
disableFuture boolean false Disallows future time selection <MDBTimepicker disableFuture />
disablePast boolean false Disallows past time selection <MDBTimepicker disablePast />
format "12h" | "24h" '12h' Sets a format for the picker <MDBTimepicker format='24h' />
inline boolean 'false' Changes a picker into inline version <MDBTimepicker inline />
increment boolean 'false' Increment minutes by 5 <MDBTimepicker increment />
inputWrapperTag string 'span' Defines tag of the MDBTimepicker input wrapper element <MDBTimepicker inputWrapperTag="span" />
inputID string '' Sets an ID for the input <MDBTimepicker inputID='customID' />
inputClasses string '' Add custom class to input <MDBTimepicker inputClasses='test' />
inputLabel string 'Select a time' Changes an input label <MDBTimepicker inputLabel='Pick a time' />
invalidLabel string 'Invalid Time Format' Changes an invalid feedback label <MDBTimepicker invalidLabel='Provide a correct time' />
justInput boolean 'false' Opens a timepicker after clicking on input <MDBTimepicker inputID='customID' />
minHour number '' Sets picker minimum hour <MDBTimepicker minHour={8} />
maxHour number '' Sets picker maximum hour <MDBTimepicker maxHour={10} />
minTime string '' Sets picker minimum time <MDBTimepicker minTime='06:07 AM' />
maxTime string '' Sets picker maximum time <MDBTimepicker maxTime='09:07 AM' />
noIcon boolean 'false' Removes icon from picker input <MDBTimepicker noIcon />
openRef React.RefObject '' Reference to the custom toggle element <MDBTimepicker openRef={customRef} />
submitLabel string 'Ok' Changes a submit button label <MDBTimepicker submitLabel='Submit' />
switchHoursToMinutesOnClick boolean true Allows to enable/disable switching to minutes if hours are selected <MDBTimepicker switchHoursToMinutesOnClick={true} />
timePickerClasses string '' Sets custom classes to the picker modal element <MDBTimepicker timePickerClasses='bg-danger' />

Events

Name Type Description
onChange (value: string) => void Returns string value on input change
onOpen () => void Executed when the timepicker is opened
onClose () => void Executed when the timepicker is closed

CSS variables

As part of MDB’s evolving CSS variables approach, timepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Timepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

// .timepicker
// &-wrapper
--#{$prefix}timepicker-wrapper-bg: #{$timepicker-wrapper-bg};
--#{$prefix}timepicker-elements-min-width: #{$timepicker-elements-min-width};
--#{$prefix}timepicker-elements-min-height: #{$timepicker-elements-min-height};
--#{$prefix}timepicker-elements-background: #{$timepicker-elements-background};
--#{$prefix}timepicker-elements-border-top-right-radius: #{$timepicker-elements-border-top-right-radius};
--#{$prefix}timepicker-elements-border-top-left-radius: #{$timepicker-elements-border-top-left-radius};
--#{$prefix}timepicker-elements-media-border-bottom-left-radius: #{$timepicker-elements-media-border-bottom-left-radius};
--#{$prefix}timepicker-head-bg: #{$timepicker-head-bg};
--#{$prefix}timepicker-head-height: #{$timepicker-head-height};
--#{$prefix}timepicker-head-border-top-right-radius: #{$timepicker-head-border-top-right-radius};
--#{$prefix}timepicker-head-border-top-left-radius: #{$timepicker-head-border-top-left-radius};
--#{$prefix}timepicker-head-padding-y: #{$timepicker-head-padding-y};
--#{$prefix}timepicker-head-padding-right: #{$timepicker-head-padding-right};
--#{$prefix}timepicker-head-padding-left: #{$timepicker-head-padding-left};
--#{$prefix}timepicker-head-media-padding: #{$timepicker-head-media-padding};
--#{$prefix}timepicker-head-media-padding-right: #{$timepicker-head-media-padding-right};
--#{$prefix}timepicker-head-media-min-height: #{$timepicker-head-media-min-height};
--#{$prefix}timepicker-head-inline-border-bottom-right-radius: #{$timepicker-head-inline-border-bottom-right-radius};
--#{$prefix}timepicker-head-inline-border-bottom-left-radius: #{$timepicker-head-inline-border-bottom-left-radius};
--#{$prefix}timepicker-button-font-size: #{$timepicker-button-font-size};
--#{$prefix}timepicker-button-min-width: #{$timepicker-button-min-width};
--#{$prefix}timepicker-button-font-weight: #{$timepicker-button-font-weight};
--#{$prefix}timepicker-button-line-height: #{$timepicker-button-line-height};
--#{$prefix}timepicker-button-border-radius: #{$timepicker-button-border-radius};
--#{$prefix}timepicker-button-letter-spacing: #{$timepicker-button-letter-spacing};
--#{$prefix}timepicker-button-color: #{$timepicker-button-color};
--#{$prefix}timepicker-button-transition: #{$timepicker-button-transition};
--#{$prefix}timepicker-button-padding-x: #{$timepicker-button-padding-x};
--#{$prefix}timepicker-button-height: #{$timepicker-button-height};
--#{$prefix}timepicker-button-margin-bottom: #{$timepicker-button-margin-bottom};
--#{$prefix}timepicker-button-hover-bg: #{$timepicker-button-hover-bg};
--#{$prefix}timepicker-button-focus-bg: #{$timepicker-button-focus-bg};
--#{$prefix}timepicker-submit-inline-height: #{$timepicker-submit-inline-height};
--#{$prefix}timepicker-submit-inline-min-width: #{$timepicker-submit-inline-min-width};
--#{$prefix}timepicker-submit-inline-margin-left: #{$timepicker-submit-inline-margin-left};
--#{$prefix}timepicker-submit-inline-color: #{$timepicker-submit-inline-color};
--#{$prefix}timepicker-current-font-size: #{$timepicker-current-font-size};
--#{$prefix}timepicker-current-font-weight: #{$timepicker-current-font-weight};
--#{$prefix}timepicker-current-line-height: #{$timepicker-current-line-height};
--#{$prefix}timepicker-current-letter-spacing: #{$timepicker-current-letter-spacing};
--#{$prefix}timepicker-current-color: #{$timepicker-current-color};
--#{$prefix}timepicker-current-opacity: #{$timepicker-current-opacity};
--#{$prefix}timepicker-clock-wrapper-min-width: #{$timepicker-clock-wrapper-min-width};
--#{$prefix}timepicker-clock-wrapper-max-width: #{$timepicker-clock-wrapper-max-width};
--#{$prefix}timepicker-clock-wrapper-min-height: #{$timepicker-clock-wrapper-min-height};
--#{$prefix}timepicker-mode-wrapper-font-size: #{$timepicker-mode-wrapper-font-size};
--#{$prefix}timepicker-mode-wrapper-color: #{$timepicker-mode-wrapper-color};
--#{$prefix}timepicker-clock-inner-top: #{$timepicker-clock-inner-top};
--#{$prefix}timepicker-clock-inner-left: #{$timepicker-clock-inner-left};
--#{$prefix}timepicker-clock-inner-transform: #{$timepicker-clock-inner-transform};
--#{$prefix}timepicker-clock-inner-width: #{$timepicker-clock-inner-width};
--#{$prefix}timepicker-clock-inner-height: #{$timepicker-clock-inner-height};
--#{$prefix}timepicker-time-tips-inner-width: #{$timepicker-time-tips-inner-width};
--#{$prefix}timepicker-time-tips-inner-height: #{$timepicker-time-tips-inner-height};
--#{$prefix}timepicker-time-tips-inner-font-size: #{$timepicker-time-tips-inner-font-size};
--#{$prefix}timepicker-time-tips-inner-font-weight: #{$timepicker-time-tips-inner-font-weight};
--#{$prefix}timepicker-clock-width: #{$timepicker-clock-width};
--#{$prefix}timepicker-clock-height: #{$timepicker-clock-height};
--#{$prefix}timepicker-clock-bg: #{$timepicker-clock-bg};
--#{$prefix}timepicker-time-tips-inner-active-color: #{$timepicker-time-tips-inner-active-color};
--#{$prefix}timepicker-time-tips-inner-active-bg: #{$timepicker-time-tips-inner-active-bg};
--#{$prefix}timepicker-time-tips-inner-active-font-weight: #{$timepicker-time-tips-inner-active-font-weight};
--#{$prefix}timepicker-time-tips-inner-disabled-color: #{$timepicker-time-tips-inner-disabled-color};
--#{$prefix}timepicker-dot-font-weight: #{$timepicker-dot-font-weight};
--#{$prefix}timepicker-dot-line-height: #{$timepicker-dot-line-height};
--#{$prefix}timepicker-dot-letter-spacing: #{$timepicker-dot-letter-spacing};
--#{$prefix}timepicker-dot-color: #{$timepicker-dot-color};
--#{$prefix}timepicker-dot-media-font-size: #{$timepicker-dot-media-font-size};
--#{$prefix}timepicker-dot-media-font-weight: #{$timepicker-dot-media-font-weight};
--#{$prefix}timepicker-dot-font-size: #{$timepicker-dot-font-size};
--#{$prefix}timepicker-dot-opacity: #{$timepicker-dot-opacity};
--#{$prefix}timepicker-current-inline-font-size: #{$timepicker-current-inline-font-size};
--#{$prefix}timepicker-item-width: #{$timepicker-item-width};
--#{$prefix}timepicker-item-height: #{$timepicker-item-height};
--#{$prefix}timepicker-item-padding: #{$timepicker-item-padding};
--#{$prefix}timepicker-item-font-size: #{$timepicker-item-font-size};
--#{$prefix}timepicker-item-middle-dot-top: #{$timepicker-item-middle-dot-top};
--#{$prefix}timepicker-item-middle-dot-left: #{$timepicker-item-middle-dot-left};
--#{$prefix}timepicker-item-middle-dot-width: #{$timepicker-item-middle-dot-width};
--#{$prefix}timepicker-item-middle-dot-height: #{$timepicker-item-middle-dot-height};
--#{$prefix}timepicker-item-middle-dot-transform: #{$timepicker-item-middle-dot-transform};
--#{$prefix}timepicker-item-middle-dot-border-radius: #{$timepicker-item-middle-dot-border-radius};
--#{$prefix}timepicker-item-middle-dot-bg: #{$timepicker-item-middle-dot-bg};
--#{$prefix}timepicker-hand-pointer-bg: #{$timepicker-hand-pointer-bg};
--#{$prefix}timepicker-hand-pointer-bottom: #{$timepicker-hand-pointer-bottom};
--#{$prefix}timepicker-hand-pointer-height: #{$timepicker-hand-pointer-height};
--#{$prefix}timepicker-hand-pointer-left: #{$timepicker-hand-pointer-left};
--#{$prefix}timepicker-hand-pointer-width: #{$timepicker-hand-pointer-width};
--#{$prefix}timepicker-transform-transition: #{$timepicker-transform-transition};
--#{$prefix}timepicker-time-tips-width: #{$timepicker-time-tips-width};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-height: #{$timepicker-time-tips-height};
--#{$prefix}timepicker-time-tips-font-size: #{$timepicker-time-tips-font-size};
--#{$prefix}timepicker-time-tips-active-color: #{$timepicker-time-tips-active-color};
--#{$prefix}timepicker-circle-top: #{$timepicker-circle-top};
--#{$prefix}timepicker-circle-left: #{$timepicker-circle-left};
--#{$prefix}timepicker-circle-width: #{$timepicker-circle-width};
--#{$prefix}timepicker-circle-border-width: #{$timepicker-circle-border-width};
--#{$prefix}timepicker-circle-border-color: #{$timepicker-circle-border-color};
--#{$prefix}timepicker-circle-height: #{$timepicker-circle-height};
--#{$prefix}timepicker-hour-mode-color: #{$timepicker-hour-mode-color};
--#{$prefix}timepicker-hour-mode-opacity: #{$timepicker-hour-mode-opacity};
--#{$prefix}timepicker-hour-mode-hover-bg: #{$timepicker-hour-mode-hover-bg};
--#{$prefix}timepicker-hour-mode-font-size: #{$timepicker-hour-mode-font-size};
--#{$prefix}timepicker-hour-mode-active-color: #{$timepicker-hour-mode-active-color};
--#{$prefix}timepicker-footer-border-bottom-left-radius: #{$timepicker-footer-border-bottom-left-radius};
--#{$prefix}timepicker-footer-border-bottom-right-radius: #{$timepicker-footer-border-bottom-right-radius};
--#{$prefix}timepicker-footer-height: #{$timepicker-footer-height};
--#{$prefix}timepicker-footer-padding-x: #{$timepicker-footer-padding-x};
--#{$prefix}timepicker-footer-bg: #{$timepicker-footer-bg};
--#{$prefix}timepicker-container-max-height: #{$timepicker-container-max-height};
--#{$prefix}timepicker-container-box-shadow: #{$box-shadow-4};
--#{$prefix}timepicker-icon-up-down-transition: #{$timepicker-icon-up-down-transition};
--#{$prefix}timepicker-icon-up-down-transform: #{$timepicker-icon-up-down-transform};
--#{$prefix}timepicker-icon-up-down-left: #{$timepicker-icon-up-down-left};
--#{$prefix}timepicker-icon-up-down-width: #{$timepicker-icon-up-down-width};
--#{$prefix}timepicker-icon-up-down-height: #{$timepicker-icon-up-down-height};
--#{$prefix}timepicker-icon-up-top: #{$timepicker-icon-up-top};
--#{$prefix}timepicker-icon-down-bottom: #{$timepicker-icon-down-bottom};
--#{$prefix}timepicker-icon-btn-width: #{$timepicker-icon-btn-width};
--#{$prefix}timepicker-icon-btn-height: #{$timepicker-icon-btn-height};
--#{$prefix}timepicker-input-color: #{$timepicker-input-color};
--#{$prefix}timepicker-clock-animation: #{$timepicker-clock-animation};

// &-wrapper-inline
--#{$prefix}timepicker-wrapper-inline-border-radius: #{$timepicker-wrapper-inline-border-radius};

// @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape)
--#{$prefix}timepicker-elements-media-border-bottom-left-radius

// &-toggle-button
--#{$prefix}timepicker-btn-icon-right: #{$timepicker-btn-icon-right};
--#{$prefix}timepicker-btn-icon-top: #{$timepicker-btn-icon-top};
--#{$prefix}timepicker-btn-icon-transform: #{$timepicker-btn-icon-transform};
--#{$prefix}timepicker-btn-icon-transition: #{$timepicker-btn-icon-transition};
--#{$prefix}timepicker-btn-icon-hover-color: #{$timepicker-btn-icon-hover-color};
--#{$prefix}timepicker-btn-icon-focus-color: #{$timepicker-btn-icon-focus-color};

// .timepicker-modal
--#{$prefix}timepicker-zindex: #{$timepicker-zindex};

SCSS variables

$timepicker-zindex: 1065;

$timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);

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

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

$timepicker-head-bg: $primary;
$timepicker-head-height: 100px;
$timepicker-head-border-top-right-radius: 0.5rem;
$timepicker-head-border-top-left-radius: 0.5rem;
$timepicker-head-padding-y: 10px;
$timepicker-head-padding-right: 24px;
$timepicker-head-padding-left: 50px;

$timepicker-head-media-padding: 10px;
$timepicker-head-media-padding-right: 10px;
$timepicker-head-media-min-height: 305px;
$timepicker-head-inline-border-bottom-right-radius: 0.5rem;
$timepicker-head-inline-border-bottom-left-radius: 0.5rem;

$timepicker-button-font-size: 0.8rem;
$timepicker-button-min-width: 64px;
$timepicker-button-font-weight: 500;
$timepicker-button-line-height: 40px;
$timepicker-button-border-radius: 10px;
$timepicker-button-letter-spacing: 0.1rem;
$timepicker-button-color: $primary;
$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;
$timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
$timepicker-button-focus-bg: $timepicker-button-hover-bg;
$timepicker-button-padding-x: 10px;
$timepicker-button-height: 40px;
$timepicker-button-margin-bottom: 10px;

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

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

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

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

$timepicker-clock-animation: show-up-clock 350ms linear;
$timepicker-clock-width: 260px;
$timepicker-clock-height: 260px;
$timepicker-clock-bg: rgba(0, 0, 0, 0.07);

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

$timepicker-time-tips-inner-width: 32px;
$timepicker-time-tips-inner-height: 32px;
$timepicker-time-tips-inner-font-size: 1.1rem;
$timepicker-time-tips-inner-font-weight: 300;
$timepicker-time-tips-inner-active-color: $white;
$timepicker-time-tips-inner-active-bg: $primary;
$timepicker-time-tips-inner-active-font-weight: 400;
$timepicker-time-tips-inner-disabled-color: #b3afaf;

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

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

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

$timepicker-item-middle-dot-top: 50%;
$timepicker-item-middle-dot-left: 50%;
$timepicker-item-middle-dot-width: 6px;
$timepicker-item-middle-dot-height: $timepicker-item-middle-dot-width;
$timepicker-item-middle-dot-transform: translate(-50%, -50%);
$timepicker-item-middle-dot-border-radius: 50%;
$timepicker-item-middle-dot-bg: $primary;

$timepicker-hand-pointer-bg: $primary;
$timepicker-hand-pointer-bottom: 50%;
$timepicker-hand-pointer-height: 40%;
$timepicker-hand-pointer-left: calc(50% - 1px);
$timepicker-hand-pointer-width: 2px;

$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;

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

$timepicker-circle-top: -21px;
$timepicker-circle-left: -15px;
$timepicker-circle-width: 4px;
$timepicker-circle-border-width: 14px;
$timepicker-circle-border-color: $primary;
$timepicker-circle-height: 4px;

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

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

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

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

$timepicker-icon-btn-width: 30px;
$timepicker-icon-btn-height: 30px;
$timepicker-input-color: $primary;

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