@import '../../../../theme/common/var.less';

.marker {
  text-align: center;
  cursor: pointer;
  width: 32px;
  height: 32px;

  &.isActive {
    .outter {
      display: block;
    }
  }

  .outter {
    display: none;
    animation-name: bubble;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .inner,
  .outter {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.7;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
  }

  .inner {
    opacity: 1;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: solid 4px #fff;
  }

  :global {
    .anticon {
      color: #fff;
    }
  }

  &.isNormal {
    .inner,
    .outter {
      background: @sensor-color-normal;
    }
  }

  &.isAlarm {
    .inner,
    .outter {
      background: @sensor-color-alarm;
    }
  }

  &.isFault {
    .inner,
    .outter {
      background: @sensor-color-fault;
    }
  }

  &.isDanger {
    .inner,
    .outter {
      background: @sensor-color-danger;
    }
  }

  &.isOffline {
    .inner,
    .outter {
      background: @sensor-color-offline;
      color: #262626;
    }
  }

  &.isIsolation {
    .inner,
    .outter {
      background: @sensor-color-isolation;
    }
  }

  &.finish {
    .inner,
    .outter {
      background: @sensor-color-finish;

      :global {
        .anticon {
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }
}

@keyframes bubble {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  25% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(2);
  }
  100%,
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}