.tabs-list {
  margin: 0;
  padding: 0;
  @extend .unstyled;
  @extend .flex;
  @extend .relative;
  white-space: nowrap;
}

.tabs-list-item {
  margin-right: 1rem;
  color: var(--text-sub-header, $text-sub-header);
  min-width: auto;
}

.tabs-list-link {
  @extend .flex;
  color: inherit;
  border-bottom: 2px solid transparent;
  padding: .5em;
  @extend .nodecoration;
  @extend .relative;
  top: 1px;
  transition: color 0.15s ease-out, border-bottom 0.15s ease-out;
  &:focus,
  &:hover {
    @extend .nodecoration;
    color: var(--color-main-area, $pm-global-grey);
    border-bottom: 2px solid var(--bordercolor-input, $pm-global-border);
  }
  &[disabled] {
    opacity: .4;
    cursor: default;
    pointer-events: none;
  }
}

[aria-selected="true"].tabs-list-link {
  border-bottom: 2px solid $pm-primary;
  color: var(--color-main-area, $pm-global-grey);
}

.tabs-container {
  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);

  &[class*='sticky'] {
    background: var(--bgcolor-main-area, $white);
  }
}

.tabs-indicator {
  position: absolute;
  border-bottom: 2px solid $pm-primary;
  content: "";
  height: 0;
  bottom: -1px;
  left: 0;
  right: 0;
  transform-origin: left center;
  transition: transform .15s ease-out;
  transform: translateX(var(--translate)) scaleX(var(--scale));
}
/* hidden state for content is not necessary for React, added in exception for Design system website */