/* FOUC prevention: hide pseudo-slotted content before component upgrades */
btu-widget:not(:defined) > [slot] {
  @apply hidden;
}

btu-widget:not(:defined) {
  @apply pointer-events-none opacity-50 blokk;
}

/* Collapse/expand transition: grid-template-rows technique */
.btu-widget__collapsible {
  @apply grid grid-rows-[1fr] opacity-100;
  transition:
    grid-template-rows 200ms ease,
    opacity 150ms ease;
}

btu-widget:state(collapsed) .btu-widget__collapsible {
  @apply grid-rows-[0fr] opacity-0;
}

btu-widget:state(collapsed) .btu-widget__header {
  @apply border-b-transparent;
}

.btu-widget__collapse-chevron {
  transition: transform 200ms;
}

btu-widget:state(collapsed) .btu-widget__collapse-chevron {
  transform: rotate(-180deg);
}

.btu-widget__collapsible-inner {
  @apply min-h-0 overflow-hidden;
}

/* View Transition: Widget fullscreen animation
   Easing: open-props --ease-spring-3
   See: https://open-props.style/#easing */
html::view-transition-group(widget) {
  animation-duration: 600ms;
  animation-timing-function: linear(
    0,
    0.009,
    0.035 2.1%,
    0.141 4.4%,
    0.723 12.9%,
    0.938 16.7%,
    1.017,
    1.077,
    1.121,
    1.149 24.3%,
    1.159,
    1.163,
    1.161,
    1.154 29.9%,
    1.129 32.8%,
    1.051 39.6%,
    1.017 43.1%,
    0.991,
    0.977 51%,
    0.974 53.8%,
    0.975 57.1%,
    0.997 69.8%,
    1.003 76.9%,
    1
  );
}

html::view-transition-old(widget) {
  @apply opacity-0;
}

html::view-transition-new(widget) {
  @apply animate-widget-maximize-fade-in;
}

/* Native dialog backdrop styling */
.btu-widget__dialog::backdrop {
  @apply backdrop-blur transition-all duration-300 ease-out [background-color:theme(backdropColor.dialog)];
}

/* Backdrop entry animation */
@starting-style {
  .btu-widget__dialog[open]::backdrop {
    @apply opacity-0 [backdrop-filter:blur(0px)];
  }
}

/* Reduced motion: disable view transition spring easing and backdrop transitions */
@media (prefers-reduced-motion: reduce) {
  html::view-transition-group(widget) {
    animation-duration: 0.01ms;
  }

  .btu-widget__collapsible {
    @apply transition-none;
  }

  .btu-widget__dialog::backdrop {
    @apply transition-none;
  }
}
