.tabList {
  --_size-separator: 1px;
  position: relative;
  display: flex;
  align-items: end;
  gap: var(--grapes-unit-24);

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--_size-separator);
    left: 0;
    bottom: 0px;
    background: var(--grapes-color-border-default);
  }
}

.tab {
  font: var(--grapes-body-m);
  flex-grow: var(--_tab-grow, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: var(--grapes-unit-4);
  margin: 0 0 calc(var(--grapes-unit-16) - var(--_size-separator));
  border-radius: var(--grapes-border-radius-4);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--_color-tab, var(--grapes-color-content-primary));

  &:hover {
    background-color: var(--grapes-color-background-primary-hover);
    outline: none;
  }
  &:focus-visible {
    outline: var(--grapes-focus-ring);
  }

  &[aria-selected='true'] {
    font: var(--grapes-title-m);
    --_color-tab: var(--grapes-color-content-selected);
  }
}

.indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition-duration: var(--grapes-transition-duration);
  transition-timing-function: var(--grapes-transition-timing-function);
  transition-property: transform, width, background-color;
  transform: translateX(var(--_offset-indicator, 0px));
  will-change: transform;
  height: calc(var(--_size-separator) * 2);
  background: var(
    --_color-indicator,
    var(--grapes-color-background-primary-brand-default)
  );
  width: var(--_size-indicator);
}