/* Wyśrodkowanie przycisku */
.scanalert-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Rejestracja kąta dla płynnej animacji gradientu na bordrze */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Główne kolory gradientu obramowania */
:root {
  --scanalert-c1: #dbf236;  /* niebieski */
  --scanalert-c2: #dbf236;  /* zielony */
  --scanalert-c3: #dbf236;  /* żółty */
  --scanalert-c4: #050c13;  /* czerwony */
}

/* Przycisk – wnętrze + logika pseudo-elementów */
.scanalert-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;

  isolation: isolate; /* żeby obramowanie nie mieszało się z otoczeniem */

  transition:
    transform 0.10s ease,
    box-shadow 0.2s ease;
}

/* Gradientowy border – warstwa 1 (animowany) */
.scanalert-button::before {
  content: "";
  position: absolute;
  inset: 0;                 /* pokrywa cały przycisk */
  border-radius: inherit;
  padding: 2px;             /* grubość obramowania */
  --angle: 0deg;

  /* gradient w Twoich kolorach */
  background: conic-gradient(
    from var(--angle),
    var(--scanalert-c1) 0deg,
    var(--scanalert-c2) 90deg,
    var(--scanalert-c3) 180deg,
    var(--scanalert-c4) 270deg,
    var(--scanalert-c1) 360deg
  );

  /* maska – zostawiamy tylko obramowanie, środek jest dziurą */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* płynna animacja obrotu gradientu */
  animation: scanalert-border-rotate 14s linear infinite;

  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

/* Jednolity border – warstwa 2 (kolor brandowy, pojawia się na hoverze) */
.scanalert-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--theme-palette-color-4);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -2;
}

/* Animacja gradientu na bordrze */
@keyframes scanalert-border-rotate {
  to { --angle: 360deg; }
}

/* Hover – podskok + płynne przejście gradient → jednolity border */
.scanalert-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2);
}

/* najechanie: gradient znika, pojawia się stałe obramowanie */
.scanalert-button:hover::before {
  opacity: 0;
}

.scanalert-button:hover::after {
  opacity: 1;
}

/* wciśnięcie */
.scanalert-button:active {
  transform: translateY(0) scale(0.98);
}