/* DaisyUI tabs sliding — selected chrome slides between tabs */

/*
  Usage:
    <div class="tabs tabs-box" data-controller="transitions--tabs-sliding">
      <input type="radio" class="tab" …>
      …
    </div>

  Or label.tab wrappers (DaisyUI pattern). The Stimulus controller
  auto-creates .tabs-sliding-indicator and adds .tabs-sliding.

  Wire-up:
    On change, write the active tab's offsetLeft / offsetTop /
    offsetWidth / offsetHeight onto the indicator:
      indicator.style.transform = `translate(${left}px, ${top}px)`
      indicator.style.width  = `${width}px`
      indicator.style.height = `${height}px`
    On first paint and resize, write the same values WITHOUT
    a transition (suspend with `transition: none`, force a
    reflow, restore) so the indicator snaps before animation.
*/

:root {
  --tabs-sliding-dur: 250ms;
  --tabs-sliding-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.tabs.tabs-sliding {
  position: relative;
}

/* Indicator carries DaisyUI tabs-box selected chrome */
.tabs.tabs-sliding > .tabs-sliding-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--tab-height);
  pointer-events: none;
  border-radius: var(--radius-field);
  background-color: var(--tab-bg, var(--color-base-100));
  box-shadow:
    0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
    0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000),
    0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
  transform: translate(0, 0);
  transition:
    transform var(--tabs-sliding-dur) var(--tabs-sliding-ease),
    width var(--tabs-sliding-dur) var(--tabs-sliding-ease),
    height var(--tabs-sliding-dur) var(--tabs-sliding-ease);
  will-change: transform, width, height;
}

/* Kill instant selected fill — indicator paints it */
.tabs.tabs-sliding > .tab:is(
  :checked,
  .tab-active,
  [aria-selected="true"],
  [aria-current="true"],
  [aria-current="page"]
),
.tabs.tabs-sliding > label.tab:has(:checked) {
  background-color: transparent;
  box-shadow: none;
}

.tabs.tabs-sliding > .tab,
.tabs.tabs-sliding > label.tab {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tabs.tabs-sliding > .tabs-sliding-indicator {
    transition: none !important;
  }
}