/* Animation master - Dropdown */

/*
  Usage:
    <div class="t-dropdown" data-origin="top-center">...</div>

  State: add `.is-open` to show the menu, then `.is-closing`
  while dismissing it. Use data-origin to control transform origin.
*/

:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}

.t-dropdown[data-origin="top-right"] {
  transform-origin: top right;
}

.t-dropdown[data-origin="top-center"] {
  transform-origin: top center;
}

.t-dropdown[data-origin="bottom-left"] {
  transform-origin: bottom left;
}

.t-dropdown[data-origin="bottom-center"] {
  transform-origin: bottom center;
}

.t-dropdown[data-origin="bottom-right"] {
  transform-origin: bottom right;
}

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown {
    transition: none !important;
  }
}