@import "settings";

$ws-ind-width: 28px;
.ws-state {
  border-radius: 50%;
  bottom: $padding-big;
  color: $bg;
  font-size: 10px;
  font-weight: bold;
  height: $ws-ind-width;
  left: ($mm-width - $ws-ind-width) * 0.5;
  position: fixed;
  text-align: center;
  width: $ws-ind-width;
  z-index: 9996;

  &::before {
    height: $ws-ind-width;
    left: 0;
    line-height: $ws-ind-width;
    position: absolute;
    top: 0;
    width: $ws-ind-width;
  }

  &.ok {
    background-color: $color;
    &::before {
      content: 'OK';
    }
  }

  &.nok {
    animation: radial-pulse 1s 80;
    background-color: $error;
    &::before {
      content: 'NOK';
    }

    @keyframes radial-pulse {
      0% {
        box-shadow: 0 0 0 0 transparent;
      }
      25%, 60% {
        box-shadow: 0 0 4px 6px set-alpha('error', 0.8);
      }
    }

  }

}