/* Dropdowns da navbar abrem com uma pequena queda, sem estalo seco. */
[data-app-navbar] {
  z-index: 1200;
  isolation: isolate;
}

[data-nav-dropdown-trigger] {
  -webkit-user-select: none;
  user-select: none;
}

[data-nav-dropdown-trigger]::-webkit-details-marker {
  display: none;
}

[data-nav-dropdown-panel] {
  transform-origin: top center;
  will-change: height, opacity, transform;
}

#nav-mobile {
  position: relative;
  z-index: 1;
  transform-origin: top center;
  will-change: height, opacity, transform;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

[data-nav-dropdown-mode='mobile'] {
  position: relative;
}

[data-nav-dropdown-mode='mobile'][open] {
  z-index: 2;
}

[data-nav-dropdown][data-dropdown-state='opening'] [data-nav-dropdown-panel],
[data-nav-dropdown][data-dropdown-state='closing'] [data-nav-dropdown-panel] {
  pointer-events: none;
}

#nav-mobile[data-mobile-menu-state='opening'],
#nav-mobile[data-mobile-menu-state='closing'] {
  pointer-events: none;
}

[data-nav-dropdown-chevron] {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
}

[data-nav-dropdown][open] [data-nav-dropdown-chevron],
[data-nav-dropdown][data-dropdown-state='opening'] [data-nav-dropdown-chevron] {
  transform: rotate(-180deg);
}

[data-nav-dropdown][data-dropdown-state='closing'] [data-nav-dropdown-chevron] {
  transform: rotate(0deg);
}

html[data-mobile-menu-open='true'],
body[data-mobile-menu-open='true'] {
  overflow: hidden;
}

@media (max-width: 767px) {
  [data-app-navbar][data-mobile-menu-expanded='true'] {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.dark [data-app-navbar][data-mobile-menu-expanded='true'],
  html[data-theme='dark'] [data-app-navbar][data-mobile-menu-expanded='true'] {
    background-color: #101828;
  }

  #nav-mobile {
    min-height: calc(100dvh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: inherit;
  }

  #nav-mobile > .container {
    min-height: 100%;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}