.gpw-tabs {
  --space-between-tabs: .625rem;
}

.gpw-tabs__nav-menu {
  list-style: none;

  &:is([aria-orientation='horizontal']) {
    display: flex;
    justify-content: center;
    gap: var(--space-between-tabs);
    overflow-x: auto;
  }
}

.gpw-tabs__nav-item {
  cursor: pointer;
  padding: .3125rem 1.25rem;
  margin: 0;
  color: var(--primary);
  border: .0625rem solid currentColor;
  border-radius: 2rem;
  font-weight: 700;
  white-space: nowrap;

  transition: background-color 300ms ease-in-out,
    color 300ms ease-in-out;

  &:is([aria-selected='true']), &:hover {
    background-color: var(--primary);
    color: var(--white);
  }
}

.gpw-tabs__content {
  position: relative;
}

.gpw-tabs__panel {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 300ms ease-in-out;

  &:is([aria-hidden='true']) {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
}

@media screen and (max-width: 550px) {
  .gpw-tabs__nav-menu:is([aria-orientation='horizontal']) {
    justify-content: flex-start;
  }
}