[role='tablist'] {
  position: relative;
  list-style: none;
  margin-block: 3rem;
  margin-inline: auto;
  padding: 0;
  display: flex;
  width: fit-content;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 0.15rem;
    background: var(--clr-accent-1, --clr-err);
    scale: var(--_width, 0.33) 1;
    translate: var(--_left, 0) 0;
    transform-origin: left;

    transition:
      scale 200ms,
      translate 200ms;
  }
}

[role='tab'] {
  color: inherit;
  background: inherit;
  background: transparent;

  padding: 1em 2em;
  border: 0;
  font: inherit;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.8;
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--clr-accent-2, --clr-err);
    opacity: 1;
  }

  &[aria-selected='true'] {
    color: var(--clr-accent-1, --clr-err);
    font-weight: 600;
    opacity: 1;
  }
}