@import "./mixin.less";

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

  > .banner-wrapper {
    @apply w-full flex flex-col justify-start items-center;
  }

  > .page-container {
    @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start;

    > .sidebar-wrapper {
      @apply flex-shrink-0;
    }

    > .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;

      > .memos-editor-wrapper {
        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10;
        background-color: #f6f5f4;
      }

      > .addtion-btn-container {
        @apply fixed bottom-12 left-1/2 -translate-x-1/2;

        > .btn {
          @apply bg-blue-600 text-white px-4 py-2 rounded-3xl shadow-2xl hover:opacity-80;

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