/* Both tabs share a single highlight, following the selected tab. */
@supports selector(:has(*)) {
  .registry-tabs {
    position: relative;
    isolation: isolate;
  }

  .registry-tabs::before {
    position: absolute;
    z-index: -1;
    inset-block: 3px;
    inset-inline-start: 3px;
    width: calc((100% - 9px) / 2);
    content: "";
    border: 1px solid #a33c4b;
    background: #391a21;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
  }

  .registry-tabs:has(#switch-ships[aria-selected="true"])::before {
    transform: translateX(calc(100% + 3px));
  }

  .registry-tabs button[aria-selected="true"] {
    border-color: transparent;
    background: transparent;
  }
}

.back-to-registry {
  transition: background-color 180ms ease, border-color 180ms ease;
}

.back-to-registry:hover {
  background-color: #21171a;
}

.back-to-registry span {
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .back-to-registry:hover span {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .registry-tabs::before {
    transition: none;
  }
}