/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
*/

/* Default browser style adds a max width that is hard to override with tailwind directly */
dialog:modal {
  background: none;
  max-width: 100vw;
}

dialog::backdrop {
  background-color: rgb(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  .account-menu[open] {
    animation: account-menu-open 180ms ease-out;
  }

  .account-menu[closing] {
    animation: account-menu-close 120ms ease-in both;
  }

  .account-menu[open]::backdrop {
    animation: account-menu-backdrop-open 180ms ease-out;
  }

  .account-menu[closing]::backdrop {
    animation: account-menu-backdrop-close 120ms ease-in both;
  }
}

@keyframes account-menu-backdrop-open {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes account-menu-backdrop-close {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes account-menu-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes account-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-color-scheme: dark) {
  dialog::backdrop {
    background-color: rgb(0, 0, 0, 0.2);
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Utility toggled by legacy JS (subscribe link + MFA owner list on the gem page).
   !important so it wins over Tailwind display utilities (flex, block) on the same element. */
.t-item--hidden {
  display: none !important;
}