import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { colorModeStyle } from "../../css/colorModeStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
const tab = style({
  selectors: {
    "&::-moz-focus-inner": {
      border: 0
    }
  }
}, "tab");
const cropToIconX = style({
  marginLeft: -2
}, "cropToIconX");
const hoveredTab = style({
  selectors: {
    [`${tab}:hover &`]: {
      opacity: 1
    }
  }
}, "hoveredTab");
const nowrap = style({
  whiteSpace: "nowrap"
}, "nowrap");
const scroll = style({
  WebkitOverflowScrolling: "touch",
  overflowX: "auto",
  overflowY: "hidden",
  scrollbarWidth: "none",
  msOverflowStyle: "none",
  selectors: {
    "&::-webkit-scrollbar": {
      width: 0,
      height: 0
    }
  }
}, "scroll");
const mask = 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 = style({
  marginLeft: "auto",
  marginRight: "auto"
}, "marginAuto");
const tabFocusRing = style({
  margin: vars.borderWidth.large,
  selectors: {
    [`${tab}:focus &`]: {
      opacity: 1
    }
  }
}, "tabFocusRing");
const underlineLeft = createVar("underlineLeft");
const underlineWidth = createVar("underlineWidth");
const initialUnderlineWidth = 10;
const tabUnderline = style({
  height: vars.borderWidth.large,
  width: initialUnderlineWidth,
  transformOrigin: "0 0",
  transition: "transform .3s ease",
  transform: `translateZ(0) translateX(${calc(underlineLeft).multiply("1px")}) scaleX(${calc(underlineWidth).divide(initialUnderlineWidth)})`
}, "tabUnderline");
const tabUnderlineActiveDarkMode = style(colorModeStyle({
  darkMode: {
    background: vars.borderColor.formAccentLight
  }
}), "tabUnderlineActiveDarkMode");
const tabPanel = style({}, "tabPanel");
const tabPanelFocusRing = style({
  selectors: {
    [`${tabPanel}:focus > &`]: {
      opacity: 1
    }
  }
}, "tabPanelFocusRing");
const divider = style({
  height: vars.borderWidth.standard
}, "divider");
endFileScope();
export {
  cropToIconX,
  divider,
  hoveredTab,
  marginAuto,
  mask,
  nowrap,
  scroll,
  tab,
  tabFocusRing,
  tabPanel,
  tabPanelFocusRing,
  tabUnderline,
  tabUnderlineActiveDarkMode,
  underlineLeft,
  underlineWidth
};
