@st-namespace 'Tabs-st-css';
@st-import [ --wix-color-5, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, createFontWithOverrides ] from '../../common/formatters.st';
@st-import TabsNavButton from './TabsNavButton/TabsNavButton.st.css';
@st-import ScrollableTabs from './ScrollableTabs/ScrollableTabs.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb, --wst-links-and-actions-color-rgb, --wst-system-line-1-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-main-text-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-background-color);

/*
 * Tabs border radius start start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-radius-start-start);

/*
 * Tabs border radius start end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-radius-start-end);

/*
 * Tabs border radius end start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-radius-end-start);

/*
 * Tabs border radius end end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-radius-end-end);

/*
 * Text font
 * @type font
 */
@property st-global(--wix-ui-tpa-tabs-main-text-font);

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

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

/*
 * Arrows color
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-arrows-color);

/*
 * Tabs padding block start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-padding-block-start);

/*
 * Tabs padding inline start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-padding-inline-start);

/*
 * Tabs padding inline end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-padding-inline-end);

/*
 * Tabs padding block end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-padding-block-end);

/*
 * Tabs border width block start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-width-block-start);

/*
 * Tabs border width inline start
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-width-inline-start);

/*
 * Tabs border width inline end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-width-inline-end);

/*
 * Tabs border width block end
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tabs-border-width-block-end);

/*
 * Tabs border color block start
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-border-color-block-start);

/*
 * Tabs border color inline start
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-border-color-inline-start);

/*
 * Tabs border color inline end
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-border-color-inline-end);

/*
 * Tabs border color block end
 * @type color
 */
@property st-global(--wix-ui-tpa-tabs-border-color-block-end);

 /*
 * Tab border block start color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-tab-border-block-start-color);

  /*
 * Tab border block start width
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tab-border-block-start-width);

 /*
 * Tab border inline start color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-tab-border-inline-start-color);

  /*
 * Tab border inline start width
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tab-border-inline-start-width);

 /*
 * Tab border inline end color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-tab-border-inline-end-color);

/*
 * Tab border inline end width
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-tab-border-inline-end-width);

 /*
 * Tab border block end color
 * @type color
 * @default transparent
 */
@property st-global(--wix-ui-tpa-tab-border-block-end-color);

/*
 * Tab border block end width
 * @type size
 * @default 3px
 */
@property st-global(--wix-ui-tpa-tab-border-block-end-width);

/*
 * Tabs main text font size
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-tabs-main-text-font-size);

/*
 * Tab selected text font size
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-tab-selected-text-font-size);

.root {
  --transparent: 0, 0, 0, 0;
  -st-states: skin(enum(fullUnderline, clear, fitUnderline)), navButtons(enum(none, left, right, both)), mobile, overflowBehavior(enum(scroll, wrap));

  width: 100%;
  box-sizing: border-box;
  background: createColor(--wix-ui-tpa-tabs-background-color, var(--wst-primary-background-color-rgb, var(--transparent)));
  border-start-start-radius: var(--wix-ui-tpa-tabs-border-radius-start-start, 0);
  border-start-end-radius: var(--wix-ui-tpa-tabs-border-radius-start-end, 0);
  border-end-start-radius: var(--wix-ui-tpa-tabs-border-radius-end-start, 0);
  border-end-end-radius: var(--wix-ui-tpa-tabs-border-radius-end-end, 0);
  padding-block-start: var(--wix-ui-tpa-tabs-padding-block-start, 0);
  padding-inline-start: var(--wix-ui-tpa-tabs-padding-inline-start, 0);
  padding-inline-end: var(--wix-ui-tpa-tabs-padding-inline-end, 0);
  padding-block-end: var(--wix-ui-tpa-tabs-padding-block-end, 0);
  border-block-start: var(--wix-ui-tpa-tabs-border-width-block-start, 0) solid createColor(--wix-ui-tpa-tabs-border-color-block-start, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.3);
  border-inline-start: var(--wix-ui-tpa-tabs-border-width-inline-start, 0) solid createColor(--wix-ui-tpa-tabs-border-color-inline-start, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.3);
  border-inline-end: var(--wix-ui-tpa-tabs-border-width-inline-end, 0) solid createColor(--wix-ui-tpa-tabs-border-color-inline-end, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.3);
  border-block-end: var(--wix-ui-tpa-tabs-border-width-block-end, 0) solid createColor(--wix-ui-tpa-tabs-border-color-block-end, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.3);
}

.root:skin(fullUnderline) {
  border-block-end: var(--wix-ui-tpa-tabs-border-width-block-end, 1px) solid createColor((--wix-ui-tpa-tabs-border-color-block-end, --wix-ui-tpa-tabs-indicator-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.2);
}

.wrapper {
  --nav-btn-width: 17;
  --nav-btn-svg-width: 24;
  --nav-btn-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  color: createColor(--wix-ui-tpa-tabs-main-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px" }'),
  createFont((--wix-ui-tpa-tabs-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  width: 100%;
  min-height: calc(52px + var(--wix-ui-tpa-tab-border-block-start-width, 0px) + var(--wix-ui-tpa-tab-border-block-end-width, 0px));
  position: relative;
  line-height: calc(1.5 * max(var(--wix-ui-tpa-tabs-main-text-font-size, 16px), var(--wix-ui-tpa-tab-selected-text-font-size, 16px)));
}

.root:overflowBehavior(scroll) .wrapper {
  padding: 14px 0;
}

.root:overflowBehavior(scroll) .wrapper::before {
  content: '\00a0';
}

.wrapper,
.wrapper * {
  box-sizing: border-box;
}

.navBtn {
  -st-extends: TabsNavButton;
  width: 0;
  overflow: hidden;
  transition: width .3s var(--nav-btn-ease) .2s, applyOpacity .2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  opacity: 0;
  color: createColor(--wix-ui-tpa-tabs-arrows-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.navBtn.navBtnLeft {
  left: 0;
}

.navBtn.navBtnRight {
  right: 0;
}

.root .navBtn svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  min-width: calc(var(--nav-btn-svg-width) * 1px);
  min-height: calc(var(--nav-btn-svg-width) * 1px);
}

.root .navBtn.navBtnLeft svg {
  margin-left: calc((var(--nav-btn-width) - var(--nav-btn-svg-width)) * 1px);
}

.root .navBtn.navBtnRight svg {
  margin-right: calc((var(--nav-btn-width) - var(--nav-btn-svg-width)) * 1px);
}

.navigation {
  -st-extends: ScrollableTabs;
  -st-mixin: setColor(--wix-ui-tpa-scrollable-tabs-selected-indicator-color, --wix-ui-tpa-tabs-selected-tab-indicator-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: left .3s var(--nav-btn-ease), right .3s var(--nav-btn-ease);
}

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

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

.root:navButtons(right) .navBtn.navBtnRight,
.root:navButtons(left) .navBtn.navBtnLeft,
.root:navButtons(both) .navBtn {
  width: calc(var(--nav-btn-width) * 1px);
  opacity: 1;
  transition: width .3s var(--nav-btn-ease), applyOpacity .2s ease .3s;
}

.root:navButtons(right) .navigation,
.root:navButtons(both) .navigation {
  right: calc(var(--nav-btn-width) * 1px);
}

.root:navButtons(left) .navigation,
.root:navButtons(both) .navigation {
  left: calc(var(--nav-btn-width) * 1px);
}

.navigation::nav {
  transition: all .3s var(--nav-btn-ease);
  width: 100%;
  left: 0;
  right: 0;
}

.root:navButtons(left) .navigation::nav,
.root:navButtons(right) .navigation::nav {
  width: calc(100% + (var(--nav-btn-width) * 1px));
}

.root:navButtons(left) .navigation::nav,
.root:navButtons(both) .navigation::nav {
  left: calc(var(--nav-btn-width) * -1px);
}

.root:navButtons(right) .navigation::nav,
.root:navButtons(both) .navigation::nav {
  right: calc(var(--nav-btn-width) * -1px);
}

.root:navButtons(both) .navigation::nav {
  width: calc(100% + (2 * var(--nav-btn-width) * 1px));
}

.root:skin(fitUnderline) .navBtn::border {
  height: var(--wix-ui-tpa-tab-border-block-end-width, 1px);
  background-color: createColor((--wix-ui-tpa-tab-border-block-end-color, --wix-ui-tpa-tabs-indicator-color), var(--wst-system-line-1-color-rgb, var(--wix-color-5)), 0.2);
}

.wrapper .navigation::tab {
  border-block-start: var(--wix-ui-tpa-tab-border-block-start-width, 0px) solid createColor(--wix-ui-tpa-tab-border-block-start-color, var(--wix-color-1));
  border-inline-start: var(--wix-ui-tpa-tab-border-inline-start-width, 0px) solid createColor(--wix-ui-tpa-tab-border-inline-start-color, var(--wix-color-1));
  border-inline-end: var(--wix-ui-tpa-tab-border-inline-end-width, 0px) solid createColor(--wix-ui-tpa-tab-border-inline-end-color, var(--wix-color-1));
  border-block-end: var(--wix-ui-tpa-tab-border-block-end-width, 3px) solid createColor(--wix-ui-tpa-tab-border-block-end-color, var(--transparent));
}

.root:skin(fitUnderline) .navigation::tab {
  border-block-end: var(--wix-ui-tpa-tab-border-block-end-width, 1px) solid createColor((--wix-ui-tpa-tab-border-block-end-color, --wix-ui-tpa-tabs-indicator-color), var(--wst-system-line-1-color-rgb, var(--wix-color-5)), 0.2);
}

.root:mobile .navigation::itemsList {
  display: flex;
}

.root:mobile .navigation::tab {
  flex: 1;
}

.root:mobile .wrapper {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-tabs-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  line-height: calc(1.428 * max(var(--wix-ui-tpa-tabs-main-text-font-size, 14px), var(--wix-ui-tpa-tab-selected-text-font-size, 14px)));
  min-height: calc(48px + var(--wix-ui-tpa-tab-border-block-start-width, 0px) + var(--wix-ui-tpa-tab-border-block-end-width, 0px));
}

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