@import '~vue2-datepicker/scss/index';

.mx-datepicker-popup {
  @apply z-[99999];
}

.date-picker {
  &.no-margin {
    .mx-input {
      @apply mb-0;
    }
  }

  &:not(.auto-width) {
    .mx-datepicker-range {
      @apply w-[320px];
    }
  }

  .mx-datepicker {
    @apply w-full;
  }

  .mx-input {
    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
  }

  .mx-input:disabled,
  .mx-input[readonly] {
    @apply bg-white dark:bg-slate-900 cursor-pointer;
  }
}

.mx-calendar-content .cell:hover {
  @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
}

.mx-datepicker-inline {
  @apply w-full;

  .mx-calendar {
    @apply w-full;
  }

  .cell.disabled {
    @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
  }

  .mx-time-item.disabled {
    @apply bg-slate-25 dark:bg-slate-900;
  }

  .today {
    @apply font-semibold;
  }

  .mx-datepicker-main {
    @apply border-0 bg-white dark:bg-slate-800;
  }

  .mx-time-header {
    @apply border-0;
  }
}