.ds-tabs {
  --tabs-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
  --tabs-bg-default: var(--bh-bg-default);
  --tabs-border-default: var(--bh-border-default);
  --tabs-content-brand: var(--bh-content-brand-default);
  --tabs-content-default: var(--bh-content-default);
  --tabs-content-subtle: var(--bh-content-subtle);
  --tabs-radius-md: var(--bh-radius-md-6);
  --tabs-radius-lg: var(--bh-radius-lg-8);
  --tabs-radius-full: var(--bh-radius-full);
  --tabs-space-xxs: var(--bh-space-xxs-2);
  --tabs-space-xs: var(--bh-space-xs-4);
  --tabs-space-sm: var(--bh-space-sm-6);
  --tabs-space-md: var(--bh-space-md-8);
  --tabs-space-lg: var(--bh-space-lg-10);
  --tabs-space-xl: var(--bh-space-xl-12);
  --tabs-space-3xl: var(--bh-space-3xl-16);
  --tabs-label-padding-x: var(--tabs-space-xxs);
  --tabs-height-segment-md: var(--bh-space-7xl-40);
  --tabs-height-segment-sm: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  --tabs-height-segment-xs: var(--bh-space-6xl-32);
  --tabs-height-underline-md: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
  --tabs-height-underline-sm: var(--bh-space-8xl-48);
  --tabs-height-underline-content: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  --tabs-shadow-selected: var(--shadow-button-soft);

  box-sizing: border-box;
  display: flex;
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  color: var(--tabs-content-subtle);
  font-family: var(--bh-font-family);
  font-size: var(--bh-text-body-md-regular-font-size);
  font-style: normal;
  font-weight: var(--bh-text-body-md-regular-font-weight);
  line-height: var(--bh-text-body-md-regular-line-height);
  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
}

.ds-tabs *,
.ds-tabs *::before,
.ds-tabs *::after {
  box-sizing: border-box;
}

.ds-tabs--full {
  width: 100%;
}

.ds-tabs--segment,
.ds-tabs--rounded {
  align-items: center;
  gap: var(--tabs-space-xxs);
  padding: var(--tabs-space-xxs);
  background: var(--tabs-bg-neutral-subtle);
}

.ds-tabs--segment {
  border-radius: var(--tabs-radius-full);
}

.ds-tabs--rounded {
  border-radius: var(--tabs-radius-lg);
}

.ds-tabs--underline {
  align-items: center;
  gap: var(--tabs-space-3xl);
  border-bottom: var(--bh-space-xxxs-1) solid var(--tabs-border-default);
}

.ds-tabs__tab {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--tabs-content-subtle);
  background: transparent;
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.ds-tabs__tab:focus-visible {
  outline: var(--tabs-space-xxs) solid var(--tabs-content-brand);
  outline-offset: var(--tabs-space-xxs);
}

.ds-tabs__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tabs-space-xs);
  min-width: 0;
}

.ds-tabs__label {
  display: block;
  flex: 0 0 auto;
  padding-inline: var(--tabs-label-padding-x);
  color: currentColor;
  font: inherit;
  white-space: nowrap;
  word-break: break-word;
}

.ds-tabs__tab[aria-selected="true"] {
  color: var(--tabs-content-default);
  font-weight: var(--bh-font-weight-medium);
}

.ds-tabs--segment .ds-tabs__tab,
.ds-tabs--rounded .ds-tabs__tab {
  gap: var(--tabs-space-xs);
}

.ds-tabs--segment .ds-tabs__tab {
  border-radius: var(--tabs-radius-full);
}

.ds-tabs--rounded .ds-tabs__tab {
  border-radius: var(--tabs-radius-md);
}

.ds-tabs--segment .ds-tabs__tab[aria-selected="true"],
.ds-tabs--rounded .ds-tabs__tab[aria-selected="true"] {
  background: var(--tabs-bg-default);
  box-shadow: var(--tabs-shadow-selected);
}

.ds-tabs--segment.ds-tabs--md .ds-tabs__tab,
.ds-tabs--rounded.ds-tabs--md .ds-tabs__tab {
  min-height: var(--tabs-height-segment-md);
  padding: var(--tabs-space-md) var(--tabs-space-xl);
}

.ds-tabs--segment.ds-tabs--sm .ds-tabs__tab,
.ds-tabs--rounded.ds-tabs--sm .ds-tabs__tab {
  min-height: var(--tabs-height-segment-sm);
  padding: var(--tabs-space-sm) var(--tabs-space-lg);
}

.ds-tabs--segment.ds-tabs--xs .ds-tabs__tab,
.ds-tabs--rounded.ds-tabs--xs .ds-tabs__tab {
  min-height: var(--tabs-height-segment-xs);
  padding: var(--tabs-space-xs) var(--tabs-space-lg);
}

.ds-tabs--segment.ds-tabs--full .ds-tabs__tab,
.ds-tabs--rounded.ds-tabs--full .ds-tabs__tab {
  flex: 1 0 0;
}

.ds-tabs--underline .ds-tabs__tab {
  border-bottom: var(--tabs-space-xxs) solid transparent;
}

.ds-tabs--underline .ds-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--tabs-content-brand);
}

.ds-tabs--underline.ds-tabs--md .ds-tabs__tab {
  min-height: var(--tabs-height-underline-md);
  padding-block: var(--tabs-space-md);
}

.ds-tabs--underline.ds-tabs--sm .ds-tabs__tab,
.ds-tabs--underline.ds-tabs--xs .ds-tabs__tab {
  min-height: var(--tabs-height-underline-sm);
}

.ds-tabs--underline.ds-tabs--sm .ds-tabs__content,
.ds-tabs--underline.ds-tabs--xs .ds-tabs__content {
  height: var(--tabs-height-underline-content);
}

.ds-tabs--underline.ds-tabs--full .ds-tabs__tab {
  flex: 1 0 0;
}

.ds-tabs--rtl .ds-tabs__tab {
  text-align: right;
}

.ds-tabs--rtl {
  --tabs-label-padding-x: var(--tabs-space-xxs);
  font-family: var(--bh-font-family);
}
