/* v489-settings-pjax-v9 */

/* Desliga a transicao entre documentos do hotfix anterior. */
@view-transition { navigation: none; }

body:has(.settings-shell) .settings-hero {
  view-transition-name: v489-settings-hero;
}

body:has(.settings-shell) .settings-nav {
  view-transition-name: v489-settings-navigation;
}

body:has(.settings-shell) .settings-content {
  position: relative;
  view-transition-name: v489-settings-content;
}

body.v489-settings-fetching .settings-nav {
  cursor: progress;
}

body.v489-settings-fetching .settings-nav a {
  pointer-events: none;
}

body.v489-settings-fetching .settings-content::before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  right: 12px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent, #2878f5), transparent);
  background-repeat: no-repeat;
  background-size: 45% 100%;
  animation: v489-settings-loading .8s linear infinite;
}

::view-transition-old(v489-settings-hero),
::view-transition-new(v489-settings-hero),
::view-transition-old(v489-settings-navigation),
::view-transition-new(v489-settings-navigation) {
  animation: none;
}

::view-transition-old(v489-settings-content) {
  animation: v489-pjax-out 70ms ease both;
}

::view-transition-new(v489-settings-content) {
  animation: v489-pjax-in 150ms ease both;
}

@keyframes v489-settings-loading {
  from { background-position: -80% 0; }
  to { background-position: 180% 0; }
}

@keyframes v489-pjax-out {
  to { opacity: 0; }
}

@keyframes v489-pjax-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.v489-settings-fetching .settings-content::before,
  ::view-transition-old(v489-settings-content),
  ::view-transition-new(v489-settings-content) {
    animation: none;
  }
}