.date-picker-wrapper {
  @apply flex flex-col justify-start items-start p-4;

  > .date-picker-header {
    @apply flex flex-row justify-center items-center w-full mb-2;

    > .btn-text {
      @apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
    }

    > .normal-text {
      @apply mx-1 leading-6 font-mono;
    }
  }

  > .date-picker-day-container {
    @apply flex flex-row justify-start items-start;
    width: 280px;
    flex-wrap: wrap;

    > .date-picker-day-header {
      @apply flex flex-row justify-around items-center w-full;

      > .day-item {
        @apply w-9 h-9 select-none flex flex-col justify-center items-center;
        color: gray;
        font-size: 13px;
        margin: 2px 0;
      }
    }

    > .day-item {
      @apply w-9 h-9 rounded-full text-sm select-none cursor-pointer flex flex-col justify-center items-center hover:bg-gray-200 dark:hover:bg-zinc-600;
      margin: 2px;

      &.current {
        @apply text-blue-600 !bg-blue-100 text-base font-medium;
      }

      &.null {
        background-color: unset;
        cursor: unset;
      }
    }
  }
}
