@import "./mixin.less";

.daily-memo-diary-dialog {
  @apply p-0 sm:py-16;

  > .dialog-container {
    @apply w-112 max-w-full p-0 rounded-none sm:rounded-lg;

    > .dialog-header-container {
      @apply flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;

      > .btns-container {
        @apply flex flex-row justify-start items-center;

        > .btn-text {
          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;

          > .icon-img {
            @apply w-full h-auto;
          }

          &.share-btn {
            @apply ~"p-0.5";
          }
        }
      }
    }

    > .dialog-content-container {
      @apply w-full h-auto flex flex-col justify-start items-start p-6 pb-0;

      > .date-card-container {
        @apply flex flex-col justify-center items-center m-auto pb-6 select-none;
        z-index: 1;

        > .year-text {
          @apply m-auto font-bold text-gray-600 text-center leading-6 mb-2;
        }

        > .date-container {
          @apply flex flex-col justify-center items-center m-auto w-24 h-24;
          border-radius: 24px;
          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

          > .month-text,
          > .day-text {
            @apply flex flex-col justify-center items-center text-center w-full h-6 text-sm;
          }

          > .month-text {
            @apply bg-blue-700 text-white;
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
          }

          > .date-text {
            @apply flex flex-col justify-center items-center text-center w-full pt-1 h-12;
            font-size: 40px;
            font-weight: bold;
          }

          > .day-text {
            @apply text-xs;
          }
        }
      }

      > .date-picker {
        @apply mx-auto border border-gray-200 rounded-lg mb-6;
      }

      > .tip-container {
        @apply m-auto py-4 px-0;

        > .tip-text {
          font-style: italic;
        }
      }

      > .dailymemos-wrapper {
        @apply flex flex-col justify-start items-start w-full mt-2;
      }
    }
  }
}