/**
 * Badge - Sdílené styly pro badge komponenty
 * Podporuje: animace, gradient border, hover efekty
 *
 * @package ReactWind Energy Child
 * @version 1.0.0
 */

/* =====================================================
   BADGE POLOŽKY - ZÁKLADNÍ
   ===================================================== */

.badge-item {
  opacity: 0;
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* Levá strana - posun zleva */
.badge-item[data-side="left"] {
  transform: translateX(-20px);
}

/* Pravá strana - posun zprava */
.badge-item[data-side="right"] {
  transform: translateX(20px);
}

/* Viditelný stav (po scroll animaci) */
.badge-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================
   BADGE STYLING
   ===================================================== */

/* DaisyUI badge úpravy */
.badge-item .badge {
  font-size: 0.8rem;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

@media (min-width: 1024px) {
  .badge-item .badge {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }
}

.badge-item .badge svg {
  flex-shrink: 0;
}

/* Hover efekt na badge
.badge-item .badge:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px color-mix(in srgb, black 30%, transparent);
}*/

/* =====================================================
   GRADIENT BORDER
   ===================================================== */

/**
 * Gradient border technika:
 * Wrapper má gradient pozadí a padding rovný border-width.
 * Vnitřní badge má vlastní pozadí, které překrývá střed.
 */
.badge-gradient-border {
  --border-width: 2px;
  --border-gradient: linear-gradient(
    135deg,
    var(--color-blue-light),
    var(--color-pink)
  );
  --border-radius: 9999px; /* Pill shape - default */

  position: relative;
  padding: var(--border-width);
  background: var(--border-gradient);
  border-radius: var(--border-radius);
  display: inline-flex;
  /* TASK-039: Overflow hidden zajistí, že vnitřní pozadí nepřesahuje gradient border */
  overflow: hidden;
}

.badge-gradient-border .badge {
  /* Zrušit border - gradient wrapper ho nahrazuje */
  border: none !important;
  /* Border-radius menší o border-width */
  border-radius: calc(var(--border-radius) - var(--border-width));
  /* Roztáhnout na celou šířku wrapperu */
  width: 100%;
  justify-content: flex-start;
}

/* Hover efekt pro gradient border */
.badge-gradient-border:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px -5px color-mix(in srgb, black 30%, transparent);
}

.badge-gradient-border:hover .badge {
  transform: none; /* Zrušit dvojitý scale */
}

/* =====================================================
   ANIMACE VYPNUTÉ
   ===================================================== */

[data-animations="false"] .badge-item {
  opacity: 1;
  transform: none;
}

/* =====================================================
   GRADIENT TEXT SUPPORT
   ===================================================== */

.badge-item span {
  /* Zajistí správné zobrazení gradient textu */
  display: inline-block;
}