"use strict";
const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
const tab = css.style({
  selectors: {
    "&::-moz-focus-inner": {
      border: 0
    }
  }
}, "tab");
const cropToIconX = css.style({
  marginLeft: -2
}, "cropToIconX");
const hoveredTab = css.style({
  selectors: {
    [`${tab}:hover &`]: {
      opacity: 1
    }
  }
}, "hoveredTab");
const nowrap = css.style({
  whiteSpace: "nowrap"
}, "nowrap");
const scroll = css.style({
  WebkitOverflowScrolling: "touch",
  overflowX: "auto",
  overflowY: "hidden",
  scrollbarWidth: "none",
  msOverflowStyle: "none",
  selectors: {
    "&::-webkit-scrollbar": {
      width: 0,
      height: 0
    }
  }
}, "scroll");
const mask = css.style({
  maskImage: "linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 80px), rgba(0,0,0,0) 100%)"
}, "mask");
const marginAuto = css.style({
  marginLeft: "auto",
  marginRight: "auto"
}, "marginAuto");
const tabFocusRing = css.style({
  margin: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
  selectors: {
    [`${tab}:focus &`]: {
      opacity: 1
    }
  }
}, "tabFocusRing");
const underlineLeft = css.createVar("underlineLeft");
const underlineWidth = css.createVar("underlineWidth");
const initialUnderlineWidth = 10;
const tabUnderline = css.style({
  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
  width: initialUnderlineWidth,
  transformOrigin: "0 0",
  transition: "transform .3s ease",
  transform: `translateZ(0) translateX(${cssUtils.calc(underlineLeft).multiply("1px")}) scaleX(${cssUtils.calc(underlineWidth).divide(initialUnderlineWidth)})`
}, "tabUnderline");
const tabUnderlineActiveDarkMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  darkMode: {
    background: styles_lib_themes_vars_css_cjs.vars.borderColor.formAccentLight
  }
}), "tabUnderlineActiveDarkMode");
const tabPanel = css.style({}, "tabPanel");
const tabPanelFocusRing = css.style({
  selectors: {
    [`${tabPanel}:focus > &`]: {
      opacity: 1
    }
  }
}, "tabPanelFocusRing");
const divider = css.style({
  height: styles_lib_themes_vars_css_cjs.vars.borderWidth.standard
}, "divider");
__vanilla_filescope__.endFileScope();
exports.cropToIconX = cropToIconX;
exports.divider = divider;
exports.hoveredTab = hoveredTab;
exports.marginAuto = marginAuto;
exports.mask = mask;
exports.nowrap = nowrap;
exports.scroll = scroll;
exports.tab = tab;
exports.tabFocusRing = tabFocusRing;
exports.tabPanel = tabPanel;
exports.tabPanelFocusRing = tabPanelFocusRing;
exports.tabUnderline = tabUnderline;
exports.tabUnderlineActiveDarkMode = tabUnderlineActiveDarkMode;
exports.underlineLeft = underlineLeft;
exports.underlineWidth = underlineWidth;
