/**
 * Tailwind utility classes.
 */

/**
 * Layout rules for flex-based scroll containment:
 * `flex flex-col`
 *   On a container: makes it a flex column so children stack and can use `flex-1`.
 * `flex-1`
 *   On a child: grows to fill the flex parent. Requires the parent to be `flex`.
 * `min-h-0` (alongside `flex-1`):
 *   Overrides default flex children: `min-height:auto` (sized to content), which prevents shrinking.
 *   Allows element to shrink and trigger overflow/scrolling.
 *   Always pair with `flex-1` when scroll is needed.
 * `h-full`:
 *   Fills 100% of the parent's *computed* height.
 *   Use when the parent has a definite height but is not a flex container (e.g. `overflow:hidden` wrapper).
 *   Unlike `flex-1`, does not require the parent to be flex.
 *
 * Pattern for a scrollable region inside a flex ancestor:
 *   ancestor         → `flex flex-col`             (or `flex flex-row`)
 *   scroll root      → `flex-1 min-h-0`            (fills ancestor, can shrink)
 *   scroll viewport  → `h-full overflow-y-scroll`  (fills root, scrolls)
 */

/**
 * Fills the available space.
 */
@utility dx-expander {
  @apply flex-1 min-h-0 min-w-0 h-full w-full;
}

/**
 * Container that fills the available space (extends dx-expander with overflow clipping).
 */
@utility dx-container {
  @apply dx-expander overflow-hidden;
}

/**
 * Column that fills the available space (extends dx-expander with overflow clipping).
 */
@utility dx-column {
  @apply flex-1 min-w-0 w-full;
}

/**
 * Fullscreen
 */
@utility dx-fullscreen {
  @apply absolute inset-0;
}

/**
 * Visual warning to indicate incorrect usage of `slottable`.
 */
@utility dx-slot-warning {
  @apply border border-rose-500 border-dashed;
}

/**
 * Pseudo-element overlay for ring indicators (focus, current, etc.).
 *
 * A standard CSS `box-shadow` ring is painted behind child content, so children with
 * opaque backgrounds (e.g., cards, avatars) obscure it. By painting the ring on an
 * absolutely-positioned `::after` pseudo-element that sits above the element's children
 * in stacking order, the ring is always visible regardless of child backgrounds.
 *
 * The pseudo-element inherits `border-radius` from its parent and is `pointer-events-none`
 * so it doesn't interfere with interactions. The ring starts transparent; consumers
 * activate it conditionally (e.g., `focus:after:ring-*`, `aria-[current=true]:after:ring-*`).
 */
@utility dx-ring-pseudo {
  @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit]
    after:pointer-events-none after:ring after:ring-inset after:ring-transparent;
}

/**
 * Shimmer text — animates opacity left → right across the contained text.
 * See @keyframes shimmer-text in theme/animation.css for the keyframe definition.
 * Geometry: mask-size 200% 100% with mask-repeat: repeat-x means each tile is
 * 2× the element width; the keyframe slides mask-position-x by 200% (one full
 * tile period), giving a seamless loop. The 5-stop gradient (0.4 → 1.0 → 0.4)
 * produces a single bright pulse per cycle that traverses left → right during
 * the first half, with a brief calm interval during the second half.
 */
@utility shimmer-text {
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  animation: shimmer-text 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    animation: none;
    mask-image: none;
    -webkit-mask-image: none;
    opacity: 0.6;
  }
}