@use "sass:math";

$size: 1.6rem;

.node-status-light {
  display: inline-flex;
  height: $size;
  width: $size;
  border-radius: math.div($size, 2);
  vertical-align: middle;
  align-items: center;
  justify-content: center;

  // Compensate for the padding within the SVG
  // (between the circle paths and the viewBox)
  margin-left: -1px;
  margin-right: -1px;

  &.ready {
    color: $primary;
  }

  &.down {
    color: $danger;
  }

  &.initializing {
    color: $grey-light;

    .blinking {
      animation: node-status-light-initializing 0.7s infinite alternate ease-in-out;
    }
  }

  &.ineligible,
  &.draining {
    color: $warning;
  }

  .icon {
    width: $size;
    height: $size;
  }
}

@keyframes node-status-light-initializing {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.7;
  }
}