/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.StatusLight {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.StatusLight .StatusLight__label {
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
}
.StatusLight .StatusLight__indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 12px;
  min-width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: var(--colorsStatusDefault, #8c9ca5);
  margin: 8px;
}
.StatusLight .StatusLight__indicator::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: inherit;
  opacity: 0;
  transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
}
.StatusLight .StatusLight__indicator--info {
  background-color: var(--colorsStatusInfo, #0265dc);
}
.StatusLight .StatusLight__indicator--success {
  background-color: var(--colorsStatusSuccess, #007a4d);
}
.StatusLight .StatusLight__indicator--warning {
  background-color: var(--colorsStatusWarning, #ffbe00);
}
.StatusLight .StatusLight__indicator--critical {
  background-color: var(--colorsStatusCritical, #e13212);
}

@keyframes shadow-pulse {
  0% {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    opacity: 0.3;
  }
  100% {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    opacity: 0;
  }
}
.StatusLight--pulsing .StatusLight__indicator::before {
  animation: shadow-pulse 1s infinite ease;
}

.StatusLight--disabled {
  pointer-events: none;
  opacity: 0.4;
}
.StatusLight--disabled .StatusLight__indicator {
  background-color: var(--colorsStatusDefault, #8c9ca5);
}
.StatusLight--disabled .StatusLight__indicator::before {
  animation: none;
}

.StatusLight--action:hover {
  text-decoration: underline;
  cursor: pointer;
}
.StatusLight--action:hover .StatusLight__indicator::before {
  width: 28px;
  height: 28px;
  border-radius: 28px;
  transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
  opacity: 0.2;
  animation: none;
}

.StatusLight--full {
  display: flex;
  width: 100%;
}

.StatusLight--reverse {
  flex-direction: row-reverse;
}

.StatusLight--split {
  justify-content: space-between;
}

/*# sourceMappingURL=index.css.map */