Starting from v6, neeto-ui supports enhanced customization of components using
CSS variables. These are the variables that are being used in the `DateInput`
component.

```css
// Time Panel
--neeto-ui-time-panel-header-padding-top: 16px;
--neeto-ui-time-panel-header-padding-bottom: 8px;
--neeto-ui-time-panel-header-padding-x: 16px;
--neeto-ui-time-panel-header-column-font-size: var(--neeto-ui-text-xs);
--neeto-ui-time-panel-header-column-line-height: 16px;
--neeto-ui-time-panel-header-column-color: rgb(var(--neeto-ui-gray-600));
--neeto-ui-time-panel-header-column-gap: 12px;
--neeto-ui-time-panel-body-gap: 12px;
--neeto-ui-time-panel-body-padding-x: 16px;
--neeto-ui-time-panel-column-width: 62px;
--neeto-ui-time-panel-column-border-left-color: rgb(var(--neeto-ui-gray-200));
--neeto-ui-time-panel-cell-padding-x: 0px;
--neeto-ui-time-panel-cell-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-time-panel-now-btn-margin-bottom: 22px;

// Time Input
--neeto-ui-time-input-font-size: var(--neeto-ui-text-sm);
--neeto-ui-time-input-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-time-input-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-time-input-border-width: 1px;
--neeto-ui-time-input-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-time-input-border-radius: var(--neeto-ui-rounded);
--neeto-ui-time-input-line-height: 1.2;
--neeto-ui-time-input-padding-x: 0px;
--neeto-ui-time-input-padding-y: 0px;
--neeto-ui-time-input-box-shadow: 0px;

// Hover
--neeto-ui-time-input-hover-border-color: rgb(var(--neeto-ui-gray-800));

// Focus
--neeto-ui-time-input-focus-outline-color: transparent;
--neeto-ui-time-input-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-primary-500), 15%);
--neeto-ui-time-input-focus-border-color: rgb(var(--neeto-ui-primary-500));

// Prefix & Suffix
--neeto-ui-time-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-time-input-prefix-suffix-size: 16px;
--neeto-ui-time-input-focus-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
```

You can use these variables to customize the component to your liking. Here is
an example:

```css
.neetix-timepicker {
  --neeto-ui-time-input-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-time-input-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-success-500), 15%);
  --neeto-ui-time-input-focus-border-color: rgb(var(--neeto-ui-success-500));
}
```

#### Output
