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
// Date Input
--neeto-ui-date-input-font-size: var(--neeto-ui-text-sm);
--neeto-ui-date-input-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-date-input-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-date-input-border-width: 1px;
--neeto-ui-date-input-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-date-input-border-radius: var(--neeto-ui-rounded);
--neeto-ui-date-input-line-height: 1.2;
--neeto-ui-date-input-padding-x: 0px;
--neeto-ui-date-input-padding-y: 0px;
--neeto-ui-date-input-box-shadow: 0px;
--neeto-ui-date-input-active-bar-bg-color: rgb(var(--neeto-ui-primary-500));

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

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

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

// Cell
--neeto-ui-date-input-cell-font-size: var(--neeto-ui-text-sm);
--neeto-ui-date-input-cell-height: 32px;
--neeto-ui-date-input-cell-border-radius: var(--neeto-ui-rounded-sm);
--neeto-ui-date-input-cell-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-date-input-cell-hover-bg-color: rgb(var(--neeto-ui-gray-200));
--neeto-ui-date-input-cell-border-width: 1px;
--neeto-ui-date-input-cell-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-date-input-today-cell-border-width: 1px;
--neeto-ui-date-input-today-cell-border-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-date-input-selected-cell-color: rgb(var(--neeto-ui-white));
--neeto-ui-date-input-selected-cell-bg-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-date-input-cell-range-bg-color: rgb(var(--neeto-ui-gray-200));
--neeto-ui-date-input-cell-range-hover-bg-color: rgb(var(--neeto-ui-gray-400));

// Footer
--neeto-ui-date-input-footer-bg-color: rgb(var(--neeto-ui-gray-100));
--neeto-ui-date-input-footer-btn-padding-x: 8px;
--neeto-ui-date-input-footer-btn-padding-y: 5px;
--neeto-ui-date-input-footer-btn-gap: 4px;
--neeto-ui-date-input-footer-btn-font-size: var(--neeto-ui-text-xs);
--neeto-ui-date-input-footer-btn-font-weight: var(--neeto-ui-font-medium);
--neeto-ui-date-input-footer-btn-line-height: 16px;
--neeto-ui-date-input-footer-btn-border-radius: var(--neeto-ui-rounded);
--neeto-ui-date-input-footer-today-now-btn-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-date-input-footer-today-now-btn-hover-color: rgb(
  var(--neeto-ui-gray-800)
);
--neeto-ui-date-input-footer-today-now-btn-hover-bg-color: rgb(
  var(--neeto-ui-gray-200)
);
--neeto-ui-date-input-footer-ok-btn-color: rgb(var(--neeto-ui-white));
--neeto-ui-date-input-footer-ok-btn-bg-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-date-input-footer-ok-btn-border-color: rgb(
  var(--neeto-ui-primary-500)
);
--neeto-ui-date-input-footer-ok-btn-hover-color: rgb(var(--neeto-ui-white));
--neeto-ui-date-input-footer-ok-btn-hover-bg-color: rgb(
  var(--neeto-ui-primary-600)
);
--neeto-ui-date-input-footer-ok-btn-disabled-opacity: 0.5;

// Date Panel
--neeto-ui-date-panel-width: 320px;
--neeto-ui-date-panel-content-width: 272px;
--neeto-ui-date-panel-content-header-color: rgb(var(--neeto-ui-gray-600));
--neeto-ui-date-panel-content-header-font-size: var(--neeto-ui-text-xs);

// Date Panel Dropdown
--neeto-ui-date-panel-dropdown-padding-y: 2px;

// Date Panel Container
--neeto-ui-date-panel-container-border-width: 1px;
--neeto-ui-date-panel-container-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-date-panel-container-box-shadow: var(--neeto-ui-shadow-lg);
--neeto-ui-date-panel-container-border-radius: var(--neeto-ui-rounded-xl);

// Date Panel Header
--neeto-ui-date-panel-header-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-date-panel-header-min-height: 68px;
--neeto-ui-date-panel-header-padding-top: 12px;
--neeto-ui-date-panel-header-padding-bottom: 0px;
--neeto-ui-date-panel-header-padding-x: 24px;
--neeto-ui-date-panel-header-border-bottom-width: 0px;
--neeto-ui-date-panel-header-nav-btn-font-size: var(--neeto-ui-text-base);
--neeto-ui-date-panel-header-nav-btn-font-weight: var(--neeto-ui-font-semibold);
--neeto-ui-date-panel-header-nav-btn-padding-right: 24px;
--neeto-ui-date-panel-header-btn-color: rgb(var(--neeto-ui-gray-800));
```

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

```css
.neetix-datepicker {
  --neeto-ui-date-input-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-date-input-active-bar-bg-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-date-input-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-success-500), 15%);
  --neeto-ui-date-input-focus-border-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-date-input-today-cell-border-color: rgb(
    var(--neeto-ui-success-500)
  );
  --neeto-ui-date-input-selected-cell-bg-color: rgb(
    var(--neeto-ui-success-500)
  );
  --neeto-ui-date-input-footer-btn-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-date-input-footer-ok-btn-bg-color: rgb(
    var(--neeto-ui-success-500)
  );
  --neeto-ui-date-input-footer-ok-btn-border-color: rgb(
    var(--neeto-ui-success-500)
  );
  --neeto-ui-date-input-footer-ok-btn-hover-bg-color: rgb(
    var(--neeto-ui-success-600)
  );
}
```

#### Output
