@import "../../../css/tailwind.css";

.datepicker {
  .datepicker-picker {
    @apply text-rock-500 border border-sky-400 rounded-lg !shadow-none overflow-hidden;
    .datepicker-header {
      @apply bg-ocean-50;
      .datepicker-controls {
        button {
          @apply bg-ocean-50;
          &.prev-btn,
          &.next-btn {
            @apply relative;
            &::before {
              @apply absolute w-4 h-4 bg-contain bg-no-repeat bg-[url('../../../assets/icons/bold/arrow/arrow-circle-left.svg')] content-[""];
            }
          }
          &.next-btn {
            &::before {
              @apply bg-[url('../../../assets/icons/bold/arrow/arrow-circle-right.svg')];
            }
          }
        }
      }
    }
    .datepicker-main {
      @apply p-2;
      .days {
        .days-of-week {
          @apply gap-1.5 mb-5;
          .dow {
            @apply font-medium text-sm;
          }
        }
        .datepicker-grid {
          @apply grid grid-cols-7 gap-1.5;
          .datepicker-cell.day {
            @apply text-xs font-normal border border-sky-400 rounded-lg h-7 hover:bg-sky-75;
            &.selected,
            &.focused {
              @apply font-semibold text-rock-500 bg-sky-75;
            }
            &.prev,
            &.next {
              @apply invisible;
            }
          }
        }
      }
      .datepicker-view {
        &.months,
        &.years {
          .datepicker-cell {
            @apply hover:bg-sky-75;
            &.selected,
            &.focused {
              @apply text-rock-500 bg-sky-75;
            }
          }
        }
      }
    }
  }
}