@import '../../../base/style.less';
@popupPrefix: iot-grid-out;

.@{popupPrefix} {
  overflow: hidden;
  width: 100%;
  height: auto;

  .iot-grid {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--card-margin-size);
    width: var(--card-width-size);
    height: auto;

    border: var(--card-border);

    background: var(--card-bg-color);
    border-radius: var(--card-border-radius-size);

    .iot-grid-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--card-padding-TD);
      .iot-grid-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: var(--grid-card-left-flex);

        .iot-grid-icon {
          margin: var(--icon-margin-all);
          width: var(--icon-width-size);
          height: var(--icon-height-size);
          display: flex;
          flex: 0 0 var(--icon-width-size);
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background: var(--icon-bg-color);

          .iot-grid-icon-image {
            display: inline-block;
            width: var(--icon-inside-width);
            height: var(--icon-inside-height);
            font-size: var(--icon-inside-font-size);
            color: var(--icon-inside-color);
          }
        }

        .iot-grid-title {
          .iot-grid-main {
            overflow: hidden;
            font-family: var(--title-font-family);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: var(--title-font-size);
            color: var(--title-font-color);
            line-height: var(--title-font-height);
            font-weight: var(--title-font-weight);
          }

          .iot-grid-sub {
            overflow: hidden;
            display: -webkit-box;
            font-family: var(--subtitle-font-family);
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-top: var(--subtitle-margin-Top);
            font-size: var(--subtitle-font-size);
            color: var(--subtitle-font-color);
            line-height: var(--subtitle-font-height);
          }

        }

      }

      .iot-grid-right {
        position: relative;
        flex: var(--grid-card-right-flex);
        display: flex;
        align-items: center;
        justify-content: flex-end;

        // height: 100%;
        .iot-grid-more-title {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-left: .1rem;
          white-space: normal;
          text-align: right;
          font-family: var(--key-font-family);
          font-size: var(--key-font-size);
          color: var(--key-font-color);
          margin-right: var(--grid-right-margin-size);
        }

      }
    }

    .disabled-pangle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background: var(--disable-bg-color);
      border-radius: var(--card-border-radius-size);
    }
  }

  .item-list {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    // border-top: 1px solid #eee;
  }

  //   .disabled-pangle {
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     z-index: 1000;
  //     width: 100%;
  //     height: 100%;
  //     background: rgba(255, 255, 255, 0.6);
  //     border-radius: 0.06rem;
  //   }
  //   .more-setting{
  //     width: 100%;
  //     height: .6rem;
  //     color: #767991;
  //     font-size: 0.16rem;
  //     line-height: .6rem;
  //     text-align: center;
  //     border-top: 1px solid #eee;
  //     .icon {
  //       position: relative;
  //       top:0.01rem;
  //       display: inline-block;
  //       width: .16rem;
  //       height: .16rem;
  //       margin-top: 0.02rem;
  //       color: #767991;
  //       font-size: 0.16rem;
  //       line-height: .16rem;

  //     }
  //   }
  //   .title-icon{
  //     display: flex;
  //     flex-direction: row;
  //     align-items: center;
  //     width: 100%;
  //     height: .6rem;
  //     margin-left: 0.16rem;

  //     .title{
  //       color: @title-color;
  //       font-size: @title-font-size;
  //     }
  //     .icon{
  //       display: flex;
  //       align-items: center;
  //       justify-content: center;
  //       width: @icon-width;
  //       height: @icon-width;
  //       margin: 0 .1rem;
  //       color: var(--color-icon-default);
  //       background-color: var(--bgcolor-icon-default);
  //       border-radius: calc(@icon-width / 2.0);
  //     }
  //     .more-choose{
  //       display: inline-block;
  //       margin-right: 0.3rem;
  //       margin-left: auto;
  //       color: var(--color-icon-default);
  //       font-size: .16rem;
  //     }
  //   }
  // .checked{
  //   color: #fff;
  //   background: var(--color-icon-default);
  // }
  // .no-checked{
  //   color:var(--color-icon-default);
  // }
}