diff --git a/bun.lock b/bun.lock index 701610181..de1b2c75e 100644 --- a/bun.lock +++ b/bun.lock @@ -248,8 +248,8 @@ "name": "lynx-spa", "version": "1.0.0", "dependencies": { - "@karrotmarket/lynx-monochrome-icon": "^1.4.0", - "@karrotmarket/lynx-multicolor-icon": "^1.6.0", + "@karrotmarket/lynx-monochrome-icon": "1.10.0", + "@karrotmarket/lynx-multicolor-icon": "1.13.0", "@lynx-js/lynx-ui-sheet": "^3.130.1", "@lynx-js/react": "^0.117.0", "@seed-design/lynx-css": "workspace:*", @@ -1974,15 +1974,15 @@ "@juggle/resize-observer": ["@juggle/resize-observer@3.4.0", "", {}, "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="], - "@karrotmarket/assets-monochrome": ["@karrotmarket/assets-monochrome@1.14.0", "", {}, "sha512-sOLhh/OyLQzHGcg+jNjX7vpt1+bBfPo98iEnkxtJb0WgpxpsuQGpveeTZCwsQtCMMzwOEuQlt2MyXsBI/cTE0w=="], + "@karrotmarket/assets-monochrome": ["@karrotmarket/assets-monochrome@1.15.0", "", {}, "sha512-8BIK53fpScwslyVeccRuHcmyU3YJ6YJXlov++m4rugkAxQV7PsC7CTxSTUMpQ7KpuRMe1jIZ2mq2JE7x0Sboug=="], - "@karrotmarket/assets-multicolor": ["@karrotmarket/assets-multicolor@1.14.0", "", {}, "sha512-vjSKiMKsB5NLkeTOrUoZBkN7sxIMx4llV/9nU0qwYGPjFX81cIvFlTnLZhE82chJqIz4kwIeVNx4rwjF/v8Tcg=="], + "@karrotmarket/assets-multicolor": ["@karrotmarket/assets-multicolor@1.15.0", "", {}, "sha512-cxDE+ysvgSBtUjcfKEzx9v/gDWjzAT+XOwmGtc/IoaoDkkbmcT5ZTpT6/PHFVNH8M19sqyv2WXYGNZdM+PEUXA=="], "@karrotmarket/icon-data": ["@karrotmarket/icon-data@1.30.0", "", {}, "sha512-RS0exxUQsikpKP963Z/Eh+/9XnnFGa31ijmxaqY2nqHQ4RK94mM9vEGgO/9PTPu/+T8RgOTMoPmhs40sTssM5g=="], - "@karrotmarket/lynx-monochrome-icon": ["@karrotmarket/lynx-monochrome-icon@1.7.0", "", { "dependencies": { "@karrotmarket/assets-monochrome": "^1.14.0" } }, "sha512-jMm8GRnETAdpyqrNKd5UGYu/THeIG8H5ppPoNv58jy9N7s88B8LO2JoiHtBFElsgg+2ojFK9mnan+6vcm4Pemg=="], + "@karrotmarket/lynx-monochrome-icon": ["@karrotmarket/lynx-monochrome-icon@1.10.0", "", { "dependencies": { "@karrotmarket/assets-monochrome": "^1.15.0" }, "peerDependencies": { "@lynx-js/react": "*", "@lynx-js/types": "*" } }, "sha512-ojNjpdEplq3LNXcTo4qG69tlrHNA4uaxhpBRupsFfWugr3VLVE2Pyu/2+YLxxzEkTvpvi7GUug99EG4bxYlUTw=="], - "@karrotmarket/lynx-multicolor-icon": ["@karrotmarket/lynx-multicolor-icon@1.10.0", "", { "dependencies": { "@karrotmarket/assets-multicolor": "^1.14.0" } }, "sha512-xBNh07L6UVRmRPvXOFNEUQiDFaxMCTxrwsFNGwF8+tETw8L72JliRwkGzFV1gjum+CPam3Do8Kgm15b4FHv1WA=="], + "@karrotmarket/lynx-multicolor-icon": ["@karrotmarket/lynx-multicolor-icon@1.13.0", "", { "dependencies": { "@karrotmarket/assets-multicolor": "^1.15.0" }, "peerDependencies": { "@lynx-js/react": "*", "@lynx-js/types": "*" } }, "sha512-OVnhowu58sCOnki2cmiMsbsCR2jcHUYdkjCqCTeIUdMjOtlm9gX9WDtKFNMS8I20fqW4W+kSA5q2HjdBBX9Uqw=="], "@karrotmarket/react-monochrome-icon": ["@karrotmarket/react-monochrome-icon@1.15.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-4rpXNAB4eVG+/Ov9kcIvWaqssm6c0Na/dODQUHpBP8EyT1JAUoN7KF78s+5FtW7Wt6gfxNlIQZW2bf4PwLJNmA=="], diff --git a/bunfig.toml b/bunfig.toml index b720c71c1..83a96e5dc 100644 --- a/bunfig.toml +++ b/bunfig.toml @@ -1,7 +1,7 @@ [install] linker = "isolated" minimumReleaseAge = 86400 # 1 day -minimumReleaseAgeExcludes = ["@karrotmarket/react-monochrome-icon", "@karrotmarket/react-multicolor-icon", "@karrotmarket/icon-data"] +minimumReleaseAgeExcludes = ["@karrotmarket/react-monochrome-icon", "@karrotmarket/react-multicolor-icon", "@karrotmarket/lynx-monochrome-icon", "@karrotmarket/lynx-multicolor-icon", "@karrotmarket/icon-data"] [test] preload = ["./scripts/happydom.ts", "./scripts/testing-library.ts"] diff --git a/docs/public/__docs__/index.json b/docs/public/__docs__/index.json index 15a1dbf65..3ce96f9c7 100644 --- a/docs/public/__docs__/index.json +++ b/docs/public/__docs__/index.json @@ -1654,6 +1654,19 @@ "description": "Lynx에서 SEED 디자인 토큰을 Tailwind CSS v3 유틸리티 클래스로 사용하는 방법을 안내합니다.", "docUrl": "/lynx/foundation/layout/styling" }, + { + "id": "switch", + "title": "Switch", + "description": "특정 옵션이나 설정을 켜거나 끌 수 있도록 돕는 토글 컴포넌트입니다.", + "docUrl": "/lynx/components/switch", + "snippetKey": "ui:switch", + "snippets": [ + { + "label": "react", + "path": "switch.tsx" + } + ] + }, { "id": "tag-group", "title": "Tag Group", diff --git a/ecosystem/postcss-lynx-compat/src/defaults.ts b/ecosystem/postcss-lynx-compat/src/defaults.ts index 8ba8f3f8b..a0e8b2da2 100644 --- a/ecosystem/postcss-lynx-compat/src/defaults.ts +++ b/ecosystem/postcss-lynx-compat/src/defaults.ts @@ -290,6 +290,11 @@ export const defaultConfig: Required = { "opacity", "filter", + // Lynx-specific (image) + // `` 의 non-transparent 픽셀을 지정 색으로 tint 한다. + // Lynx 런타임에서 CSS property 로도 동작 확인됨. + "tint-color", + // Transform & Animation "transform", "transform-origin", diff --git a/examples/lynx-spa/package.json b/examples/lynx-spa/package.json index bbd9f6d24..3675194c2 100644 --- a/examples/lynx-spa/package.json +++ b/examples/lynx-spa/package.json @@ -12,8 +12,8 @@ "test": "vitest run" }, "dependencies": { - "@karrotmarket/lynx-monochrome-icon": "^1.4.0", - "@karrotmarket/lynx-multicolor-icon": "^1.6.0", + "@karrotmarket/lynx-monochrome-icon": "1.10.0", + "@karrotmarket/lynx-multicolor-icon": "1.13.0", "@lynx-js/lynx-ui-sheet": "^3.130.1", "@lynx-js/react": "^0.117.0", "@seed-design/lynx-css": "workspace:*", diff --git a/examples/lynx-spa/src/App.tsx b/examples/lynx-spa/src/App.tsx index 9c48d7c59..19d79fb1e 100644 --- a/examples/lynx-spa/src/App.tsx +++ b/examples/lynx-spa/src/App.tsx @@ -17,6 +17,7 @@ import { SwitchPage } from "./pages/SwitchPage.jsx"; import { TagGroupPage } from "./pages/TagGroupPage.jsx"; import { ThemingPage } from "./pages/ThemingPage.jsx"; import { CSSSelectorTestPage } from "./pages/CSSSelectorTestPage.jsx"; +import { IconColorPOCPage } from "./pages/IconColorPOCPage.jsx"; import { UseControllableStatePage } from "./pages/UseControllableStatePage.jsx"; import { UsePressTapPage } from "./pages/UsePressTapPage.jsx"; @@ -39,6 +40,7 @@ export type Page = | "test-native-box" | "test-tailwind-box" | "css-selector-test" + | "icon-color-poc" | "use-controllable-state" | "use-press-tap"; @@ -89,6 +91,7 @@ export function App(props: { onRender?: () => void }) { {currentPage === "test-native-box" && } {currentPage === "test-tailwind-box" && } {currentPage === "css-selector-test" && } + {currentPage === "icon-color-poc" && } {currentPage === "use-controllable-state" && } {currentPage === "use-press-tap" && } diff --git a/examples/lynx-spa/src/pages/ActionButtonPage.tsx b/examples/lynx-spa/src/pages/ActionButtonPage.tsx index 26b6111b8..bbb0badda 100644 --- a/examples/lynx-spa/src/pages/ActionButtonPage.tsx +++ b/examples/lynx-spa/src/pages/ActionButtonPage.tsx @@ -1,3 +1,6 @@ +import IconChevronDownFill from '@karrotmarket/lynx-monochrome-icon/IconChevronDownFill'; +import IconPlusFill from '@karrotmarket/lynx-monochrome-icon/IconPlusFill'; + import { ActionButton } from '@seed-design/lynx-react'; export function ActionButtonPage() { @@ -59,6 +62,75 @@ export function ActionButtonPage() { Disabled Outline + + + Prefix / Suffix Icon + + + }> + Prefix Icon + + }> + Suffix Icon + + } + suffixIcon={} + > + Both + + }> + Disabled + + + + + Icon Only + + + } + aria-label="추가" + /> + } + aria-label="추가" + /> + } + aria-label="추가" + /> + } + aria-label="비활성" + /> + ); } diff --git a/examples/lynx-spa/src/pages/FoundationMonochromeIconPage.tsx b/examples/lynx-spa/src/pages/FoundationMonochromeIconPage.tsx index 4381a8dc6..5088942ab 100644 --- a/examples/lynx-spa/src/pages/FoundationMonochromeIconPage.tsx +++ b/examples/lynx-spa/src/pages/FoundationMonochromeIconPage.tsx @@ -640,7 +640,7 @@ import IconYenLine from "@karrotmarket/lynx-monochrome-icon/IconYenLine"; const { $color } = vars; interface IconEntry { - component: (props: { size?: number; color: string }) => React.JSX.Element; + component: React.ComponentType<{ size?: number; color?: string; className?: string }>; name: string; } diff --git a/examples/lynx-spa/src/pages/FoundationMulticolorIconPage.tsx b/examples/lynx-spa/src/pages/FoundationMulticolorIconPage.tsx index 0be3cd6c6..fc344c39e 100644 --- a/examples/lynx-spa/src/pages/FoundationMulticolorIconPage.tsx +++ b/examples/lynx-spa/src/pages/FoundationMulticolorIconPage.tsx @@ -75,7 +75,7 @@ import IconWrench from "@karrotmarket/lynx-multicolor-icon/IconWrench"; const { $color } = vars; interface IconEntry { - component: (props: { size?: number }) => React.JSX.Element; + component: React.ComponentType<{ size?: number; className?: string }>; name: string; } diff --git a/examples/lynx-spa/src/pages/HomePage.tsx b/examples/lynx-spa/src/pages/HomePage.tsx index 4b2d893dd..156168762 100644 --- a/examples/lynx-spa/src/pages/HomePage.tsx +++ b/examples/lynx-spa/src/pages/HomePage.tsx @@ -85,6 +85,7 @@ export function HomePage({ navigate }: { navigate: (page: Page) => void }) { navigate("theming")} /> navigate("nested-vars-test")} /> navigate("css-selector-test")} /> + navigate("icon-color-poc")} /> ); } diff --git a/examples/lynx-spa/src/pages/IconColorPOCPage.tsx b/examples/lynx-spa/src/pages/IconColorPOCPage.tsx new file mode 100644 index 000000000..91a52fdfc --- /dev/null +++ b/examples/lynx-spa/src/pages/IconColorPOCPage.tsx @@ -0,0 +1,372 @@ +import IconPlusFill from '@karrotmarket/lynx-monochrome-icon/IconPlusFill'; +import { + runOnMainThread, + useEffect, + useMainThreadRef, + useState, +} from '@lynx-js/react'; +import type { MainThread } from '@lynx-js/types'; +import type { RefObject } from 'react'; + +import { vars } from '@seed-design/lynx-css/vars'; + +import '../styles/icon-color-poc.css'; + +const { $color } = vars; + +/** + * 간단한 검정 plus 아이콘을 data URI로 렌더 (raw POC용). + * 원본 픽셀이 유색이어야 tint-color 의 SRC_IN blend 가 적용됨. + */ +const PLUS_ICON_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent( + '', +)}`; + +function SectionHeader({ title, desc }: { title: string; desc: string }) { + return ( + + + {title} + + + {desc} + + + ); +} + +/** + * 브랜드 solid 배경 위에 아이콘을 놓아 흰색이면 ✅, 검정이면 ❌ 가 눈에 띄게 한다. + */ +function BrandBg({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} + +/* ============================================================= + * POC C — useIconColor 훅 (인라인 구현, 플랜의 제안 훅과 동일) + * ============================================================= */ + +type ElementLike = MainThread.Element & { + // 런타임엔 존재하지만 @lynx-js/types@3.7.0 에 누락된 API 시그니처를 임시 선언 + getComputedStyleProperty?: (name: string) => string; + getComputedCssProperty?: (name: string) => string; +}; + +function useIconColorPOC(depKey: string, label: string) { + const ref = useMainThreadRef(null); + + useEffect(() => { + function sync(r: RefObject, tag: string) { + 'main thread'; + + const el = r.current; + if (!el) { + console.log(`[POC ${tag}] sync skipped — ref is null`); + return; + } + + const hasGetComputed = + typeof el.getComputedStyleProperty === 'function'; + const hasGetComputedCss = + typeof el.getComputedCssProperty === 'function'; + + console.log( + `[POC ${tag}] API probe — getComputedStyleProperty:${hasGetComputed} getComputedCssProperty:${hasGetComputedCss}`, + ); + + let color: string | undefined; + if (hasGetComputed) { + color = el.getComputedStyleProperty?.('color'); + } else if (hasGetComputedCss) { + color = el.getComputedCssProperty?.('color'); + } + + console.log(`[POC ${tag}] resolved color = ${String(color)}`); + + if (color) { + el.setAttribute('tint-color', color); + console.log(`[POC ${tag}] tint-color attribute set`); + } else { + console.log(`[POC ${tag}] no color resolved — tint-color not set`); + } + } + + runOnMainThread(sync)(ref, label); + }, [depKey, label]); + + return { ref }; +} + +/* ============================================================= + * POC D — 새 IconPlusFill(1.9.0) + 외부 ref + slot className + * 실제 ActionButton.PrefixIcon 이 쓸 패턴과 동일. + * ============================================================= */ + +function POCDIconComponent() { + const [variant, setVariant] = useState< + 'brandSolid' | 'criticalSolid' | 'neutralWeak' + >('brandSolid'); + const { ref } = useIconColorPOC(variant, 'D'); + const iconClass = `poc-c-icon poc-c-icon--${variant}`; + + const next = () => + setVariant((v) => + v === 'brandSolid' + ? 'criticalSolid' + : v === 'criticalSolid' + ? 'neutralWeak' + : 'brandSolid', + ); + + return ( + + + {/* + * IconPlusFill 1.9.0: forwardRef + className + color optional. + * color 를 주지 않고 ref/className 만 주입 → CSS color 를 main-thread 에서 tint-color 로 복사. + */} + } + className={iconClass} + size={32} + /> + + current: {variant} + + + + + + Tap to cycle variant (POC D) + + + + ); +} + +function POCCVariantToggle() { + const [variant, setVariant] = useState< + 'brandSolid' | 'criticalSolid' | 'neutralWeak' + >('brandSolid'); + const { ref } = useIconColorPOC(variant, 'C'); + const iconClass = `poc-c-icon poc-c-icon--${variant}`; + + const next = () => + setVariant((v) => + v === 'brandSolid' + ? 'criticalSolid' + : v === 'criticalSolid' + ? 'neutralWeak' + : 'brandSolid', + ); + + return ( + + + {/* + * POC C: IconPlusFill(1.9.0) + ref + className. + * Baseline 에서 data URI 는 Lynx image 가 로드 못하는 것이 확인돼서 교체. + * 훅 내부 console.log 로 API 존재 여부와 resolved color 값 추적. + */} + } + className={iconClass} + size={32} + /> + + current: {variant} + + + + + + Tap to cycle variant (POC C) + + + + ); +} + +/* ============================================================= + * Page + * ============================================================= */ + +export function IconColorPOCPage() { + return ( + + + Icon Color POC + + + + 아이콘 tint-color 적용 방식 4가지 실측. 브랜드 컬러 배경 위에서 plus + 아이콘이 흰색(또는 의도한 색)으로 보이면 해당 방식이 동작하는 것. + + + {/* Baseline — hex color 고정 sanity check */} + + + + + + + 좌: 컴포넌트 / 우: data URI + + + + + {/* POC A */} + + + + {/* + IconPlusFill 은 내부에서 로 렌더하므로 + color prop 에 CSS var 스트링을 그대로 넘기면 POC A 와 동치. + */} + + + ✅ 흰색 → var() 해석됨 / ❌ 검정 → 미해석 + + + + + {/* POC B */} + + + + {/* + * IconPlusFill 1.9.0 은 color prop 이 없으면 tint-color attribute 도 세팅 안 함. + * className 을 전달하므로 CSS 쪽에서 tint-color 를 지정하면 적용 여부 확인 가능. + */} + + + ✅ 흰색 → CSS tint-color 지원 / ❌ 검정 → 미지원 + + + + + {/* POC C */} + + + + + + {/* POC D */} + + + + + + ); +} diff --git a/examples/lynx-spa/src/styles/icon-color-poc.css b/examples/lynx-spa/src/styles/icon-color-poc.css new file mode 100644 index 000000000..73235e3bc --- /dev/null +++ b/examples/lynx-spa/src/styles/icon-color-poc.css @@ -0,0 +1,24 @@ +/* + * Icon Color POC styles + * + * POC B — CSS property로 tint-color 직접 지정 + * POC C — useIconColor 훅과 함께 쓰이는 variant별 color 클래스 + */ + +/* POC B: CSS property로서의 tint-color */ +.poc-b-icon { + tint-color: var(--seed-color-palette-static-white); +} + +/* POC C: CSS color — 훅이 getComputedStyleProperty로 읽어 tint-color에 복사 */ +.poc-c-icon--brandSolid { + color: var(--seed-color-palette-static-white); +} + +.poc-c-icon--criticalSolid { + color: var(--seed-color-fg-critical); +} + +.poc-c-icon--neutralWeak { + color: var(--seed-color-fg-neutral); +} diff --git a/packages/lynx-css/all.css b/packages/lynx-css/all.css index 46179edc8..aabd7c895 100644 --- a/packages/lynx-css/all.css +++ b/packages/lynx-css/all.css @@ -785,7 +785,7 @@ --seed-shadow-s3: 0px 4px 16px 0px #000c; } -.seed-action-button { +.seed-action-button__root { --seed-box-flex-grow: 0; flex-shrink: 0; flex-grow: var(--seed-box-flex-grow); @@ -807,407 +807,411 @@ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1); margin-left: calc(var(--seed-box-bleed-left) * -1); margin-right: calc(var(--seed-box-bleed-right) * -1); + transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); border: none; justify-content: center; align-items: center; - display: inline-flex; + display: flex; position: relative; } .seed-action-button__text { - --seed-box-flex-grow: 0; - --seed-box-min-width: auto; - --seed-box-padding-bottom: auto; - --seed-box-padding-top: auto; - --seed-box-padding-left: auto; - --seed-box-padding-right: auto; - --seed-box-bleed-bottom: 0px; - --seed-box-bleed-top: 0px; - --seed-box-bleed-left: 0px; - --seed-box-bleed-right: 0px; font-family: inherit; + font-weight: var(--seed-font-weight-bold); + transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing); } -.seed-action-button { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); -} - -.seed-action-button__text { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); +.seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon { + flex-shrink: 0; } -.seed-action-button--variant_brandSolid { +.seed-action-button__root--variant_brandSolid { background: var(--seed-color-bg-brand-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); } -.seed-action-button__text--variant_brandSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); +.seed-action-button__root--variant_brandSolid:active { + background: var(--seed-color-bg-brand-solid-pressed); +} + +.seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true { + background: var(--seed-color-bg-disabled); } -.seed-action-button--variant_brandSolid:active { +.seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true { background: var(--seed-color-bg-brand-solid-pressed); } -.seed-action-button--variant_brandSolid.seed-action-button--disabled_true { - background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +.seed-action-button__text--variant_brandSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-brand-solid-pressed); +.seed-action-button__prefixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); } -.seed-action-button--variant_neutralSolid { - background: var(--seed-color-bg-neutral-inverted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); +.seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_neutralSolid { - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); +.seed-action-button__suffixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); +} + +.seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_brandSolid { + color: var(--seed-color-palette-static-white); +} + +.seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralSolid { + background: var(--seed-color-bg-neutral-inverted); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-fg-neutral-inverted); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralSolid:active { +.seed-action-button__root--variant_neutralSolid:active { background: var(--seed-color-bg-neutral-inverted-pressed); } -.seed-action-button--variant_neutralSolid.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-inverted-pressed); +} + +.seed-action-button__text--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-inverted-pressed); +.seed-action-button__prefixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } -.seed-action-button--variant_neutralWeak { - background: var(--seed-color-bg-neutral-weak); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); +.seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_neutralWeak { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); +.seed-action-button__suffixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); +} + +.seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); +} + +.seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralWeak { + background: var(--seed-color-bg-neutral-weak); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralWeak:active { +.seed-action-button__root--variant_neutralWeak:active { background: var(--seed-color-bg-neutral-weak-pressed); } -.seed-action-button--variant_neutralWeak.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-weak-pressed); +} + +.seed-action-button__text--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralWeak.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-weak-pressed); +.seed-action-button__prefixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } -.seed-action-button--variant_criticalSolid { - background: var(--seed-color-bg-critical-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); +.seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_criticalSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); +.seed-action-button__suffixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); +} + +.seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); +} + +.seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_criticalSolid { + background: var(--seed-color-bg-critical-solid); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_criticalSolid:active { +.seed-action-button__root--variant_criticalSolid:active { background: var(--seed-color-bg-critical-solid-pressed); } -.seed-action-button--variant_criticalSolid.seed-action-button--disabled_true { +.seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-critical-solid-pressed); +} + +.seed-action-button__text--variant_criticalSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_criticalSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-critical-solid-pressed); +.seed-action-button__prefixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} + +.seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandOutline { +.seed-action-button__suffixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} + +.seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} + +.seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_brandOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); - --track-color: var(--seed-color-palette-carrot-200); - --range-color: var(--seed-color-bg-brand-solid); -} - -.seed-action-button__text--variant_brandOutline { - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); --track-color: var(--seed-color-palette-carrot-200); --range-color: var(--seed-color-bg-brand-solid); - color: var(--seed-color-fg-brand); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_brandOutline:active { +.seed-action-button__root--variant_brandOutline:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_brandOutline.seed-action-button--disabled_true { +.seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); +} + +.seed-action-button__text--variant_brandOutline { + color: var(--seed-color-fg-brand); } .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); +.seed-action-button__prefixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); +} + +.seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__suffixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); +} + +.seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_brandOutline { + color: var(--seed-color-fg-brand); } -.seed-action-button--variant_neutralOutline { +.seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); -} - -.seed-action-button__text--variant_neutralOutline { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralOutline:active { +.seed-action-button__root--variant_neutralOutline:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_neutralOutline.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); +} + +.seed-action-button__text--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); +.seed-action-button__prefixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } -.seed-action-button--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); - background: #fff0; +.seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); +.seed-action-button__suffixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); +} + +.seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); +} + +.seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__root--variant_ghost { --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-box-color); - font-weight: var(--seed-font-weight); + background: #fff0; } -.seed-action-button--variant_ghost:active { +.seed-action-button__root--variant_ghost:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_ghost.seed-action-button--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +.seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true { background: #fff0; } +.seed-action-button__root--variant_ghost.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent-pressed); +} + +.seed-action-button__text--variant_ghost { + color: var(--seed-color-fg-neutral); +} + .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_ghost.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent-pressed); +.seed-action-button__prefixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } -.seed-action-button--size_xsmall { - height: var(--seed-dimension-x8); - border-radius: var(--seed-radius-full); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); +.seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--size_xsmall { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); +.seed-action-button__suffixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } -.seed-action-button--size_small { - height: var(--seed-dimension-x9); - border-radius: var(--seed-radius-r2); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); +.seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} + +.seed-action-button__icon--variant_ghost { + color: var(--seed-color-fg-neutral); +} + +.seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--size_small { +.seed-action-button__root--size_xsmall { + height: var(--seed-dimension-x8); + border-radius: var(--seed-radius-full); --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); } -.seed-action-button--size_medium { - height: var(--seed-dimension-x10); +.seed-action-button__root--size_small { + height: var(--seed-dimension-x9); border-radius: var(--seed-radius-r2); - --size: 16px; + --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } -.seed-action-button__text--size_medium { +.seed-action-button__root--size_medium { + height: var(--seed-dimension-x10); + border-radius: var(--seed-radius-r2); --size: 16px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } -.seed-action-button--size_large { +.seed-action-button__root--size_large { height: var(--seed-dimension-x13); border-radius: var(--seed-radius-r3); --size: 18px; --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; } -.seed-action-button__text--size_large { - --size: 18px; - --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; -} - -.seed-action-button--size_xsmall-layout_withText { +.seed-action-button__root--size_xsmall-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1216,15 +1220,16 @@ } .seed-action-button__text--size_xsmall-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); } -.seed-action-button--size_xsmall-layout_iconOnly { +.seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} + +.seed-action-button__root--size_xsmall-layout_iconOnly { min-width: var(--seed-dimension-x8); --seed-box-padding-left: var(--seed-dimension-x1_5); --seed-box-padding-right: var(--seed-dimension-x1_5); @@ -1232,14 +1237,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x1_5); } -.seed-action-button__text--size_xsmall-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x1_5); - --seed-box-padding-right: var(--seed-dimension-x1_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); +.seed-action-button__icon--size_xsmall-layout_iconOnly { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } -.seed-action-button--size_small-layout_withText { +.seed-action-button__root--size_small-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1248,15 +1251,16 @@ } .seed-action-button__text--size_small-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } -.seed-action-button--size_small-layout_iconOnly { +.seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} + +.seed-action-button__root--size_small-layout_iconOnly { min-width: var(--seed-dimension-x9); --seed-box-padding-left: var(--seed-dimension-x2); --seed-box-padding-right: var(--seed-dimension-x2); @@ -1264,14 +1268,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x2); } -.seed-action-button__text--size_small-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2); - --seed-box-padding-right: var(--seed-dimension-x2); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); +.seed-action-button__icon--size_small-layout_iconOnly { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); } -.seed-action-button--size_medium-layout_withText { +.seed-action-button__root--size_medium-layout_withText { gap: var(--seed-dimension-x1_5); --seed-box-padding-left: var(--seed-dimension-x4); --seed-box-padding-right: var(--seed-dimension-x4); @@ -1280,15 +1282,16 @@ } .seed-action-button__text--size_medium-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x4); - --seed-box-padding-right: var(--seed-dimension-x4); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } -.seed-action-button--size_medium-layout_iconOnly { +.seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); +} + +.seed-action-button__root--size_medium-layout_iconOnly { min-width: var(--seed-dimension-x10); --seed-box-padding-left: var(--seed-dimension-x2_5); --seed-box-padding-right: var(--seed-dimension-x2_5); @@ -1296,14 +1299,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x2_5); } -.seed-action-button__text--size_medium-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2_5); - --seed-box-padding-right: var(--seed-dimension-x2_5); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); +.seed-action-button__icon--size_medium-layout_iconOnly { + width: 18px; + height: 18px; } -.seed-action-button--size_large-layout_withText { +.seed-action-button__root--size_large-layout_withText { gap: var(--seed-dimension-x2); --seed-box-padding-left: var(--seed-dimension-x5); --seed-box-padding-right: var(--seed-dimension-x5); @@ -1312,15 +1313,16 @@ } .seed-action-button__text--size_large-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x5); - --seed-box-padding-right: var(--seed-dimension-x5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); } -.seed-action-button--size_large-layout_iconOnly { +.seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText { + width: 22px; + height: 22px; +} + +.seed-action-button__root--size_large-layout_iconOnly { min-width: var(--seed-dimension-x13); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1328,11 +1330,9 @@ --seed-box-padding-bottom: var(--seed-dimension-x3_5); } -.seed-action-button__text--size_large-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); +.seed-action-button__icon--size_large-layout_iconOnly { + width: 22px; + height: 22px; } .seed-bottom-sheet__positioner { diff --git a/packages/lynx-css/all.layered.css b/packages/lynx-css/all.layered.css index 7daad1cf8..3a469e65a 100644 --- a/packages/lynx-css/all.layered.css +++ b/packages/lynx-css/all.layered.css @@ -865,7 +865,7 @@ } @layer seed-components { - .seed-action-button { + .seed-action-button__root { --seed-box-flex-grow: 0; flex-shrink: 0; flex-grow: var(--seed-box-flex-grow); @@ -887,406 +887,411 @@ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1); margin-left: calc(var(--seed-box-bleed-left) * -1); margin-right: calc(var(--seed-box-bleed-right) * -1); + transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); border: none; justify-content: center; align-items: center; - display: inline-flex; + display: flex; position: relative; } + .seed-action-button__text { - --seed-box-flex-grow: 0; - --seed-box-min-width: auto; - --seed-box-padding-bottom: auto; - --seed-box-padding-top: auto; - --seed-box-padding-left: auto; - --seed-box-padding-right: auto; - --seed-box-bleed-bottom: 0px; - --seed-box-bleed-top: 0px; - --seed-box-bleed-left: 0px; - --seed-box-bleed-right: 0px; font-family: inherit; + font-weight: var(--seed-font-weight-bold); + transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing); } - .seed-action-button { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); - } - - .seed-action-button__text { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); + .seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon { + flex-shrink: 0; } - .seed-action-button--variant_brandSolid { + .seed-action-button__root--variant_brandSolid { background: var(--seed-color-bg-brand-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); } - .seed-action-button__text--variant_brandSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); + .seed-action-button__root--variant_brandSolid:active { + background: var(--seed-color-bg-brand-solid-pressed); } - .seed-action-button--variant_brandSolid:active { + .seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true { + background: var(--seed-color-bg-disabled); + } + + .seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true { background: var(--seed-color-bg-brand-solid-pressed); } - .seed-action-button--variant_brandSolid.seed-action-button--disabled_true { - background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__text--variant_brandSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-brand-solid-pressed); + .seed-action-button__prefixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); } - .seed-action-button--variant_neutralSolid { - background: var(--seed-color-bg-neutral-inverted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralSolid { - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); + .seed-action-button__suffixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_brandSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralSolid { + background: var(--seed-color-bg-neutral-inverted); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-fg-neutral-inverted); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_neutralSolid:active { + .seed-action-button__root--variant_neutralSolid:active { background: var(--seed-color-bg-neutral-inverted-pressed); } - .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true { + .seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-inverted-pressed); + } + + .seed-action-button__text--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-inverted-pressed); + .seed-action-button__prefixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } - .seed-action-button--variant_neutralWeak { - background: var(--seed-color-bg-neutral-weak); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); + .seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralWeak { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); + .seed-action-button__suffixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); + } + + .seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); + } + + .seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralWeak { + background: var(--seed-color-bg-neutral-weak); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_neutralWeak:active { + .seed-action-button__root--variant_neutralWeak:active { background: var(--seed-color-bg-neutral-weak-pressed); } - .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true { + .seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-weak-pressed); + } + + .seed-action-button__text--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralWeak.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-weak-pressed); + .seed-action-button__prefixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } - .seed-action-button--variant_criticalSolid { - background: var(--seed-color-bg-critical-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_criticalSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); + .seed-action-button__suffixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_criticalSolid { + background: var(--seed-color-bg-critical-solid); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_criticalSolid:active { + .seed-action-button__root--variant_criticalSolid:active { background: var(--seed-color-bg-critical-solid-pressed); } - .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true { + .seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-critical-solid-pressed); + } + + .seed-action-button__text--variant_criticalSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_criticalSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-critical-solid-pressed); + .seed-action-button__prefixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandOutline { + .seed-action-button__suffixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_brandOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); --track-color: var(--seed-color-palette-carrot-200); --range-color: var(--seed-color-bg-brand-solid); } - .seed-action-button__text--variant_brandOutline { - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); - --track-color: var(--seed-color-palette-carrot-200); - --range-color: var(--seed-color-bg-brand-solid); - color: var(--seed-color-fg-brand); - font-weight: var(--seed-font-weight-bold); - } - - .seed-action-button--variant_brandOutline:active { + .seed-action-button__root--variant_brandOutline:active { background: var(--seed-color-bg-transparent-pressed); } - .seed-action-button--variant_brandOutline.seed-action-button--disabled_true { + .seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); + } + + .seed-action-button__text--variant_brandOutline { + color: var(--seed-color-fg-brand); } .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); + .seed-action-button__prefixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); + } + + .seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__suffixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); + } + + .seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_brandOutline { + color: var(--seed-color-fg-brand); } - .seed-action-button--variant_neutralOutline { + .seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); - } - - .seed-action-button__text--variant_neutralOutline { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_neutralOutline:active { + .seed-action-button__root--variant_neutralOutline:active { background: var(--seed-color-bg-transparent-pressed); } - .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true { + .seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); + } + + .seed-action-button__text--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); + .seed-action-button__prefixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } - .seed-action-button--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); - background: #fff0; + .seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); + .seed-action-button__suffixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_ghost { --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-box-color); - font-weight: var(--seed-font-weight); + background: #fff0; } - .seed-action-button--variant_ghost:active { + .seed-action-button__root--variant_ghost:active { background: var(--seed-color-bg-transparent-pressed); } - .seed-action-button--variant_ghost.seed-action-button--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true { background: #fff0; } + .seed-action-button__root--variant_ghost.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent-pressed); + } + + .seed-action-button__text--variant_ghost { + color: var(--seed-color-fg-neutral); + } + .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_ghost.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent-pressed); + .seed-action-button__prefixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } - .seed-action-button--size_xsmall { - height: var(--seed-dimension-x8); - border-radius: var(--seed-radius-full); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); + .seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--size_xsmall { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); + .seed-action-button__suffixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } - .seed-action-button--size_small { - height: var(--seed-dimension-x9); - border-radius: var(--seed-radius-r2); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); + .seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_ghost { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--size_small { + .seed-action-button__root--size_xsmall { + height: var(--seed-dimension-x8); + border-radius: var(--seed-radius-full); --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); } - .seed-action-button--size_medium { - height: var(--seed-dimension-x10); + .seed-action-button__root--size_small { + height: var(--seed-dimension-x9); border-radius: var(--seed-radius-r2); - --size: 16px; + --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } - .seed-action-button__text--size_medium { + .seed-action-button__root--size_medium { + height: var(--seed-dimension-x10); + border-radius: var(--seed-radius-r2); --size: 16px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } - .seed-action-button--size_large { + .seed-action-button__root--size_large { height: var(--seed-dimension-x13); border-radius: var(--seed-radius-r3); --size: 18px; --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; } - .seed-action-button__text--size_large { - --size: 18px; - --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; - } - - .seed-action-button--size_xsmall-layout_withText { + .seed-action-button__root--size_xsmall-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1295,15 +1300,16 @@ } .seed-action-button__text--size_xsmall-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); } - .seed-action-button--size_xsmall-layout_iconOnly { + .seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); + } + + .seed-action-button__root--size_xsmall-layout_iconOnly { min-width: var(--seed-dimension-x8); --seed-box-padding-left: var(--seed-dimension-x1_5); --seed-box-padding-right: var(--seed-dimension-x1_5); @@ -1311,14 +1317,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x1_5); } - .seed-action-button__text--size_xsmall-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x1_5); - --seed-box-padding-right: var(--seed-dimension-x1_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); + .seed-action-button__icon--size_xsmall-layout_iconOnly { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } - .seed-action-button--size_small-layout_withText { + .seed-action-button__root--size_small-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1327,15 +1331,16 @@ } .seed-action-button__text--size_small-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } - .seed-action-button--size_small-layout_iconOnly { + .seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); + } + + .seed-action-button__root--size_small-layout_iconOnly { min-width: var(--seed-dimension-x9); --seed-box-padding-left: var(--seed-dimension-x2); --seed-box-padding-right: var(--seed-dimension-x2); @@ -1343,14 +1348,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x2); } - .seed-action-button__text--size_small-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2); - --seed-box-padding-right: var(--seed-dimension-x2); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); + .seed-action-button__icon--size_small-layout_iconOnly { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); } - .seed-action-button--size_medium-layout_withText { + .seed-action-button__root--size_medium-layout_withText { gap: var(--seed-dimension-x1_5); --seed-box-padding-left: var(--seed-dimension-x4); --seed-box-padding-right: var(--seed-dimension-x4); @@ -1359,15 +1362,16 @@ } .seed-action-button__text--size_medium-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x4); - --seed-box-padding-right: var(--seed-dimension-x4); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } - .seed-action-button--size_medium-layout_iconOnly { + .seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); + } + + .seed-action-button__root--size_medium-layout_iconOnly { min-width: var(--seed-dimension-x10); --seed-box-padding-left: var(--seed-dimension-x2_5); --seed-box-padding-right: var(--seed-dimension-x2_5); @@ -1375,14 +1379,12 @@ --seed-box-padding-bottom: var(--seed-dimension-x2_5); } - .seed-action-button__text--size_medium-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2_5); - --seed-box-padding-right: var(--seed-dimension-x2_5); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); + .seed-action-button__icon--size_medium-layout_iconOnly { + width: 18px; + height: 18px; } - .seed-action-button--size_large-layout_withText { + .seed-action-button__root--size_large-layout_withText { gap: var(--seed-dimension-x2); --seed-box-padding-left: var(--seed-dimension-x5); --seed-box-padding-right: var(--seed-dimension-x5); @@ -1391,15 +1393,16 @@ } .seed-action-button__text--size_large-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x5); - --seed-box-padding-right: var(--seed-dimension-x5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); } - .seed-action-button--size_large-layout_iconOnly { + .seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText { + width: 22px; + height: 22px; + } + + .seed-action-button__root--size_large-layout_iconOnly { min-width: var(--seed-dimension-x13); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -1407,11 +1410,9 @@ --seed-box-padding-bottom: var(--seed-dimension-x3_5); } - .seed-action-button__text--size_large-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); + .seed-action-button__icon--size_large-layout_iconOnly { + width: 22px; + height: 22px; } .seed-bottom-sheet__positioner { diff --git a/packages/lynx-css/all.layered.min.css b/packages/lynx-css/all.layered.min.css index b0c7f184c..908db882d 100644 --- a/packages/lynx-css/all.layered.min.css +++ b/packages/lynx-css/all.layered.min.css @@ -1 +1 @@ -@layer seed-base{@supports (font:-apple-system-body){}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon, .seed-prefix-icon, .seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size)}.seed-icon__text{color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-prefix-icon__text{color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}.seed-suffix-icon__text{color:var(--seed-suffix-icon-color,currentColor)}.seed-count__text{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:transparent;background:var(--seed-box-background);--seed-box-border-style:solid;--seed-box-border-color:transparent;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-box-shadow:none;box-shadow:var(--seed-box-box-shadow);--seed-box-display:block;--seed-box-position:relative;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-unstable-transform:none;transform:var(--seed-box-unstable-transform);--seed-box-z-index:auto;z-index:var(--seed-box-z-index);--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:0;--seed-box-flex-shrink:1;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);justify-self:var(--seed-box-justify-self);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap);--seed-box-grid-column:auto;--seed-box-grid-row:auto}.seed-box__text{--seed-box-background:transparent;--seed-box-border-style:solid;--seed-box-border-color:transparent;--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);--seed-box-box-shadow:none;--seed-box-display:block;--seed-box-position:relative;--seed-box-unstable-transform:none;--seed-box-z-index:auto;--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;--seed-box-flex-grow:0;--seed-box-flex-shrink:1;--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;--seed-box-grid-column:auto;--seed-box-grid-row:auto;transform:var(--seed-box-unstable-transform);color:var(--seed-box-color)}.seed-box.seed-box--has-active-bg_true:active, .seed-box.seed-box--has-active-bg_true[data-active]{background:var(--seed-box-background--active)}.seed-grid{--seed-grid-columns:auto;grid-template-columns:var(--seed-grid-columns);--seed-grid-rows:auto;grid-template-rows:var(--seed-grid-rows);--seed-grid-auto-flow:row;grid-auto-flow:var(--seed-grid-auto-flow);--seed-grid-auto-columns:auto;grid-auto-columns:var(--seed-grid-auto-columns);--seed-grid-auto-rows:auto;grid-auto-rows:var(--seed-grid-auto-rows);--seed-grid-justify-items:stretch;justify-items:var(--seed-grid-justify-items);display:grid}.seed-grid__text{--seed-grid-columns:auto;--seed-grid-rows:auto;--seed-grid-auto-flow:row;--seed-grid-auto-columns:auto;--seed-grid-auto-rows:auto;--seed-grid-justify-items:stretch}.seed-consistent-width:before{visibility:hidden;height:0;display:block}.seed-consistent-width__text:before{font-weight:var(--seed-font-weight-regular)}.seed-consistent-width:after{visibility:hidden;height:0;display:block}.seed-consistent-width__text:after{font-weight:var(--seed-font-weight-bold)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:var(--seed-duration-d3);--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55)}:root, :root[data-seed-color-mode=system][data-seed-user-color-scheme=light], :root[data-seed-color-mode=light-only], :root [data-seed-color-mode=light-only], .seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-black-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-black-alpha-100);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-400);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-black-alpha-300);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-black-alpha-200);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-layer-floating:#fff0 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #fff0 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark], :root[data-seed-color-mode=dark-only], :root [data-seed-color-mode=dark-only], .seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-white-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-white-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-600);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-white-alpha-50);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-800);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-900);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-white-alpha-100);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-white-alpha-50);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-layer-floating:#1d202500 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #16171b00 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-circle-head{}@keyframes progress-circle-tail{}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--initial-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--initial-transform,100%), 0)}}}@layer seed-components{.seed-action-button{--seed-box-flex-grow:0;flex-shrink:0;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:auto;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.seed-action-button__text{--seed-box-flex-grow:0;--seed-box-min-width:auto;--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;font-family:inherit}.seed-action-button{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button__text{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button--variant_brandSolid{background:var(--seed-color-bg-brand-solid);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_brandSolid{--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_brandSolid:active{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_brandSolid:disabled, .seed-action-button--variant_brandSolid[disabled], .seed-action-button--variant_brandSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_brandSolid:disabled, .seed-action-button__text--variant_brandSolid[disabled], .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandSolid.seed-action-button--loading_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_neutralSolid{--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-fg-neutral-inverted);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralSolid:active{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralSolid:disabled, .seed-action-button--variant_neutralSolid[disabled], .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralSolid:disabled, .seed-action-button__text--variant_neutralSolid[disabled], .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralSolid.seed-action-button--loading_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralWeak{--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralWeak:active{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_neutralWeak:disabled, .seed-action-button--variant_neutralWeak[disabled], .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralWeak:disabled, .seed-action-button__text--variant_neutralWeak[disabled], .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralWeak.seed-action-button--loading_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_criticalSolid{--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_criticalSolid:active{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_criticalSolid:disabled, .seed-action-button--variant_criticalSolid[disabled], .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_criticalSolid:disabled, .seed-action-button__text--variant_criticalSolid[disabled], .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_criticalSolid.seed-action-button--loading_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_brandOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}.seed-action-button__text--variant_brandOutline{--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid);color:var(--seed-color-fg-brand);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_brandOutline:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_brandOutline:disabled, .seed-action-button--variant_brandOutline[disabled], .seed-action-button--variant_brandOutline.seed-action-button--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_brandOutline:disabled, .seed-action-button__text--variant_brandOutline[disabled], .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandOutline.seed-action-button--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_neutralOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralOutline{--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralOutline:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_neutralOutline:disabled, .seed-action-button--variant_neutralOutline[disabled], .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralOutline:disabled, .seed-action-button__text--variant_neutralOutline[disabled], .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralOutline.seed-action-button--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_ghost{--seed-box-color:var(--seed-color-fg-neutral);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);background:#fff0}.seed-action-button__text--variant_ghost{--seed-box-color:var(--seed-color-fg-neutral);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-box-color);font-weight:var(--seed-font-weight)}.seed-action-button--variant_ghost:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_ghost:disabled, .seed-action-button--variant_ghost[disabled], .seed-action-button--variant_ghost.seed-action-button--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);background:#fff0}.seed-action-button__text--variant_ghost:disabled, .seed-action-button__text--variant_ghost[disabled], .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_ghost.seed-action-button--loading_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button__text--size_xsmall{--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button__text--size_small{--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button__text--size_medium{--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button__text--size_large{--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_withText{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5);font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_withText{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_withText{--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_withText{--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5);font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-bottom-sheet__positioner{--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__backdrop{opacity:0;background:var(--seed-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__content{z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-color-bg-layer-floating);border-top-left-radius:var(--seed-radius-r6);border-top-right-radius:var(--seed-radius-r6);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;flex:1;display:flex;position:relative;transform:translateY(100%)}.seed-bottom-sheet__header{gap:var(--seed-dimension-x2);padding-top:var(--seed-dimension-x6);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__title{color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t8);line-height:var(--seed-line-height-t8);font-weight:var(--seed-font-weight-bold);margin:0}.seed-bottom-sheet__description{color:var(--seed-color-fg-neutral-muted);font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);font-weight:var(--seed-font-weight-regular);padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);margin:0}.seed-bottom-sheet__body{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.seed-bottom-sheet__footer{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);padding-top:var(--seed-dimension-x3);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__closeButton{justify-content:center;align-items:center;display:flex;position:absolute}.seed-bottom-sheet__header--headerAlign_left{justify-content:flex-start}.seed-bottom-sheet__title--headerAlign_left{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet__header--headerAlign_center{text-align:center;justify-content:center}.seed-bottom-sheet__title--headerAlign_center{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet-handle__root{background-color:var(--seed-color-palette-gray-400);border-radius:9999px;width:36px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.seed-bottom-sheet-handle__touchArea{width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.seed-switch__root{justify-content:space-between;align-items:flex-start;display:flex;position:relative}.seed-switch__label{font-weight:var(--seed-font-weight-medium);color:var(--seed-color-fg-neutral);transition:opacity var(--seed-duration-d1) var(--seed-timing-function-easing)}.seed-switch__label:disabled, .seed-switch__label[disabled], .seed-switch__label.seed-switch__label--disabled_true{opacity:.58}.seed-switch__root--size_16{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x1_5);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 16px) / 2)}.seed-switch__label--size_16{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2)}.seed-switch__root--size_24{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x2);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 24px) / 2)}.seed-switch__label--size_24{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2)}.seed-switch__root--size_32{min-height:var(--seed-dimension-x8);gap:var(--seed-dimension-x2_5);--switchmark-margin-top:calc((var(--seed-dimension-x8) - 32px) / 2)}.seed-switch__label--size_32{font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);margin-top:calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2)}.seed-switchmark__root{border-radius:var(--seed-radius-full);background-color:var(--seed-color-palette-gray-600);margin:var(--switchmark-margin-top,0) 0;transition:background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);display:flex;position:relative}.seed-switchmark__root:disabled, .seed-switchmark__root[disabled], .seed-switchmark__root.seed-switchmark__root--disabled_true{opacity:.38}.seed-switchmark__thumb{border-radius:var(--seed-radius-full);transition:transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;transform:scale(.8)}.seed-switchmark__root--tone_neutral.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-neutral-inverted)}.seed-switchmark__root--tone_neutral:disabled.seed-switchmark__root--checked_true, .seed-switchmark__root--tone_neutral[disabled][data-checked], .seed-switchmark__root--tone_neutral.seed-switchmark__root--disabled_true[data-checked]{background-color:var(--seed-color-palette-gray-600)}.seed-switchmark__thumb--tone_neutral{background-color:var(--seed-color-fg-neutral-inverted)}.seed-switchmark__thumb--tone_neutral:disabled, .seed-switchmark__thumb--tone_neutral[disabled], .seed-switchmark__thumb--tone_neutral.seed-switchmark__thumb--disabled_true{background-color:var(--seed-color-palette-static-black-alpha-700)}.seed-switchmark__root--tone_brand.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-brand-solid)}.seed-switchmark__thumb--tone_brand{background-color:var(--seed-color-palette-static-white)}.seed-switchmark__root--size_16{min-width:26px;min-height:16px;padding:2px}.seed-switchmark__thumb--size_16{width:12px;height:12px}.seed-switchmark__thumb--size_16.seed-switchmark__thumb--checked_true{transform:scale(1)translate(10px)}.seed-switchmark__root--size_24{min-width:38px;min-height:24px;padding:2px}.seed-switchmark__thumb--size_24{width:20px;height:20px}.seed-switchmark__thumb--size_24.seed-switchmark__thumb--checked_true{transform:scale(1)translate(14px)}.seed-switchmark__root--size_32{min-width:52px;min-height:32px;padding:3px}.seed-switchmark__thumb--size_32{width:26px;height:26px}.seed-switchmark__thumb--size_32.seed-switchmark__thumb--checked_true{transform:scale(1)translate(20px)}.seed-tag-group__root{flex-flow:wrap;align-items:center;width:100%;display:flex}.seed-tag-group__separator{color:var(--seed-color-palette-gray-600);font-weight:var(--seed-font-weight-regular);margin-left:var(--seed-dimension-x0_5);margin-right:var(--seed-dimension-x0_5);flex-shrink:0}.seed-tag-group__separator--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group__separator--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group__separator--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__root{flex-direction:row;flex-shrink:0;align-items:center;display:flex}.seed-tag-group-item__label--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group-item__label--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group-item__label--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__label--weight_regular{font-weight:var(--seed-font-weight-regular)}.seed-tag-group-item__label--weight_bold{font-weight:var(--seed-font-weight-bold)}.seed-tag-group-item__label--tone_neutralSubtle{color:var(--seed-color-fg-neutral-subtle)}.seed-tag-group-item__label--tone_neutral{color:var(--seed-color-fg-neutral)}.seed-tag-group-item__label--tone_brand{color:var(--seed-color-fg-brand)}} \ No newline at end of file +@layer seed-base{@supports (font:-apple-system-body){}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon, .seed-prefix-icon, .seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size)}.seed-icon__text{color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-prefix-icon__text{color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}.seed-suffix-icon__text{color:var(--seed-suffix-icon-color,currentColor)}.seed-count__text{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:transparent;background:var(--seed-box-background);--seed-box-border-style:solid;--seed-box-border-color:transparent;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-box-shadow:none;box-shadow:var(--seed-box-box-shadow);--seed-box-display:block;--seed-box-position:relative;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-unstable-transform:none;transform:var(--seed-box-unstable-transform);--seed-box-z-index:auto;z-index:var(--seed-box-z-index);--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:0;--seed-box-flex-shrink:1;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);justify-self:var(--seed-box-justify-self);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap);--seed-box-grid-column:auto;--seed-box-grid-row:auto}.seed-box__text{--seed-box-background:transparent;--seed-box-border-style:solid;--seed-box-border-color:transparent;--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);--seed-box-box-shadow:none;--seed-box-display:block;--seed-box-position:relative;--seed-box-unstable-transform:none;--seed-box-z-index:auto;--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;--seed-box-flex-grow:0;--seed-box-flex-shrink:1;--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;--seed-box-grid-column:auto;--seed-box-grid-row:auto;transform:var(--seed-box-unstable-transform);color:var(--seed-box-color)}.seed-box.seed-box--has-active-bg_true:active, .seed-box.seed-box--has-active-bg_true[data-active]{background:var(--seed-box-background--active)}.seed-grid{--seed-grid-columns:auto;grid-template-columns:var(--seed-grid-columns);--seed-grid-rows:auto;grid-template-rows:var(--seed-grid-rows);--seed-grid-auto-flow:row;grid-auto-flow:var(--seed-grid-auto-flow);--seed-grid-auto-columns:auto;grid-auto-columns:var(--seed-grid-auto-columns);--seed-grid-auto-rows:auto;grid-auto-rows:var(--seed-grid-auto-rows);--seed-grid-justify-items:stretch;justify-items:var(--seed-grid-justify-items);display:grid}.seed-grid__text{--seed-grid-columns:auto;--seed-grid-rows:auto;--seed-grid-auto-flow:row;--seed-grid-auto-columns:auto;--seed-grid-auto-rows:auto;--seed-grid-justify-items:stretch}.seed-consistent-width:before{visibility:hidden;height:0;display:block}.seed-consistent-width__text:before{font-weight:var(--seed-font-weight-regular)}.seed-consistent-width:after{visibility:hidden;height:0;display:block}.seed-consistent-width__text:after{font-weight:var(--seed-font-weight-bold)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:var(--seed-duration-d3);--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55)}:root, :root[data-seed-color-mode=system][data-seed-user-color-scheme=light], :root[data-seed-color-mode=light-only], :root [data-seed-color-mode=light-only], .seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-black-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-black-alpha-100);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-400);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-black-alpha-300);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-black-alpha-200);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-layer-floating:#fff0 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #fff0 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark], :root[data-seed-color-mode=dark-only], :root [data-seed-color-mode=dark-only], .seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-white-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-white-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-600);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-white-alpha-50);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-800);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-900);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-white-alpha-100);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-white-alpha-50);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-layer-floating:#1d202500 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #16171b00 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-circle-head{}@keyframes progress-circle-tail{}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--initial-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--initial-transform,100%), 0)}}}@layer seed-components{.seed-action-button__root{--seed-box-flex-grow:0;flex-shrink:0;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:auto;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);border:none;justify-content:center;align-items:center;display:flex;position:relative}.seed-action-button__text{font-family:inherit;font-weight:var(--seed-font-weight-bold);transition:color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon{flex-shrink:0}.seed-action-button__root--variant_brandSolid{background:var(--seed-color-bg-brand-solid);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_brandSolid:active, .seed-action-button__root--variant_brandSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button__root--variant_brandSolid:disabled, .seed-action-button__root--variant_brandSolid[disabled], .seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button__text--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_brandSolid:disabled, .seed-action-button__text--variant_brandSolid[disabled], .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__prefixIcon--variant_brandSolid:disabled, .seed-action-button__prefixIcon--variant_brandSolid[disabled], .seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__suffixIcon--variant_brandSolid:disabled, .seed-action-button__suffixIcon--variant_brandSolid[disabled], .seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__icon--variant_brandSolid:disabled, .seed-action-button__icon--variant_brandSolid[disabled], .seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_neutralSolid:active, .seed-action-button__root--variant_neutralSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button__root--variant_neutralSolid:disabled, .seed-action-button__root--variant_neutralSolid[disabled], .seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button__text--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__text--variant_neutralSolid:disabled, .seed-action-button__text--variant_neutralSolid[disabled], .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__prefixIcon--variant_neutralSolid:disabled, .seed-action-button__prefixIcon--variant_neutralSolid[disabled], .seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__suffixIcon--variant_neutralSolid:disabled, .seed-action-button__suffixIcon--variant_neutralSolid[disabled], .seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__icon--variant_neutralSolid:disabled, .seed-action-button__icon--variant_neutralSolid[disabled], .seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__root--variant_neutralWeak:active, .seed-action-button__root--variant_neutralWeak.seed-action-button__root--active_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button__root--variant_neutralWeak:disabled, .seed-action-button__root--variant_neutralWeak[disabled], .seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button__text--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralWeak:disabled, .seed-action-button__text--variant_neutralWeak[disabled], .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_neutralWeak:disabled, .seed-action-button__prefixIcon--variant_neutralWeak[disabled], .seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_neutralWeak:disabled, .seed-action-button__suffixIcon--variant_neutralWeak[disabled], .seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_neutralWeak:disabled, .seed-action-button__icon--variant_neutralWeak[disabled], .seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_criticalSolid:active, .seed-action-button__root--variant_criticalSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button__root--variant_criticalSolid:disabled, .seed-action-button__root--variant_criticalSolid[disabled], .seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button__text--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_criticalSolid:disabled, .seed-action-button__text--variant_criticalSolid[disabled], .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__prefixIcon--variant_criticalSolid:disabled, .seed-action-button__prefixIcon--variant_criticalSolid[disabled], .seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__suffixIcon--variant_criticalSolid:disabled, .seed-action-button__suffixIcon--variant_criticalSolid[disabled], .seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__icon--variant_criticalSolid:disabled, .seed-action-button__icon--variant_criticalSolid[disabled], .seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_brandOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}.seed-action-button__root--variant_brandOutline:active, .seed-action-button__root--variant_brandOutline.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_brandOutline:disabled, .seed-action-button__root--variant_brandOutline[disabled], .seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted)}.seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button__text--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__text--variant_brandOutline:disabled, .seed-action-button__text--variant_brandOutline[disabled], .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__prefixIcon--variant_brandOutline:disabled, .seed-action-button__prefixIcon--variant_brandOutline[disabled], .seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__suffixIcon--variant_brandOutline:disabled, .seed-action-button__suffixIcon--variant_brandOutline[disabled], .seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__icon--variant_brandOutline:disabled, .seed-action-button__icon--variant_brandOutline[disabled], .seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__root--variant_neutralOutline:active, .seed-action-button__root--variant_neutralOutline.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_neutralOutline:disabled, .seed-action-button__root--variant_neutralOutline[disabled], .seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted)}.seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button__text--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralOutline:disabled, .seed-action-button__text--variant_neutralOutline[disabled], .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_neutralOutline:disabled, .seed-action-button__prefixIcon--variant_neutralOutline[disabled], .seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_neutralOutline:disabled, .seed-action-button__suffixIcon--variant_neutralOutline[disabled], .seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_neutralOutline:disabled, .seed-action-button__icon--variant_neutralOutline[disabled], .seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_ghost{--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);background:#fff0}.seed-action-button__root--variant_ghost:active, .seed-action-button__root--variant_ghost.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_ghost:disabled, .seed-action-button__root--variant_ghost[disabled], .seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true{background:#fff0}.seed-action-button__root--variant_ghost.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__text--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_ghost:disabled, .seed-action-button__text--variant_ghost[disabled], .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_ghost:disabled, .seed-action-button__prefixIcon--variant_ghost[disabled], .seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_ghost:disabled, .seed-action-button__suffixIcon--variant_ghost[disabled], .seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_ghost:disabled, .seed-action-button__icon--variant_ghost[disabled], .seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px}.seed-action-button__root--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px}.seed-action-button__root--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px}.seed-action-button__root--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px}.seed-action-button__root--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_withText{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__icon--size_xsmall-layout_iconOnly{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_withText{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__icon--size_small-layout_iconOnly{width:var(--seed-dimension-x4);height:var(--seed-dimension-x4)}.seed-action-button__root--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_withText{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText{width:var(--seed-dimension-x4);height:var(--seed-dimension-x4)}.seed-action-button__root--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__icon--size_medium-layout_iconOnly{width:18px;height:18px}.seed-action-button__root--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_withText{font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText{width:22px;height:22px}.seed-action-button__root--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__icon--size_large-layout_iconOnly{width:22px;height:22px}.seed-bottom-sheet__positioner{--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__backdrop{opacity:0;background:var(--seed-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__content{z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-color-bg-layer-floating);border-top-left-radius:var(--seed-radius-r6);border-top-right-radius:var(--seed-radius-r6);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;flex:1;display:flex;position:relative;transform:translateY(100%)}.seed-bottom-sheet__header{gap:var(--seed-dimension-x2);padding-top:var(--seed-dimension-x6);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__title{color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t8);line-height:var(--seed-line-height-t8);font-weight:var(--seed-font-weight-bold);margin:0}.seed-bottom-sheet__description{color:var(--seed-color-fg-neutral-muted);font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);font-weight:var(--seed-font-weight-regular);padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);margin:0}.seed-bottom-sheet__body{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.seed-bottom-sheet__footer{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);padding-top:var(--seed-dimension-x3);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__closeButton{justify-content:center;align-items:center;display:flex;position:absolute}.seed-bottom-sheet__header--headerAlign_left{justify-content:flex-start}.seed-bottom-sheet__title--headerAlign_left{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet__header--headerAlign_center{text-align:center;justify-content:center}.seed-bottom-sheet__title--headerAlign_center{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet-handle__root{background-color:var(--seed-color-palette-gray-400);border-radius:9999px;width:36px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.seed-bottom-sheet-handle__touchArea{width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.seed-switch__root{justify-content:space-between;align-items:flex-start;display:flex;position:relative}.seed-switch__label{font-weight:var(--seed-font-weight-medium);color:var(--seed-color-fg-neutral);transition:opacity var(--seed-duration-d1) var(--seed-timing-function-easing)}.seed-switch__label:disabled, .seed-switch__label[disabled], .seed-switch__label.seed-switch__label--disabled_true{opacity:.58}.seed-switch__root--size_16{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x1_5);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 16px) / 2)}.seed-switch__label--size_16{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2)}.seed-switch__root--size_24{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x2);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 24px) / 2)}.seed-switch__label--size_24{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2)}.seed-switch__root--size_32{min-height:var(--seed-dimension-x8);gap:var(--seed-dimension-x2_5);--switchmark-margin-top:calc((var(--seed-dimension-x8) - 32px) / 2)}.seed-switch__label--size_32{font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);margin-top:calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2)}.seed-switchmark__root{border-radius:var(--seed-radius-full);background-color:var(--seed-color-palette-gray-600);margin:var(--switchmark-margin-top,0) 0;transition:background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);display:flex;position:relative}.seed-switchmark__root:disabled, .seed-switchmark__root[disabled], .seed-switchmark__root.seed-switchmark__root--disabled_true{opacity:.38}.seed-switchmark__thumb{border-radius:var(--seed-radius-full);transition:transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;transform:scale(.8)}.seed-switchmark__root--tone_neutral.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-neutral-inverted)}.seed-switchmark__root--tone_neutral:disabled.seed-switchmark__root--checked_true, .seed-switchmark__root--tone_neutral[disabled][data-checked], .seed-switchmark__root--tone_neutral.seed-switchmark__root--disabled_true[data-checked]{background-color:var(--seed-color-palette-gray-600)}.seed-switchmark__thumb--tone_neutral{background-color:var(--seed-color-fg-neutral-inverted)}.seed-switchmark__thumb--tone_neutral:disabled, .seed-switchmark__thumb--tone_neutral[disabled], .seed-switchmark__thumb--tone_neutral.seed-switchmark__thumb--disabled_true{background-color:var(--seed-color-palette-static-black-alpha-700)}.seed-switchmark__root--tone_brand.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-brand-solid)}.seed-switchmark__thumb--tone_brand{background-color:var(--seed-color-palette-static-white)}.seed-switchmark__root--size_16{min-width:26px;min-height:16px;padding:2px}.seed-switchmark__thumb--size_16{width:12px;height:12px}.seed-switchmark__thumb--size_16.seed-switchmark__thumb--checked_true{transform:scale(1)translate(10px)}.seed-switchmark__root--size_24{min-width:38px;min-height:24px;padding:2px}.seed-switchmark__thumb--size_24{width:20px;height:20px}.seed-switchmark__thumb--size_24.seed-switchmark__thumb--checked_true{transform:scale(1)translate(14px)}.seed-switchmark__root--size_32{min-width:52px;min-height:32px;padding:3px}.seed-switchmark__thumb--size_32{width:26px;height:26px}.seed-switchmark__thumb--size_32.seed-switchmark__thumb--checked_true{transform:scale(1)translate(20px)}.seed-tag-group__root{flex-flow:wrap;align-items:center;width:100%;display:flex}.seed-tag-group__separator{color:var(--seed-color-palette-gray-600);font-weight:var(--seed-font-weight-regular);margin-left:var(--seed-dimension-x0_5);margin-right:var(--seed-dimension-x0_5);flex-shrink:0}.seed-tag-group__separator--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group__separator--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group__separator--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__root{flex-direction:row;flex-shrink:0;align-items:center;display:flex}.seed-tag-group-item__label--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group-item__label--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group-item__label--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__label--weight_regular{font-weight:var(--seed-font-weight-regular)}.seed-tag-group-item__label--weight_bold{font-weight:var(--seed-font-weight-bold)}.seed-tag-group-item__label--tone_neutralSubtle{color:var(--seed-color-fg-neutral-subtle)}.seed-tag-group-item__label--tone_neutral{color:var(--seed-color-fg-neutral)}.seed-tag-group-item__label--tone_brand{color:var(--seed-color-fg-brand)}} \ No newline at end of file diff --git a/packages/lynx-css/all.min.css b/packages/lynx-css/all.min.css index 49d36d2e8..d53e92b56 100644 --- a/packages/lynx-css/all.min.css +++ b/packages/lynx-css/all.min.css @@ -1 +1 @@ -@supports (font:-apple-system-body){}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon, .seed-prefix-icon, .seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size)}.seed-icon__text{color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-prefix-icon__text{color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}.seed-suffix-icon__text{color:var(--seed-suffix-icon-color,currentColor)}.seed-count__text{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:transparent;background:var(--seed-box-background);--seed-box-border-style:solid;--seed-box-border-color:transparent;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-box-shadow:none;box-shadow:var(--seed-box-box-shadow);--seed-box-display:block;--seed-box-position:relative;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-unstable-transform:none;transform:var(--seed-box-unstable-transform);--seed-box-z-index:auto;z-index:var(--seed-box-z-index);--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:0;--seed-box-flex-shrink:1;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);justify-self:var(--seed-box-justify-self);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap);--seed-box-grid-column:auto;--seed-box-grid-row:auto}.seed-box__text{--seed-box-background:transparent;--seed-box-border-style:solid;--seed-box-border-color:transparent;--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);--seed-box-box-shadow:none;--seed-box-display:block;--seed-box-position:relative;--seed-box-unstable-transform:none;--seed-box-z-index:auto;--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;--seed-box-flex-grow:0;--seed-box-flex-shrink:1;--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;--seed-box-grid-column:auto;--seed-box-grid-row:auto;transform:var(--seed-box-unstable-transform);color:var(--seed-box-color)}.seed-box.seed-box--has-active-bg_true:active, .seed-box.seed-box--has-active-bg_true[data-active]{background:var(--seed-box-background--active)}.seed-grid{--seed-grid-columns:auto;grid-template-columns:var(--seed-grid-columns);--seed-grid-rows:auto;grid-template-rows:var(--seed-grid-rows);--seed-grid-auto-flow:row;grid-auto-flow:var(--seed-grid-auto-flow);--seed-grid-auto-columns:auto;grid-auto-columns:var(--seed-grid-auto-columns);--seed-grid-auto-rows:auto;grid-auto-rows:var(--seed-grid-auto-rows);--seed-grid-justify-items:stretch;justify-items:var(--seed-grid-justify-items);display:grid}.seed-grid__text{--seed-grid-columns:auto;--seed-grid-rows:auto;--seed-grid-auto-flow:row;--seed-grid-auto-columns:auto;--seed-grid-auto-rows:auto;--seed-grid-justify-items:stretch}.seed-consistent-width:before{visibility:hidden;height:0;display:block}.seed-consistent-width__text:before{font-weight:var(--seed-font-weight-regular)}.seed-consistent-width:after{visibility:hidden;height:0;display:block}.seed-consistent-width__text:after{font-weight:var(--seed-font-weight-bold)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:var(--seed-duration-d3);--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55)}:root, :root[data-seed-color-mode=system][data-seed-user-color-scheme=light], :root[data-seed-color-mode=light-only], :root [data-seed-color-mode=light-only], .seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-black-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-black-alpha-100);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-400);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-black-alpha-300);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-black-alpha-200);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-layer-floating:#fff0 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #fff0 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark], :root[data-seed-color-mode=dark-only], :root [data-seed-color-mode=dark-only], .seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-white-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-white-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-600);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-white-alpha-50);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-800);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-900);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-white-alpha-100);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-white-alpha-50);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-layer-floating:#1d202500 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #16171b00 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}.seed-action-button{--seed-box-flex-grow:0;flex-shrink:0;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:auto;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.seed-action-button__text{--seed-box-flex-grow:0;--seed-box-min-width:auto;--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;font-family:inherit}.seed-action-button{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button__text{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button--variant_brandSolid{background:var(--seed-color-bg-brand-solid);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_brandSolid{--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_brandSolid:active{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_brandSolid:disabled, .seed-action-button--variant_brandSolid[disabled], .seed-action-button--variant_brandSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_brandSolid:disabled, .seed-action-button__text--variant_brandSolid[disabled], .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandSolid.seed-action-button--loading_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_neutralSolid{--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-fg-neutral-inverted);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralSolid:active{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralSolid:disabled, .seed-action-button--variant_neutralSolid[disabled], .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralSolid:disabled, .seed-action-button__text--variant_neutralSolid[disabled], .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralSolid.seed-action-button--loading_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralWeak{--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralWeak:active{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_neutralWeak:disabled, .seed-action-button--variant_neutralWeak[disabled], .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralWeak:disabled, .seed-action-button__text--variant_neutralWeak[disabled], .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralWeak.seed-action-button--loading_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_criticalSolid{--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_criticalSolid:active{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_criticalSolid:disabled, .seed-action-button--variant_criticalSolid[disabled], .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true{background:var(--seed-color-bg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_criticalSolid:disabled, .seed-action-button__text--variant_criticalSolid[disabled], .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_criticalSolid.seed-action-button--loading_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_brandOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}.seed-action-button__text--variant_brandOutline{--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid);color:var(--seed-color-fg-brand);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_brandOutline:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_brandOutline:disabled, .seed-action-button--variant_brandOutline[disabled], .seed-action-button--variant_brandOutline.seed-action-button--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_brandOutline:disabled, .seed-action-button__text--variant_brandOutline[disabled], .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandOutline.seed-action-button--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_neutralOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralOutline{--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold)}.seed-action-button--variant_neutralOutline:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_neutralOutline:disabled, .seed-action-button--variant_neutralOutline[disabled], .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button__text--variant_neutralOutline:disabled, .seed-action-button__text--variant_neutralOutline[disabled], .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralOutline.seed-action-button--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_ghost{--seed-box-color:var(--seed-color-fg-neutral);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);background:#fff0}.seed-action-button__text--variant_ghost{--seed-box-color:var(--seed-color-fg-neutral);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);color:var(--seed-box-color);font-weight:var(--seed-font-weight)}.seed-action-button--variant_ghost:active{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--variant_ghost:disabled, .seed-action-button--variant_ghost[disabled], .seed-action-button--variant_ghost.seed-action-button--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);background:#fff0}.seed-action-button__text--variant_ghost:disabled, .seed-action-button__text--variant_ghost[disabled], .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true{--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled);color:var(--seed-color-fg-disabled)}.seed-action-button--variant_ghost.seed-action-button--loading_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button__text--size_xsmall{--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button__text--size_small{--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button__text--size_medium{--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button__text--size_large{--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_withText{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5);font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_withText{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_withText{--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_withText{--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5);font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_iconOnly{--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-bottom-sheet__positioner{--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__backdrop{opacity:0;background:var(--seed-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__content{z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-color-bg-layer-floating);border-top-left-radius:var(--seed-radius-r6);border-top-right-radius:var(--seed-radius-r6);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;flex:1;display:flex;position:relative;transform:translateY(100%)}.seed-bottom-sheet__header{gap:var(--seed-dimension-x2);padding-top:var(--seed-dimension-x6);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__title{color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t8);line-height:var(--seed-line-height-t8);font-weight:var(--seed-font-weight-bold);margin:0}.seed-bottom-sheet__description{color:var(--seed-color-fg-neutral-muted);font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);font-weight:var(--seed-font-weight-regular);padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);margin:0}.seed-bottom-sheet__body{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.seed-bottom-sheet__footer{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);padding-top:var(--seed-dimension-x3);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__closeButton{justify-content:center;align-items:center;display:flex;position:absolute}.seed-bottom-sheet__header--headerAlign_left{justify-content:flex-start}.seed-bottom-sheet__title--headerAlign_left{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet__header--headerAlign_center{text-align:center;justify-content:center}.seed-bottom-sheet__title--headerAlign_center{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet-handle__root{background-color:var(--seed-color-palette-gray-400);border-radius:9999px;width:36px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.seed-bottom-sheet-handle__touchArea{width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.seed-switch__root{justify-content:space-between;align-items:flex-start;display:flex;position:relative}.seed-switch__label{font-weight:var(--seed-font-weight-medium);color:var(--seed-color-fg-neutral);transition:opacity var(--seed-duration-d1) var(--seed-timing-function-easing)}.seed-switch__label:disabled, .seed-switch__label[disabled], .seed-switch__label.seed-switch__label--disabled_true{opacity:.58}.seed-switch__root--size_16{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x1_5);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 16px) / 2)}.seed-switch__label--size_16{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2)}.seed-switch__root--size_24{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x2);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 24px) / 2)}.seed-switch__label--size_24{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2)}.seed-switch__root--size_32{min-height:var(--seed-dimension-x8);gap:var(--seed-dimension-x2_5);--switchmark-margin-top:calc((var(--seed-dimension-x8) - 32px) / 2)}.seed-switch__label--size_32{font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);margin-top:calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2)}.seed-switchmark__root{border-radius:var(--seed-radius-full);background-color:var(--seed-color-palette-gray-600);margin:var(--switchmark-margin-top,0) 0;transition:background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);display:flex;position:relative}.seed-switchmark__root:disabled, .seed-switchmark__root[disabled], .seed-switchmark__root.seed-switchmark__root--disabled_true{opacity:.38}.seed-switchmark__thumb{border-radius:var(--seed-radius-full);transition:transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;transform:scale(.8)}.seed-switchmark__root--tone_neutral.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-neutral-inverted)}.seed-switchmark__root--tone_neutral:disabled.seed-switchmark__root--checked_true, .seed-switchmark__root--tone_neutral[disabled][data-checked], .seed-switchmark__root--tone_neutral.seed-switchmark__root--disabled_true[data-checked]{background-color:var(--seed-color-palette-gray-600)}.seed-switchmark__thumb--tone_neutral{background-color:var(--seed-color-fg-neutral-inverted)}.seed-switchmark__thumb--tone_neutral:disabled, .seed-switchmark__thumb--tone_neutral[disabled], .seed-switchmark__thumb--tone_neutral.seed-switchmark__thumb--disabled_true{background-color:var(--seed-color-palette-static-black-alpha-700)}.seed-switchmark__root--tone_brand.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-brand-solid)}.seed-switchmark__thumb--tone_brand{background-color:var(--seed-color-palette-static-white)}.seed-switchmark__root--size_16{min-width:26px;min-height:16px;padding:2px}.seed-switchmark__thumb--size_16{width:12px;height:12px}.seed-switchmark__thumb--size_16.seed-switchmark__thumb--checked_true{transform:scale(1)translate(10px)}.seed-switchmark__root--size_24{min-width:38px;min-height:24px;padding:2px}.seed-switchmark__thumb--size_24{width:20px;height:20px}.seed-switchmark__thumb--size_24.seed-switchmark__thumb--checked_true{transform:scale(1)translate(14px)}.seed-switchmark__root--size_32{min-width:52px;min-height:32px;padding:3px}.seed-switchmark__thumb--size_32{width:26px;height:26px}.seed-switchmark__thumb--size_32.seed-switchmark__thumb--checked_true{transform:scale(1)translate(20px)}.seed-tag-group__root{flex-flow:wrap;align-items:center;width:100%;display:flex}.seed-tag-group__separator{color:var(--seed-color-palette-gray-600);font-weight:var(--seed-font-weight-regular);margin-left:var(--seed-dimension-x0_5);margin-right:var(--seed-dimension-x0_5);flex-shrink:0}.seed-tag-group__separator--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group__separator--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group__separator--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__root{flex-direction:row;flex-shrink:0;align-items:center;display:flex}.seed-tag-group-item__label--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group-item__label--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group-item__label--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__label--weight_regular{font-weight:var(--seed-font-weight-regular)}.seed-tag-group-item__label--weight_bold{font-weight:var(--seed-font-weight-bold)}.seed-tag-group-item__label--tone_neutralSubtle{color:var(--seed-color-fg-neutral-subtle)}.seed-tag-group-item__label--tone_neutral{color:var(--seed-color-fg-neutral)}.seed-tag-group-item__label--tone_brand{color:var(--seed-color-fg-brand)}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-circle-head{}@keyframes progress-circle-tail{}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--initial-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--initial-transform,100%), 0)}} \ No newline at end of file +@supports (font:-apple-system-body){}.seed-loading-indicator{display:inline-flex;position:absolute}.seed-icon, .seed-prefix-icon, .seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size)}.seed-icon__text{color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-prefix-icon__text{color:var(--seed-prefix-icon-color,currentColor)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}.seed-suffix-icon__text{color:var(--seed-suffix-icon-color,currentColor)}.seed-count__text{font-size:var(--seed-count-font-size);line-height:var(--seed-count-line-height);font-weight:var(--seed-count-font-weight);color:var(--seed-count-color)}.seed-box{--seed-box-background:transparent;background:var(--seed-box-background);--seed-box-border-style:solid;--seed-box-border-color:transparent;border-style:var(--seed-box-border-style);border-color:var(--seed-box-border-color);--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);border-top-width:var(--seed-box-border-top-width);border-bottom-width:var(--seed-box-border-bottom-width);border-left-width:var(--seed-box-border-left-width);border-right-width:var(--seed-box-border-right-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;min-height:var(--seed-box-min-height);max-height:var(--seed-box-max-height);height:var(--seed-box-height);min-width:var(--seed-box-min-width);max-width:var(--seed-box-max-width);width:var(--seed-box-width);--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;top:var(--seed-box-top);bottom:var(--seed-box-bottom);left:var(--seed-box-left);right:var(--seed-box-right);--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);border-bottom-left-radius:var(--seed-box-border-bottom-left-radius);border-bottom-right-radius:var(--seed-box-border-bottom-right-radius);border-top-left-radius:var(--seed-box-border-top-left-radius);border-top-right-radius:var(--seed-box-border-top-right-radius);--seed-box-box-shadow:none;box-shadow:var(--seed-box-box-shadow);--seed-box-display:block;--seed-box-position:relative;display:var(--seed-box-display);position:var(--seed-box-position);--seed-box-unstable-transform:none;transform:var(--seed-box-unstable-transform);--seed-box-z-index:auto;z-index:var(--seed-box-z-index);--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;overflow-x:var(--seed-box-overflow-x);overflow-y:var(--seed-box-overflow-y);--seed-box-flex-grow:0;--seed-box-flex-shrink:1;flex-grow:var(--seed-box-flex-grow);flex-shrink:var(--seed-box-flex-shrink);--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;flex-direction:var(--seed-box-flex-direction);flex-wrap:var(--seed-box-flex-wrap);justify-content:var(--seed-box-justify-content);justify-self:var(--seed-box-justify-self);align-items:var(--seed-box-align-items);align-content:var(--seed-box-align-content);align-self:var(--seed-box-align-self);gap:var(--seed-box-gap);--seed-box-grid-column:auto;--seed-box-grid-row:auto}.seed-box__text{--seed-box-background:transparent;--seed-box-border-style:solid;--seed-box-border-color:transparent;--seed-box-border-width:0;--seed-box-border-top-width:var(--seed-box-border-width);--seed-box-border-bottom-width:var(--seed-box-border-width);--seed-box-border-left-width:var(--seed-box-border-width);--seed-box-border-right-width:var(--seed-box-border-width);--seed-box-padding:0;--seed-box-padding-y:var(--seed-box-padding);--seed-box-padding-x:var(--seed-box-padding);--seed-box-padding-bottom:var(--seed-box-padding-y);--seed-box-padding-top:var(--seed-box-padding-y);--seed-box-padding-left:var(--seed-box-padding-x);--seed-box-padding-right:var(--seed-box-padding-x);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;--seed-box-min-height:auto;--seed-box-max-height:none;--seed-box-height:auto;--seed-box-min-width:auto;--seed-box-max-width:none;--seed-box-width:auto;--seed-box-top:auto;--seed-box-bottom:auto;--seed-box-left:auto;--seed-box-right:auto;--seed-box-border-radius:0;--seed-box-border-bottom-left-radius:var(--seed-box-border-radius);--seed-box-border-bottom-right-radius:var(--seed-box-border-radius);--seed-box-border-top-left-radius:var(--seed-box-border-radius);--seed-box-border-top-right-radius:var(--seed-box-border-radius);--seed-box-box-shadow:none;--seed-box-display:block;--seed-box-position:relative;--seed-box-unstable-transform:none;--seed-box-z-index:auto;--seed-box-overflow-x:visible;--seed-box-overflow-y:visible;--seed-box-flex-grow:0;--seed-box-flex-shrink:1;--seed-box-flex-direction:row;--seed-box-flex-wrap:nowrap;--seed-box-justify-content:flex-start;--seed-box-justify-self:auto;--seed-box-align-items:stretch;--seed-box-align-content:stretch;--seed-box-align-self:auto;--seed-box-gap:0px;--seed-box-grid-column:auto;--seed-box-grid-row:auto;transform:var(--seed-box-unstable-transform);color:var(--seed-box-color)}.seed-box.seed-box--has-active-bg_true:active, .seed-box.seed-box--has-active-bg_true[data-active]{background:var(--seed-box-background--active)}.seed-grid{--seed-grid-columns:auto;grid-template-columns:var(--seed-grid-columns);--seed-grid-rows:auto;grid-template-rows:var(--seed-grid-rows);--seed-grid-auto-flow:row;grid-auto-flow:var(--seed-grid-auto-flow);--seed-grid-auto-columns:auto;grid-auto-columns:var(--seed-grid-auto-columns);--seed-grid-auto-rows:auto;grid-auto-rows:var(--seed-grid-auto-rows);--seed-grid-justify-items:stretch;justify-items:var(--seed-grid-justify-items);display:grid}.seed-grid__text{--seed-grid-columns:auto;--seed-grid-rows:auto;--seed-grid-auto-flow:row;--seed-grid-auto-columns:auto;--seed-grid-auto-rows:auto;--seed-grid-justify-items:stretch}.seed-consistent-width:before{visibility:hidden;height:0;display:block}.seed-consistent-width__text:before{font-weight:var(--seed-font-weight-regular)}.seed-consistent-width:after{visibility:hidden;height:0;display:block}.seed-consistent-width__text:after{font-weight:var(--seed-font-weight-bold)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:var(--seed-duration-d3);--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55)}:root, :root[data-seed-color-mode=system][data-seed-user-color-scheme=light], :root[data-seed-color-mode=light-only], :root [data-seed-color-mode=light-only], .seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-black-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-black-alpha-100);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-400);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-black-alpha-300);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-black-alpha-200);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-layer-floating:#fff0 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #fff0 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root[data-seed-color-mode=system][data-seed-user-color-scheme=dark], :root[data-seed-color-mode=dark-only], :root [data-seed-color-mode=dark-only], .seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-white-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-white-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-600);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-white-alpha-50);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-800);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-900);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-white-alpha-100);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-white-alpha-50);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-layer-floating:#1d202500 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #16171b00 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}.seed-action-button__root{--seed-box-flex-grow:0;flex-shrink:0;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:auto;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:auto;--seed-box-padding-top:auto;--seed-box-padding-left:auto;--seed-box-padding-right:auto;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom:0px;--seed-box-bleed-top:0px;--seed-box-bleed-left:0px;--seed-box-bleed-right:0px;margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);border:none;justify-content:center;align-items:center;display:flex;position:relative}.seed-action-button__text{font-family:inherit;font-weight:var(--seed-font-weight-bold);transition:color var(--seed-duration-color-transition) var(--seed-timing-function-easing)}.seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon{flex-shrink:0}.seed-action-button__root--variant_brandSolid{background:var(--seed-color-bg-brand-solid);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_brandSolid:active, .seed-action-button__root--variant_brandSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button__root--variant_brandSolid:disabled, .seed-action-button__root--variant_brandSolid[disabled], .seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button__text--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_brandSolid:disabled, .seed-action-button__text--variant_brandSolid[disabled], .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__prefixIcon--variant_brandSolid:disabled, .seed-action-button__prefixIcon--variant_brandSolid[disabled], .seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__suffixIcon--variant_brandSolid:disabled, .seed-action-button__suffixIcon--variant_brandSolid[disabled], .seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_brandSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__icon--variant_brandSolid:disabled, .seed-action-button__icon--variant_brandSolid[disabled], .seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_neutralSolid:active, .seed-action-button__root--variant_neutralSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button__root--variant_neutralSolid:disabled, .seed-action-button__root--variant_neutralSolid[disabled], .seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button__text--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__text--variant_neutralSolid:disabled, .seed-action-button__text--variant_neutralSolid[disabled], .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__prefixIcon--variant_neutralSolid:disabled, .seed-action-button__prefixIcon--variant_neutralSolid[disabled], .seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__suffixIcon--variant_neutralSolid:disabled, .seed-action-button__suffixIcon--variant_neutralSolid[disabled], .seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralSolid{color:var(--seed-color-fg-neutral-inverted)}.seed-action-button__icon--variant_neutralSolid:disabled, .seed-action-button__icon--variant_neutralSolid[disabled], .seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__root--variant_neutralWeak:active, .seed-action-button__root--variant_neutralWeak.seed-action-button__root--active_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button__root--variant_neutralWeak:disabled, .seed-action-button__root--variant_neutralWeak[disabled], .seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button__text--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralWeak:disabled, .seed-action-button__text--variant_neutralWeak[disabled], .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_neutralWeak:disabled, .seed-action-button__prefixIcon--variant_neutralWeak[disabled], .seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_neutralWeak:disabled, .seed-action-button__suffixIcon--variant_neutralWeak[disabled], .seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralWeak{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_neutralWeak:disabled, .seed-action-button__icon--variant_neutralWeak[disabled], .seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}.seed-action-button__root--variant_criticalSolid:active, .seed-action-button__root--variant_criticalSolid.seed-action-button__root--active_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button__root--variant_criticalSolid:disabled, .seed-action-button__root--variant_criticalSolid[disabled], .seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true{background:var(--seed-color-bg-disabled)}.seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button__text--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__text--variant_criticalSolid:disabled, .seed-action-button__text--variant_criticalSolid[disabled], .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__prefixIcon--variant_criticalSolid:disabled, .seed-action-button__prefixIcon--variant_criticalSolid[disabled], .seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__suffixIcon--variant_criticalSolid:disabled, .seed-action-button__suffixIcon--variant_criticalSolid[disabled], .seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_criticalSolid{color:var(--seed-color-palette-static-white)}.seed-action-button__icon--variant_criticalSolid:disabled, .seed-action-button__icon--variant_criticalSolid[disabled], .seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_brandOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}.seed-action-button__root--variant_brandOutline:active, .seed-action-button__root--variant_brandOutline.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_brandOutline:disabled, .seed-action-button__root--variant_brandOutline[disabled], .seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted)}.seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button__text--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__text--variant_brandOutline:disabled, .seed-action-button__text--variant_brandOutline[disabled], .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__prefixIcon--variant_brandOutline:disabled, .seed-action-button__prefixIcon--variant_brandOutline[disabled], .seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__suffixIcon--variant_brandOutline:disabled, .seed-action-button__suffixIcon--variant_brandOutline[disabled], .seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_brandOutline{color:var(--seed-color-fg-brand)}.seed-action-button__icon--variant_brandOutline:disabled, .seed-action-button__icon--variant_brandOutline[disabled], .seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_neutralOutline{background:var(--seed-color-bg-transparent);border-style:solid;border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}.seed-action-button__root--variant_neutralOutline:active, .seed-action-button__root--variant_neutralOutline.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_neutralOutline:disabled, .seed-action-button__root--variant_neutralOutline[disabled], .seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true{background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted)}.seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent)}.seed-action-button__text--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_neutralOutline:disabled, .seed-action-button__text--variant_neutralOutline[disabled], .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_neutralOutline:disabled, .seed-action-button__prefixIcon--variant_neutralOutline[disabled], .seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_neutralOutline:disabled, .seed-action-button__suffixIcon--variant_neutralOutline[disabled], .seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_neutralOutline{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_neutralOutline:disabled, .seed-action-button__icon--variant_neutralOutline[disabled], .seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--variant_ghost{--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral);background:#fff0}.seed-action-button__root--variant_ghost:active, .seed-action-button__root--variant_ghost.seed-action-button__root--active_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__root--variant_ghost:disabled, .seed-action-button__root--variant_ghost[disabled], .seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true{background:#fff0}.seed-action-button__root--variant_ghost.seed-action-button__root--loading_true{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button__text--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__text--variant_ghost:disabled, .seed-action-button__text--variant_ghost[disabled], .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__prefixIcon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__prefixIcon--variant_ghost:disabled, .seed-action-button__prefixIcon--variant_ghost[disabled], .seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__suffixIcon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__suffixIcon--variant_ghost:disabled, .seed-action-button__suffixIcon--variant_ghost[disabled], .seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__icon--variant_ghost{color:var(--seed-color-fg-neutral)}.seed-action-button__icon--variant_ghost:disabled, .seed-action-button__icon--variant_ghost[disabled], .seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true{color:var(--seed-color-fg-disabled)}.seed-action-button__root--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px}.seed-action-button__root--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px}.seed-action-button__root--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px}.seed-action-button__root--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px}.seed-action-button__root--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__text--size_xsmall-layout_withText{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button__icon--size_xsmall-layout_iconOnly{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__text--size_small-layout_withText{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText{width:var(--seed-dimension-x3_5);height:var(--seed-dimension-x3_5)}.seed-action-button__root--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button__icon--size_small-layout_iconOnly{width:var(--seed-dimension-x4);height:var(--seed-dimension-x4)}.seed-action-button__root--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__text--size_medium-layout_withText{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText{width:var(--seed-dimension-x4);height:var(--seed-dimension-x4)}.seed-action-button__root--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button__icon--size_medium-layout_iconOnly{width:18px;height:18px}.seed-action-button__root--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__text--size_large-layout_withText{font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText{width:22px;height:22px}.seed-action-button__root--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}.seed-action-button__icon--size_large-layout_iconOnly{width:22px;height:22px}.seed-bottom-sheet__positioner{--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__backdrop{opacity:0;background:var(--seed-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;top:0;right:0;bottom:0;left:0}.seed-bottom-sheet__content{z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-color-bg-layer-floating);border-top-left-radius:var(--seed-radius-r6);border-top-right-radius:var(--seed-radius-r6);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;flex:1;display:flex;position:relative;transform:translateY(100%)}.seed-bottom-sheet__header{gap:var(--seed-dimension-x2);padding-top:var(--seed-dimension-x6);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__title{color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t8);line-height:var(--seed-line-height-t8);font-weight:var(--seed-font-weight-bold);margin:0}.seed-bottom-sheet__description{color:var(--seed-color-fg-neutral-muted);font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);font-weight:var(--seed-font-weight-regular);padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);margin:0}.seed-bottom-sheet__body{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.seed-bottom-sheet__footer{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter);padding-top:var(--seed-dimension-x3);padding-bottom:var(--seed-dimension-x4);flex-direction:column;display:flex}.seed-bottom-sheet__closeButton{justify-content:center;align-items:center;display:flex;position:absolute}.seed-bottom-sheet__header--headerAlign_left{justify-content:flex-start}.seed-bottom-sheet__title--headerAlign_left{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet__header--headerAlign_center{text-align:center;justify-content:center}.seed-bottom-sheet__title--headerAlign_center{padding-left:var(--seed-dimension-spacing-x-global-gutter);padding-right:var(--seed-dimension-spacing-x-global-gutter)}.seed-bottom-sheet-handle__root{background-color:var(--seed-color-palette-gray-400);border-radius:9999px;width:36px;height:4px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.seed-bottom-sheet-handle__touchArea{width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.seed-switch__root{justify-content:space-between;align-items:flex-start;display:flex;position:relative}.seed-switch__label{font-weight:var(--seed-font-weight-medium);color:var(--seed-color-fg-neutral);transition:opacity var(--seed-duration-d1) var(--seed-timing-function-easing)}.seed-switch__label:disabled, .seed-switch__label[disabled], .seed-switch__label.seed-switch__label--disabled_true{opacity:.58}.seed-switch__root--size_16{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x1_5);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 16px) / 2)}.seed-switch__label--size_16{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2)}.seed-switch__root--size_24{min-height:var(--seed-dimension-x6);gap:var(--seed-dimension-x2);--switchmark-margin-top:calc((var(--seed-dimension-x6) - 24px) / 2)}.seed-switch__label--size_24{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);margin-top:calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2)}.seed-switch__root--size_32{min-height:var(--seed-dimension-x8);gap:var(--seed-dimension-x2_5);--switchmark-margin-top:calc((var(--seed-dimension-x8) - 32px) / 2)}.seed-switch__label--size_32{font-size:var(--seed-font-size-t5);line-height:var(--seed-line-height-t5);margin-top:calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2)}.seed-switchmark__root{border-radius:var(--seed-radius-full);background-color:var(--seed-color-palette-gray-600);margin:var(--switchmark-margin-top,0) 0;transition:background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);display:flex;position:relative}.seed-switchmark__root:disabled, .seed-switchmark__root[disabled], .seed-switchmark__root.seed-switchmark__root--disabled_true{opacity:.38}.seed-switchmark__thumb{border-radius:var(--seed-radius-full);transition:transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;transform:scale(.8)}.seed-switchmark__root--tone_neutral.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-neutral-inverted)}.seed-switchmark__root--tone_neutral:disabled.seed-switchmark__root--checked_true, .seed-switchmark__root--tone_neutral[disabled][data-checked], .seed-switchmark__root--tone_neutral.seed-switchmark__root--disabled_true[data-checked]{background-color:var(--seed-color-palette-gray-600)}.seed-switchmark__thumb--tone_neutral{background-color:var(--seed-color-fg-neutral-inverted)}.seed-switchmark__thumb--tone_neutral:disabled, .seed-switchmark__thumb--tone_neutral[disabled], .seed-switchmark__thumb--tone_neutral.seed-switchmark__thumb--disabled_true{background-color:var(--seed-color-palette-static-black-alpha-700)}.seed-switchmark__root--tone_brand.seed-switchmark__root--checked_true{background-color:var(--seed-color-bg-brand-solid)}.seed-switchmark__thumb--tone_brand{background-color:var(--seed-color-palette-static-white)}.seed-switchmark__root--size_16{min-width:26px;min-height:16px;padding:2px}.seed-switchmark__thumb--size_16{width:12px;height:12px}.seed-switchmark__thumb--size_16.seed-switchmark__thumb--checked_true{transform:scale(1)translate(10px)}.seed-switchmark__root--size_24{min-width:38px;min-height:24px;padding:2px}.seed-switchmark__thumb--size_24{width:20px;height:20px}.seed-switchmark__thumb--size_24.seed-switchmark__thumb--checked_true{transform:scale(1)translate(14px)}.seed-switchmark__root--size_32{min-width:52px;min-height:32px;padding:3px}.seed-switchmark__thumb--size_32{width:26px;height:26px}.seed-switchmark__thumb--size_32.seed-switchmark__thumb--checked_true{transform:scale(1)translate(20px)}.seed-tag-group__root{flex-flow:wrap;align-items:center;width:100%;display:flex}.seed-tag-group__separator{color:var(--seed-color-palette-gray-600);font-weight:var(--seed-font-weight-regular);margin-left:var(--seed-dimension-x0_5);margin-right:var(--seed-dimension-x0_5);flex-shrink:0}.seed-tag-group__separator--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group__separator--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group__separator--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__root{flex-direction:row;flex-shrink:0;align-items:center;display:flex}.seed-tag-group-item__label--size_t2{font-size:var(--seed-font-size-t2);line-height:var(--seed-line-height-t2)}.seed-tag-group-item__label--size_t3{font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-tag-group-item__label--size_t4{font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-tag-group-item__label--weight_regular{font-weight:var(--seed-font-weight-regular)}.seed-tag-group-item__label--weight_bold{font-weight:var(--seed-font-weight-bold)}.seed-tag-group-item__label--tone_neutralSubtle{color:var(--seed-color-fg-neutral-subtle)}.seed-tag-group-item__label--tone_neutral{color:var(--seed-color-fg-neutral)}.seed-tag-group-item__label--tone_brand{color:var(--seed-color-fg-brand)}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-circle-head{}@keyframes progress-circle-tail{}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--initial-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--initial-transform,100%), 0)}} \ No newline at end of file diff --git a/packages/lynx-css/recipes/action-button.css b/packages/lynx-css/recipes/action-button.css index be35b8b0e..a5f7813a8 100644 --- a/packages/lynx-css/recipes/action-button.css +++ b/packages/lynx-css/recipes/action-button.css @@ -1,5 +1,5 @@ -.seed-action-button { - display: inline-flex; +.seed-action-button__root { + display: flex; position: relative; align-items: center; justify-content: center; @@ -25,347 +25,321 @@ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1); margin-left: calc(var(--seed-box-bleed-left) * -1); margin-right: calc(var(--seed-box-bleed-right) * -1); -}.seed-action-button__text { - --seed-box-flex-grow: 0; - --seed-box-min-width: auto; - --seed-box-padding-bottom: auto; - --seed-box-padding-top: auto; - --seed-box-padding-left: auto; - --seed-box-padding-right: auto; - --seed-box-bleed-bottom: 0px; - --seed-box-bleed-top: 0px; - --seed-box-bleed-left: 0px; - --seed-box-bleed-right: 0px; - font-family: inherit; -} -.seed-action-button { transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); } .seed-action-button__text { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); + font-family: inherit; + font-weight: var(--seed-font-weight-bold); + transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing); } -.seed-action-button--variant_brandSolid { - background: var(--seed-color-bg-brand-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); +.seed-action-button__prefixIcon { + flex-shrink: 0; } -.seed-action-button__text--variant_brandSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); +.seed-action-button__suffixIcon { + flex-shrink: 0; +} +.seed-action-button__icon { + flex-shrink: 0; +} +.seed-action-button__root--variant_brandSolid { + background: var(--seed-color-bg-brand-solid); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_brandSolid:active { +.seed-action-button__root--variant_brandSolid:active { background: var(--seed-color-bg-brand-solid-pressed); } -.seed-action-button--variant_brandSolid.seed-action-button--disabled_true { +.seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-brand-solid-pressed); +} +.seed-action-button__text--variant_brandSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-brand-solid-pressed); +.seed-action-button__prefixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); } -.seed-action-button--variant_neutralSolid { - background: var(--seed-color-bg-neutral-inverted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); +.seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_neutralSolid { - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); +.seed-action-button__suffixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); +} +.seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_brandSolid { + color: var(--seed-color-palette-static-white); +} +.seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralSolid { + background: var(--seed-color-bg-neutral-inverted); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-fg-neutral-inverted); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralSolid:active { +.seed-action-button__root--variant_neutralSolid:active { background: var(--seed-color-bg-neutral-inverted-pressed); } -.seed-action-button--variant_neutralSolid.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-inverted-pressed); +} +.seed-action-button__text--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-inverted-pressed); +.seed-action-button__prefixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } -.seed-action-button--variant_neutralWeak { - background: var(--seed-color-bg-neutral-weak); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); +.seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_neutralWeak { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); +.seed-action-button__suffixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); +} +.seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); +} +.seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralWeak { + background: var(--seed-color-bg-neutral-weak); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralWeak:active { +.seed-action-button__root--variant_neutralWeak:active { background: var(--seed-color-bg-neutral-weak-pressed); } -.seed-action-button--variant_neutralWeak.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-weak-pressed); +} +.seed-action-button__text--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralWeak.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-weak-pressed); +.seed-action-button__prefixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } -.seed-action-button--variant_criticalSolid { - background: var(--seed-color-bg-critical-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); +.seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_criticalSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); +.seed-action-button__suffixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_criticalSolid { + background: var(--seed-color-bg-critical-solid); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_criticalSolid:active { +.seed-action-button__root--variant_criticalSolid:active { background: var(--seed-color-bg-critical-solid-pressed); } -.seed-action-button--variant_criticalSolid.seed-action-button--disabled_true { +.seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-critical-solid-pressed); +} +.seed-action-button__text--variant_criticalSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_criticalSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-critical-solid-pressed); +.seed-action-button__prefixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} +.seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__suffixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} +.seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandOutline { +.seed-action-button__icon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); +} +.seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_brandOutline { border-style: solid; background: var(--seed-color-bg-transparent); border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); - --track-color: var(--seed-color-palette-carrot-200); - --range-color: var(--seed-color-bg-brand-solid); -} -.seed-action-button__text--variant_brandOutline { - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); --track-color: var(--seed-color-palette-carrot-200); --range-color: var(--seed-color-bg-brand-solid); - color: var(--seed-color-fg-brand); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_brandOutline:active { +.seed-action-button__root--variant_brandOutline:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_brandOutline.seed-action-button--disabled_true { +.seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); +} +.seed-action-button__text--variant_brandOutline { + color: var(--seed-color-fg-brand); } .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_brandOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); +.seed-action-button__prefixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); +} +.seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralOutline { +.seed-action-button__suffixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); +} +.seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_brandOutline { + color: var(--seed-color-fg-brand); +} +.seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralOutline { border-style: solid; background: var(--seed-color-bg-transparent); border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); -} -.seed-action-button__text--variant_neutralOutline { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } -.seed-action-button--variant_neutralOutline:active { +.seed-action-button__root--variant_neutralOutline:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_neutralOutline.seed-action-button--disabled_true { +.seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true { background: var(--seed-color-bg-transparent); border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); +} +.seed-action-button__text--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_neutralOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); +.seed-action-button__prefixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } -.seed-action-button--variant_ghost { - background: #ffffff00; - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); +.seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } -.seed-action-button__text--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); +.seed-action-button__suffixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_ghost { + background: #ffffff00; --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-box-color); - font-weight: var(--seed-font-weight); } -.seed-action-button--variant_ghost:active { +.seed-action-button__root--variant_ghost:active { background: var(--seed-color-bg-transparent-pressed); } -.seed-action-button--variant_ghost.seed-action-button--disabled_true { +.seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true { background: #ffffff00; - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--variant_ghost.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent-pressed); +} +.seed-action-button__text--variant_ghost { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } -.seed-action-button--variant_ghost.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent-pressed); +.seed-action-button__prefixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__suffixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } -.seed-action-button--size_xsmall { +.seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__icon--variant_ghost { + color: var(--seed-color-fg-neutral); +} +.seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); +} +.seed-action-button__root--size_xsmall { height: var(--seed-dimension-x8); border-radius: var(--seed-radius-full); --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); } -.seed-action-button__text--size_xsmall { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); -} -.seed-action-button--size_small { +.seed-action-button__root--size_small { height: var(--seed-dimension-x9); border-radius: var(--seed-radius-r2); --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); -} -.seed-action-button__text--size_small { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); } -.seed-action-button--size_medium { +.seed-action-button__root--size_medium { height: var(--seed-dimension-x10); border-radius: var(--seed-radius-r2); --size: 16px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; -} -.seed-action-button__text--size_medium { - --size: 16px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } -.seed-action-button--size_large { +.seed-action-button__root--size_large { height: var(--seed-dimension-x13); border-radius: var(--seed-radius-r3); --size: 18px; --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; } -.seed-action-button__text--size_large { - --size: 18px; - --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; -} -.seed-action-button--size_xsmall-layout_withText { +.seed-action-button__root--size_xsmall-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -373,27 +347,29 @@ --seed-box-padding-bottom: var(--seed-dimension-x1_5); } .seed-action-button__text--size_xsmall-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); } -.seed-action-button--size_xsmall-layout_iconOnly { +.seed-action-button__prefixIcon--size_xsmall-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} +.seed-action-button__suffixIcon--size_xsmall-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} +.seed-action-button__root--size_xsmall-layout_iconOnly { min-width: var(--seed-dimension-x8); --seed-box-padding-left: var(--seed-dimension-x1_5); --seed-box-padding-right: var(--seed-dimension-x1_5); --seed-box-padding-top: var(--seed-dimension-x1_5); --seed-box-padding-bottom: var(--seed-dimension-x1_5); } -.seed-action-button__text--size_xsmall-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x1_5); - --seed-box-padding-right: var(--seed-dimension-x1_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); +.seed-action-button__icon--size_xsmall-layout_iconOnly { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } -.seed-action-button--size_small-layout_withText { +.seed-action-button__root--size_small-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -401,27 +377,29 @@ --seed-box-padding-bottom: var(--seed-dimension-x2); } .seed-action-button__text--size_small-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } -.seed-action-button--size_small-layout_iconOnly { +.seed-action-button__prefixIcon--size_small-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} +.seed-action-button__suffixIcon--size_small-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); +} +.seed-action-button__root--size_small-layout_iconOnly { min-width: var(--seed-dimension-x9); --seed-box-padding-left: var(--seed-dimension-x2); --seed-box-padding-right: var(--seed-dimension-x2); --seed-box-padding-top: var(--seed-dimension-x2); --seed-box-padding-bottom: var(--seed-dimension-x2); } -.seed-action-button__text--size_small-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2); - --seed-box-padding-right: var(--seed-dimension-x2); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); +.seed-action-button__icon--size_small-layout_iconOnly { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); } -.seed-action-button--size_medium-layout_withText { +.seed-action-button__root--size_medium-layout_withText { gap: var(--seed-dimension-x1_5); --seed-box-padding-left: var(--seed-dimension-x4); --seed-box-padding-right: var(--seed-dimension-x4); @@ -429,27 +407,29 @@ --seed-box-padding-bottom: var(--seed-dimension-x2_5); } .seed-action-button__text--size_medium-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x4); - --seed-box-padding-right: var(--seed-dimension-x4); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } -.seed-action-button--size_medium-layout_iconOnly { +.seed-action-button__prefixIcon--size_medium-layout_withText { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); +} +.seed-action-button__suffixIcon--size_medium-layout_withText { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); +} +.seed-action-button__root--size_medium-layout_iconOnly { min-width: var(--seed-dimension-x10); --seed-box-padding-left: var(--seed-dimension-x2_5); --seed-box-padding-right: var(--seed-dimension-x2_5); --seed-box-padding-top: var(--seed-dimension-x2_5); --seed-box-padding-bottom: var(--seed-dimension-x2_5); } -.seed-action-button__text--size_medium-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2_5); - --seed-box-padding-right: var(--seed-dimension-x2_5); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); +.seed-action-button__icon--size_medium-layout_iconOnly { + width: 18px; + height: 18px; } -.seed-action-button--size_large-layout_withText { +.seed-action-button__root--size_large-layout_withText { gap: var(--seed-dimension-x2); --seed-box-padding-left: var(--seed-dimension-x5); --seed-box-padding-right: var(--seed-dimension-x5); @@ -457,23 +437,25 @@ --seed-box-padding-bottom: var(--seed-dimension-x3_5); } .seed-action-button__text--size_large-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x5); - --seed-box-padding-right: var(--seed-dimension-x5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); } -.seed-action-button--size_large-layout_iconOnly { +.seed-action-button__prefixIcon--size_large-layout_withText { + width: 22px; + height: 22px; +} +.seed-action-button__suffixIcon--size_large-layout_withText { + width: 22px; + height: 22px; +} +.seed-action-button__root--size_large-layout_iconOnly { min-width: var(--seed-dimension-x13); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); --seed-box-padding-top: var(--seed-dimension-x3_5); --seed-box-padding-bottom: var(--seed-dimension-x3_5); } -.seed-action-button__text--size_large-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); +.seed-action-button__icon--size_large-layout_iconOnly { + width: 22px; + height: 22px; } \ No newline at end of file diff --git a/packages/lynx-css/recipes/action-button.d.ts b/packages/lynx-css/recipes/action-button.d.ts index b602a5382..48c35ea91 100644 --- a/packages/lynx-css/recipes/action-button.d.ts +++ b/packages/lynx-css/recipes/action-button.d.ts @@ -11,8 +11,7 @@ declare interface ActionButtonVariant { * @default "withText" */ layout: "withText" | "iconOnly"; - disabled?: boolean; - loading?: boolean;} +} declare type ActionButtonVariantMap = { [key in keyof ActionButtonVariant]: Array; @@ -20,7 +19,7 @@ declare type ActionButtonVariantMap = { export declare type ActionButtonVariantProps = Partial; -export declare type ActionButtonSlotName = "root" | "text"; +export declare type ActionButtonSlotName = "root" | "text" | "prefixIcon" | "suffixIcon" | "icon"; export declare const actionButtonVariantMap: ActionButtonVariantMap; diff --git a/packages/lynx-css/recipes/action-button.layered.css b/packages/lynx-css/recipes/action-button.layered.css index 192caad3f..cb204f746 100644 --- a/packages/lynx-css/recipes/action-button.layered.css +++ b/packages/lynx-css/recipes/action-button.layered.css @@ -1,5 +1,5 @@ @layer seed-components { - .seed-action-button { + .seed-action-button__root { --seed-box-flex-grow: 0; flex-shrink: 0; flex-grow: var(--seed-box-flex-grow); @@ -21,547 +21,411 @@ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1); margin-left: calc(var(--seed-box-bleed-left) * -1); margin-right: calc(var(--seed-box-bleed-right) * -1); + transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); border: none; justify-content: center; align-items: center; - display: inline-flex; + display: flex; position: relative; } - .seed-action-button__text { - --seed-box-flex-grow: 0; - --seed-box-min-width: auto; - --seed-box-padding-bottom: auto; - --seed-box-padding-top: auto; - --seed-box-padding-left: auto; - --seed-box-padding-right: auto; - --seed-box-bleed-bottom: 0px; - --seed-box-bleed-top: 0px; - --seed-box-bleed-left: 0px; - --seed-box-bleed-right: 0px; - } .seed-action-button__text { - --seed-box-flex-grow: 0; - --seed-box-min-width: auto; - --seed-box-padding-bottom: auto; - --seed-box-padding-top: auto; - --seed-box-padding-left: auto; - --seed-box-padding-right: auto; - --seed-box-bleed-bottom: 0px; - --seed-box-bleed-top: 0px; - --seed-box-bleed-left: 0px; - --seed-box-bleed-right: 0px; font-family: inherit; + font-weight: var(--seed-font-weight-bold); + transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing); } - .seed-action-button, .seed-action-button__text { - transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing); + .seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon { + flex-shrink: 0; } - .seed-action-button--variant_brandSolid { + .seed-action-button__root--variant_brandSolid { background: var(--seed-color-bg-brand-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); } - .seed-action-button__text--variant_brandSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__root--variant_brandSolid:active { + background: var(--seed-color-bg-brand-solid-pressed); } - .seed-action-button__text--variant_brandSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); + .seed-action-button__root--variant_brandSolid.seed-action-button__root--disabled_true { + background: var(--seed-color-bg-disabled); } - .seed-action-button--variant_brandSolid:active { + .seed-action-button__root--variant_brandSolid.seed-action-button__root--loading_true { background: var(--seed-color-bg-brand-solid-pressed); } - .seed-action-button--variant_brandSolid.seed-action-button--disabled_true { - background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__text--variant_brandSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__prefixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__prefixIcon--variant_brandSolid.seed-action-button__prefixIcon--disabled_true { color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-brand-solid-pressed); + .seed-action-button__suffixIcon--variant_brandSolid { + color: var(--seed-color-palette-static-white); } - .seed-action-button--variant_neutralSolid { - background: var(--seed-color-bg-neutral-inverted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__suffixIcon--variant_brandSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralSolid { - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__icon--variant_brandSolid { + color: var(--seed-color-palette-static-white); } - .seed-action-button__text--variant_neutralSolid { - --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted); - --seed-icon-color: var(--seed-color-fg-neutral-inverted); + .seed-action-button__icon--variant_brandSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralSolid { + background: var(--seed-color-bg-neutral-inverted); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-fg-neutral-inverted); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_neutralSolid:active { + .seed-action-button__root--variant_neutralSolid:active { background: var(--seed-color-bg-neutral-inverted-pressed); } - .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true { + .seed-action-button__root--variant_neutralSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_neutralSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-inverted-pressed); + } + + .seed-action-button__text--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-inverted-pressed); + .seed-action-button__prefixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } - .seed-action-button--variant_neutralWeak { - background: var(--seed-color-bg-neutral-weak); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); + .seed-action-button__prefixIcon--variant_neutralSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralWeak { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); + .seed-action-button__suffixIcon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); } - .seed-action-button__text--variant_neutralWeak { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); + .seed-action-button__suffixIcon--variant_neutralSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_neutralSolid { + color: var(--seed-color-fg-neutral-inverted); + } + + .seed-action-button__icon--variant_neutralSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralWeak { + background: var(--seed-color-bg-neutral-weak); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_neutralWeak:active { + .seed-action-button__root--variant_neutralWeak:active { background: var(--seed-color-bg-neutral-weak-pressed); } - .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true { + .seed-action-button__root--variant_neutralWeak.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_neutralWeak.seed-action-button__root--loading_true { + background: var(--seed-color-bg-neutral-weak-pressed); + } + + .seed-action-button__text--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralWeak.seed-action-button--loading_true { - background: var(--seed-color-bg-neutral-weak-pressed); + .seed-action-button__prefixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } - .seed-action-button--variant_criticalSolid { - background: var(--seed-color-bg-critical-solid); - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__prefixIcon--variant_neutralWeak.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_criticalSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); - --track-color: var(--seed-color-palette-static-white-alpha-300); - --range-color: var(--seed-color-palette-static-white); + .seed-action-button__suffixIcon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); } - .seed-action-button__text--variant_criticalSolid { - --seed-prefix-icon-color: var(--seed-color-palette-static-white); - --seed-suffix-icon-color: var(--seed-color-palette-static-white); - --seed-icon-color: var(--seed-color-palette-static-white); + .seed-action-button__suffixIcon--variant_neutralWeak.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_neutralWeak { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__icon--variant_neutralWeak.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_criticalSolid { + background: var(--seed-color-bg-critical-solid); --track-color: var(--seed-color-palette-static-white-alpha-300); --range-color: var(--seed-color-palette-static-white); - color: var(--seed-color-palette-static-white); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_criticalSolid:active { + .seed-action-button__root--variant_criticalSolid:active { background: var(--seed-color-bg-critical-solid-pressed); } - .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true { + .seed-action-button__root--variant_criticalSolid.seed-action-button__root--disabled_true { background: var(--seed-color-bg-disabled); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_criticalSolid.seed-action-button__root--loading_true { + background: var(--seed-color-bg-critical-solid-pressed); + } + + .seed-action-button__text--variant_criticalSolid { + color: var(--seed-color-palette-static-white); } .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_criticalSolid.seed-action-button--loading_true { - background: var(--seed-color-bg-critical-solid-pressed); + .seed-action-button__prefixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); } - .seed-action-button--variant_brandOutline { + .seed-action-button__prefixIcon--variant_criticalSolid.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__suffixIcon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__suffixIcon--variant_criticalSolid.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__icon--variant_criticalSolid { + color: var(--seed-color-palette-static-white); + } + + .seed-action-button__icon--variant_criticalSolid.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_brandOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); --track-color: var(--seed-color-palette-carrot-200); --range-color: var(--seed-color-bg-brand-solid); } - .seed-action-button__text--variant_brandOutline { - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); - --track-color: var(--seed-color-palette-carrot-200); - --range-color: var(--seed-color-bg-brand-solid); + .seed-action-button__root--variant_brandOutline:active { + background: var(--seed-color-bg-transparent-pressed); + } + + .seed-action-button__root--variant_brandOutline.seed-action-button__root--disabled_true { + background: var(--seed-color-bg-transparent); + border-color: var(--seed-color-stroke-neutral-muted); + } + + .seed-action-button__root--variant_brandOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); } .seed-action-button__text--variant_brandOutline { - --seed-prefix-icon-color: var(--seed-color-fg-brand); - --seed-suffix-icon-color: var(--seed-color-fg-brand); - --seed-icon-color: var(--seed-color-fg-brand); - --track-color: var(--seed-color-palette-carrot-200); - --range-color: var(--seed-color-bg-brand-solid); color: var(--seed-color-fg-brand); - font-weight: var(--seed-font-weight-bold); } - .seed-action-button--variant_brandOutline:active { - background: var(--seed-color-bg-transparent-pressed); + .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandOutline.seed-action-button--disabled_true { - background: var(--seed-color-bg-transparent); - border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__prefixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); } - .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__prefixIcon--variant_brandOutline.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__suffixIcon--variant_brandOutline { + color: var(--seed-color-fg-brand); + } + + .seed-action-button__suffixIcon--variant_brandOutline.seed-action-button__suffixIcon--disabled_true { color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_brandOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); + .seed-action-button__icon--variant_brandOutline { + color: var(--seed-color-fg-brand); } - .seed-action-button--variant_neutralOutline { + .seed-action-button__icon--variant_brandOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_neutralOutline { background: var(--seed-color-bg-transparent); border-style: solid; border-width: 1px; border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); } - .seed-action-button__text--variant_neutralOutline { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); + .seed-action-button__root--variant_neutralOutline:active { + background: var(--seed-color-bg-transparent-pressed); } - .seed-action-button__text--variant_neutralOutline { - --seed-prefix-icon-color: var(--seed-color-fg-neutral); - --seed-suffix-icon-color: var(--seed-color-fg-neutral); - --seed-icon-color: var(--seed-color-fg-neutral); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); - color: var(--seed-color-fg-neutral); - font-weight: var(--seed-font-weight-bold); + .seed-action-button__root--variant_neutralOutline.seed-action-button__root--disabled_true { + background: var(--seed-color-bg-transparent); + border-color: var(--seed-color-stroke-neutral-muted); } - .seed-action-button--variant_neutralOutline:active { - background: var(--seed-color-bg-transparent-pressed); + .seed-action-button__root--variant_neutralOutline.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent); } - .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true { - background: var(--seed-color-bg-transparent); - border-color: var(--seed-color-stroke-neutral-muted); - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__text--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__prefixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); + } + + .seed-action-button__prefixIcon--variant_neutralOutline.seed-action-button__prefixIcon--disabled_true { color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_neutralOutline.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent); + .seed-action-button__suffixIcon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } - .seed-action-button--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); - background: #fff0; + .seed-action-button__suffixIcon--variant_neutralOutline.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); - --track-color: var(--seed-color-palette-gray-500); - --range-color: var(--seed-color-fg-neutral); + .seed-action-button__icon--variant_neutralOutline { + color: var(--seed-color-fg-neutral); } - .seed-action-button__text--variant_ghost { - --seed-box-color: var(--seed-color-fg-neutral); - --seed-prefix-icon-color: var(--seed-box-color); - --seed-suffix-icon-color: var(--seed-box-color); - --seed-icon-color: var(--seed-box-color); - --seed-font-weight: var(--seed-font-weight-bold); + .seed-action-button__icon--variant_neutralOutline.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); + } + + .seed-action-button__root--variant_ghost { --track-color: var(--seed-color-palette-gray-500); --range-color: var(--seed-color-fg-neutral); - color: var(--seed-box-color); - font-weight: var(--seed-font-weight); + background: #fff0; } - .seed-action-button--variant_ghost:active { + .seed-action-button__root--variant_ghost:active { background: var(--seed-color-bg-transparent-pressed); } - .seed-action-button--variant_ghost.seed-action-button--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_ghost.seed-action-button__root--disabled_true { background: #fff0; } - .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); + .seed-action-button__root--variant_ghost.seed-action-button__root--loading_true { + background: var(--seed-color-bg-transparent-pressed); + } + + .seed-action-button__text--variant_ghost { + color: var(--seed-color-fg-neutral); } .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true { - --seed-prefix-icon-color: var(--seed-color-fg-disabled); - --seed-suffix-icon-color: var(--seed-color-fg-disabled); - --seed-icon-color: var(--seed-color-fg-disabled); color: var(--seed-color-fg-disabled); } - .seed-action-button--variant_ghost.seed-action-button--loading_true { - background: var(--seed-color-bg-transparent-pressed); + .seed-action-button__prefixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } - .seed-action-button--size_xsmall { - height: var(--seed-dimension-x8); - border-radius: var(--seed-radius-full); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); + .seed-action-button__prefixIcon--variant_ghost.seed-action-button__prefixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--size_xsmall { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); + .seed-action-button__suffixIcon--variant_ghost { + color: var(--seed-color-fg-neutral); } - .seed-action-button__text--size_xsmall { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x3_5); + .seed-action-button__suffixIcon--variant_ghost.seed-action-button__suffixIcon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button--size_small { - height: var(--seed-dimension-x9); - border-radius: var(--seed-radius-r2); - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); + .seed-action-button__icon--variant_ghost { + color: var(--seed-color-fg-neutral); } - .seed-action-button__text--size_small { - --size: 14px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); + .seed-action-button__icon--variant_ghost.seed-action-button__icon--disabled_true { + color: var(--seed-color-fg-disabled); } - .seed-action-button__text--size_small { + .seed-action-button__root--size_xsmall { + height: var(--seed-dimension-x8); + border-radius: var(--seed-radius-full); --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x3_5); - --seed-suffix-icon-size: var(--seed-dimension-x3_5); - --seed-icon-size: var(--seed-dimension-x4); } - .seed-action-button--size_medium { - height: var(--seed-dimension-x10); + .seed-action-button__root--size_small { + height: var(--seed-dimension-x9); border-radius: var(--seed-radius-r2); - --size: 16px; - --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; - } - - .seed-action-button__text--size_medium { - --size: 16px; + --size: 14px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } - .seed-action-button__text--size_medium { + .seed-action-button__root--size_medium { + height: var(--seed-dimension-x10); + border-radius: var(--seed-radius-r2); --size: 16px; --thickness: 2px; - --seed-prefix-icon-size: var(--seed-dimension-x4); - --seed-suffix-icon-size: var(--seed-dimension-x4); - --seed-icon-size: 18px; } - .seed-action-button--size_large { + .seed-action-button__root--size_large { height: var(--seed-dimension-x13); border-radius: var(--seed-radius-r3); --size: 18px; --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; - } - - .seed-action-button__text--size_large { - --size: 18px; - --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; - } - - .seed-action-button__text--size_large { - --size: 18px; - --thickness: 2px; - --seed-prefix-icon-size: 22px; - --seed-suffix-icon-size: 22px; - --seed-icon-size: 22px; } - .seed-action-button--size_xsmall-layout_withText { + .seed-action-button__root--size_xsmall-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -570,44 +434,29 @@ } .seed-action-button__text--size_xsmall-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); - } - - .seed-action-button__text--size_xsmall-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); } - .seed-action-button--size_xsmall-layout_iconOnly { - min-width: var(--seed-dimension-x8); - --seed-box-padding-left: var(--seed-dimension-x1_5); - --seed-box-padding-right: var(--seed-dimension-x1_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); + .seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } - .seed-action-button__text--size_xsmall-layout_iconOnly { + .seed-action-button__root--size_xsmall-layout_iconOnly { + min-width: var(--seed-dimension-x8); --seed-box-padding-left: var(--seed-dimension-x1_5); --seed-box-padding-right: var(--seed-dimension-x1_5); --seed-box-padding-top: var(--seed-dimension-x1_5); --seed-box-padding-bottom: var(--seed-dimension-x1_5); } - .seed-action-button__text--size_xsmall-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x1_5); - --seed-box-padding-right: var(--seed-dimension-x1_5); - --seed-box-padding-top: var(--seed-dimension-x1_5); - --seed-box-padding-bottom: var(--seed-dimension-x1_5); + .seed-action-button__icon--size_xsmall-layout_iconOnly { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } - .seed-action-button--size_small-layout_withText { + .seed-action-button__root--size_small-layout_withText { gap: var(--seed-dimension-x1); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); @@ -616,44 +465,29 @@ } .seed-action-button__text--size_small-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); - } - - .seed-action-button__text--size_small-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } - .seed-action-button--size_small-layout_iconOnly { - min-width: var(--seed-dimension-x9); - --seed-box-padding-left: var(--seed-dimension-x2); - --seed-box-padding-right: var(--seed-dimension-x2); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); + .seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText { + width: var(--seed-dimension-x3_5); + height: var(--seed-dimension-x3_5); } - .seed-action-button__text--size_small-layout_iconOnly { + .seed-action-button__root--size_small-layout_iconOnly { + min-width: var(--seed-dimension-x9); --seed-box-padding-left: var(--seed-dimension-x2); --seed-box-padding-right: var(--seed-dimension-x2); --seed-box-padding-top: var(--seed-dimension-x2); --seed-box-padding-bottom: var(--seed-dimension-x2); } - .seed-action-button__text--size_small-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2); - --seed-box-padding-right: var(--seed-dimension-x2); - --seed-box-padding-top: var(--seed-dimension-x2); - --seed-box-padding-bottom: var(--seed-dimension-x2); + .seed-action-button__icon--size_small-layout_iconOnly { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); } - .seed-action-button--size_medium-layout_withText { + .seed-action-button__root--size_medium-layout_withText { gap: var(--seed-dimension-x1_5); --seed-box-padding-left: var(--seed-dimension-x4); --seed-box-padding-right: var(--seed-dimension-x4); @@ -662,44 +496,29 @@ } .seed-action-button__text--size_medium-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x4); - --seed-box-padding-right: var(--seed-dimension-x4); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); - } - - .seed-action-button__text--size_medium-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x4); - --seed-box-padding-right: var(--seed-dimension-x4); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); } - .seed-action-button--size_medium-layout_iconOnly { - min-width: var(--seed-dimension-x10); - --seed-box-padding-left: var(--seed-dimension-x2_5); - --seed-box-padding-right: var(--seed-dimension-x2_5); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); + .seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText { + width: var(--seed-dimension-x4); + height: var(--seed-dimension-x4); } - .seed-action-button__text--size_medium-layout_iconOnly { + .seed-action-button__root--size_medium-layout_iconOnly { + min-width: var(--seed-dimension-x10); --seed-box-padding-left: var(--seed-dimension-x2_5); --seed-box-padding-right: var(--seed-dimension-x2_5); --seed-box-padding-top: var(--seed-dimension-x2_5); --seed-box-padding-bottom: var(--seed-dimension-x2_5); } - .seed-action-button__text--size_medium-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x2_5); - --seed-box-padding-right: var(--seed-dimension-x2_5); - --seed-box-padding-top: var(--seed-dimension-x2_5); - --seed-box-padding-bottom: var(--seed-dimension-x2_5); + .seed-action-button__icon--size_medium-layout_iconOnly { + width: 18px; + height: 18px; } - .seed-action-button--size_large-layout_withText { + .seed-action-button__root--size_large-layout_withText { gap: var(--seed-dimension-x2); --seed-box-padding-left: var(--seed-dimension-x5); --seed-box-padding-right: var(--seed-dimension-x5); @@ -708,40 +527,25 @@ } .seed-action-button__text--size_large-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x5); - --seed-box-padding-right: var(--seed-dimension-x5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); - } - - .seed-action-button__text--size_large-layout_withText { - --seed-box-padding-left: var(--seed-dimension-x5); - --seed-box-padding-right: var(--seed-dimension-x5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); } - .seed-action-button--size_large-layout_iconOnly { - min-width: var(--seed-dimension-x13); - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); + .seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText { + width: 22px; + height: 22px; } - .seed-action-button__text--size_large-layout_iconOnly { + .seed-action-button__root--size_large-layout_iconOnly { + min-width: var(--seed-dimension-x13); --seed-box-padding-left: var(--seed-dimension-x3_5); --seed-box-padding-right: var(--seed-dimension-x3_5); --seed-box-padding-top: var(--seed-dimension-x3_5); --seed-box-padding-bottom: var(--seed-dimension-x3_5); } - .seed-action-button__text--size_large-layout_iconOnly { - --seed-box-padding-left: var(--seed-dimension-x3_5); - --seed-box-padding-right: var(--seed-dimension-x3_5); - --seed-box-padding-top: var(--seed-dimension-x3_5); - --seed-box-padding-bottom: var(--seed-dimension-x3_5); + .seed-action-button__icon--size_large-layout_iconOnly { + width: 22px; + height: 22px; } } diff --git a/packages/lynx-css/recipes/action-button.layered.mjs b/packages/lynx-css/recipes/action-button.layered.mjs index 752811c0a..d6eb7a65d 100644 --- a/packages/lynx-css/recipes/action-button.layered.mjs +++ b/packages/lynx-css/recipes/action-button.layered.mjs @@ -4,11 +4,23 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs" const actionButtonSlotNames = [ [ "root", - "seed-action-button" + "seed-action-button__root" ], [ "text", "seed-action-button__text" + ], + [ + "prefixIcon", + "seed-action-button__prefixIcon" + ], + [ + "suffixIcon", + "seed-action-button__suffixIcon" + ], + [ + "icon", + "seed-action-button__icon" ] ]; @@ -72,12 +84,6 @@ export const actionButtonVariantMap = { "layout": [ "withText", "iconOnly" - ], - "disabled": [ - true - ], - "loading": [ - true ] }; diff --git a/packages/lynx-css/recipes/action-button.mjs b/packages/lynx-css/recipes/action-button.mjs index 434f2753a..049df02a8 100644 --- a/packages/lynx-css/recipes/action-button.mjs +++ b/packages/lynx-css/recipes/action-button.mjs @@ -4,11 +4,23 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs" const actionButtonSlotNames = [ [ "root", - "seed-action-button" + "seed-action-button__root" ], [ "text", "seed-action-button__text" + ], + [ + "prefixIcon", + "seed-action-button__prefixIcon" + ], + [ + "suffixIcon", + "seed-action-button__suffixIcon" + ], + [ + "icon", + "seed-action-button__icon" ] ]; @@ -72,12 +84,6 @@ export const actionButtonVariantMap = { "layout": [ "withText", "iconOnly" - ], - "disabled": [ - true - ], - "loading": [ - true ] }; diff --git a/packages/lynx-css/recipes/bottom-sheet.css b/packages/lynx-css/recipes/bottom-sheet.css index 9c227313a..6057e0493 100644 --- a/packages/lynx-css/recipes/bottom-sheet.css +++ b/packages/lynx-css/recipes/bottom-sheet.css @@ -25,12 +25,11 @@ display: flex; flex: 1; flex-direction: column; - box-sizing: border-box; z-index: calc(var(--sheet-z-index) + var(--layer-index, 0)); background: var(--seed-color-bg-layer-floating); border-top-left-radius: var(--seed-radius-r6); border-top-right-radius: var(--seed-radius-r6); - padding-bottom: var(--seed-safe-area-bottom); + padding-bottom: env(safe-area-inset-bottom); transform: translate3d(0, 100%, 0) } .seed-bottom-sheet__header { diff --git a/packages/lynx-css/recipes/bottom-sheet.layered.css b/packages/lynx-css/recipes/bottom-sheet.layered.css index e34d8e4e2..d182f30fb 100644 --- a/packages/lynx-css/recipes/bottom-sheet.layered.css +++ b/packages/lynx-css/recipes/bottom-sheet.layered.css @@ -6,7 +6,10 @@ align-items: flex-end; display: flex; position: fixed; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; } .seed-bottom-sheet__backdrop { @@ -14,16 +17,18 @@ background: var(--seed-color-bg-overlay); z-index: calc(var(--sheet-z-index) + var(--layer-index, 0)); position: fixed; - inset: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; } .seed-bottom-sheet__content { - box-sizing: border-box; z-index: calc(var(--sheet-z-index) + var(--layer-index, 0)); background: var(--seed-color-bg-layer-floating); border-top-left-radius: var(--seed-radius-r6); border-top-right-radius: var(--seed-radius-r6); - padding-bottom: var(--seed-safe-area-bottom); + padding-bottom: env(safe-area-inset-bottom); flex-direction: column; flex: 1; display: flex; diff --git a/packages/lynx-css/recipes/tag-group-item.css b/packages/lynx-css/recipes/tag-group-item.css index 143b740e2..04ec5b7f9 100644 --- a/packages/lynx-css/recipes/tag-group-item.css +++ b/packages/lynx-css/recipes/tag-group-item.css @@ -4,7 +4,6 @@ align-items: center; flex-shrink: 0 } -.seed-tag-group-item__label {} .seed-tag-group-item__label--size_t2 { font-size: var(--seed-font-size-t2); line-height: var(--seed-line-height-t2) diff --git a/packages/lynx-react/TODO/TIER-B-svg-blocked.md b/packages/lynx-react/TODO/TIER-B-svg-blocked.md index cbbaa994a..4487c4e02 100644 --- a/packages/lynx-react/TODO/TIER-B-svg-blocked.md +++ b/packages/lynx-react/TODO/TIER-B-svg-blocked.md @@ -7,6 +7,8 @@ - 본체가 아이콘 없이는 의미가 없는 경우(Checkbox의 체크마크, RadioGroup의 라디오 점)에는 **컴포넌트 전체를 Tier B에 둔다**. - Tier A2 래핑 컴포넌트(Dialog/BottomSheet/MenuSheet)는 **본체는 착수, CloseButton 서브컴포넌트만 Tier B로 분리**. +**Update**: ActionButton 은 WebP + `tint-color` attribute main-thread sync 패턴으로 `prefixIcon` / `suffixIcon` / `icon` prop 기반 아이콘 슬롯이 구현됨. `layout="iconOnly"` 도 지원. 동일 패턴(rootage vars → `color: var(--...)` slot CSS → main-thread `getComputedStyleProperty` 로 resolved hex 읽어 `tint-color` 세팅)은 ToggleButton/ReactionButton/ContextualFloatingButton 등 후속 컴포넌트에도 적용 가능. + --- ## 1. ToggleButton / ReactionButton / ContextualFloatingButton diff --git a/packages/lynx-react/src/components/ActionButton/ActionButton.tsx b/packages/lynx-react/src/components/ActionButton/ActionButton.tsx index 0e733c9ce..c0a572229 100644 --- a/packages/lynx-react/src/components/ActionButton/ActionButton.tsx +++ b/packages/lynx-react/src/components/ActionButton/ActionButton.tsx @@ -1,17 +1,37 @@ import { actionButton } from "@seed-design/lynx-css/recipes/action-button"; import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button"; -import * as React from "react"; +import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component"; +import type { MainThread } from "@lynx-js/types"; import clsx from "clsx"; +import * as React from "react"; +import { cloneElement, isValidElement, useMemo, type ReactElement } from "react"; -import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context"; +import { useIconColor } from "../../hooks/use-icon-color"; import { usePressTap, type UsePressTapReturn } from "../../hooks/use-press-tap"; +import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context"; +import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token"; -// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 사용하지 않는다. +// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다. // intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의 // 리터럴 JSX 정적 분석을 우회하고 `BackgroundSnapshot not found: view` 런타임 에러를 유발한다. -// 대신 아래처럼 이 파일 안에 `forwardRef` + 리터럴 `` / `` JSX 를 직접 작성한다. // (자세한 내용: `packages/lynx-react/AGENTS.md` 의 "Native tag literal JSX constraint" 섹션) -const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(actionButton); +const { ClassNamesProvider, useClassNames, PropsProvider, useProps } = + createSlotRecipeContext(actionButton); + +// recipe .d.ts 는 CSS variant 만 선언하지만 런타임은 state modifier 도 지원 +// (postcss-lynx-compat 이 pseudo selector 를 class modifier 로 변환). +type ActionButtonRuntimeVariantProps = ActionButtonVariantProps & { + disabled?: boolean; + loading?: boolean; +}; + +type IconSlotKey = "prefixIcon" | "suffixIcon" | "icon"; + +type IconElementProps = { + className?: string; + style?: React.CSSProperties; + ref?: React.Ref; +}; type ActionButtonRootOwnProps = { className?: string; @@ -26,7 +46,7 @@ type ActionButtonRootOwnProps = { const ActionButtonRoot = React.forwardRef< unknown, - ActionButtonVariantProps & ActionButtonRootOwnProps + ActionButtonRuntimeVariantProps & ActionButtonRootOwnProps >((innerProps, ref) => { const props = { layout: "withText" as const, ...innerProps }; const [variantProps, otherProps] = actionButton.splitVariantProps(props); @@ -36,15 +56,22 @@ const ActionButtonRoot = React.forwardRef< children, ...rest } = otherProps as ActionButtonRootOwnProps & Record; + const { disabled, loading } = innerProps; + const propsForContext = useMemo( + () => ({ ...variantProps, disabled, loading }) as ActionButtonRuntimeVariantProps, + [variantProps.variant, variantProps.size, variantProps.layout, disabled, loading], + ); return ( - } : {})} - {...rest} - className={clsx(classNames.root, userClassName)} - > - {children as React.ReactNode} - + + } : {})} + {...rest} + className={clsx(classNames.root, userClassName)} + > + {children as React.ReactNode} + + ); }); @@ -68,21 +95,96 @@ const ActionButtonTextSlot = React.forwardRef< }); ActionButtonTextSlot.displayName = "ActionButtonTextSlot"; +/** + * rootage vars 에서 현재 variant/size/layout 조합의 slot `size` 토큰 + * (예: `"var(--seed-dimension-x4)"`) 을 꺼낸다. 아이콘 컴포넌트가 inline + * `style={{ width, height }}` 를 박기 때문에 style prop 으로 덮어 씌워야 recipe 사이즈가 적용된다. + */ +function resolveIconSize( + variantProps: ActionButtonRuntimeVariantProps | null, + slot: IconSlotKey, +): string | undefined { + const size = variantProps?.size ?? "medium"; + // `icon` slot is only rendered under `layout="iconOnly"` and keyed at + // `sizeXxxLayoutIconOnly.enabled.icon.size`. prefixIcon/suffixIcon follow + // the current `layout` (`withText` by default) path. + const layout = slot === "icon" ? "iconOnly" : (variantProps?.layout ?? "withText"); + return resolveRecipeToken(actionButtonVars, [ + `size${capitalize(size)}Layout${capitalize(layout)}`, + "enabled", + slot, + "size", + ]); +} + +/** + * `prefixIcon` / `suffixIcon` prop 으로 전달된 아이콘 element 에 slot className + + * size(style) + main-thread tint-color ref 를 주입한다. + */ +function ActionButtonIconSlot({ + icon, + slot, +}: { + icon: ReactElement; + slot: IconSlotKey; +}) { + const classNames = useClassNames(); + const variantProps = useProps() as ActionButtonRuntimeVariantProps | null; + const { ref } = useIconColor([ + variantProps?.variant ?? null, + variantProps?.disabled ?? false, + variantProps?.loading ?? false, + ]); + const sizeVar = resolveIconSize(variantProps, slot); + const childProps = icon.props; + return cloneElement(icon, { + className: clsx(classNames[slot], childProps.className), + style: + sizeVar != null ? { width: sizeVar, height: sizeVar, ...childProps.style } : childProps.style, + ref: ref as React.Ref, + }); +} + /** * @platform Lynx * - * 미지원 기능 (Lynx 3.7 SVG 지원 후 추가 예정): - * - layout: "iconOnly": SVG 아이콘 렌더링 필요 - * - PrefixIcon / SuffixIcon: SVG 아이콘 렌더링 필요 + * 웹 대비 차이: + * - 아이콘 전달 방식: 웹의 `` 가 아니라 `prefixIcon` / + * `suffixIcon` / `icon` prop 으로 ReactElement 를 직접 넘긴다. Lynx `` 가 flex + * 컨테이너가 아니라 children 전체를 text 로 감싸면 아이콘이 flex item 이 안 되기 때문. + * - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한) * - * 웹 대비 미지원 기능: - * - color / fontWeight props: CSS variable 동적 주입 제한 - * - bleedX / bleedY props: CSS variable 동적 주입 제한 + * ```tsx + * import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill"; + * import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill"; + * + * // withText (기본) + * } + * suffixIcon={} + * > + * 라벨 + * + * + * // iconOnly — `icon` prop 과 `aria-label` 필수 + * } + * aria-label="추가" + * /> + * ``` */ -export interface ActionButtonProps extends Omit { +export interface ActionButtonProps extends Omit { children?: React.ReactNode; className?: string; flexGrow?: number; + layout?: "withText" | "iconOnly"; + icon?: ReactElement; + prefixIcon?: ReactElement; + suffixIcon?: ReactElement; + "aria-label"?: string; bindtap?: () => void; "main-thread:bindtap"?: () => void; } @@ -91,12 +193,21 @@ export const ActionButton = React.forwardRef((props, const { children, flexGrow, + layout, + icon, + prefixIcon, + suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, ...variantAndRest } = props; const { disabled = false, loading = false } = variantAndRest; const isInteractive = !disabled && !loading; + const isIconOnly = layout === "iconOnly"; + + if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) { + console.warn('ActionButton: `layout="iconOnly"` requires `aria-label` for accessibility.'); + } const { pressed: _pressed, ...pressTapHandlers } = usePressTap({ disabled: !isInteractive, @@ -107,11 +218,26 @@ export const ActionButton = React.forwardRef((props, return ( - {loading ? children : {children}} + {isIconOnly ? ( + icon != null && isValidElement(icon) ? ( + + ) : null + ) : ( + <> + {prefixIcon != null && isValidElement(prefixIcon) ? ( + + ) : null} + {loading ? children : {children}} + {suffixIcon != null && isValidElement(suffixIcon) ? ( + + ) : null} + + )} ); }); diff --git a/packages/lynx-react/src/hooks/use-icon-color.ts b/packages/lynx-react/src/hooks/use-icon-color.ts new file mode 100644 index 000000000..107ee8e7f --- /dev/null +++ b/packages/lynx-react/src/hooks/use-icon-color.ts @@ -0,0 +1,51 @@ +import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react"; +import type { MainThread } from "@lynx-js/types"; +import type { DependencyList, RefObject } from "react"; + +type IconElement = MainThread.Element & { + getComputedStyleProperty?: (name: string) => string; + getComputedCssProperty?: (name: string) => string; +}; + +// Lynx `` 의 `tint-color` attribute 는 concrete color(hex/rgb) 만 받는다. CSS +// `color: var(--seed-color-...)` 를 slot 에 걸면 `getComputedStyleProperty("color")` 가 +// resolved hex 를 돌려주므로 main-thread 에서 한번 읽어 `tint-color` 로 mirror 한다. +function syncTintColor(ref: RefObject) { + "main thread"; + + const el = ref.current; + if (!el) return; + + let color: string | undefined; + if (typeof el.getComputedStyleProperty === "function") { + color = el.getComputedStyleProperty("color"); + } else if (typeof el.getComputedCssProperty === "function") { + color = el.getComputedCssProperty("color"); + } + + if (color) { + el.setAttribute("tint-color", color); + } +} + +/** + * Lynx `` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어 + * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화. + * + * ```tsx + * const { ref } = useIconColor([variant, disabled, loading]); + * return cloneElement(iconChild, { ref }); + * ``` + */ +export function useIconColor(deps: DependencyList): { + ref: RefObject; +} { + const ref = useMainThreadRef(null); + + // biome-ignore lint/correctness/useExhaustiveDependencies: deps 는 caller 가 책임. + useEffect(() => { + runOnMainThread(syncTintColor)(ref); + }, deps); + + return { ref }; +} diff --git a/packages/lynx-react/src/utils/create-slot-recipe-context.tsx b/packages/lynx-react/src/utils/create-slot-recipe-context.tsx index 0210020ee..3a024b14c 100644 --- a/packages/lynx-react/src/utils/create-slot-recipe-context.tsx +++ b/packages/lynx-react/src/utils/create-slot-recipe-context.tsx @@ -60,7 +60,9 @@ export function createSlotRecipeContext< return ( - + + + ); }; @@ -89,11 +91,13 @@ export function createSlotRecipeContext< return ( - + + + ); }); diff --git a/packages/lynx-react/src/utils/resolve-recipe-token.ts b/packages/lynx-react/src/utils/resolve-recipe-token.ts new file mode 100644 index 000000000..050f81d53 --- /dev/null +++ b/packages/lynx-react/src/utils/resolve-recipe-token.ts @@ -0,0 +1,47 @@ +/** + * Rootage vars 객체에서 `path` 를 따라 token 값(주로 `"var(--seed-...)"` 스트링)을 꺼낸다. + * + * 쓰임새: Lynx `` 의 `tint-color` / `width` / `height` 처럼 CSS 만으로는 + * override 할 수 없거나(아이콘 패키지가 inline style 을 박는 경우 등) React 가 + * recipe 와 같은 소스에서 꺼내 inline attribute 로 주입해야 하는 속성을 다룰 때. + * + * ```ts + * import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component"; + * import { capitalize, resolveRecipeToken } from "@seed-design/lynx-react/utils/resolve-recipe-token"; + * + * // variant × state × slot → color + * const color = resolveRecipeToken(actionButtonVars, [ + * `variant${capitalize(variant)}`, + * state, // "enabled" | "disabled" | "loading" | "pressed" + * "prefixIcon", + * "color", + * ]); + * + * // size × layout → icon size + * const size = resolveRecipeToken(actionButtonVars, [ + * `size${capitalize(size)}Layout${capitalize(layout)}`, + * "enabled", + * "prefixIcon", + * "size", + * ]); + * ``` + * + * recipe token 경로가 컴포넌트마다 조금씩 다르므로(variant/size/layout 조합 여부 등) + * 이 유틸은 "vars + path" 조합만 제공하고, 각 컴포넌트가 자기 path 를 만들어 호출한다. + */ +export function resolveRecipeToken(vars: unknown, path: readonly string[]): string | undefined { + let cursor: unknown = vars; + for (const key of path) { + if (cursor == null || typeof cursor !== "object") return undefined; + cursor = (cursor as Record)[key]; + } + return typeof cursor === "string" ? cursor : undefined; +} + +/** + * 첫 글자 대문자. recipe variant key 조립용 + * (e.g. `variant` + `brandSolid` → `variantBrandSolid`). + */ +export function capitalize(value: T): Capitalize { + return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize; +} diff --git a/packages/qvism-preset/src/recipes-lynx.ts b/packages/qvism-preset/src/recipes-lynx.ts index 26e0e0694..c80b88cf6 100644 --- a/packages/qvism-preset/src/recipes-lynx.ts +++ b/packages/qvism-preset/src/recipes-lynx.ts @@ -1,4 +1,4 @@ -import actionButton from "./recipes/action-button"; +import actionButton from "./recipes/lynx/action-button"; import bottomSheet from "./recipes/lynx/bottom-sheet"; import bottomSheetHandle from "./recipes/lynx/bottom-sheet-handle"; import switchRecipe from "./recipes/lynx/switch"; diff --git a/packages/qvism-preset/src/recipes/lynx/action-button.ts b/packages/qvism-preset/src/recipes/lynx/action-button.ts new file mode 100644 index 000000000..b987d0d3e --- /dev/null +++ b/packages/qvism-preset/src/recipes/lynx/action-button.ts @@ -0,0 +1,513 @@ +import { actionButton as vars } from "../../vars/component"; + +import { defineLynxSlotRecipe } from "../../utils/define-lynx"; +import { active, disabled, loading, pseudo } from "../../utils/pseudo"; + +/** + * ActionButton recipe (Lynx fork). + * + * Derived from the web `action-button` recipe with these changes for Lynx: + * - **Slot-recipe shape** (`root`/`text`/`prefixIcon`/`suffixIcon`). + * - **`prefixIcon`/`suffixIcon` 슬롯에 `color: var(--seed-color-...)` 만 지정한다.** + * Lynx 3.7 의 `` 는 `tint-color` CSS property 도 `tint-color` attribute + * 에서 `var()` 스트링도 해석하지 않는다. concrete color(hex/rgb) 만 받는다. + * 대신 `` 의 CSS `color` 값은 main-thread API `getComputedStyleProperty("color")` + * 로 resolved hex 를 읽어올 수 있다 (POC D 에서 검증). + * 따라서 recipe 는 slot 에 `color` 만 박고, React 쪽 + * `ActionButton.PrefixIcon`/`SuffixIcon` 에서 `useIconColor` 훅이 main-thread 로 + * 가 `color` 를 읽어 `tint-color` attribute 로 mirror 하는 방식으로 처리한다. + * - 슬롯에 width/height/flexShrink 만 남겨 아이콘 크기는 CSS 로 결정한다. + * - `:active` pseudo replaces the web's `engaged` (hover+active). + * - No focus-ring / `:focusVisible` — Lynx has no keyboard focus UX. + * - No `iconOnly` / `loading` icon styles yet. `layout: "iconOnly"` and + * `loading` spinner remain Tier B (pending dedicated icon slots). + * - `ghost` variant drops the `--seed-box-color` indirection since Lynx does + * not cascade CSS variables down to descendants the same way. + * - `progressCircle` track/range custom properties preserved so the `loading` + * spinner component can opt in once implemented. + */ +const actionButton = defineLynxSlotRecipe({ + name: "action-button", + slots: ["root", "text", "prefixIcon", "suffixIcon", "icon"], + base: { + root: { + display: "flex", + position: "relative", + alignItems: "center", + justifyContent: "center", + border: "none", + flexShrink: 0, + + "--seed-box-flex-grow": "0", + flexGrow: "var(--seed-box-flex-grow)", + "--seed-box-min-width": "auto", + minWidth: "var(--seed-box-min-width)", + + "--seed-box-padding-bottom": "auto", + "--seed-box-padding-top": "auto", + "--seed-box-padding-left": "auto", + "--seed-box-padding-right": "auto", + paddingTop: "var(--seed-box-padding-top)", + paddingBottom: "var(--seed-box-padding-bottom)", + paddingLeft: "var(--seed-box-padding-left)", + paddingRight: "var(--seed-box-padding-right)", + + "--seed-box-bleed-bottom": "0px", + "--seed-box-bleed-top": "0px", + "--seed-box-bleed-left": "0px", + "--seed-box-bleed-right": "0px", + marginTop: "calc(var(--seed-box-bleed-top) * -1)", + marginBottom: "calc(var(--seed-box-bleed-bottom) * -1)", + marginLeft: "calc(var(--seed-box-bleed-left) * -1)", + marginRight: "calc(var(--seed-box-bleed-right) * -1)", + + transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`, + }, + text: { + fontFamily: "inherit", + fontWeight: vars.base.enabled.label.fontWeight, + + transition: `color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`, + }, + prefixIcon: { + flexShrink: 0, + }, + suffixIcon: { + flexShrink: 0, + }, + icon: { + flexShrink: 0, + }, + }, + variants: { + variant: { + brandSolid: { + root: { + background: vars.variantBrandSolid.enabled.root.color, + "--track-color": vars.variantBrandSolid.enabled.progressCircle.trackColor, + "--range-color": vars.variantBrandSolid.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { + background: vars.variantBrandSolid.pressed.root.color, + }, + [pseudo(disabled)]: { + background: vars.variantBrandSolid.disabled.root.color, + }, + [pseudo(loading)]: { + background: vars.variantBrandSolid.loading.root.color, + }, + }, + text: { + color: vars.variantBrandSolid.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantBrandSolid.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantBrandSolid.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantBrandSolid.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantBrandSolid.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantBrandSolid.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantBrandSolid.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantBrandSolid.disabled.icon.color }, + }, + }, + neutralSolid: { + root: { + background: vars.variantNeutralSolid.enabled.root.color, + "--track-color": vars.variantNeutralSolid.enabled.progressCircle.trackColor, + "--range-color": vars.variantNeutralSolid.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantNeutralSolid.pressed.root.color }, + [pseudo(disabled)]: { background: vars.variantNeutralSolid.disabled.root.color }, + [pseudo(loading)]: { background: vars.variantNeutralSolid.loading.root.color }, + }, + text: { + color: vars.variantNeutralSolid.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantNeutralSolid.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantNeutralSolid.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralSolid.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantNeutralSolid.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralSolid.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantNeutralSolid.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantNeutralSolid.disabled.icon.color }, + }, + }, + neutralWeak: { + root: { + background: vars.variantNeutralWeak.enabled.root.color, + "--track-color": vars.variantNeutralWeak.enabled.progressCircle.trackColor, + "--range-color": vars.variantNeutralWeak.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantNeutralWeak.pressed.root.color }, + [pseudo(disabled)]: { background: vars.variantNeutralWeak.disabled.root.color }, + [pseudo(loading)]: { background: vars.variantNeutralWeak.loading.root.color }, + }, + text: { + color: vars.variantNeutralWeak.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantNeutralWeak.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantNeutralWeak.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralWeak.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantNeutralWeak.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralWeak.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantNeutralWeak.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantNeutralWeak.disabled.icon.color }, + }, + }, + criticalSolid: { + root: { + background: vars.variantCriticalSolid.enabled.root.color, + "--track-color": vars.variantCriticalSolid.enabled.progressCircle.trackColor, + "--range-color": vars.variantCriticalSolid.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantCriticalSolid.pressed.root.color }, + [pseudo(disabled)]: { background: vars.variantCriticalSolid.disabled.root.color }, + [pseudo(loading)]: { background: vars.variantCriticalSolid.loading.root.color }, + }, + text: { + color: vars.variantCriticalSolid.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantCriticalSolid.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantCriticalSolid.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantCriticalSolid.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantCriticalSolid.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantCriticalSolid.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantCriticalSolid.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantCriticalSolid.disabled.icon.color }, + }, + }, + brandOutline: { + root: { + borderStyle: "solid", + background: vars.variantBrandOutline.enabled.root.color, + borderWidth: vars.variantBrandOutline.enabled.root.strokeWidth, + borderColor: vars.variantBrandOutline.enabled.root.strokeColor, + "--track-color": vars.variantBrandOutline.enabled.progressCircle.trackColor, + "--range-color": vars.variantBrandOutline.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantBrandOutline.pressed.root.color }, + [pseudo(disabled)]: { + background: vars.variantBrandOutline.disabled.root.color, + borderColor: vars.variantBrandOutline.disabled.root.strokeColor, + }, + [pseudo(loading)]: { background: vars.variantBrandOutline.loading.root.color }, + }, + text: { + color: vars.variantBrandOutline.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantBrandOutline.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantBrandOutline.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantBrandOutline.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantBrandOutline.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantBrandOutline.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantBrandOutline.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantBrandOutline.disabled.icon.color }, + }, + }, + neutralOutline: { + root: { + borderStyle: "solid", + background: vars.variantNeutralOutline.enabled.root.color, + borderWidth: vars.variantNeutralOutline.enabled.root.strokeWidth, + borderColor: vars.variantNeutralOutline.enabled.root.strokeColor, + "--track-color": vars.variantNeutralOutline.enabled.progressCircle.trackColor, + "--range-color": vars.variantNeutralOutline.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantNeutralOutline.pressed.root.color }, + [pseudo(disabled)]: { + background: vars.variantNeutralOutline.disabled.root.color, + borderColor: vars.variantNeutralOutline.disabled.root.strokeColor, + }, + [pseudo(loading)]: { background: vars.variantNeutralOutline.loading.root.color }, + }, + text: { + color: vars.variantNeutralOutline.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantNeutralOutline.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantNeutralOutline.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralOutline.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantNeutralOutline.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantNeutralOutline.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantNeutralOutline.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantNeutralOutline.disabled.icon.color }, + }, + }, + ghost: { + root: { + background: vars.variantGhost.enabled.root.color, + "--track-color": vars.variantGhost.enabled.progressCircle.trackColor, + "--range-color": vars.variantGhost.enabled.progressCircle.rangeColor, + + [pseudo(active)]: { background: vars.variantGhost.pressed.root.color }, + [pseudo(disabled)]: { background: vars.variantGhost.disabled.root.color }, + [pseudo(loading)]: { background: vars.variantGhost.loading.root.color }, + }, + text: { + color: vars.variantGhost.enabled.label.color, + [pseudo(disabled)]: { color: vars.variantGhost.disabled.label.color }, + }, + prefixIcon: { + color: vars.variantGhost.enabled.prefixIcon.color, + [pseudo(disabled)]: { color: vars.variantGhost.disabled.prefixIcon.color }, + }, + suffixIcon: { + color: vars.variantGhost.enabled.suffixIcon.color, + [pseudo(disabled)]: { color: vars.variantGhost.disabled.suffixIcon.color }, + }, + icon: { + color: vars.variantGhost.enabled.icon.color, + [pseudo(disabled)]: { color: vars.variantGhost.disabled.icon.color }, + }, + }, + }, + size: { + xsmall: { + root: { + height: vars.sizeXsmall.enabled.root.minHeight, + borderRadius: vars.sizeXsmall.enabled.root.cornerRadius, + + "--size": vars.sizeXsmall.enabled.progressCircle.size, + "--thickness": vars.sizeXsmall.enabled.progressCircle.thickness, + }, + }, + small: { + root: { + height: vars.sizeSmall.enabled.root.minHeight, + borderRadius: vars.sizeSmall.enabled.root.cornerRadius, + + "--size": vars.sizeSmall.enabled.progressCircle.size, + "--thickness": vars.sizeSmall.enabled.progressCircle.thickness, + }, + }, + medium: { + root: { + height: vars.sizeMedium.enabled.root.minHeight, + borderRadius: vars.sizeMedium.enabled.root.cornerRadius, + + "--size": vars.sizeMedium.enabled.progressCircle.size, + "--thickness": vars.sizeMedium.enabled.progressCircle.thickness, + }, + }, + large: { + root: { + height: vars.sizeLarge.enabled.root.minHeight, + borderRadius: vars.sizeLarge.enabled.root.cornerRadius, + + "--size": vars.sizeLarge.enabled.progressCircle.size, + "--thickness": vars.sizeLarge.enabled.progressCircle.thickness, + }, + }, + }, + layout: { + withText: {}, + iconOnly: {}, + }, + }, + compoundVariants: [ + // size × layout=withText — padding, gap, font size, icon dimensions + { + size: "xsmall", + layout: "withText", + css: { + root: { + gap: vars.sizeXsmallLayoutWithText.enabled.root.gap, + "--seed-box-padding-left": vars.sizeXsmallLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeXsmallLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeXsmallLayoutWithText.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeXsmallLayoutWithText.enabled.root.paddingY, + }, + text: { + fontSize: vars.sizeXsmallLayoutWithText.enabled.label.fontSize, + lineHeight: vars.sizeXsmallLayoutWithText.enabled.label.lineHeight, + }, + prefixIcon: { + width: vars.sizeXsmallLayoutWithText.enabled.prefixIcon.size, + height: vars.sizeXsmallLayoutWithText.enabled.prefixIcon.size, + }, + suffixIcon: { + width: vars.sizeXsmallLayoutWithText.enabled.suffixIcon.size, + height: vars.sizeXsmallLayoutWithText.enabled.suffixIcon.size, + }, + }, + }, + { + size: "xsmall", + layout: "iconOnly", + css: { + root: { + minWidth: vars.sizeXsmallLayoutIconOnly.enabled.root.minWidth, + "--seed-box-padding-left": vars.sizeXsmallLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeXsmallLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeXsmallLayoutIconOnly.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeXsmallLayoutIconOnly.enabled.root.paddingY, + }, + icon: { + width: vars.sizeXsmallLayoutIconOnly.enabled.icon.size, + height: vars.sizeXsmallLayoutIconOnly.enabled.icon.size, + }, + }, + }, + { + size: "small", + layout: "withText", + css: { + root: { + gap: vars.sizeSmallLayoutWithText.enabled.root.gap, + "--seed-box-padding-left": vars.sizeSmallLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeSmallLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeSmallLayoutWithText.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeSmallLayoutWithText.enabled.root.paddingY, + }, + text: { + fontSize: vars.sizeSmallLayoutWithText.enabled.label.fontSize, + lineHeight: vars.sizeSmallLayoutWithText.enabled.label.lineHeight, + }, + prefixIcon: { + width: vars.sizeSmallLayoutWithText.enabled.prefixIcon.size, + height: vars.sizeSmallLayoutWithText.enabled.prefixIcon.size, + }, + suffixIcon: { + width: vars.sizeSmallLayoutWithText.enabled.suffixIcon.size, + height: vars.sizeSmallLayoutWithText.enabled.suffixIcon.size, + }, + }, + }, + { + size: "small", + layout: "iconOnly", + css: { + root: { + minWidth: vars.sizeSmallLayoutIconOnly.enabled.root.minWidth, + "--seed-box-padding-left": vars.sizeSmallLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeSmallLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeSmallLayoutIconOnly.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeSmallLayoutIconOnly.enabled.root.paddingY, + }, + icon: { + width: vars.sizeSmallLayoutIconOnly.enabled.icon.size, + height: vars.sizeSmallLayoutIconOnly.enabled.icon.size, + }, + }, + }, + { + size: "medium", + layout: "withText", + css: { + root: { + gap: vars.sizeMediumLayoutWithText.enabled.root.gap, + "--seed-box-padding-left": vars.sizeMediumLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeMediumLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeMediumLayoutWithText.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeMediumLayoutWithText.enabled.root.paddingY, + }, + text: { + fontSize: vars.sizeMediumLayoutWithText.enabled.label.fontSize, + lineHeight: vars.sizeMediumLayoutWithText.enabled.label.lineHeight, + }, + prefixIcon: { + width: vars.sizeMediumLayoutWithText.enabled.prefixIcon.size, + height: vars.sizeMediumLayoutWithText.enabled.prefixIcon.size, + }, + suffixIcon: { + width: vars.sizeMediumLayoutWithText.enabled.suffixIcon.size, + height: vars.sizeMediumLayoutWithText.enabled.suffixIcon.size, + }, + }, + }, + { + size: "medium", + layout: "iconOnly", + css: { + root: { + minWidth: vars.sizeMediumLayoutIconOnly.enabled.root.minWidth, + "--seed-box-padding-left": vars.sizeMediumLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeMediumLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeMediumLayoutIconOnly.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeMediumLayoutIconOnly.enabled.root.paddingY, + }, + icon: { + width: vars.sizeMediumLayoutIconOnly.enabled.icon.size, + height: vars.sizeMediumLayoutIconOnly.enabled.icon.size, + }, + }, + }, + { + size: "large", + layout: "withText", + css: { + root: { + gap: vars.sizeLargeLayoutWithText.enabled.root.gap, + "--seed-box-padding-left": vars.sizeLargeLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeLargeLayoutWithText.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeLargeLayoutWithText.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeLargeLayoutWithText.enabled.root.paddingY, + }, + text: { + fontSize: vars.sizeLargeLayoutWithText.enabled.label.fontSize, + lineHeight: vars.sizeLargeLayoutWithText.enabled.label.lineHeight, + }, + prefixIcon: { + width: vars.sizeLargeLayoutWithText.enabled.prefixIcon.size, + height: vars.sizeLargeLayoutWithText.enabled.prefixIcon.size, + }, + suffixIcon: { + width: vars.sizeLargeLayoutWithText.enabled.suffixIcon.size, + height: vars.sizeLargeLayoutWithText.enabled.suffixIcon.size, + }, + }, + }, + { + size: "large", + layout: "iconOnly", + css: { + root: { + minWidth: vars.sizeLargeLayoutIconOnly.enabled.root.minWidth, + "--seed-box-padding-left": vars.sizeLargeLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-right": vars.sizeLargeLayoutIconOnly.enabled.root.paddingX, + "--seed-box-padding-top": vars.sizeLargeLayoutIconOnly.enabled.root.paddingY, + "--seed-box-padding-bottom": vars.sizeLargeLayoutIconOnly.enabled.root.paddingY, + }, + icon: { + width: vars.sizeLargeLayoutIconOnly.enabled.icon.size, + height: vars.sizeLargeLayoutIconOnly.enabled.icon.size, + }, + }, + }, + ], + defaultVariants: { + variant: "brandSolid", + size: "medium", + layout: "withText", + }, +}); + +export default actionButton;