.bui-tabs {
  --height: var(--bui-tabs-height, 39px);
  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
  --line-height: var(--bui-tabs-line-height, 3PX);
  --line-width: var(--bui-tabs-line-width, 18px);
  --mask-width: var(--bui-tabs-mask-width, 12px);
  --mask-height: var(--bui-tabs-mask-height, 100%);
  --tab-height: var(--bui-tab-height, 100%);
  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
  position: relative;
  font-family: var(--bui-font-family);
}
.bui-tabs-tabs {
  height: var(--height);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow-x: scroll;
  scrollbar-width: none;
}
.bui-tabs-tabs::-webkit-scrollbar {
  display: none;
}
.bui-tabs-tabline {
  position: absolute;
  width: var(--line-width);
  bottom: 0;
  height: var(--line-height);
  color: var(--bui-color-primary);
  background: var(--line-color);
  border-radius: var(--bui-shape-radius-label);
}
.bui-tabs-content {
  padding: var(--bui-spacing-lg);
}
.bui-tabs-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--mask-width);
  height: var(--mask-height);
  pointer-events: none;
}
.bui-tabs-mask-left {
  left: 0;
  background:
    linear-gradient(
      to right,
      var(--bui-color-bg-view),
      rgba(255, 255, 255, 0));
}
.bui-tabs-mask-right {
  right: 0;
  background:
    linear-gradient(
      to left,
      var(--bui-color-bg-view),
      rgba(255, 255, 255, 0));
}
.bui-tabline-invisible {
  visibility: hidden;
  background-color: transparent;
}