@radix-ui/themes/src/components/base-tab-list.css

[](https://radix-ui.com/themes)

.rt-BaseTabList {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  white-space: nowrap;

  font-family: var(--default-font-family);
  font-style: normal;

  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.rt-BaseTabListTrigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  user-select: none;
}

.rt-BaseTabListTriggerInner,
.rt-BaseTabListTriggerInnerHidden {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-BaseTabListTriggerInner {
  position: absolute;

  :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
    letter-spacing: var(--tab-inactive-letter-spacing);
    word-spacing: var(--tab-inactive-word-spacing);
  }

  :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tab-active-letter-spacing);
    word-spacing: var(--tab-active-word-spacing);
  }
}

.rt-BaseTabListTriggerInnerHidden {
  visibility: hidden;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tab-active-letter-spacing);
  word-spacing: var(--tab-active-word-spacing);
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-BaseTabListTrigger {
  box-sizing: border-box;
  height: var(--tab-height);
  padding-left: var(--tab-padding-x);
  padding-right: var(--tab-padding-x);
}

.rt-BaseTabListTriggerInner,
.rt-BaseTabListTriggerInnerHidden {
  box-sizing: border-box;
  padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
  border-radius: var(--tab-inner-border-radius);
}

@breakpoints {
  .rt-BaseTabList {
    &:where(.rt-r-size-1) {
      font-size: var(--font-size-1);
      line-height: var(--line-height-1);
      letter-spacing: var(--letter-spacing-1);
      --tab-height: var(--space-6);
      --tab-padding-x: var(--space-1);
      --tab-inner-padding-x: var(--space-1);
      --tab-inner-padding-y: calc(var(--space-1) * 0.5);
      --tab-inner-border-radius: var(--radius-1);
    }
    &:where(.rt-r-size-2) {
      font-size: var(--font-size-2);
      line-height: var(--line-height-2);
      letter-spacing: var(--letter-spacing-2);
      --tab-height: var(--space-7);
      --tab-padding-x: var(--space-2);
      --tab-inner-padding-x: var(--space-2);
      --tab-inner-padding-y: var(--space-1);
      --tab-inner-border-radius: var(--radius-2);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-BaseTabList {
  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
}

.rt-BaseTabListTrigger {
  color: var(--gray-a11);

  @media (hover: hover) {
    &:where(:hover) {
      color: var(--gray-12);
    }
    &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
      background-color: var(--gray-a3);
    }
    &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
      background-color: var(--accent-a3);
    }
  }
  &:where([data-state='active'], [data-active]) {
    color: var(--gray-12);
  }
  &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
    outline: 2px solid var(--focus-8);
    outline-offset: -2px;
  }
  &:where([data-state='active'], [data-active])::before {
    box-sizing: border-box;
    content: '';
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--accent-indicator);
  }

  :where(.rt-BaseTabList.rt-high-contrast) & {
    &:where([data-state='active'], [data-active])::before {
      background-color: var(--accent-12);
    }
  }
}