@import "./mixin.less";

.dialog-wrapper.memo-card-dialog {
  @apply px-4;

  > .dialog-container {
    @apply w-full p-0 bg-transparent flex flex-col justify-start items-center;

    > .memo-card-container {
      @apply flex flex-col justify-start items-start relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;

      > * {
        z-index: 1;
      }

      > .header-container {
        @apply flex flex-row justify-between items-center w-full h-auto pb-0 my-0;

        > .time-text {
          @apply text-sm text-gray-500 font-mono;
        }

        > .btns-container {
          .flex(row, flex-end, center);

          > .btn {
            .flex(row, center, center);
            @apply w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
          }

          > .split-line {
            @apply font-mono text-gray-300 ml-2;
          }
        }
      }

      > .memo-container {
        @apply w-full flex flex-col justify-start items-start pt-2;
      }

      > .normal-text {
        @apply mt-2 text-sm text-gray-500;
      }

      > .layer-container,
      > .background-layer-container {
        position: absolute;
        bottom: -3px;
        left: 3px;
        width: calc(100% - 6px);
        height: 100%;
        border-radius: 8px;
        z-index: -1;
        background-color: @bg-paper-yellow;
        border-bottom: 1px solid lightgray;
      }

      > .layer-container {
        z-index: 0;
        background-color: @bg-paper-yellow;
        border: 1px solid lightgray;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    > .linked-memos-wrapper {
      .flex(column, flex-start, flex-start);
      @apply w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;

      > .normal-text {
        @apply text-sm;
      }

      > .linked-memo-container {
        @apply text-sm leading-6 mt-2 cursor-pointer max-w-full truncate hover:opacity-80;

        > .time-text {
          @apply font-mono text-gray-500;
        }
      }
    }
  }
}