@import '../../../base/style.less';

@popupPrefix: iot-pole-slider-out;

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

  .iot-pole-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-pole-slider-top {
      width: 100%;

      .iot-pole-slider-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: var(--card-letf-flex);

        .iot-pole-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-pole-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-pole-slider-title {
          .iot-pole-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-pole-slider-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);
          }

        }

        .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-pole-slider {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      border-top: var(--sliderball-pole-slider-border);
      margin-top: var(--sliderball-pole-slider-top); 
      padding-top: 0.15rem;
      margin-bottom: 0;

      .Slider {
        flex: 1;
      }
    }

    .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);
    }
  }
}