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

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

  .iot-weather {
    margin: 0.05rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--weather-margin-size);

    // max-width: var(--weather-bg-size);

    .location-style {
      border-radius: var(--address-radius-size) 0 0 var(--address-radius-size);
      display: flex;
      background-color: var(--card-bg-color);
      // padding: 0.05rem 0;
      white-space: nowrap;
      align-items: center;
      padding: var(--weather-pandding-size);

      .icon-w {
        // width: var(--addicon-width-size);
        width: var(--addicon-width-size);
        height: var(--addicon-height-size);
        margin: var(--addicon-maring-TD);
        color: var(--addicon-font-color);
        font-size: var(--addicon-font-size);
      }

      .text {
        font-size: var(--addtext-font-size);
        color: var(--addtext-font-color);
        line-height: var(--addtext-font-height);
        font-family: var(--data-font-family);
      }
    }

    .right-div {
      padding: var(--weather-pandding-size);
      width: var(--address-radius-size);
      // height: var(--data-font-height);
      background-color: var(--card-bg-color);
      border-radius: 0 var(--address-radius-size) var(--address-radius-size) 0;
      font-size: var(--data-font-size);
      line-height: var(--data-font-height);
      color: rgba(255, 255, 255, 0);
      font-family: var(--data-font-family);
    }

    .block-info {
      white-space: nowrap;
      padding: var(--weather-pandding-size);
      background-color: var(--card-bg-color);
      display: flex;
      height: 100%;
      align-items: center;

      .line {
        height: var(--datasplit-height-size);
        width: var(--datasplit-wdith-size);
        background-color: var(--datasplit-color);
        margin: var(--data-maring-TD);
      }

      .text {
        font-size: var(--data-font-size);
        line-height: var(--data-font-height);
        color: var(--data-font-color);
        font-family: var(--data-font-family);
      }
    }
  }

  .new-weather {
    display: flex;
    align-items: center;
    border-radius: var(--address-radius-size);
    background-color: var(--card-bg-color);
    padding: var(--weather-pandding-size);

    .icon-w {
      width: var(--addicon-width-size);
      height: var(--addicon-height-size);
      margin: var(--addicon-maring-TD);
      color: var(--addicon-font-color);
      font-size: var(--addicon-font-size);
    }

    .line-new {
      height:  var(--datasplit-height-size);
      width: var(--datasplit-wdith-size);
      display: inline-block;
      margin: var(--data-maring-TD);
      background:  var(--datasplit-color);
    }

    .default-text {
      font-size: var(--addtext-font-size);
      color: var(--addtext-font-color);
      line-height: var(--addtext-font-height);
      font-family: var(--data-font-family);
    }
    .text {
      font-size: var(--data-font-size);
      line-height: var(--data-font-height);
      color: var(--data-font-color);
      font-family: var(--data-font-family);
    }
  }
}