@import "./mixin.less";

.page-wrapper.explore {
  @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
  background-color: #f6f5f4;

  > .page-container {
    @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;

    > .page-header {
      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 sm:pr-6 pt-6 mb-2;
      background-color: #f6f5f4;

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

        > .logo-img {
          @apply h-12 sm:h-14 w-auto mr-1;
        }

        > .title-text {
          @apply text-xl sm:text-3xl font-mono text-gray-700;
        }
      }

      > .action-button-container {
        > .btn {
          @apply block text-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;

          > .icon {
            @apply text-lg;
          }
        }
      }
    }

    > .memos-wrapper {
      @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;

      > .memo-container {
        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;

        > .memo-header {
          @apply mb-2 w-full flex flex-row justify-start items-center text-sm font-mono text-gray-400;

          > .split-text {
            @apply mx-2;
          }

          > .name-text {
            @apply hover:text-green-600 hover:underline;
          }
        }

        > .memo-content {
          @apply cursor-default;

          > * {
            @apply cursor-default;
          }
        }
      }
    }
  }
}