/* @property --transition-props {
  syntax: '<string>';
  inherits: false;
  initial-value: '';
} */

/*********************
 * Default transition properties and values *
 *********************/
@utility transition-scaffold {
  --transition-values: var(--transition-duration) var(--transition-delay)
    var(--transition-easing);
  --transition-props:
    background-color, border-color, color, fill, stroke, opacity, outline,
    transform, translate, scale, rotate, skew, perspective;
  transition: var(--transition-values);
  transition-property: var(--transition-props);
}

@utility transition-scaffold-extended {
  @apply transition-scaffold;
  --transition-props:
    backdrop-filter, background-color, border-color, color, display, fill,
    filter, gap, opacity, outline, overlay, stroke, transform, translate, scale,
    rotate, skew, perspective;
  transition-behavior: allow-discrete;
}

@utility transition-svg {
  --transition-values: var(--transition-duration) var(--transition-delay)
    var(--transition-easing);
  --transition-props: opacity, fill, stroke;
  transition: var(--transition-values);
  transition-property: var(--transition-props);
}

@keyframes z-index-hack {
  0%,
  100% {
    z-index: var(--z-index, 5);
  }
}