webawesome/src/components/tab-group/tab-group.css

:host {
  --indicator-color: var(--wa-color-brand-fill-loud);
  --track-color: var(--wa-color-neutral-fill-normal);
  --track-width: 0.125rem;

  display: block;
}

.tab-group {
  display: flex;
  border-radius: 0;
}

.tabs {
  display: flex;
  position: relative;
}

.indicator {
  position: absolute;
}

.tab-group--has-scroll-controls .nav-container {
  position: relative;
  padding: 0 var(--wa-space-xl);
}

.body {
  display: block;
  overflow: auto;
}

.scroll-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--wa-space-xl);
}

.scroll-button-start {
  left: 0;
}

.scroll-button-end {
  right: 0;
}

.tab-group--rtl .scroll-button-start {
  left: auto;
  right: 0;
}

.tab-group--rtl .scroll-button-end {
  left: 0;
  right: auto;
}

/*
   * Top
   */

.tab-group--top {
  flex-direction: column;
}

.tab-group--top .nav-container {
  order: 1;
}

.tab-group--top .nav {
  display: flex;
  overflow-x: auto;

  /* Hide scrollbar in Firefox */
  scrollbar-width: none;
}

/* Hide scrollbar in Chrome/Safari */
.tab-group--top .nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-group--top .tabs {
  flex: 1 1 auto;
  position: relative;
  flex-direction: row;
  border-bottom: solid var(--track-width) var(--track-color);
}

.tab-group--top .indicator {
  bottom: calc(-1 * var(--track-width));
  border-bottom: solid var(--track-width) var(--indicator-color);
}

.tab-group--top .body {
  order: 2;
}

.tab-group--top ::slotted(wa-tab[active]) {
  border-block-end: solid var(--track-width) var(--indicator-color);
  margin-block-end: calc(-1 * var(--track-width));
}

.tab-group--top ::slotted(wa-tab-panel) {
  --padding: var(--wa-space-m) 0;
}

/*
   * Bottom
   */

.tab-group--bottom {
  flex-direction: column;
}

.tab-group--bottom .nav-container {
  order: 2;
}

.tab-group--bottom .nav {
  display: flex;
  overflow-x: auto;

  /* Hide scrollbar in Firefox */
  scrollbar-width: none;
}

/* Hide scrollbar in Chrome/Safari */
.tab-group--bottom .nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-group--bottom .tabs {
  flex: 1 1 auto;
  position: relative;
  flex-direction: row;
  border-top: solid var(--track-width) var(--track-color);
}

.tab-group--bottom .indicator {
  top: calc(-1 * var(--track-width));
  border-top: solid var(--track-width) var(--indicator-color);
}

.tab-group--bottom .body {
  order: 1;
}

.tab-group--bottom ::slotted(wa-tab[active]) {
  border-block-start: solid var(--track-width) var(--indicator-color);
  margin-block-start: calc(-1 * var(--track-width));
}

.tab-group--bottom ::slotted(wa-tab-panel) {
  --padding: var(--wa-space-m) 0;
}

/*
   * Start
   */

.tab-group--start {
  flex-direction: row;
}

.tab-group--start .nav-container {
  order: 1;
}

.tab-group--start .tabs {
  flex: 0 0 auto;
  flex-direction: column;
  border-inline-end: solid var(--track-width) var(--track-color);
}

.tab-group--start .indicator {
  right: calc(-1 * var(--track-width));
  border-right: solid var(--track-width) var(--indicator-color);
}

.tab-group--start.tab-group--rtl .indicator {
  right: auto;
  left: calc(-1 * var(--track-width));
}

.tab-group--start .body {
  flex: 1 1 auto;
  order: 2;
}

.tab-group--start ::slotted(wa-tab[active]) {
  border-inline-end: solid var(--track-width) var(--indicator-color);
  margin-inline-end: calc(-1 * var(--track-width));
}

.tab-group--start ::slotted(wa-tab-panel) {
  --padding: 0 var(--wa-space-m);
}

/*
   * End
   */

.tab-group--end {
  flex-direction: row;
}

.tab-group--end .nav-container {
  order: 2;
}

.tab-group--end .tabs {
  flex: 0 0 auto;
  flex-direction: column;
  border-left: solid var(--track-width) var(--track-color);
}

.tab-group--end .indicator {
  left: calc(-1 * var(--track-width));
  border-inline-start: solid var(--track-width) var(--indicator-color);
}

.tab-group--end.tab-group--rtl .indicator {
  right: calc(-1 * var(--track-width));
  left: auto;
}

.tab-group--end .body {
  flex: 1 1 auto;
  order: 1;
}

.tab-group--end ::slotted(wa-tab[active]) {
  border-inline-start: solid var(--track-width) var(--indicator-color);
  margin-inline-start: calc(-1 * var(--track-width));
}

.tab-group--end ::slotted(wa-tab-panel) {
  --padding: 0 var(--wa-space-m);
}