@import '@/styles/mixins.less';
@import '@/styles/variables.less';

.appLayout {
  .appSider {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background-color: @module-background;
    border-right: 1px solid @color-border-secondary;

    .siderContent {
      height: 100%;
      position: relative;
      overflow: hidden;
      user-select: none;

      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: @header-height;
        border-bottom: 1px solid @color-border-secondary;
      }

      @userinfo-height: 188px;
      .userInfo {
        height: @userinfo-height;
        border-bottom: 1px solid @color-border-secondary;
        overflow: hidden;
        user-select: none;
        &.collapsed {
          height: @userinfo-height - 40;

          .avatar {
            @size: 3rem;
            width: @size;
            height: @size;
          }

          .name {
            font-size: 85%;
          }
        }

        .avatar {
          @size: 5rem;
          width: @size;
          height: @size;
          margin-bottom: 1rem;
          border-radius: 100%;
          border: 4px solid @color-border-secondary;
          background-color: @color-border;
          background-image: url('/images/nodepress.png');
          background-size: contain;
          transform: rotate(0deg);
          transition: transform 1s;
          &:hover {
            transform: rotate(360deg);
          }
        }

        .name {
          margin-top: 0;
        }

        .slogan {
          font-size: @font-size-sm;
          max-width: 80%;
        }
      }

      .menus {
        border: none;
        padding: 4px;
        height: calc(100vh - @header-height - @userinfo-height - 3em);
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 3px;
          height: 3px;
          background: @body-background;
        }
        &::-webkit-scrollbar-track {
          border-radius: 0;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 0;
          background-color: @color-border-secondary;
        }
      }

      .footerLink {
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 3em;
        padding-inline: @gap-xl;
        border-top: 1px solid @color-border-secondary;
        &.collapsed {
          padding: 0;
          justify-content: center;
        }
      }
    }
  }

  .appHeader {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 9;
    padding: 0;
    width: 100%;
    height: @header-height;
    background-color: @module-background;
    border-bottom: 1px solid @color-border-secondary;

    .headerContent {
      height: 100%;
      padding-inline: @gap-lg;

      .userMenu {
        display: flex;
        align-items: center;
        cursor: pointer;

        .avatar {
          margin-left: @font-size-sm;
        }
      }
    }
  }

  .appFooter {
    text-align: center;
    user-select: none;
    background-color: @module-background;
  }

  .appContent {
    .pageContainer {
      .pageHeader {
        height: 5rem;
        padding-inline: @gap-xl;
        background-color: @module-background;
        user-select: none;

        .title {
          margin: 0;
          .icon {
            margin-right: @gap-sm;
          }
        }

        .breadcrumb {
          font-weight: bold;
          text-transform: uppercase;
        }
      }

      .pageContent {
        padding: @gap-lg;
      }
    }

    .backTop {
      right: 3rem;
      bottom: 3rem;
    }
  }

  .pageHeaderAdvert {
    padding: @gap-lg;
    padding-bottom: 0;

    .adCard {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
