@import '~scss/variables';

$content-width: 1258px;
$toolbar-height: 52px;
$category-width: 193px;

%centerItem {
  width: 100vw;
  padding: 0 24px;
  @media (max-width: 768px) {
    width: 1024px;
  }
  @media (min-width: 1164px) {
    width: $content-width;
    margin-left: auto;
    margin-right: auto;
  }
}

.wrapper {
  > .body {
    position: relative;
    height: calc(100vh - 340px);
    @extend %centerItem;

    .apps {
      position: relative;
      margin-left: $category-width + 20px;
      @media (max-width: 768px) {
        margin-left: $category-width + 20px;
      }

      :global {
        .apps-title {
          position: absolute;
          top: -40px;
          font-weight: bold;
          color: $dark-color06;
        }
      }
    }
  }
}

.banner {
  top: 114px;
  left: 303px;
  color: #fff;

  > .title {
    font-size: $size-mid-large;
    line-height: 32px;
    text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
  }
  > .desc {
    font-size: $size-small;
    line-height: 20px;
  }
}

.toolbar {
  display: flex;
  align-items: center;
  position: relative;
  height: $toolbar-height;
  background: $light-color01;
  top: -$header-height;

  .level {
    display: flex;
    @extend %centerItem;

    .countDesc {
      color: $dark-color06;
      line-height: 1.67;
      font-size: $size-small;
      font-weight: bold;
      margin-left: calc(#{$category-width} + 20px);
    }

    .search {
      position: relative;
      z-index: 11;
      width: 400px;
    }

    :global {
      .level-right {
        margin-top: 0 !important;
      }
    }
  }
}

.cates {
  position: absolute;
  top: -40px;
  width: $category-width;

  .group {
    margin-bottom: 28px;

    .title {
      color: $dark-color06;
      font-weight: bold;
    }
    .menu {
      margin-top: 12px;
      margin-left: 12px;

      > .item {
        margin-bottom: 12px;
        line-height: 20px;
        font-size: 12px;
        list-style: none;
        color: $dark-color07;
        cursor: pointer;

        &:hover,
        &.active {
          color: $primary;
        }

        &.active {
          font-weight: 500;
        }
        .name {
          display: inline-block;
          margin-left: 12px;
        }
        .icon {
          vertical-align: middle;
        }
      }
    }
  }
}

:global {
  .fixed-cates {
    position: fixed;
    top: 90px;
  }
}
