.tabbed-interface {
  --tabbed-interface-link-padding: 0.5rem;
}

.tabbed-interface__tabs {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.tabbed-interface__tabs > section {
  grid-area: 1/1/2/2;
  opacity: 0;
  z-index: -1;
}

.tabbed-interface section[role=tabpanel]:not([hidden]) {
  opacity: 1;
  z-index: 1;
}

.tabbed-interface__nav {
  width: fit-content;
  margin-block: 2rem;
  margin-inline: auto;
  padding: 0.75rem 0.5rem;
  background: var(--yellow-50);
  border-radius: 5rem;
  isolation: isolate;
}

.tabbed-interface__nav::after {
  content: "";
  position: absolute;
  height: auto;
  background: var(--color-primary);
  border-radius: 100vw;
  z-index: -1;
  top: anchor(top);
  bottom: anchor(bottom);
  left: anchor(left);
  right: anchor(right);
  position-anchor: --hovered-link-4;
}

.tabbed-interface__button[aria-selected=true] {
  anchor-name: --hovered-link-4;
}

@supports not (anchor-name: --my-anchor) {
  .tabbed-interface__button[aria-selected=true] {
    background: var(--color-primary);
    border-radius: 100vw;
  }
}
.tabbed-interface__nav:hover::after,
.tabbed-interface__nav:active::after {
  transition-property: inset, top, bottom, left, right, width, height;
  transition-duration: 600ms;
  transition-timing-function: linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
}

.tabbed-interface__buttons {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.tabbed-interface__buttons li {
  margin: 0;
  padding: 0;
}

.tabbed-interface__buttons li::before {
  display: none;
}

.tabbed-interface__button {
  --text-font-size: 17;
  font-family: var(--font-stack-bebas);
  padding-block: var(--tabbed-interface-link-padding);
  padding-inline: calc(var(--tabbed-interface-link-padding) + 0.5rem);
  text-decoration-line: none;
}

@media (min-width: 48rem) {
  .tabbed-interface {
    --tabbed-interface-link-padding: 0.75rem;
  }
  .tabbed-interface__button {
    --text-font-size: 18;
  }
  .tabbed-interface__nav {
    margin-block: 3.75rem;
    padding: 1rem 0.75rem;
  }
}
@media (min-width: 60rem) {
  .tabbed-interface__button {
    --text-font-size: 19;
    padding-inline: 1.75rem;
  }
  .tabbed-interface__nav {
    padding: 1.25rem 1rem;
  }
}

/*# sourceMappingURL=/assets/application/base/tabbed-interface-4257c8ee.css.map */