:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // 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: 1rem;
  --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: 2rem;
  --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: 0.5rem;
  --neeto-ui-date-input-footer-btn-padding-y: 0.3125rem;
  --neeto-ui-date-input-footer-btn-gap: 0.25rem;
  --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: 1rem;
  --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: 20rem;
  --neeto-ui-date-panel-content-width: 17rem;
  --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: 0.125rem;

  // 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: 4.25rem;
  --neeto-ui-date-panel-header-padding-top: 0.75rem;
  --neeto-ui-date-panel-header-padding-bottom: 0px;
  --neeto-ui-date-panel-header-padding-x: 1.5rem;
  --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: 1.5rem;
  --neeto-ui-date-panel-header-btn-color: rgb(var(--neeto-ui-gray-800));

  // Time Panel
  --neeto-ui-time-panel-header-padding-top: 1rem;
  --neeto-ui-time-panel-header-padding-bottom: 0.5rem;
  --neeto-ui-time-panel-header-padding-x: 1rem;
  --neeto-ui-time-panel-header-column-font-size: var(--neeto-ui-text-xs);
  --neeto-ui-time-panel-header-column-line-height: 1rem;
  --neeto-ui-time-panel-header-column-color: rgb(var(--neeto-ui-gray-600));
  --neeto-ui-time-panel-header-column-gap: 0.75rem;
  --neeto-ui-time-panel-body-gap: 0.75rem;
  --neeto-ui-time-panel-body-padding-x: 1rem;
  --neeto-ui-time-panel-column-width: 3.875rem;
  --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: 1.375rem;

  // 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: 1rem;
  --neeto-ui-time-input-focus-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));

  // Date Time Picker
  --neeto-ui-date-time-picker-gap: -1px;
  --neeto-ui-date-time-picker-border-radius: 0px;
}

.ant-picker.neeto-ui-date-input {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: var(--neeto-ui-date-input-font-size);
  transition: var(--neeto-ui-transition);
  color: var(--neeto-ui-date-input-color);
  background-color: var(--neeto-ui-date-input-bg-color);
  border: var(--neeto-ui-date-input-border-width) solid var(--neeto-ui-date-input-border-color);
  border-radius: var(--neeto-ui-date-input-border-radius);
  overflow: hidden;
  line-height: var(--neeto-ui-date-input-line-height);
  padding: var(--neeto-ui-date-input-padding-y) var(--neeto-ui-date-input-padding-x);
  box-shadow: var(--neeto-ui-date-input-box-shadow);

  &.neeto-ui-date-input--large {
    --neeto-ui-date-input-padding-x: 0.75rem;
    --neeto-ui-date-input-padding-y: 0.5rem;
  }

  &.neeto-ui-date-input--medium {
    --neeto-ui-date-input-padding-x: 0.5rem;
    --neeto-ui-date-input-padding-y: 0.25rem;
  }

  &.neeto-ui-date-input--small {
    --neeto-ui-date-input-padding-x: 0.5rem;
    --neeto-ui-date-input-padding-y: 0.125rem;
  }

  .ant-picker-input > input {
    color: var(--neeto-ui-date-input-color);
    font-size: var(--neeto-ui-date-input-font-size);
  }

  &:hover:not(.neeto-ui-date-input--naked, .neeto-ui-date-input--disabled, .ant-picker-focused) {
    border-color: var(--neeto-ui-date-input-hover-border-color);
  }

  &.neeto-ui-date-input--error:not(.neeto-ui-date-input--naked) {
    --neeto-ui-date-input-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-date-input-hover-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-date-input-focus-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-date-input-focus-box-shadow: 0 0 0 3px rgb(var(--neeto-ui-error-100));
  }

  &.neeto-ui-date-input--disabled {
    --neeto-ui-date-input-bg-color: rgb(var(--neeto-ui-gray-100));
    cursor: not-allowed;

    input {
      cursor: not-allowed;
    }
  }

  .ant-picker-suffix {
    color: var(--neeto-ui-date-input-prefix-suffix-color);
  }

  &.ant-picker-focused:not(.neeto-ui-date-input--naked) {
    border-color: var(--neeto-ui-date-input-focus-border-color) !important;
    box-shadow: var(--neeto-ui-date-input-focus-box-shadow) !important;

    .ant-picker-suffix {
      color: var(--neeto-ui-date-input-focus-prefix-suffix-color);
    }
  }

  &.neeto-ui-date-input--naked {
    --neeto-ui-date-input-border-width: 0px;
  }

  .ant-picker-clear {
    background-color: transparent;

    svg {
      width: var(--neeto-ui-date-input-prefix-suffix-size);
      height: var(--neeto-ui-date-input-prefix-suffix-size);
      color: var(--neeto-ui-date-input-prefix-suffix-color);
    }
  }

  .ant-picker-range-arrow {
    display: none !important;
  }

  &.ant-picker-range.ant-picker-focused .ant-picker-active-bar {
    background: var(--neeto-ui-date-input-active-bar-bg-color);
  }

  &.ant-picker-range .ant-picker-clear {
    right: 8px;
  }
}

// Time Input

.ant-picker.neeto-ui-time-input {
  font-size: var(--neeto-ui-time-input-font-size);
  color: var(--neeto-ui-time-input-color);
  background-color: var(--neeto-ui-time-input-bg-color);
  border: var(--neeto-ui-time-input-border-width) solid var(--neeto-ui-time-input-border-color);
  border-radius: var(--neeto-ui-time-input-border-radius);
  line-height: var(--neeto-ui-time-input-line-height);
  padding: var(--neeto-ui-time-input-padding-y) var(--neeto-ui-time-input-padding-x);
  box-shadow: var(--neeto-ui-time-input-box-shadow);

  &.neeto-ui-time-input--large {
    --neeto-ui-time-input-padding-x: 0.75rem;
    --neeto-ui-time-input-padding-y: 0.5rem;
  }

  &.neeto-ui-time-input--medium {
    --neeto-ui-time-input-padding-x: 0.5rem;
    --neeto-ui-time-input-padding-y: 0.25rem;
  }

  &.neeto-ui-time-input--small {
    --neeto-ui-time-input-padding-x: 0.5rem;
    --neeto-ui-time-input-padding-y: 0.125rem;
  }

  .ant-picker-input > input {
    color: var(--neeto-ui-time-input-color);
    font-size: var(--neeto-ui-time-input-font-size);
  }

  &:hover:not(.neeto-ui-time-input--naked, .neeto-ui-time-input--disabled) {
    border-color: var(--neeto-ui-time-input-hover-border-color);
  }

  &.neeto-ui-time-input--error {
    --neeto-ui-time-input-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-time-input-hover-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-time-input-focus-border-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-time-input-focus-box-shadow: 0 0 0 3px rgb(var(--neeto-ui-error-100));
  }

  &.neeto-ui-time-input--disabled {
    --neeto-ui-time-input-bg-color: rgb(var(--neeto-ui-gray-100));
    cursor: not-allowed;

    input {
      cursor: not-allowed;
    }
  }

  .ant-picker-suffix {
    color: var(--neeto-ui-time-input-prefix-suffix-color);
  }

  &.ant-picker-focused:not(.neeto-ui-time-input--naked) {
    border-color: var(--neeto-ui-time-input-focus-border-color) !important;
    box-shadow: var(--neeto-ui-time-input-focus-box-shadow) !important;

    .ant-picker-suffix {
      color: var(--neeto-ui-time-input-focus-prefix-suffix-color);
    }
  }

  &.neeto-ui-time-input--naked {
    --neeto-ui-time-input-border-width: 0px;
  }

  .ant-picker-clear {
    background-color: transparent;

    svg {
      width: var(--neeto-ui-time-input-prefix-suffix-size);
      height: var(--neeto-ui-time-input-prefix-suffix-size);
      color: var(--neeto-ui-time-input-prefix-suffix-color);
    }
  }

  .ant-picker-range-arrow {
    display: none !important;
  }
}

.neeto-ui-date-time-dropdown {
  .ant-picker-time-panel {
    .ant-picker-time-panel-column {
      & > li.ant-picker-time-panel-cell-selected {
        .ant-picker-time-panel-cell-inner {
          background: var(--neeto-ui-date-input-selected-cell-bg-color);
          color: var(--neeto-ui-date-input-selected-cell-color);
        }
      }
    }
  }

  .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
    .ant-picker-cell-inner {
    background-color: var(--neeto-ui-date-input-cell-hover-bg-color);
  }

  .ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell:not(.ant-picker-time-panel-cell-selected, .ant-picker-time-panel-cell-disabled)
    .ant-picker-time-panel-cell-inner {
    color: var(--neeto-ui-date-input-cell-color);

    &:hover {
      background-color: var(--neeto-ui-date-input-cell-hover-bg-color);
    }
  }

  .ant-picker-footer {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: var(--neeto-ui-date-input-footer-bg-color);
  }
}

.neeto-ui-date-time-dropdown {
  padding-top: var(--neeto-ui-date-panel-dropdown-padding-y);
  padding-bottom: var(--neeto-ui-date-panel-dropdown-padding-y);
  z-index: calc(var(--neeto-ui-modal-z-index) + 1);

  .ant-picker-panel {
    .ant-picker-header {
      .ant-picker-header-view {
        color: var(--neeto-ui-date-panel-header-color);

        button {
          &:hover {
            color: var(--neeto-ui-date-panel-header-btn-color);
          }
        }
      }
    }

    .ant-picker-body {

      @include viewport(xs-mob) {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }

      .ant-picker-content {
        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-today {
          .ant-picker-cell-inner {
            &::before {
              border: var(--neeto-ui-date-input-today-cell-border-width) solid var(--neeto-ui-date-input-today-cell-border-color);
            }
          }
        }

        .ant-picker-cell.ant-picker-cell-in-view {
          &::after {
            border: var(--neeto-ui-date-input-cell-border-width) solid var(--neeto-ui-date-input-cell-border-width);
          }
        }

        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-start,
        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-end {
          &::before {
            background: var(--neeto-ui-date-input-cell-range-bg-color);
          }

          .ant-picker-cell-inner {
            background: var(--neeto-ui-date-input-selected-cell-bg-color);
            color: var(--neeto-ui-date-input-selected-cell-color);
          }
        }

        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range {
          &::before {
            background: var(--neeto-ui-date-input-cell-range-bg-color);
          }
        }

        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover,
        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start,
        .ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end {
          &::before {
            background: var(--neeto-ui-date-input-cell-range-hover-bg-color);
          }

          .ant-picker-cell-inner {
            &::after {
              background: var(--neeto-ui-date-input-cell-range-hover-bg-color);
            }
          }
        }
      }
    }
  }

  .ant-picker-footer {
    .ant-picker-today-btn,
    .ant-picker-now-btn {
      position: relative;
      display: inline-flex !important;
      align-items: center;
      padding: var(--neeto-ui-date-input-footer-btn-padding-y) var(--neeto-ui-date-input-footer-btn-padding-x);
      gap: var(--neeto-ui-date-input-footer-btn-gap);
      color: var(--neeto-ui-date-input-footer-today-now-btn-color);
      font-size: var(--neeto-ui-date-input-footer-btn-font-size);
      font-weight: var(--neeto-ui-date-input-footer-btn-font-weight);
      line-height: var(--neeto-ui-date-input-footer-btn-line-height);
      transition: var(--neeto-ui-transition);
      border-radius: var(--neeto-ui-date-input-footer-btn-border-radius);
      height: auto;

      &:hover {
        color: var(--neeto-ui-date-input-footer-today-now-btn-hover-color);
        background-color: var(--neeto-ui-date-input-footer-today-now-btn-hover-bg-color);
      }
    }

    .ant-picker-ok {
      button {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        padding: var(--neeto-ui-date-input-footer-btn-padding-y) var(--neeto-ui-date-input-footer-btn-padding-x);
        gap: var(--neeto-ui-date-input-footer-btn-gap);
        color: var(--neeto-ui-date-input-footer-ok-btn-color);
        background: var(--neeto-ui-date-input-footer-ok-btn-bg-color);
        border-color: var(--neeto-ui-date-input-footer-ok-btn-border-color);
        font-size: var(--neeto-ui-date-input-footer-btn-font-size);
        font-weight: var(--neeto-ui-date-input-footer-btn-font-weight);
        line-height: var(--neeto-ui-date-input-footer-btn-line-height);
        transition: var(--neeto-ui-transition);
        border-radius: var(--neeto-ui-date-input-footer-btn-border-radius);
        height: auto;

        &:not([disabled]):hover {
          color: var(--neeto-ui-date-input-footer-ok-btn-hover-color);
          background-color: var(--neeto-ui-date-input-footer-ok-btn-hover-bg-color);
        }
        &[disabled] {
          cursor: not-allowed;
          opacity: var(--neeto-ui-date-input-footer-ok-btn-disabled-opacity);
        }
      }
    }
  }

  .ant-picker-panel-container {
    border: var(--neeto-ui-date-panel-container-border-width) solid var(--neeto-ui-date-panel-container-border-color);
    /* Elevation/S */
    box-shadow: var(--neeto-ui-date-panel-container-box-shadow);
    border-radius: var(--neeto-ui-date-panel-container-border-radius);
  }

  .ant-picker-panel-container .ant-picker-panel {
    border: 0;
  }
}

.neeto-ui-date-time-dropdown {
  .ant-picker-header {
    min-height: var(--neeto-ui-date-panel-header-min-height);
    padding: var(--neeto-ui-date-panel-header-padding-top) var(--neeto-ui-date-panel-header-padding-x) var(--neeto-ui-date-panel-header-padding-bottom) var(--neeto-ui-date-panel-header-padding-x);
    white-space: nowrap;
    align-items: center;
    border-bottom: var(--neeto-ui-date-panel-header-border-bottom-width);

    @include viewport(xs-mob) {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }

  .ant-picker-header-view {
    line-height: 1;
  }

  .ant-picker-header-view button {
    padding-right: var(--neeto-ui-date-panel-header-nav-btn-padding-right);
    position: relative;
    font-size: var(--neeto-ui-date-panel-header-nav-btn-font-size);
    font-weight: var(--neeto-ui-date-panel-header-nav-btn-font-weight);

    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 1rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='16' width='16'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%232f3941' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .ant-picker-header button {
    line-height: inherit;
    color: var(--neeto-ui-date-panel-header-btn-color);
  }

  .ant-picker-date-panel {
    width: var(--neeto-ui-date-panel-width);

    @include viewport(xs-mob) {
      width: 18.5rem;
    }
  }

  .ant-picker-date-panel .ant-picker-content {
    width: var(--neeto-ui-date-panel-content-width);
  }

  .ant-picker-date-panel .ant-picker-content th {
    color: var(--neeto-ui-date-panel-content-header-color);
    font-size: var(--neeto-ui-date-panel-content-header-font-size);
    text-transform: uppercase;
  }

  .ant-picker-cell::before {
    height: var(--neeto-ui-date-input-cell-height);
  }

  .ant-picker-cell .ant-picker-cell-inner {
    user-select: none;
    font-size: var(--neeto-ui-date-input-cell-font-size);
    border-radius: var(--neeto-ui-date-input-cell-border-radius);

    &::before {
      border-radius: var(--neeto-ui-date-input-cell-border-radius);
    }
  }

  .ant-picker-cell-in-view {
    color: var(--neeto-ui-date-input-cell-color);
  }

  .ant-picker-range.ant-picker-focused .ant-picker-active-bar {
    background: var(--neeto-ui-date-input-active-bar-bg-color) !important;
  }

  .ant-picker-date-panel .ant-picker-header {
    .ant-picker-header-super-prev-btn,
    .ant-picker-header-super-next-btn {
      display: none !important;
    }
  }
  .ant-picker-datetime-panel .ant-picker-time-panel,
  .ant-picker-time-panel-column:not(:first-child) {
    border-left-color: var(--neeto-ui-time-panel-column-border-left-color);
  }
}

.neeto-ui-date-input-custom-panel {
  .ant-picker-time-panel-column {
    width: var(--neeto-ui-time-panel-column-width);
    flex-grow: 0;
    border: 0;
  }

  .ant-picker-time-panel-cell-inner {
    padding-left: var(--neeto-ui-time-panel-cell-padding-x) !important;
    padding-right: var(--neeto-ui-time-panel-cell-padding-x) !important;
    text-align: center;
    color: var(--neeto-ui-time-panel-cell-color)
  }

  .neeto-ui-date-input-custom-panel__header {
    display: flex;
    flex-direction: column;
    padding: var(--neeto-ui-time-panel-header-padding-top) var(--neeto-ui-time-panel-header-padding-x) var(--neeto-ui-time-panel-header-padding-bottom) var(--neeto-ui-time-panel-header-padding-x);
  }

  .neeto-ui-date-input-custom-panel__header-now-btn {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--neeto-ui-time-panel-now-btn-margin-bottom);
    font-size: var(--neeto-ui-date-panel-header-nav-btn-font-size) !important;
  }

  .neeto-ui-date-input-custom-panel__header-cols {
    display: flex;
    gap: var(--neeto-ui-time-panel-header-column-gap);
  }

  .neeto-ui-date-input-custom-panel__header-col {
    width: var(--neeto-ui-time-panel-column-width);
    text-align: center;
    color: var(--neeto-ui-time-panel-header-column-color);
    font-size: var(--neeto-ui-time-panel-header-column-font-size);
    line-height: var(--neeto-ui-time-panel-header-column-line-height);
    text-transform: uppercase;
  }

  .neeto-ui-date-input-custom-panel__body {
    .ant-picker-panel {
      width: 100%;
    }
    .ant-picker-content {
      gap: var(--neeto-ui-time-panel-body-gap);
    }
    .ant-picker-time-panel {
      padding-left: var(--neeto-ui-time-panel-body-padding-x);
      padding-right: var(--neeto-ui-time-panel-body-padding-x);
    }
    .ant-picker-time-panel-cell-inner {
      border-radius: var(--neeto-ui-date-input-cell-border-radius) !important;
    }
  }
}
.ant-picker-ranges > li {
  margin-right: 0.5rem;
}

.ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
  height: auto;
  padding: var(--neeto-ui-date-input-footer-btn-padding-y) var(--neeto-ui-date-input-footer-btn-padding-x);
  color: var(--neeto-ui-date-input-footer-today-now-btn-color);
  font-size: var(--neeto-ui-date-input-footer-btn-font-size);
  font-weight: var(--neeto-ui-date-input-footer-btn-font-weight);
  line-height: var(--neeto-ui-date-input-footer-btn-line-height);
  transition: var(--neeto-ui-transition);
  border-radius: var(--neeto-ui-date-input-footer-btn-border-radius);
  background: rgba(255, 255, 255, 0);
  cursor: pointer;

  &:hover {
    color: var(--neeto-ui-date-input-footer-today-now-btn-hover-color);
    background: var(--neeto-ui-date-input-footer-today-now-btn-hover-bg-color);
  }
}

// Date Time Picker

.neeto-ui-date-time-input {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .neeto-ui-date-input {
    border-top-right-radius: var(--neeto-ui-date-time-picker-border-radius);
    border-bottom-right-radius: var(--neeto-ui-date-time-picker-border-radius);
  }
  .neeto-ui-time-picker .react-time-picker__wrapper {
    border-top-left-radius: var(--neeto-ui-date-time-picker-border-radius);
    border-bottom-left-radius: var(--neeto-ui-date-time-picker-border-radius);
    margin-left: var(--neeto-ui-date-time-picker-gap);
  }
}


.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));
  --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));
}

.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));
}

.neetix-datetimepicker {
  --neeto-ui-date-time-picker-gap: 0.125rem;
  --neeto-ui-date-time-picker-border-radius: 0.25rem;
}
