@import './button';
@import './inputtext';

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

.p-datepicker-input {
  @apply w-[1%] flex-auto;
}

.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
  @apply rounded-e-none;
}

.p-datepicker-dropdown {
  @apply relative inline-flex w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-e-md border border-s-0 border-surface-300 bg-surface-100 text-surface-600 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary enabled:hover:bg-surface-200 enabled:hover:text-surface-700 enabled:active:bg-surface-300 enabled:active:text-surface-800 dark:border-surface-700 dark:bg-surface-800 dark:text-surface-300 dark:enabled:hover:bg-surface-700 dark:enabled:hover:text-surface-200 dark:enabled:active:bg-surface-600 dark:enabled:active:text-surface-100;
}

.p-datepicker:has(.p-datepicker-input-icon-container) {
  @apply relative;
}

.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
  @apply pe-10;
}

.p-datepicker-input-icon-container {
  @apply absolute end-3 top-1/2 -mt-2 cursor-pointer text-surface-400;
}

.p-datepicker-fluid {
  @apply flex;
}

.p-datepicker-fluid .p-datepicker-input {
  @apply w-[1%];
}

.p-datepicker .p-datepicker-panel {
  @apply min-w-full;
}

.p-datepicker-panel {
  @apply w-auto rounded-md border border-surface-200 bg-surface-0 p-3 text-surface-700 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-datepicker-panel-inline {
  @apply inline-block overflow-x-auto shadow-none;
}

.p-datepicker-header {
  @apply flex items-center justify-between gap-2 border-b border-surface-200 bg-surface-0 px-0 pb-2 pt-0 font-medium text-surface-700 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-datepicker-next-button:dir(rtl) {
  @apply order-[-1];
}
.p-datepicker-prev-button:dir(rtl) {
  @apply order-1;
}

.p-datepicker-title {
  @apply flex items-center justify-between gap-2 font-medium;
}

.p-datepicker-select-year,
.p-datepicker-select-month {
  @apply m-0 cursor-pointer rounded-md border-none bg-transparent px-2 py-1 font-medium text-surface-700 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary enabled:hover:bg-surface-100 enabled:hover:text-surface-800 dark:text-surface-0 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0;
}

.p-datepicker-calendar-container {
  @apply flex;
}

.p-datepicker-calendar-container .p-datepicker-calendar {
  @apply flex-auto gap-3 border-s border-surface-200 first:border-s-0 first:ps-0 last:pe-0 dark:border-surface-700;
}

.p-datepicker-day-view {
  @apply mx-0 mb-0 mt-2 w-full border-collapse text-base;
}

.p-datepicker-weekday-cell {
  @apply p-1;
}

.p-datepicker-weekday {
  @apply font-medium text-surface-700 dark:text-surface-0;
}

.p-datepicker-day-cell {
  @apply p-1;
}

.p-datepicker-day {
  @apply relative mx-auto my-0 flex h-8 w-8 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-transparent p-1 text-surface-700 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:text-surface-0;
}

.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-datepicker-day-selected {
  @apply bg-primary text-primary-contrast;
}

.p-datepicker-day-selected-range {
  @apply bg-highlight;
}

.p-datepicker-today > .p-datepicker-day {
  @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0;
}

.p-datepicker-today > .p-datepicker-day-selected {
  @apply bg-primary text-primary-contrast;
}

.p-datepicker-today > .p-datepicker-day-selected-range {
  @apply bg-highlight;
}

.p-datepicker-weeknumber {
  @apply text-center;
}

.p-datepicker-month-view {
  @apply mx-0 mb-0 mt-2;
}

.p-datepicker-month {
  @apply relative inline-flex w-1/3 cursor-pointer items-center justify-center overflow-hidden rounded-md p-[0.375rem] text-surface-700 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:text-surface-0;
}

.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-datepicker-month-selected {
  @apply bg-primary text-primary-contrast;
}

.p-datepicker-year-view {
  @apply mx-0 mb-0 mt-2;
}

.p-datepicker-year {
  @apply relative inline-flex w-1/2 cursor-pointer items-center justify-center overflow-hidden rounded-md p-[0.375rem] text-surface-700 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:text-surface-0;
}

.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0;
}

.p-datepicker-year-selected {
  @apply bg-primary text-primary-contrast;
}

.p-datepicker-buttonbar {
  @apply flex items-center justify-between border-t border-surface-200 px-0 pb-0 pt-2 dark:border-surface-700;
}

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

.p-datepicker-time-picker {
  @apply flex items-center justify-center gap-2 border-t border-surface-200 p-0 dark:border-surface-700;
}

.p-datepicker-calendar-container + .p-datepicker-time-picker {
  @apply px-0 pb-0 pt-2;
}

.p-datepicker-time-picker > div {
  @apply flex flex-col items-center gap-1;
}

.p-datepicker-time-picker span {
  @apply text-base;
}

.p-datepicker-timeonly .p-datepicker-time-picker {
  @apply border-t-0;
}
