.tabs {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.tabs__list {
  align-self: start;
  background-color: var(--color-border-light);
  block-size: var(--size-8);
  border-radius: var(--rounded-lg);
  color: var(--color-text-subtle);
  column-gap: var(--size-1);
  display: inline-flex;
  padding: var(--size-1);
  position: relative;

  &::before {
    background-color: var(--color-bg);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-sm);
    content: "";
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    position: absolute;
    position-anchor: --tabs-selected;
    transition-duration: var(--time-300);
    transition-property: inset;
    transition-timing-function: var(--ease-spring-2);
  }
}

.tabs__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-hover-color: transparent;

  &[aria-selected="true"] {
    anchor-name: --tabs-selected;
  }

  &[aria-current="page"] {
    anchor-name: --tabs-selected;
  }
}