@import '@/assets/variables.less';
@import '@/assets/animate.less';
@import '@/assets/mixins.less';

.container {
  height: 100%;
  min-width: 1280px;

  .contentWrap {
    display: flex;
    height: calc(100% - 48px);
    padding: 16px 16px 16px 0;
    .side {
      z-index: 10;
      flex-shrink: 0;
      height: 100%;
      width: 272px;
      padding: 0 16px;
    }

    .content {
      flex: 1;
      height: 100%;
      width: calc(100% - 230px);
      border-radius: 32px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 32px;
        width: 100%;
        height: 100%;
        background: var(--module-bg);
        z-index: -3;  // 为了透出子元素的渐变边框
      }

      .contentWrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        padding-bottom: 16px;
      }
    }
  }
}

.side {
  display: flex;
  flex-direction: column;

  .addBtn {
    font-weight: normal;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      margin-left: -4.84px;
      font-size: 22px;
      margin-right: 6.8px;
    }
  }
}

.content {
  .footer {
    > div {
      z-index: 10;
      position: relative;
    }

    .desc {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: var(--description-color);
    }
  }

  .main {
    flex: 1;
    height: 0;
    margin-bottom: 22px;
  }
}
