@import "./mixin.less";

.share-memo-image-dialog {
  > .dialog-container {
    @apply w-96 p-0 bg-gray-200;

    > .dialog-header-container {
      @apply py-2 pt-4 px-4 pl-6 mb-0 bg-white rounded-t-lg;
    }

    > .dialog-content-container {
      @apply w-full flex flex-col justify-start items-start relative;
      min-height: 128px;

      > .tip-words-container {
        @apply w-full flex flex-col justify-center items-start border-b bg-white px-6 py-0 pb-2;

        > .tip-text {
          @apply text-sm text-gray-500;
        }

        &.loading {
          > .tip-text {
            animation: 1s linear 1s infinite alternate breathing;
          }
        }

        @keyframes breathing {
          from {
            opacity: 1;
          }

          to {
            opacity: 0.4;
          }
        }
      }

      > .memo-container {
        @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start;

        > .memo-shortcut-img {
          @apply absolute top-0 left-0 w-full h-auto rounded-b-lg z-10;
        }

        > .time-text {
          @apply w-full px-6 pt-5 text-xs text-gray-500 bg-white;
        }

        > .memo-content-text {
          @apply w-full pt-2 pb-4 px-6 text-base bg-white;
        }

        > .images-container {
          @apply w-full h-auto flex flex-col justify-start items-start px-6 pb-2 bg-white;

          > img {
            @apply w-full h-auto mb-2 rounded;
          }
        }

        > .watermark-container {
          @apply flex flex-row justify-start items-center w-full py-3 px-6;

          > .normal-text {
            @apply w-full flex flex-row justify-start items-center text-sm text-gray-500;

            > .name-text {
              @apply text-black ml-2;
            }

            > .icon-text {
              @apply text-lg ml-1 mr-2;
            }
          }
        }
      }
    }
  }
}
