/* stylelint-disable order/properties-order */
@import '../../../base/style.less';

@popupPrefix: iot-time-slider-out;
@verticalMargin:0.15rem;
.@{popupPrefix} {
  overflow: hidden;
  width: 100%;
  height: auto;
  .iot-time-slider {
    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);
    padding: var(--card-padding-TD);
    background: var(--card-bg-color);
    border-radius: var(--card-border-radius-size);

    .iot-time-slider-top {
      width: 100%;
      .iot-time-slider-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: var(--card-letf-flex);
        .iot-time-slider-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-time-slider-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-time-slider-title {
          .iot-time-slider-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-time-slider-sub {
            overflow: hidden;
            display: -webkit-box;
            font-family: var(--subtitle-font-family);
            // -webkit-line-clamp: 2;
            white-space: normal;
            -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);
          }

        }

        .line {
          width: var(--Tsplit-width-size);
          height: var(--Tsplit-height-size);
          background-color: var(--Tsplit-color);
          margin-left: var(--Tsplit-margin-left);
        }

        .value-unit {
          font-family: var(--lignt-font-family);
          font-size: var(--light-font-size);
          line-height: var(--light-font-height);
          color: var(--light-font-color);
          margin-left: var(--light-margin-left);
        }

      }
    }

    .iot-time-slider-number {
      width: 90%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin:.1rem;
      .Slider{
        flex: 0 0 90%;
      }
    }
    .disabled-pangle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      background: var(--disable-bg-color);
      border-radius: var(--card-border-radius-size);
    }
  }


  // .slider-list {
  //   display: flex;
  //   flex-direction: row;
  //   align-items: center;
  //   justify-content: center;
  //   padding: 0.05rem 0;
  //   .Slider{
  //     flex: 1;
      
  //   }
  // }
}