/**
 * Collapsible expand / collapse keyframes.
 *
 * Animations are driven by Ark's `data-state="open|closed"` attribute. Ark
 * exposes a `--height` CSS variable on the Content element which we read here
 * so the animation matches the content's natural height.
 *
 * Respects `prefers-reduced-motion` — the `motion-reduce:animate-none` class
 * on the Content disables motion at the utility level; this file also flattens
 * keyframes to a no-op as a safety net.
 */

@keyframes sl-collapsible-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--height);
    opacity: 1;
  }
}

@keyframes sl-collapsible-up {
  from {
    height: var(--height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes sl-collapsible-down {
    from,
    to {
      height: var(--height);
      opacity: 1;
    }
  }
  @keyframes sl-collapsible-up {
    from,
    to {
      height: 0;
      opacity: 0;
    }
  }
}

/**
 * Modal entrance/exit animations.
 *
 * Tailwind v4 doesn't ship `animate-in`/`fade-in` helpers by default; keeping
 * the keyframes here avoids introducing `tailwindcss-animate` as a dependency.
 * State transitions are driven by the `data-state="open|closed"` attribute
 * Ark UI emits on DialogContent and DialogBackdrop.
 *
 * Respects `prefers-reduced-motion`: motion collapses to an opacity fade only.
 */

@keyframes sl-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sl-modal-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sl-modal-content-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sl-modal-content-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
  }
}

[data-sl-modal-backdrop][data-state="open"] {
  animation: sl-modal-backdrop-in var(--sl-duration-fast) var(--sl-ease-standard);
}

[data-sl-modal-backdrop][data-state="closed"] {
  animation: sl-modal-backdrop-out var(--sl-duration-fast) var(--sl-ease-standard);
}

[data-sl-modal-content][data-state="open"] {
  animation: sl-modal-content-in var(--sl-duration-base) var(--sl-ease-emphasized);
}

[data-sl-modal-content][data-state="closed"] {
  animation: sl-modal-content-out var(--sl-duration-fast) var(--sl-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  [data-sl-modal-content][data-state="open"],
  [data-sl-modal-content][data-state="closed"] {
    animation: sl-modal-backdrop-in var(--sl-duration-instant) linear;
    transform: none;
  }
}

/**
 * Popover entrance/exit animation. Keyed off data-state emitted by Ark's
 * PopoverContent.
 */

@keyframes sl-popover-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sl-popover-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

[data-sl-popover-content][data-state="open"] {
  animation: sl-popover-in var(--sl-duration-fast) var(--sl-ease-emphasized);
}

[data-sl-popover-content][data-state="closed"] {
  animation: sl-popover-out var(--sl-duration-fast) var(--sl-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  [data-sl-popover-content][data-state="open"],
  [data-sl-popover-content][data-state="closed"] {
    animation: none;
    transform: none;
  }
}

/**
 * DataGrid — styles Tailwind utilities can't express inline.
 *
 * (1) The resize handle's pseudo-element shadow. The handle sits on the
 *     right edge of a header cell; while dragging we paint a subtle line
 *     across the full body height so the user can track where the column
 *     will land. Tailwind can't reach across sibling elements, so we use a
 *     CSS custom property + pseudo-element.
 *
 * (2) Sticky-column drop shadows. When a column is pinned left, the
 *     *right edge* of the last left-pinned cell should cast a shadow over
 *     scrolling body content to signal the boundary. Same for the first
 *     right-pinned cell. Tailwind's shadow-* utilities don't support
 *     directional side-only shadows out of the box, so we use box-shadow
 *     inset tokens here.
 */

.sl-datagrid [data-resizing="true"] [data-part="resize-handle"] {
  background-color: var(--sl-color-primary);
}

.sl-datagrid [data-part="resize-handle"] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 2;
  background-color: transparent;
  transition: background-color var(--sl-duration-fast) var(--sl-ease-standard);
}

.sl-datagrid [data-part="resize-handle"]:hover,
.sl-datagrid [data-part="resize-handle"]:focus-visible {
  background-color: var(--sl-color-primary-subtle);
}

/* Pinning boundary shadows — subtle, one-sided. */
.sl-datagrid [data-pinned="left"][data-pinned-last="true"] {
  box-shadow: 2px 0 4px -2px color-mix(in oklab, var(--sl-color-fg) 12%, transparent);
}

.sl-datagrid [data-pinned="right"][data-pinned-first="true"] {
  box-shadow: -2px 0 4px -2px color-mix(in oklab, var(--sl-color-fg) 12%, transparent);
}

/* Reduce motion — disable the resize-handle colour transition. */
@media (prefers-reduced-motion: reduce) {
  .sl-datagrid [data-part="resize-handle"] {
    transition: none;
  }
}

/**
 * Drawer slide animations keyed off `data-sl-drawer-content[data-side]`
 * combined with `data-state="open|closed"`. Keyframes per side avoid any
 * layout thrash and keep the transforms purely on the perpendicular axis.
 *
 * Respects `prefers-reduced-motion`: only an opacity fade applies.
 */

@keyframes sl-drawer-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sl-drawer-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

[data-sl-drawer-backdrop][data-state="open"] {
  animation: sl-drawer-backdrop-in var(--sl-duration-base) var(--sl-ease-standard);
}

[data-sl-drawer-backdrop][data-state="closed"] {
  animation: sl-drawer-backdrop-out var(--sl-duration-fast) var(--sl-ease-standard);
}

/* Right — slide in from right edge. */
@keyframes sl-drawer-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sl-drawer-slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
[data-sl-drawer-content][data-side="right"][data-state="open"] {
  animation: sl-drawer-slide-in-right var(--sl-duration-base) var(--sl-ease-emphasized);
}
[data-sl-drawer-content][data-side="right"][data-state="closed"] {
  animation: sl-drawer-slide-out-right var(--sl-duration-fast) var(--sl-ease-standard);
}

/* Left — slide in from left edge. */
@keyframes sl-drawer-slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sl-drawer-slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
[data-sl-drawer-content][data-side="left"][data-state="open"] {
  animation: sl-drawer-slide-in-left var(--sl-duration-base) var(--sl-ease-emphasized);
}
[data-sl-drawer-content][data-side="left"][data-state="closed"] {
  animation: sl-drawer-slide-out-left var(--sl-duration-fast) var(--sl-ease-standard);
}

/* Top — slide in from top edge. */
@keyframes sl-drawer-slide-in-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes sl-drawer-slide-out-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
[data-sl-drawer-content][data-side="top"][data-state="open"] {
  animation: sl-drawer-slide-in-top var(--sl-duration-base) var(--sl-ease-emphasized);
}
[data-sl-drawer-content][data-side="top"][data-state="closed"] {
  animation: sl-drawer-slide-out-top var(--sl-duration-fast) var(--sl-ease-standard);
}

/* Bottom — slide in from bottom edge. */
@keyframes sl-drawer-slide-in-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes sl-drawer-slide-out-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
[data-sl-drawer-content][data-side="bottom"][data-state="open"] {
  animation: sl-drawer-slide-in-bottom var(--sl-duration-base) var(--sl-ease-emphasized);
}
[data-sl-drawer-content][data-side="bottom"][data-state="closed"] {
  animation: sl-drawer-slide-out-bottom var(--sl-duration-fast) var(--sl-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  [data-sl-drawer-content][data-state="open"],
  [data-sl-drawer-content][data-state="closed"] {
    animation: sl-drawer-backdrop-in var(--sl-duration-instant) linear;
    transform: none;
  }
}