/* stylelint-disable order/properties-order */
@import '../../../base/style.less';
@popupPrefix: iot-direction;

.@{popupPrefix} {
  height: 3.05rem;
  // opacity: 0.3;
  background: #FFF5F2;
  border: 1px solid #FF4A00;
  border-radius: .1rem;
  margin: .1rem .1rem .22rem;
  padding: .1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  // transition: background .6s linear;

  &.active {
    background: rgba(255, 74, 0, .1);
  }

  span {
    font-family: PingFangSC-Regular;
    font-size: .13rem;
    color: #666;
    letter-spacing: 0;
    text-align: justify;
    line-height: .13rem;
    font-weight: 400;
  }

  .control-img {
    width: .3rem;
    height: .3rem;
    position: absolute;
  }

  .control-img-1 {
    top: .1rem;
    transform: rotate(180deg);
  }

  .control-img-2 {
    left: .1rem;
    transform: rotate(90deg);
  }

  .control-img-3 {
    right: .1rem;
    transform: rotate(-90deg);
  }

  .control-img-4 {
    bottom: .1rem;
  }

  .slide-control-img {
    width: .18rem;
    height: .5425rem;
    position: absolute;
    transition: all .3s linear;

    &.visible {
      display: block;
    }

    &-up {
      top: .5rem;
    }

    &-left {
      left: .5rem;
      transform: rotate(-90deg);
    }

    &-right {
      right: .5rem;
      transform: rotate(90deg);
    }

    &-down {
      bottom: .5rem;
      transform: rotate(180deg);
    }
  }
}