@use "settings";
@use "mixins";

$ws-ind-width: 28px;
.ws-state {
  border-radius: 50%;
  bottom: settings.$padding-big;
  color: settings.$bg;
  font-size: 10px;
  font-weight: bold;
  height: $ws-ind-width;
  left: (settings.$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: settings.$color;
    &::before {
      content: 'OK';
    }
  }

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

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

  }

}