:host {
  display: block;
}

:host([variant=compact]) {
  --r-tabs-list--r-tab--margin-right: 0;
  --r-tabs-list--r-tab--flex: 1;
  --r-tab--width: 100%;
}

:host([scrollable=true]) {
  --r-tabs-list--tabs-container--margin: -6px 4px ;
}

:host([border=branded]) {
  --r-tab--marker--background-color: var(--r-border-brand-vanguard, #527a42);
}

.r-tabs-list {
  display: var(--r-tabs-list--display, flex);
  margin-bottom: var(--r-tabs-list--margin-bottom, var(--r-spacing-250, 2.5rem));
  border-bottom-width: var(--r-tabs-list--border-bottom-width, 1px);
  border-bottom-style: var(--r-tabs-list--border-bottom-style, solid);
  border-bottom-color: var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9));
}
.r-tabs-list--scroll-button {
  --r-icon-button--border-radius: var(--r-tabs-list--border-radius, 0);
  --r-icon-button--width: var(--r-tabs-list--scroll-button--width, var(--r-spacing-200, 2rem));
  --r-icon-button--height: var(--r-tabs-list--scroll-button--height, var(--r-spacing-200, 2rem));
}
.r-tabs-list--tabs-container {
  display: var(--r-tabs-list--tabs-container--display, flex);
  flex: var(--r-tabs-list--tabs-container--flex, 1);
  overflow: var(--r-tabs-list--tabs-container--overflow, scroll hidden);
  scroll-snap-type: var(--r-tabs-list--tabs-container--scroll-snap-type, x proximity);
  scrollbar-width: var(--r-tabs-list--tabs-container--scrollbar-width, none);
  margin: var(--r-tabs-list--tabs-container--margin, -6px);
  padding: var(--r-tabs-list--tabs-container--padding, 6px);
}
.r-tabs-list--scroll-button-container {
  display: var(--r-tabs-list--scroll-button-container--display, flex);
  align-items: var(--r-tabs-list--scroll-button-container--align-items, start);
  gap: var(--r-tabs-list--scroll-button-container--gap, var(--r-spacing-025, 0.25rem));
}
.r-tabs-list--scroll-indicator {
  margin-top: var(--r-tabs-list--scroll-indicator--margin, 2px);
  width: var(--r-tabs-list--scroll-button--after--width, 1px);
  height: var(--r-tabs-list--scroll-button--after--height, var(--r-spacing-175, 1.75rem));
  background-color: var(--r-tabs-list----scroll-indicator--background-color, var(--r-border-softer, #c9c9c9));
  z-index: var(--r-tabs-list----scroll-indicator--z-index, 1);
}
.r-tabs-list ::slotted(r-tab) {
  margin-right: var(--r-tabs-list--r-tab--margin-right, var(--r-spacing-250, 2.5rem));
  flex: var(--r-tabs-list--r-tab--flex, none);
}
.r-tabs-list ::slotted(r-tab:last-of-type) {
  margin-right: var(--r-tabs-list--r-tab--last-of-type--margin-right, 0);
}