.str-btn:focus-visible,
.str-btn--primary:focus-visible,
.str-btn--ghost:focus-visible,
.str-modal__close:focus-visible,
.str-btn-cerrar:focus-visible,
.str-tickets-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--str-focus-ring);
}

.str-btn[disabled],
.str-tickets-btn[disabled],
button[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}

.is-danger {
  color: var(--str-color-error) !important;
}

.is-success {
  color: var(--str-color-success) !important;
}

@keyframes str-live-pulse {
  0% {
    transform: scale(1);
    opacity: 0.44;
  }

  70% {
    transform: scale(1.9);
    opacity: 0;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.str-live-indicator {
  --str-live-indicator-size: 8px;
  --str-live-indicator-color: var(--str-color-live);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--str-live-indicator-size);
  height: var(--str-live-indicator-size);
  border-radius: 999px;
  background: var(--str-live-indicator-color);
  flex: 0 0 auto;
}

.str-live-indicator::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: var(--str-live-indicator-color);
  opacity: 0.3;
  transform-origin: center;
  animation: str-live-pulse 1.8s ease-out infinite;
}

.str-live-indicator--badge {
  --str-live-indicator-size: 6px;
}

.str-live-indicator--pulse {
  --str-live-indicator-size: 10px;
}