/*
 * Shared platform navigation motion.
 *
 * The rail and top bar keep their geometry between pages. A single visual
 * indicator moves behind the active rail item, while page content uses a
 * short opacity transition when the browser supports View Transitions.
 */

.dashboard-sidebar {
  view-transition-name: platform-sidebar;
}

.topbar {
  view-transition-name: platform-topbar;
}

.platform-rail {
  isolation: isolate;
}

.platform-rail > a {
  z-index: 1;
}

.platform-rail > a.is-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.platform-rail-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate3d(0, 0, 0);
  transition:
    transform 180ms cubic-bezier(0.2, 0, 0.2, 1),
    width 180ms cubic-bezier(0.2, 0, 0.2, 1),
    height 180ms cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform, width, height;
  contain: layout paint;
  view-transition-name: platform-rail-indicator;
}

.platform-rail:not(.is-indicator-ready) > .platform-rail-indicator {
  transition: none;
}

::view-transition-group(platform-sidebar),
::view-transition-group(platform-topbar) {
  animation-duration: 0s;
}

::view-transition-old(platform-sidebar),
::view-transition-new(platform-sidebar),
::view-transition-old(platform-topbar),
::view-transition-new(platform-topbar) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(platform-rail-indicator) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .platform-rail-indicator {
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}