.memo-wrapper {
  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;

  &.pinned {
    @apply border-gray-200 border dark:border-zinc-700;
  }

  > .memo-top-wrapper {
    @apply flex flex-row justify-between items-center w-full h-6;

    > .btns-container {
      @apply flex flex-row justify-end items-center relative shrink-0;

      > .more-action-btns-wrapper {
        @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;

        > .more-action-btns-container {
          @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);

          > .btn {
            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer select-none dark:text-gray-300;

            &.archive-btn {
              @apply text-orange-600;
            }
          }
        }
      }

      .btn {
        @apply flex flex-row justify-center items-center leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;

        &.more-action-btn {
          @apply w-auto opacity-50 cursor-default hover:bg-transparent;

          > .icon-img {
            @apply w-4 h-auto dark:text-gray-300;
          }

          &:hover {
            & + .more-action-btns-wrapper {
              display: flex;
            }
          }
        }
      }

      .final-confirm {
        color: red;
      }
    }
  }

  > .memo-content-wrapper {
    @apply mt-1;

    > .memo-content-text {
      .tag-span {
        @apply cursor-pointer hover:opacity-80;
      }

      .img {
        @apply max-w-xs;
      }
    }
  }
}
