.tabs {
  position: relative;
}

.tabs__list {
  display: flex;
  align-items: center;
  background-color: var(--color-tabs-background);
  padding: var(--spacing-m) var(--spacing-main-padding);

  & > *:not(.tab) {
    // If there is anything after the tabs, render it on the opposite side of the page
    margin-left: auto;
  }
}

.tabs__list--channel-page {
  padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
  padding-right: var(--spacing-m);
  margin-bottom: var(--spacing-l);
  height: 4rem;
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  border-top: none;

  @media (max-width: $breakpoint-small) {
    padding-left: var(--spacing-m);
  }
}

.tab {
  @extend .button--link;
  margin-right: var(--spacing-l);
  padding: 5px 0;
  color: var(--color-tab-text);
  position: relative;
  font-size: var(--font-body);

  &::after {
    position: absolute;
    bottom: calc(var(--tab-indicator-size) * -2);
    height: 0;
    width: 100%;
    content: '';
  }

  &:focus {
    box-shadow: none;
  }

  @media (max-width: $breakpoint-xsmall) {
    margin-right: var(--spacing-m);
  }
}

.tab__divider {
  position: absolute;
  margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-l));
}

.tab::after,
.tab__divider {
  display: block;
  transition: all var(--animation-duration) var(--animation-style);
}

.tab:hover::after,
.tab__divider {
  height: var(--tab-indicator-size);
  background-color: var(--color-tab-divider);
}