@st-namespace 'ScrollableTabs-st-css';
@st-import [ setColor ] from '../../../common/formatters.st';

/*
 * Selected indicator color
 * @type color
 */
@property st-global(--wix-ui-tpa-scrollable-tabs-selected-indicator-color);

/*
 * Space between rows when wrapping
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-wrap-row-gap);

/*
 * Space between items
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-space-between-items);

.root {
  -st-states: alignment(enum(center, left, right)), variant(enum(fullWidth, fit)), animateIndicator, overflowBehavior(enum(scroll, wrap));
  overflow: hidden;
  min-height: 100%;
}

.nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: auto;
  height: 100%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  position: absolute;
}

.root:overflowBehavior(wrap) .nav {
  position: static;
}

.nav::-webkit-scrollbar {
  display: none;
}

.tab {
  -st-mixin:
    setColor(--wix-ui-tpa-tab-selected-indicator-color, --wix-ui-tpa-scrollable-tabs-selected-indicator-color);
  display: inline-block;
}

.selectedIndicator {
  position: absolute;
  bottom: 0;
  height: 0;
  background-color: rgb(var(--wix-ui-tpa-scrollable-tabs-selected-indicator-color));
  z-index: 1000;
}

.border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
}

.root:animateIndicator .selectedIndicator {
  height: 3px;
  transition: left .4s ease-in-out, width .4s ease-in-out;
}

.root:alignment(left):overflowBehavior(scroll) .itemsList {
  text-align: left;
}

.root:alignment(right):overflowBehavior(scroll) .itemsList {
  text-align: right;
}

.root:alignment(left):overflowBehavior(wrap) .itemsList {
  justify-content: left;
}

.root:alignment(center):overflowBehavior(wrap) .itemsList {
  justify-content: center;
}

.root:alignment(right):overflowBehavior(wrap) .itemsList {
  justify-content: right;
}

.root:variant(fullWidth) .itemsList {
  display: flex;
}

.root:variant(fullWidth) .tab {
  flex: 1;
}

.itemsList {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

.root:overflowBehavior(scroll) .tab:not(:last-child) {
  margin-inline-end: var(--wix-ui-tpa-tabs-space-between-items, 0px);
}

.root:overflowBehavior(wrap) .itemsList {
  display: flex;
  column-gap: var(--wix-ui-tpa-tabs-space-between-items, 0px);
  flex-wrap: wrap;
  row-gap: var(--wix-ui-tpa-tabs-wrap-row-gap, 0px);
}

/* st-namespace-reference="../../../../../src/components/Tabs/ScrollableTabs/ScrollableTabs.st.css" */