@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.choiceProduct {
  background: $grey-light;
  color: $black;
  padding: $hl-2 0;
}

.title {
  text-align: center;
  margin-bottom: $hl-4;
}

.choiceProductCenter {
  //max-width: 68rem;
  margin: 0 auto;
}

.productCategory {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.categoryLoop {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow-normal;
  margin: 0 $hl-9 $hl-7 $hl-9;
  overflow: hidden;

  .header {
    height: 8rem;
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: $hl-6;
    background-size: 528px 96px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: $radius $radius 0 0;
    h1 {
      @include h1;
    }
  }

  .body {
    padding: $hl-6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    //position: relative;
    //flex: 1;
    //overflow: hidden;

    ul {
      margin: 2.5rem 0;
    }

    li {
      position: relative;
      @include h5();
      color: rgba($black, 80%);
      line-height: 1.75;
      padding-left: 1.25rem;

      &:not(:last-child) {
        margin-bottom: $hl-10;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.6875rem;
        border-radius: 100%;
        width: 0.5rem;
        height: 0.5rem;
      }

      span {
        display: block;
        @include p2();
        color: rgba($black, 60%);
        margin-top: $hl-10;
      }
    }
  }
}

.operate {
  & > div {
    display: inline-block;

    &:not(:last-child) {
      margin-right: $hl-6;
    }

    span {
      display: inline-block;
    }

    a {
      i {
        float: right;
        margin-left: 0.25rem;
        transition: all 0.2s;
      }

      &:hover i {
        transform: translateX(0.5rem);
      }
    }
  }
}

.btnContent {
  //position: absolute;
  //bottom: $hl-5;
}

.operateBtn {
  display: inline-block;
  border-radius: 0.375rem;
  text-align: center;
  color: $white;
  @include h4();
  min-width: 10rem;
  height: 3.75rem;
  line-height: 3.75rem;
  padding: 0 $hl-8;

  &:hover {
    color: $white;
  }
}

.contact_btn {
  @include link-arrow();
  margin-left: 2rem;
  cursor: pointer;
}

.community {
  .header {
    background: #49b17f url("./community-bg.svg") no-repeat center center;
    background-size: cover;
  }

  .operate,
  .operate a:hover {
    color: $green-lawn;
  }

  .body li:before {
    background: $green-lawn;
  }

  .operateBtn {
    background: linear-gradient(300deg, #2c8857 22.25%, #3fc67d 78.93%);

    &:hover {
      background: #3b9960;
    }
  }
}

.enterprise {
  .header {
    background: #303d74 url("./enterprise-bg.svg") no-repeat center center;
    background-size: cover;
  }

  .operate,
  .operate a:hover {
    color: $blue;
  }

  .body li:before {
    background: $blue;
  }

  .operateBtn {
    cursor: pointer;
    background: linear-gradient(300deg, #36416f 26.66%, #54629b 72.75%);

    &:hover {
      background: #30385b;
    }
  }
}

.tidbcloud {
  .header {
    background: #e88658 url("./tidbcloud-bg.svg") no-repeat center center;
    background-size: cover;
  }

  .operate,
  .operate a:hover {
    color: #e88658;
  }

  .body li:before {
    background: #e88658;
  }

  .operateBtn {
    background: linear-gradient(300deg, #d65252 26.66%, #fab75f 72.75%);

    &:hover {
      background: #e88658;
    }
  }
}

@media screen and (max-width: $desktop) {
  .productCategory {
    margin: 0 -0.5rem;
  }

  .categoryLoop {
    margin: 0 $hl-10 $hl-9 $hl-10;

    .body {
      padding-left: $hl-7;
      padding-right: $hl-7;
    }
  }
}

@media screen and (min-width: 575px) and (max-width: 767px) {
  .categoryLoop .header {
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .title {
    font-size: $font-h2;
  }

  .categoryLoop {
    min-width: calc(100% - 1rem);
  }

  .parameterContent .loop.mainTitle span {
    font-size: $font-h4;
  }
}

.functionalParameter {
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow-normal;

  &.parameterContentShow {
    .parameterContent {
      height: auto;
    }

    .parameterHeader i {
      transform: rotate(-90deg);
    }
  }
}

.parameterHeader {
  display: flex;
  align-items: center;
  cursor: pointer;
  @include h4();
  height: 5rem;
  line-height: 5rem;
  padding: 0 $hl-8 0 $hl-7;

  i {
    font-size: $font-h3;
    margin: 0 0 0 auto;
    transform: rotate(90deg);
    transition: all 0.2s;
  }
}

.parameterContent {
  height: 0;
  overflow: hidden;
  transition: all 0.2s linear;

  .innerContent {
    border-top: 0.0625rem solid rgba(#000, 8%);
    padding: 2.375rem $hl-7 $hl-5 $hl-7;
  }

  .loopContent:not(:nth-child(2)) {
    margin-top: $hl-7;
  }

  .loop {
    display: flex;
    @include p1();
    border-bottom: 0.0625rem solid rgba(#000, 8%);

    span {
      position: relative;
      flex: 1;
      text-align: center;
      min-width: 4.375rem;
      padding: 0.625rem 0;

      &:first-child {
        flex: 2.2;
        text-align: left;
      }
    }

    &.mainTitle {
      border-bottom: none;
      color: #000;
      font-size: $font-h3;
      font-weight: $regular;
    }

    &.subTitle {
      span {
        color: rgba($black, 60%);
      }
    }

    i {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: $font-h3;
      transform: translate(-50%, -50%);

      &.communityIcon {
        color: $green-lawn;
      }

      &.enterpriseIcon {
        color: $blue-dark;
      }
    }
  }
}