@import '../../../base/style.less';
@popupPrefix: iot-suction-bottom;

.@{popupPrefix} {
  width: 100%;
  height: 0.8rem;
  font-size: .16rem;
  background-color: #fff;
  .GridItem {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    align-items: center;
    justify-items: center;
    width: 100%;

    .disabled-pangle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 0.06rem;
    }

    .gird-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 0.8rem;
      font-size: 0.14rem;
      line-height: 0.8rem;
      text-align: center;

      .text {
        height: 0.3rem;
        color: #767991;
        font-weight: 400;
        font-size: 0.14rem;
        font-family: PingFangSC-Regular;
        line-height: 0.3rem;
        text-align: center;
      }

      .icon-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 0.4rem;
        height: 0.4rem;
        background: var(--bgcolor-icon-default);
        border-radius: 50%;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.4rem;
          height: 0.4rem;
          color: var(--color-icon-default);
          font-size: 0.2rem;
        }
      }

      .active {
        background: var(--color-icon-default);
        .icon {
          color: #fff;
        }
      }

      .text-active {
        color: var(--color-icon-default);
      }
    }
  }
}