.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 flex flex-col justify-center items-center;
        width: 36px;
        height: 36px;
        user-select: none;
        color: gray;
        font-size: 13px;
        margin: 2px 0;
      }
    }

    > .day-item {
      @apply flex flex-col justify-center items-center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      margin: 2px;

      &:hover {
        @apply bg-gray-100;
      }

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

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