.p-datepicker {
  @apply inline-flex max-w-full;

  &-input {
    @apply flex-auto w-[1%];
  }

  &:has(&-dropdown) &-input {
    @apply rounded-r-lg;
  }

  &-dropdown {
    @apply cursor-pointer inline-flex select-none items-center justify-center overflow-hidden relative w-full bg-white transition-colors outline-none rounded-l-lg
      focus-visible:outline-none;

    &:not(:disabled) {
      @apply
      hover:bg-support-1
      active:bg-support-1
      focus:bg-support-1;
    }
  }

  &:has(&-input-icon-container) {
    @apply relative;
  }

  &:has(&-input-icon-container) &-input {
    @apply pr-12;
  }

  &-input-icon-container {
    @apply cursor-pointer absolute top-3 right-4 text-gray-90;

    .p-icon {
      @apply w-4 h-4 text-body-1 leading-none;
    }
  }

  &-fluid {
    @apply flex;
  }

  &-fluid &-input {
    @apply w-[1%];
  }

  & &-panel {
    @apply min-w-full;
  }

  &-panel {
    @apply w-auto absolute bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 p-0
      before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
      after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
  }

  &-panel-inline {
    @apply inline-block overflow-x-auto drop-shadow-none;
  }

  &-header {
    @apply flex items-center justify-between p-0 text-gray-90;
  }

  &-next-button {
    @apply rtl:-order-1;
  }

  &-prev-button {
    @apply rtl:order-1;
  }

  &-title {
    @apply flex items-center justify-between gap-2 font-semibold;
  }

  &-select-year,
  &-select-month {
    @apply border-none bg-transparent m-0 cursor-pointer transition-colors text-gray-90 px-2 py-0
      enabled:text-primary
      hover:text-primary
      focus-visible:text-primary focus-visible:outline-none;
  }

  &-calendar-container {
    @apply flex px-4;
  }

  &-calendar-container &-calendar {
    @apply flex-auto border-0 p-0;
  }

  &-day-view {
    @apply w-full border-collapse text-base m-0;
  }

  &-weekday {
    @apply font-semibold text-gray-90;
  }

  &-day-cell {
    @apply p-2;
  }

  &-day {
    @apply flex justify-center items-center cursor-pointer mx-auto my-0 overflow-hidden relative w-7 h-7 border-0 rounded-lg text-gray-90 text-body-2 transition-colors outline-none
      focus-visible:outline-none;

    .p-datepicker-today > & {
      @apply font-semibold;
    }

    &-selected,
    &-selected-range {
      @apply bg-support-1 text-primary;

      .p-datepicker-today > & {
      }
    }
  }

  &-day:not(.p-disabled):not(&-day-selected),
  &-month:not(.p-disabled):not(&-month-selected),
  &-year:not(.p-disabled):not(&-year-selected) {
    @apply hover:bg-support-1;
  }

  &-weeknumber {
    @apply font-semibold text-secondary text-center;
  }

  &-month-view,
  &-year-view,
  &-time-picker {
    @apply mx-4;
  }

  &-month,
  &-year{
    @apply w-1/3 h-7 inline-flex items-center justify-center cursor-pointer overflow-hidden relative p-0 transition-colors rounded-lg outline-none text-gray-90 text-body-2;

    &-selected {
      @apply bg-support-1 text-primary;
    }
  }

  &-month:not(.p-disabled),
  &-year:not(.p-disabled) {
    @apply focus-visible:outline-none;
  }

  &-buttonbar {
    @apply flex justify-between items-center p-2;

    .p-button {
      @apply w-auto;
    }
  }

  &-time-picker {
    @apply flex justify-center items-center gap-4;

    & > div {
      @apply flex items-center flex-col gap-1;
    }

    span {
      @apply text-body-2;
    }

    .p-timepicker-only & {
    }
  }

  &:has(.p-inputtext-sm) &-dropdown {
    .p-icon {
    }
  }

  &:has(.p-inputtext-sm) &-input-icon {
  }

  &:has(.p-inputtext-lg) &-dropdown {
    .p-icon {
    }
  }

  &:has(.p-inputtext-lg) &-input-icon {
  }
}
