@layer reset, css-modules; @layer priority1, priority2, priority3, priority4, priority5, priority6, priority7, priority8; @property --x-marginTop { syntax: "*"; inherits: false;} :root, .x1hp6qqz{--x1gz0iob:Figma Sans, sans-serif !important;--xj0eqbs:var(--color-bg);--x1e99nc7:"wdth" 98;--x1df4mt2:auto;} .xhb4vcq{--color-icon:var(--color-icon-tertiary)} @layer priority2{ .xuzi1b7{inset:.5rem .75rem auto} .x1ghz6dp{margin:0} .x1bpp3o7{margin:auto} .x1mbp38g{margin:var(--spacer-2) auto} .xnk4xbf{margin:var(--spacer-4) auto} .xqhu3d4{padding:1.5rem .75rem .375rem} } @layer priority3{ .x9r1u3d{border-color:transparent} .x33tqd7{border-color:var(--color-border-strong)} .xstqwlr{border-color:var(--color-bordertranslucent)} .x1sxf85j{border-radius:5px} .x1kogg8i{border-radius:6px} .x7r0jtz{border-radius:var(--radius-medium)} .xng3xce{border-style:none} .x1y0btm7{border-style:solid} .xc342km{border-width:0} .xmkeg23{border-width:1px} .x5mp9sv{flex:1 0 0} .xou54vl{gap:16px} .x167g77z{gap:8px} .x10im51j{margin-block:0} .x1jp4ehj{margin-block:8px} .xrxpjvj{margin-inline:0} .xqdi9fv{margin-inline:32px} .xvueqy4{margin-inline:auto} .x1a2a7pz{outline:none} .xb3r6kr{overflow:hidden} .xt970qd{padding-block:0} .x1e9difb{padding-block:28px} .x12ulsxz{padding-block:4px} .x1vvogim{padding-block:8px} .xfoe8qy{padding-inline:11px} .x1hr3lfm{padding-inline:16px} .x4l9tsp{padding-inline:24px} .xdqyycr{padding-inline:8px} .x1bvjpef{text-decoration:underline} .xeuumh9:focus-visible{outline:2px solid var(--color-border-selected)} .x1m4k1xu:focus{outline:2px dashed var(--color-border-strong)} } @layer priority4{ .x6s0dn4{align-items:center} .xamitd3{align-self:center} .xjyslct{appearance:none} .xjbqb8w{background-color:transparent} .xbwv0bw{background-color:var(--auth-input-background)} .xgo2zlw{background-color:var(--hollow-button-background)} .xxeb60z{background-color:var(--color-bg-hover)} .x1w8cwpt{background-color:var(--xj0eqbs)} .x1gnnqk1{box-shadow:none} .x9f619{box-sizing:border-box} .x14qv3re{color:var(--auth-color-text)} .x1srez4a{color:var(--color-text-brand)} .x1i3afut{color:var(--color-text)} .x1tnz2l8{color:var(--color-text-design-pressed)} .xwrk6fb{color:var(--color-text-secondary)} .xt0e3qv{cursor:default} .x1h6gzvc{cursor:not-allowed} .x1ypdohk{cursor:pointer} .x1lliihq{display:block} .x78zum5{display:flex} .x1i6dbpo{fill:var(--color-icon)} .xdt5ytf{flex-direction:column} .x1iyjqo2{flex-grow:1} .x2lah0s{flex-shrink:0} .x563n8i{font-family:'Figma Mono',monospace} .xm3xvbb{font-family:'Figma Sans',sans-serif} .x1a3z175{font-family:Figma Sans,sans-serif} .x122x9cr{font-family:Inter} .x1c8vubs{font-family:var(--x1gz0iob)} .x1djx9pd{font-optical-sizing:var(--x1df4mt2)} .x1j6dyjg{font-size:11px} .xfifm61{font-size:12px} .x4z9k3i{font-size:13px} .xosj86m{font-size:18px} .xwsyq91{font-size:20px} .x1pvqxga{font-size:24px} .x1nyopxq{font-variation-settings:var(--x1e99nc7)} .xc8nv1x{font-weight:320} .xo1l8bm{font-weight:400} .x10p5zqr{font-weight:450} .xk50ysn{font-weight:500} .xh88oxj{font-weight:550} .xl56j7k{justify-content:center} .x13a6bvl{justify-content:flex-end} .x1qughib{justify-content:space-between} .x1pga9m1{letter-spacing:-0.005625rem} .xsoyr4f{letter-spacing:-0.0325px} .xjll8v0{letter-spacing:-0.408px} .xgwajed{letter-spacing:.55px} .x11vz743{line-height:125%} .x1d3mw78{line-height:16px} .x19v9tvf{line-height:22px} .x1o2sk6j{line-height:24px} .x101yacv{line-height:25px} .xcgk4ki{line-height:32px} .x1ks1olk{opacity:.7} .xaw3z3v{outline-color:var(--color-border-selected)} .x1wfwxd8{outline-offset:0} .xaatb59{outline-style:solid} .x1k57tk5{outline-width:0} .xv54qhq{padding-inline-end:16px} .x64bnmy{padding-inline-end:24px} .x15zmtp0{padding-inline-end:48px} .x13jy36j{padding-inline-start:24px} .xmzvs34{padding-inline-start:8px} .x10l6tqk{position:absolute} .x1n2onr6{position:relative} .x1tndfvv{scrollbar-color:var(--ramp-grey-300) transparent} .x1597r2g{scrollbar-width:thin} .x2b8uid{text-align:center} .xdpxx8g{text-align:left} .xlyipyv{text-overflow:ellipsis} .xtvhhri{text-transform:uppercase} .x1kxipp6{user-select:auto} .xeaf4i8{white-space:normal} .xuxw1ft{white-space:nowrap} .x13faqbe{word-break:break-word} .x1g4zwl5:focus-visible{box-shadow:inset 0 0 0 1px var(--color-border-selected)} .x17410jd:is([type="password"]){letter-spacing:3.6px} .x1pthtab:focus-visible{outline-color:var(--color-border-selected)} .x9v5kkp:focus-visible{outline-style:solid} .x4xl6zf:focus-visible{outline-width:1px} .x133mfui:hover{background-color:var(--color-bg-hover)} .xugdvvj:hover{box-shadow:inset 0 0 0 1px var(--auth-input-box-shadow)} .xu04svd:focus{background-color:var(--color-bg-hover)} .xcwqlvo:focus{box-shadow:inset 0 0 0 2px var(--auth-input-box-shadow)} .x1wpa3a2:focus{outline-offset:var(--spacer-1)} .x1xp0fj8:active{background-color:var(--color-bg-pressed)} .xpdc0an:active{box-shadow:inset 0 0 0 1px var(--auth-input-box-shadow)} .x1dutknw:active{outline-width:1px} @media (max-width: 850px){.xixjmvj.xixjmvj{align-items:unset}} } @layer priority5{ .x1h6zu7b{border-bottom-color:var(--color-border)} .x1q0q8m5{border-bottom-style:solid} .xso031l{border-bottom-width:1px} .xxbfw8b{border-top-color:var(--color-border)} .x13fuv20{border-top-style:solid} .x178xt8z{border-top-width:1px} .x9dczf4{height:53px} .x1peatla{height:64px} .xwzfr38{height:80px} .xat24cr{margin-bottom:0} .x1iymm2a{margin-bottom:32px} .xv90nub{margin-left:32px} .x8x9d4c{margin-left:auto} .x9otpla{margin-top:-8px} .xqui205{margin-top:24px} .x1xmf6yo{margin-top:8px} .xvvvs0s{margin-top:calc(-1 * 72px)} .x1gkbulp{margin-top:var(--x-marginTop)} .x1iuus0c{max-height:260px} .x193iq5w{max-width:100%} .x16q51m2{max-width:150px} .x256u9z{max-width:250px} .x1j9u4d2{max-width:400px} .x1qsz79i{max-width:422px} .x21xpn4{min-height:32px} .x1wxaq2x{min-height:48px} .xeuugli{min-width:0} .x18ip3f8{min-width:344px} .x900493{min-width:48px} .x1odjw0f{overflow-y:auto} .x18d9i69{padding-bottom:0} .xwxc41k{padding-bottom:24px} .x5vb70{padding-bottom:var(--spacer-3)} .xnm25rq{padding-left:16px} .x1tudf5h{padding-left:32px} .x1lqv20w{padding-left:var(--spacer-3)} .xexx8yu{padding-top:0} .x1qx29kw{padding-top:15vh} .x1p5oq8j{padding-top:24px} .xh8yej3{width:100%} .x1dz1jew{width:280px} .x1yinuae{width:312px} .xi55695{width:328px} .x1td3qas{width:32px} .x168biu4{width:344px} @media (max-width: 850px){.x1r39lhq.x1r39lhq{margin-top:unset}} @media (max-width: 850px){.x14cjzs3.x14cjzs3{padding-top:24px}} } @layer priority6{ .xvpkdbp::-webkit-scrollbar-thumb{border-radius:9999px} } @layer priority7{ .x122zoth::-webkit-scrollbar-track{background-color:transparent} .x11e3kjc::-webkit-scrollbar-thumb{background-color:var(--ramp-grey-300)} .xxqzaim::placeholder{color:transparent} .x1robv96::-webkit-input-placeholder{color:transparent} .x1cluluk::-moz-placeholder{color:transparent} } @layer priority8{ .x12o6m6d::-webkit-scrollbar{width:8px} } @layer fpl; /* "shared/components/svg/svg.css" */ @layer css-modules { .svg--autoscale--3flic > svg { width: 100%; height: 100%; } .svg--customSize--nRk8I > svg { width: var(--svg-width); height: var(--svg-height); } } /* "shared/components/lazy_input/lazy_input.css" */ @layer css-modules { .lazy_input--lazyInput--akTHe { cursor: auto; } .lazy_input--lazyInput--akTHe::placeholder { color: var(--color-text-tertiary); } } /* "shared/styles/constants/_brand_colors_deprecated.css" */ @layer css-modules { /** * This file contains 'brand colors' that do not yet have an equivalent FPL color token defined for them * They should not be used further, and we will file tickets against the relevant usages to clean them up */ /* stylelint-disable @figma/color-no-raw */ /* Brand Secondary colors */ } /* "shared/styles/ui/colors.css" */ @layer css-modules { /* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */ /* stylelint-disable */ } /* "shared/styles/constants/_colors.css" */ @layer css-modules { /** * colors.css * * @prettier * * Global color definitions. * * ==== Generated styles ==== * Many variables in this file reference values from ../ui/colors.css which is a file * generated from the !UI2 design system file. These colors variables cannot be changed directly and have to be managed in * the !UI2 design file. Adding, changing or removing a generated color is done by updating * the !UI2 design file and then using the codegen tool to genreate new styles. * * TODO: We can't use the color() function in this file because there are .tsx files that pull * strings from here to draw using CanvasRenderingContext2D, which doesn't know how to handle it. * * See: figma/web/README.md for more info */ /* Used for Card / Tile Borders */ /* Special ToS update footer text color. */ /* Foreground colors pre-multiplied with white * * When we launched UI2, we discovered that text was rendering extremely poorly * for some Windows users. It turned out that Windows offers very sophisticated * type hinting that in some cases causes text with alpha values < 1 to be nearly * unreadable. To address the issue we created premultiplied versions of the * colors we use most often for text. If you're styling text that only appears on * a white background it's recommended to default to using these premultiplied * colors to defend against the Windows type hinting behavior. * See: https://github.com/figma/figma/pull/12696 * */ /* Background colors */ /* Used for sidebar separator lines. Also the default canvas background color. */ /* Used behind buttons, controls and other interactive items that are in an active or selected state. */ /* Used for hover states on error messages */ /* Used for error states */ /* "Special" colors should only be used in specific specialized contexts */ /* Outline is used around UI controls. */ /* Multiplayer colors */ /* Whiteboard colors */ /* FigJam palette colors: these are the on-canvas color palette and should not be relied upon for UI unrelated to showing the palette. */ /* Highlighter color picker colors */ /* We use the same highlighter swatch colors on light and dark * backgrounds, so there is only one set. */ /* Base color picker colors */ /* There are no values for the base colors on a light background here because * we use the true values. */ /* Sticky color picker colors */ /* Code block theme picker colors */ /* BEGIN Deprecated colors */ /* These constants were deprecated as of our UI refresh in April 2019: https://www.figma.com/blog/ui-refresh/ Please refer to the Design System file on staging for best practices around choosing new colors: https://staging.figma.com/file/ITAqR2ZTCX6nOWi1vANRud/!-UI2 */ } /* "shared/styles/constants/_measurements.css" */ @layer css-modules { /** * measurements.css * * @prettier * * Global measurement definitions. */ /* Grid spacing and helpers */ /* Tabs */ /* Scroll container */ /* Object row */ /* Help Widget */ /* used for positioning from bottom right corner, shifting above DLT */ /* used for the card stack for pro trials */ /* Headers */ /* This must be in sync with FGEditorTypeConfig::DESIGN_TOOLBAR_HEIGHT */ /* corresponds to EditorTypeConfig::toolbarHeight() */ /* corresponds to EditorTypeConfig::toolbarHeight() */ /* UI3 Floating Panels */ /* Keep in sync with constants.stylex.ts */ /* e.g. after filename with menu */ /* keep in sync with constants.stylex.ts */ /* keep in sync with constants.stylex.ts */ /* keep in sync with constants.stylex.ts */ /* keep in sync with constants.stylex.ts */ /* keep in sync with constants.stylex.ts */ /* keep in sync with constants.stylex.ts */ /* The height of banners on public profiles */ /* The height of banners on public profiles in the resource hub */ /* Footers */ /* This must be in sync with FGEditorTypeConfig::DEV_HANDOFF_BOTTOM_UI_HEIGHT_AND_MARGIN */ /* Community Global Nav */ /* Community Max Container Width */ /* Community Resource Detail Page Max Width */ /* Community Search Input */ /* Community Hub Landing Page */ /* Community Hub Search Page */ /* Community Hub Detail View */ /* Maintainer Note: if you change any of these two values, be sure to update the scroll amount at which the header shrinks/expands - in resource_detail_view_header.tsx */ /* Community Hub Resource Publishing Modal */ /* Community Hub Resource Detail View */ /* Community Hub homepage */ /* Community Hub Feed Page */ /* Community Mobile Sticky Footer Button Width */ /* If you change this, also change the COMMUNITY_FULLSCREEN_CONTAINER_MARGIN value in hub_file_viewer.tsx to ensure that comments pins display in the correct locations */ /* Community Profile Resources*/ /* Community Hub Viewer Measurements */ /* Workspace Switcher */ /* Approved Libraries */ /* User Avatar */ /* UI3 Full Height Sidebars */ /* Top Navigation */ /* Left Navigation */ /* Properties panel */ /* The space between the properties panel & the right side of the window */ /* The padding on the left side of each panel. */ /* The height of the header in each panel in UI3. */ /* The padding-bottom of each panel in UI3. */ /* Dev Mode left panel */ /* Dev Mode variables */ /* This must be in sync with FGFullscreenApp::PROPERTIES_PANEL_DEFAULT_WIDTH * * This variable represents the width of the properties panel by its construction * as detailed in UI2. Each row in the properties panel is made of 8px of horizontal * padding on either side and 28 8px-width columns of content (this amounts to * seven 32px-units). Utility property sets for easily positioning elements within * the properties panel are provided below. * * UI2: https://staging.figma.com/file/ITAqR2ZTCX6nOWi1vANRud/!-UI2?node-id=0%3A4857 */ /* Measurements for the new color picker UI */ /* Zoom menu */ /* * Width and height of the playground canvas in the library viewer. * This must be kept in sync with FGFullscreenApp::LIBRARY_VIEW_PLAYGROUND_CANVAS_WIDTH_RELATIVE_TO_VIEWPORT * and FGFullscreenApp::LIBRARY_VIEW_PLAYGROUND_CANVAS_HEIGHT */ /* Match the viewport threshold in FGMouseBehavior.cpp */ /* * Border width of the property sidebar. * This must be in sync with FGFullscreenApp::PROPERTIES_PANEL_DEFAULT_WIDTH */ /* Amount to inset UI when rulers are visible in UI3 */ /* TODO (UI3): This is the same as UI2 for now, but will only affect UI3 surfaces if updated */ /* Dropdowns */ /* Icon Buttons */ /* Modals */ /* Figjam universal insert modal */ /* Figma insert modal */ /* Drilldown picker */ /* Figma component flyout modal */ /* this is the line height of fontPos11 * 6 (clamping 6 default height lines) */ /* Comment modals and the FigJam libraries modal both have window snapping behavior when dragged to the left of the canvas, so they should both have the same width */ /* FigJam EmojiWheel / VotingPeekingStampWheel */ /* EmojiWheel size (+border) as an integer, for PeekingWheel calculations */ /* File browser */ /* Tiles */ /* This should be kept in sync with: - --file-grid-tile-min-width in _filebrowser_loader_style.erb. - GRID_TILE_MIN_WIDTH in web/js/browse/shared/views/items_view/grid_view/grid_view.tsx This min with has been has been selected so that the japanese translation of "New design file" fits in a single line. */ /* Team admin */ /* Pickers */ /* not including header */ /* not including header */ /* Style Modal */ /* Tooltips */ /* Canvas Rulers */ /* This should be kept in sync with RULER_THICKNESS in Fullscreen */ /* Comments Comment modals and the FigJam libraries modal both have window snapping behavior when dragged to the left of the canvas, so they should both have the same width */ /* One line comment suggestions need to be a bit wider to fit the text */ /* Typography [DEPRECATED: use _typography.css instead] */ /* Library Preferences modal */ /* UI3 Redesigned Library Preferences Modal */ /* KEEP IN SYNC WITH LibraryModalMeasurements.useTabContentsWidth */ /* KEEP IN SYNC WITH useRedesignedLibraryModalWidth */ /* The modal gets wider when shared fonts are enabled. When the feature flag is removed, * this should just be merged into --libraryPreferencesModalWidth. */ /* Replace Libraries modal */ /* Org View Modal, for legacy reasons we still refer to this as orgDashboard in css */ /* Org Admin Settings */ /* width at which the org admin page toolbar switches to a smaller desktop variant */ /* with a sidebar and padding this is a viewport of 1178px */ /* with a sidebar and padding this is a viewport of 1437px */ /* with a sidebar and padding this is a viewport of 1558px */ /* with a sidebar and padding this is a viewport of 1660px */ /* File Permissions and Share Modal */ /* Delightful toolbar */ /* TODO(figjam_ui3_toolbelt_default): Audit and update remaining DLT layout constants */ /* https://app.asana.com/1/10497086658021/project/1206686657935613/task/1210340201417242?focus=true */ /* Update DELIGHTFUL_TOOLBAR_HEIGHT_AND_MARGIN in FGEditorTypeConfig.h when changing this value */ /* UI3 standardized gap between UI components */ /* canvas scrollbar area thickness, keep in sync with FGDragScrollbarBehavior.cpp */ /* FigJam Zoom controls and help button */ /* Slides */ /* Visual bell */ /* margin from bottom of screen when no UI elements exist */ /* when bottom UI elements exist, this is the margin between the bottom UI element and the visual bell */ /* Frame counter in prototype viewer and dev handoff */ /* Keyboard shortcuts pane */ /* Component sidebar upsell */ /* Compare Images */ /* Compare Linter Images */ /* Compare Changes Images */ /* Compare Changes */ /* 1px for border */ /* 1px for border */ /* Branching and Merging */ /* FigJam inline menu */ /* Bottom padding for file browser team welcome / onboarding modal */ /* RCS */ /* Eyedropper */ /* Quick actions */ /* Figmascope */ /* Shapes sidebar */ /* Menu Selector */ /* Use this mixin if you want to just center some content in an arbitrary-sized square (e.g. an icon within a bounding box). */ /* * Media Queries * Keep in sync with constants.stylex.ts */ /* The following mixins make it easier to position elements within the * grid layout of the properties panel. */ /* @mixin col-start-n n represents the index of the 32px-unit block at which the * element should start. */ /* Columns 7 and 8 are for wide inspect panel which has 36 columns */ /* @mixin col-end-n n represents the index of the 32px-unit block at which the * element should end. */ /* @mixin col-span-n n represents the number of 32px-unit blocks that this element * should span. */ } /* "shared/styles/constants/_z_indexes.css" */ @layer css-modules { /* See https://paper.dropbox.com/doc/2021-07-Z-Index-Guide--BaqAhxv55drgSonCcLnq_hRjAg-lYgskXVU0tFFVmGn5wGwm */ /* This must be higher than the prototype progress bar's z-index (--modalZ) */ /* These must be higher than the draggableModalZ/draggableModalUI3Z index so that the emoji picker renders in front of it for comments */ /* Downtime */ /* Memory Warning */ /* File browser and Fullscreen */ /* Info and warning banner */ /* File Browser */ /* File tiles list sorting header */ /* File browser toolbar and Topbar */ /* Above topBarZ and topNabBarZ so the notification flyout is on top */ /* Resource Thumbnail Actions Container */ /* Templates modal */ /* Above the cardHoverZ */ /* Fullscreen */ /* Left panel */ /* KEEP IN SYNC WITH zIndex IN web/packages/ui3-editor/src/navigation_bar.tsx */ /* Objects panel */ /*filename menu */ /* Mobile file viewer */ /* Unless they are maximized -- then they should be above most other ui */ /* Interactive slide elements should seem like part of the canvas */ /* This must be higher than anything in the layers panel */ /* Library modal */ /* Above the UI but under sidebar modals */ /* Overlays */ /* So modals can appear on top of it in VS Code */ /* below design editor toolbar set by flyoutZ */ /* needs to be smaller than helpWidgetZ */ /* below the modal, so the bulk actions bar is properly hidden under the modal overlay */ /* this allows a modal to be behind the background of another modal */ /* Below the navBar but no lower than the sideBar */ /* Covers everything except tooltip */ /* must be higher than sidePanelZ */ /* Shared components */ /* Menus */ /* Framer */ /* Onboarding callout - could point to anything so must be highest */ /* Cookie banner z-index — we want this to sit above any overlays */ /* Community cookie banner z-index — we want this to above page content but below viewer overlays */ /* Cooper cookie banner z-index — we want this to above the left rail */ /* Cooper inline menu z-index — we want this to above the left rail */ /* Floating indicator that shows when you're pointed to a hardcoded frontend commit in a deployed environment. This is a debug-only UI that won't show to real users */ /* Confidentiality banner - we want this to appear above the side panels so that it doesn't get affected by the gradient in UI3 */ /* Community mobile flyout menu */ /* Sign Up Banner should sit above the UI since it really shouldn't be part of the editor*/ /* Dev Mode Variables table */ /* for use in TSX */ } /* "shared/styles/global/helvetica.css" */ @layer css-modules { /** * Re-map font weights we use in UI3 to appropriate weights of Helvetica Neue. * This is not necessary in Firefox and Safari, but Chrome on MacOS fails to * resolve these, leading to character's toggling back and forth between * unsupported-glyph indicators and working characters when we toggle font * weights in some parts of the app. */ @font-face { font-family: 'Helvetica Neue'; font-weight: 450; src: local('Helvetica Neue'); } @font-face { font-family: 'Helvetica Neue'; font-weight: 550; src: local('Helvetica Neue Bold'); } } /* "shared/styles/global/sf_pro_font_face.css" */ @layer css-modules { /* This font face applies to the unicode range of symbols implemented by the SF Pro font. It should be used as a fallback font when we expect SF Pro symbols might be used (which Inter does not have glyphs for). For example, in the layers panel where a user might have symbols in their layers. */ @font-face { font-family: SFProLocalRange; font-style: normal; font-weight: 400; src: local('SF Pro Regular'); unicode-range: U+100000-10FFFD; } } /* "shared/styles/constants/_typography.css" */ @layer css-modules { /* * Global typography definitions. * * @prettier * * NOTE: Most of the styles in this file have been deprecated. If you just need * the right styles for your text objects, try to get those by composing the * classnames provided by shared/styles/mixins/text.css */ /* font: style variant weight size/line-height family */ /* e.g. menus, editor inspector, layers, tooltips, etc */ /* e.g. dialog title, view title, file-tile title */ /* e.g. dialog title, view title, file-tile title */ /* Note: _measurements.css defines deprecated --titleFontSize__DEPRECATED */ /* e.g. editor pop-up window titles */ /* e.g. step title in team-upgrade flow */ /* e.g. visual bell */ /* e.g. developer panel code readouts */ /* font features */ /* Inter has the following features: calt Contextual alternates (on by default) tnum Tabular numbers numr Numerators dnom Denominators sups Superscript subs Subscript frac Arbitrary fractions case Case alternates dlig Discretionary ligatures zero Slashed zero ss01 Stylistic set 1: Alternate digits ss02 Stylistic set 2: Disambiguation ss03 Stylistic set 3: r curves into round neighbors cv01 Alternate one cv02 Open four cv03 Open six cv04 Open nine cv05 Lower case L with tail cv06 Lower case r with curved tail cv07 Alternate German double-s cv08 Upper-case i with serif cv09 Flat top three cv10 Capital G with spur cv11 Single-storey a */ /* Note that we have to repeat «'liga' on, 'calt' on» because comma-delimited properties don’t inherit well, and because some browsers ignore 'liga' if not set explicitly if the letter spacing is more than 0 (which is often for us). */ :root { /* --font-family-ui is used in figma/emoji-mart. Please check usage before removing */ --font-family-ui: Inter, sans-serif; } } /* "shared/styles/constants/_data_urls.css" */ @layer css-modules { /** * data_urls.css * * @prettier * * Reusable data URLs. */ /* A slightly lighter version of the checkerboard used in file tile thumbnails */ } /* "shared/styles/constants/_theme.css" */ @layer css-modules { /** * This file defines CSS custom property variables that need to be dynamically assigned between * FigJam views and the rest of the app. This does NOT include color variables. * * If you need a color variable that dynamically changes between FigJam and Figma, please see our semantic tokens * defined in the following two files. You're almost certain to find what you need in them. * _tokens.css * _tokens_special.css * * For a bit more detail, this file used to contain all of the contents of _theme_deprecated.css, * i.e. the color variables defined there. * * After we launched dark mode in 05/2022, we split out the color variables into _theme_deprecated.css * so we could lint to prevent the introduction of future references of those variables, in favour of * our new theming library in _tokens.css and _tokens_special.css. * * @prettier */ :root { /* * CSS variable for the height of the banner displayed above the * editor in Figma design and Figjam. This is set in the BannerBase component: * web/js/figma_app/views/banner/banner.tsx */ --editor-banner-height: 0px; --toolbar-unread-dot-top: 10px; --cookie-banner-persistent-message-bottom-margin: 0; } /** These should map to what the CSS properties should be in any non-FigJam context. Ex. the design editor, file browser, and admin views. */ body, [data-editor-theme='design']:not([data-preferred-theme='debug']) { --toolbar-height: 48px; --dev-handoff-navbar-height: 40px; /* We prefer default cursor in Design Figma, and grabbing cursor in FigJam during resource insertion. Grabbing cursor is the more "webby" standard. However in Figma it is important to position our app as a desktop app. Most power user designers use the desktop apps, and they want Figma to behave like other desktop apps. In desktop apps, the cursor does not change often. This was especially important in the earlier days, when we were fighting the idea that web apps were inferior to desktop apps. In Design Figma: When it's unclear if an element is interactive, we provide additional cues that are either static (e.g. a blue outline) or dynamic (e.g. shows up only when pointer is inside or near the element.) Only use what is necessary — if you change the background of an element on hover, there is no need to change the cursor as well. */ --insertable-resource-dragging-cursor: default; } /** These should map to what the CSS properties should be in the FigJam views, when */ [data-editor-theme='whiteboard'] { --toolbar-height: 48px; --insertable-resource-dragging-cursor: grabbing; } } /* "shared/styles/constants/_fallback_tokens.css" */ @layer css-modules { /** * This is an autogenerated file from our external source of truth for color tokens. * Please do not edit this file directly! Contact #feat-dark-mode-ninjas on Slack if you need to modify the colors here. * * These variables are used for legacy color fallbacks by design->code components. * This is to prevent color regressions before the darkmode launch, since some legacy colors * doesn't exist in the new color scheme. */ :root { --fallback-color-bg: #ffffffff; --fallback-color-bg-hover: #0000000f; --fallback-color-bg-pressed: #ffffffff; --fallback-color-bg-secondary: #f0f0f0ff; --fallback-color-bg-tertiary: #f0f0f0ff; --fallback-color-bg-disabled: #f0f0f0ff; --fallback-color-text: #000000cc; --fallback-color-text-hover: #333333ff; --fallback-color-text-secondary: #0000004c; --fallback-color-text-secondary-hover: #000000cc; --fallback-color-text-tertiary: #0000004c; --fallback-color-text-tertiary-hover: #000000cc; --fallback-color-text-disabled: #0000004c; --fallback-color-icon: #000000cc; --fallback-color-icon-hover: #000000cc; --fallback-color-icon-secondary: #0000004c; --fallback-color-icon-secondary-hover: #000000cc; --fallback-color-icon-tertiary: #0000004c; --fallback-color-icon-tertiary-hover: #000000cc; --fallback-color-icon-disabled: #0000004c; --fallback-color-icon-pressed: #0d99ffff; --fallback-color-border: #e5e5e5ff; --fallback-color-bg-brand: #0d99ffff; --fallback-color-bg-brand-hover: #0d99ffff; --fallback-color-bg-brand-pressed: #0d99ffff; --fallback-color-bg-brand-secondary: #daebf7ff; --fallback-color-bg-brand-tertiary: #daebf7ff; --fallback-color-text-brand: #0d99ffff; --fallback-color-text-brand-secondary: #0d99ffff; --fallback-color-text-brand-tertiary: #0d99ffff; --fallback-color-icon-brand: #0d99ffff; --fallback-color-icon-brand-secondary: #0d99ffff; --fallback-color-icon-brand-tertiary: #0d99ffff; --fallback-color-icon-brand-pressed: #0000004c; --fallback-color-border-brand: #0d99ffff; --fallback-color-icon-onbrand: #ffffffff; --fallback-color-text-onbrand: #ffffffff; --fallback-color-border-onbrand: #ffffffff; --fallback-color-bg-selected: #daebf7ff; --fallback-color-bg-selected-hover: #daebf7ff; --fallback-color-bg-selected-pressed: #daebf7ff; --fallback-color-bg-selected-secondary: #edf5faff; --fallback-color-bg-selected-tertiary: #edf5faff; --fallback-color-text-selected: #0d99ffff; --fallback-color-text-selected-secondary: #0d99ffff; --fallback-color-text-selected-tertiary: #0d99ffff; --fallback-color-icon-selected: #0d99ffff; --fallback-color-icon-selected-secondary: #0d99ffff; --fallback-color-icon-selected-tertiary: #0d99ffff; --fallback-color-border-selected: #0d99ffff; --fallback-color-icon-onselected: #00000014; --fallback-color-text-onselected: #00000014; --fallback-color-border-onselected: #ffffffff; --fallback-color-bg-menu: #222222ff; --fallback-color-bg-menu-hover: #222222ff; --fallback-color-bg-menu-pressed: #222222ff; --fallback-color-bg-menu-secondary: #222222ff; --fallback-color-bg-menu-tertiary: #222222ff; --fallback-color-text-menu: #ffffffff; --fallback-color-text-menu-hover: #ffffffff; --fallback-color-text-menu-secondary: #ffffff66; --fallback-color-text-menu-secondary-hover: #ffffffff; --fallback-color-text-menu-tertiary: #ffffff66; --fallback-color-text-menu-tertiary-hover: #ffffffff; --fallback-color-icon-menu: #ffffffff; --fallback-color-icon-menu-hover: #ffffffff; --fallback-color-icon-menu-secondary: #ffffff66; --fallback-color-icon-menu-secondary-hover: #ffffffff; --fallback-color-icon-menu-tertiary: #ffffff66; --fallback-color-icon-menu-tertiary-hover: #ffffffff; --fallback-color-icon-menu-pressed: #0d99ffff; --fallback-color-border-menu: #ffffff33; --fallback-color-text-menu-danger: #f24822ff; --fallback-color-icon-menu-danger: #f24822ff; --fallback-color-text-menu-warning: #ffeb00ff; --fallback-color-icon-menu-warning: #ffeb00ff; --fallback-color-bg-menu-selected: #0d99ffff; --fallback-color-bg-menu-selected-hover: #0d99ffff; --fallback-color-bg-menu-selected-pressed: #0d99ffff; --fallback-color-bg-menu-selected-secondary: #0d99ffff; --fallback-color-bg-menu-selected-tertiary: #0d99ffff; --fallback-color-text-menu-selected: #0d99ffff; --fallback-color-text-menu-selected-secondary: #0d99ffff; --fallback-color-text-menu-selected-tertiary: #0d99ffff; --fallback-color-icon-menu-selected: #0d99ffff; --fallback-color-icon-menu-selected-secondary: #0d99ffff; --fallback-color-icon-menu-selected-tertiary: #0d99ffff; --fallback-color-border-menu-selected: #0d99ffff; --fallback-color-icon-menu-onselected: #ffffffff; --fallback-color-text-menu-onselected: #ffffffff; --fallback-color-border-menu-onselected: #ffffffff; --fallback-color-bg-toolbar: #2c2c2cff; --fallback-color-bg-toolbar-hover: #000000ff; --fallback-color-bg-toolbar-pressed: #000000ff; --fallback-color-bg-toolbar-secondary: #2c2c2cff; --fallback-color-bg-toolbar-tertiary: #2c2c2cff; --fallback-color-text-toolbar: #ffffffff; --fallback-color-text-toolbar-hover: #ffffffff; --fallback-color-text-toolbar-secondary: #ffffff66; --fallback-color-text-toolbar-secondary-hover: #ffffffff; --fallback-color-text-toolbar-tertiary: #ffffff66; --fallback-color-text-toolbar-tertiary-hover: #ffffffff; --fallback-color-icon-toolbar: #ffffffff; --fallback-color-icon-toolbar-hover: #ffffffff; --fallback-color-icon-toolbar-secondary: #ffffff66; --fallback-color-icon-toolbar-secondary-hover: #ffffffff; --fallback-color-icon-toolbar-tertiary: #ffffff66; --fallback-color-icon-toolbar-tertiary-hover: #ffffffff; --fallback-color-icon-toolbar-pressed: #0d99ffff; --fallback-color-border-toolbar: #ffffff33; --fallback-color-text-toolbar-danger: #f24822ff; --fallback-color-icon-toolbar-danger: #f24822ff; --fallback-color-text-toolbar-warning: #ffeb00ff; --fallback-color-icon-toolbar-warning: #ffeb00ff; --fallback-color-bg-toolbar-selected: #0d99ffff; --fallback-color-bg-toolbar-selected-hover: #0d99ffff; --fallback-color-bg-toolbar-selected-pressed: #0d99ffff; --fallback-color-bg-toolbar-selected-secondary: #0d99ffff; --fallback-color-bg-toolbar-selected-tertiary: #0d99ffff; --fallback-color-text-toolbar-selected: #0d99ffff; --fallback-color-text-toolbar-selected-secondary: #0d99ffff; --fallback-color-text-toolbar-selected-tertiary: #0d99ffff; --fallback-color-icon-toolbar-selected: #0d99ffff; --fallback-color-icon-toolbar-selected-secondary: #0d99ffff; --fallback-color-icon-toolbar-selected-tertiary: #0d99ffff; --fallback-color-border-toolbar-selected: #0d99ffff; --fallback-color-text-toolbar-onselected: #ffffffff; --fallback-color-icon-toolbar-onselected: #ffffffff; --fallback-color-border-toolbar-onselected: #ffffffff; --fallback-color-bg-tooltip: #050505ff; --fallback-color-bg-tooltip-hover: #050505ff; --fallback-color-bg-tooltip-pressed: #050505ff; --fallback-color-bg-tooltip-secondary: #050505ff; --fallback-color-bg-tooltip-tertiary: #050505ff; --fallback-color-text-tooltip: #ffffffff; --fallback-color-text-tooltip-hover: #ffffffff; --fallback-color-text-tooltip-secondary: #ffffff66; --fallback-color-text-tooltip-secondary-hover: #ffffffff; --fallback-color-text-tooltip-tertiary: #ffffff66; --fallback-color-text-tooltip-tertiary-hover: #ffffffff; --fallback-color-icon-tooltip: #ffffffff; --fallback-color-icon-tooltip-hover: #ffffffff; --fallback-color-icon-tooltip-secondary: #ffffff66; --fallback-color-icon-tooltip-secondary-hover: #ffffffff; --fallback-color-icon-tooltip-tertiary: #ffffff66; --fallback-color-icon-tooltip-tertiary-hover: #ffffffff; --fallback-color-icon-tooltip-pressed: #0d99ffff; --fallback-color-border-tooltip: #ffffff33; --fallback-color-text-tooltip-danger: #f24822ff; --fallback-color-icon-tooltip-danger: #f24822ff; --fallback-color-text-tooltip-warning: #ffeb00ff; --fallback-color-icon-tooltip-warning: #ffeb00ff; --fallback-color-bg-tooltip-selected: #0d99ffff; --fallback-color-bg-tooltip-selected-hover: #0d99ffff; --fallback-color-bg-tooltip-selected-pressed: #0d99ffff; --fallback-color-bg-tooltip-selected-secondary: #0d99ffff; --fallback-color-bg-tooltip-selected-tertiary: #0d99ffff; --fallback-color-text-tooltip-selected: #0d99ffff; --fallback-color-text-tooltip-selected-secondary: #0d99ffff; --fallback-color-text-tooltip-selected-tertiary: #0d99ffff; --fallback-color-icon-tooltip-selected: #0d99ffff; --fallback-color-icon-tooltip-selected-secondary: #0d99ffff; --fallback-color-icon-tooltip-selected-tertiary: #0d99ffff; --fallback-color-border-tooltip-selected: #0d99ffff; --fallback-color-text-tooltip-onselected: #ffffffff; --fallback-color-icon-tooltip-onselected: #ffffffff; --fallback-color-border-tooltip-onselected: #ffffffff; --fallback-color-bg-warning: #ffeb00ff; --fallback-color-bg-warning-hover: #ffeb00ff; --fallback-color-bg-warning-pressed: #ffeb00ff; --fallback-color-bg-warning-secondary: #ffeb00ff; --fallback-color-bg-warning-tertiary: #ffeb00ff; --fallback-color-text-warning: #ffeb00ff; --fallback-color-text-warning-secondary: #ffeb00ff; --fallback-color-text-warning-tertiary: #ffeb00ff; --fallback-color-icon-warning: #ffeb00ff; --fallback-color-icon-warning-secondary: #ffeb00ff; --fallback-color-icon-warning-tertiary: #ffeb00ff; --fallback-color-border-warning: #ffeb00ff; --fallback-color-icon-warning-pressed: #ffeb00ff; --fallback-color-text-onwarning: #333333ff; --fallback-color-icon-onwarning: #333333ff; --fallback-color-border-onwarning: #0000004c; --fallback-color-bg-danger: #f24822ff; --fallback-color-bg-danger-hover: #f2482214; --fallback-color-bg-danger-pressed: #f2482214; --fallback-color-bg-danger-secondary: #f24822ff; --fallback-color-bg-danger-tertiary: #f24822ff; --fallback-color-text-danger: #f24822ff; --fallback-color-text-danger-secondary: #f24822ff; --fallback-color-text-danger-tertiary: #f24822ff; --fallback-color-icon-danger: #f24822ff; --fallback-color-icon-danger-secondary: #f24822ff; --fallback-color-icon-danger-tertiary: #f24822ff; --fallback-color-icon-danger-pressed: #f24822ff; --fallback-color-border-danger: #f24822ff; --fallback-color-text-ondanger: #ffffffff; --fallback-color-icon-ondanger: #ffffffff; --fallback-color-border-ondanger: #ffffff66; --fallback-color-bg-success: #1bc47dff; --fallback-color-bg-success-hover: #1bc47dff; --fallback-color-bg-success-pressed: #1bc47dff; --fallback-color-bg-success-secondary: #1bc47dff; --fallback-color-bg-success-tertiary: #1bc47dff; --fallback-color-text-success: #1bc47dff; --fallback-color-text-success-secondary: #1bc47dff; --fallback-color-text-success-tertiary: #1bc47dff; --fallback-color-icon-success: #1bc47dff; --fallback-color-icon-success-secondary: #1bc47dff; --fallback-color-icon-success-tertiary: #1bc47dff; --fallback-color-icon-success-pressed: #1bc47dff; --fallback-color-border-success: #1bc47dff; --fallback-color-text-onsuccess: #ffffffff; --fallback-color-icon-onsuccess: #ffffffff; --fallback-color-border-onsuccess: #ffffffff; --fallback-color-bg-design: #0d99ffff; --fallback-color-bg-design-hover: #0d99ffff; --fallback-color-bg-design-pressed: #0d99ffff; --fallback-color-bg-design-secondary: #daebf7ff; --fallback-color-bg-design-tertiary: #daebf7ff; --fallback-color-text-design: #0d99ffff; --fallback-color-text-design-secondary: #0d99ffff; --fallback-color-text-design-tertiary: #0d99ffff; --fallback-color-icon-design: #0d99ffff; --fallback-color-icon-design-secondary: #0d99ffff; --fallback-color-icon-design-tertiary: #0d99ffff; --fallback-color-icon-design-pressed: #0000004c; --fallback-color-border-design: #0d99ffff; --fallback-color-icon-ondesign: #ffffffff; --fallback-color-text-ondesign: #ffffffff; --fallback-color-border-ondesign: #ffffffff; --fallback-color-icon-onfigjam: #ffffffff; --fallback-color-text-onfigjam: #ffffffff; --fallback-color-border-onfigjam: #ffffffff; --fallback-color-icon-oncomponent: #ffffffff; --fallback-color-text-oncomponent: #ffffffff; --fallback-color-border-oncomponent: #ffffffff; } } /* "shared/styles/constants/_tokens.css" */ @layer css-modules { /* Generated by share/design-tokens */ body { --ramp-black-100-light: rgba(0, 0, 0, 0.05); --ramp-black-100-dark: rgba(0, 0, 0, 0.05); --ramp-black-1000-light: rgba(0, 0, 0, 1); --ramp-black-1000-dark: rgba(0, 0, 0, 1); --ramp-black-200-light: rgba(0, 0, 0, 0.1); --ramp-black-200-dark: rgba(0, 0, 0, 0.1); --ramp-black-300-light: rgba(0, 0, 0, 0.2); --ramp-black-300-dark: rgba(0, 0, 0, 0.2); --ramp-black-400-light: rgba(0, 0, 0, 0.3); --ramp-black-400-dark: rgba(0, 0, 0, 0.3); --ramp-black-500-light: rgba(0, 0, 0, 0.5); --ramp-black-500-dark: rgba(0, 0, 0, 0.5); --ramp-black-600-light: rgba(0, 0, 0, 0.8); --ramp-black-600-dark: rgba(0, 0, 0, 0.8); --ramp-black-700-light: rgba(0, 0, 0, 0.85); --ramp-black-700-dark: rgba(0, 0, 0, 0.85); --ramp-black-800-light: rgba(0, 0, 0, 0.9); --ramp-black-800-dark: rgba(0, 0, 0, 0.9); --ramp-black-900-light: rgba(0, 0, 0, 0.95); --ramp-black-900-dark: rgba(0, 0, 0, 0.95); --ramp-blue-100-dark: #e2f1fd; --ramp-blue-100-light: #f2f9ff; --ramp-blue-1000-dark: #161e36; --ramp-blue-1000-light: #0d193f; --ramp-blue-200-dark: #cfe9fc; --ramp-blue-200-light: #e5f4ff; --ramp-blue-300-dark: #a8d7fa; --ramp-blue-300-light: #bde3ff; --ramp-blue-400-dark: #7cc4f8; --ramp-blue-400-light: #80caff; --ramp-blue-500-dark: #0c8ce9; --ramp-blue-500-light: #0d99ff; --ramp-blue-600-dark: #0a6dc2; --ramp-blue-600-light: #007be5; --ramp-blue-700-dark: #105cad; --ramp-blue-700-light: #0768cf; --ramp-blue-800-dark: #184591; --ramp-blue-800-light: #034ac1; --ramp-blue-900-dark: #1b335f; --ramp-blue-900-light: #093077; --ramp-green-100-dark: #ddfde2; --ramp-green-100-light: #ebffee; --ramp-green-1000-dark: #0b1e15; --ramp-green-1000-light: #083a23; --ramp-green-200-dark: #beefc2; --ramp-green-200-light: #cff7d3; --ramp-green-300-dark: #a1e8b9; --ramp-green-300-light: #aff4c6; --ramp-green-400-dark: #79d297; --ramp-green-400-light: #85e0a3; --ramp-green-500-dark: #198f51; --ramp-green-500-light: #14ae5c; --ramp-green-600-dark: #078348; --ramp-green-600-light: #009951; --ramp-green-700-dark: #0a5c35; --ramp-green-700-light: #008043; --ramp-green-800-dark: #0a4c2d; --ramp-green-800-light: #036838; --ramp-green-900-dark: #082618; --ramp-green-900-light: #024626; --ramp-grey-100-light: #f5f5f5; --ramp-grey-100-dark: #f5f5f5; --ramp-grey-1000-light: #111111; --ramp-grey-1000-dark: #111111; --ramp-grey-200-light: #e6e6e6; --ramp-grey-200-dark: #e6e6e6; --ramp-grey-300-light: #d9d9d9; --ramp-grey-300-dark: #d9d9d9; --ramp-grey-400-light: #b3b3b3; --ramp-grey-400-dark: #b3b3b3; --ramp-grey-500-light: #757575; --ramp-grey-500-dark: #757575; --ramp-grey-600-light: #444444; --ramp-grey-600-dark: #444444; --ramp-grey-700-light: #383838; --ramp-grey-700-dark: #383838; --ramp-grey-800-light: #2c2c2c; --ramp-grey-800-dark: #2c2c2c; --ramp-grey-900-light: #1e1e1e; --ramp-grey-900-dark: #1e1e1e; --ramp-orange-100-dark: #ffedd7; --ramp-orange-100-light: #fff4e5; --ramp-orange-1000-dark: #371d06; --ramp-orange-1000-light: #8a480f; --ramp-orange-200-dark: #fdd9b4; --ramp-orange-200-light: #ffe0c2; --ramp-orange-300-dark: #fcc67f; --ramp-orange-300-light: #fcd19c; --ramp-orange-400-dark: #fcb34a; --ramp-orange-400-light: #ffc470; --ramp-orange-500-dark: #de7d02; --ramp-orange-500-light: #ffa629; --ramp-orange-600-dark: #c86f04; --ramp-orange-600-light: #fc9e24; --ramp-orange-700-dark: #ad5f05; --ramp-orange-700-light: #f79722; --ramp-orange-800-dark: #985306; --ramp-orange-800-light: #dd7c0e; --ramp-orange-900-dark: #673806; --ramp-orange-900-light: #ce7012; --ramp-pale_blue-100-light: #f1f5f8; --ramp-pale_blue-100-dark: #f1f5f8; --ramp-pale_blue-1000-light: #121721; --ramp-pale_blue-1000-dark: #121721; --ramp-pale_blue-200-light: #e3ecf2; --ramp-pale_blue-200-dark: #e3ecf2; --ramp-pale_blue-300-light: #d2dae4; --ramp-pale_blue-300-dark: #d2dae4; --ramp-pale_blue-400-light: #afbccf; --ramp-pale_blue-400-dark: #afbccf; --ramp-pale_blue-500-light: #667799; --ramp-pale_blue-500-dark: #667799; --ramp-pale_blue-600-light: #536383; --ramp-pale_blue-600-dark: #536383; --ramp-pale_blue-700-light: #4a5878; --ramp-pale_blue-700-dark: #4a5878; --ramp-pale_blue-800-light: #394360; --ramp-pale_blue-800-dark: #394360; --ramp-pale_blue-900-light: #252d41; --ramp-pale_blue-900-dark: #252d41; --ramp-pale_green-100-light: #f1f8f2; --ramp-pale_green-100-dark: #f1f8f2; --ramp-pale_green-1000-light: #172b22; --ramp-pale_green-1000-dark: #172b22; --ramp-pale_green-200-light: #daecdf; --ramp-pale_green-200-dark: #daecdf; --ramp-pale_green-300-light: #c3e0cc; --ramp-pale_green-300-dark: #c3e0cc; --ramp-pale_green-400-light: #9fc1aa; --ramp-pale_green-400-dark: #9fc1aa; --ramp-pale_green-500-light: #678e79; --ramp-pale_green-500-dark: #678e79; --ramp-pale_green-600-light: #5c806d; --ramp-pale_green-600-dark: #5c806d; --ramp-pale_green-700-light: #517361; --ramp-pale_green-700-dark: #517361; --ramp-pale_green-800-light: #476656; --ramp-pale_green-800-dark: #476656; --ramp-pale_green-900-light: #2f483c; --ramp-pale_green-900-dark: #2f483c; --ramp-pale_pink-100-light: #f6eef4; --ramp-pale_pink-100-dark: #f6eef4; --ramp-pale_pink-1000-light: #1b1318; --ramp-pale_pink-1000-dark: #1b1318; --ramp-pale_pink-200-light: #f2e3ee; --ramp-pale_pink-200-dark: #f2e3ee; --ramp-pale_pink-300-light: #e8cee1; --ramp-pale_pink-300-dark: #e8cee1; --ramp-pale_pink-400-light: #daaace; --ramp-pale_pink-400-dark: #daaace; --ramp-pale_pink-500-light: #ab5998; --ramp-pale_pink-500-dark: #ab5998; --ramp-pale_pink-600-light: #86507a; --ramp-pale_pink-600-dark: #86507a; --ramp-pale_pink-700-light: #724667; --ramp-pale_pink-700-dark: #724667; --ramp-pale_pink-800-light: #51344a; --ramp-pale_pink-800-dark: #51344a; --ramp-pale_pink-900-light: #33252f; --ramp-pale_pink-900-dark: #33252f; --ramp-pale_purple-100-light: #f4f1f8; --ramp-pale_purple-100-dark: #f4f1f8; --ramp-pale_purple-1000-light: #1a141f; --ramp-pale_purple-1000-dark: #1a141f; --ramp-pale_purple-200-light: #ede7f3; --ramp-pale_purple-200-dark: #ede7f3; --ramp-pale_purple-300-light: #e0d4ed; --ramp-pale_purple-300-dark: #e0d4ed; --ramp-pale_purple-400-light: #c5b2dc; --ramp-pale_purple-400-dark: #c5b2dc; --ramp-pale_purple-500-light: #7f699b; --ramp-pale_purple-500-dark: #7f699b; --ramp-pale_purple-600-light: #6b5884; --ramp-pale_purple-600-dark: #6b5884; --ramp-pale_purple-700-light: #604d75; --ramp-pale_purple-700-dark: #604d75; --ramp-pale_purple-800-light: #473956; --ramp-pale_purple-800-dark: #473956; --ramp-pale_purple-900-light: #33293d; --ramp-pale_purple-900-dark: #33293d; --ramp-pale_red-100-light: #faedeb; --ramp-pale_red-100-dark: #faedeb; --ramp-pale_red-1000-light: #1f1514; --ramp-pale_red-1000-dark: #1f1514; --ramp-pale_red-200-light: #f8e5e2; --ramp-pale_red-200-dark: #f8e5e2; --ramp-pale_red-300-light: #f3cfc9; --ramp-pale_red-300-dark: #f3cfc9; --ramp-pale_red-400-light: #eba99d; --ramp-pale_red-400-dark: #eba99d; --ramp-pale_red-500-light: #d4583b; --ramp-pale_red-500-dark: #d4583b; --ramp-pale_red-600-light: #a55440; --ramp-pale_red-600-dark: #a55440; --ramp-pale_red-700-light: #864537; --ramp-pale_red-700-dark: #864537; --ramp-pale_red-800-light: #60332a; --ramp-pale_red-800-dark: #60332a; --ramp-pale_red-900-light: #412621; --ramp-pale_red-900-dark: #412621; --ramp-pale_yellow-100-light: #fff5eb; --ramp-pale_yellow-100-dark: #fff5eb; --ramp-pale_yellow-1000-light: #211a12; --ramp-pale_yellow-1000-dark: #211a12; --ramp-pale_yellow-200-light: #fdeece; --ramp-pale_yellow-200-dark: #fdeece; --ramp-pale_yellow-300-light: #f5dfa8; --ramp-pale_yellow-300-dark: #f5dfa8; --ramp-pale_yellow-400-light: #e8cd7d; --ramp-pale_yellow-400-dark: #e8cd7d; --ramp-pale_yellow-500-light: #ad7f00; --ramp-pale_yellow-500-dark: #ad7f00; --ramp-pale_yellow-600-light: #906800; --ramp-pale_yellow-600-dark: #906800; --ramp-pale_yellow-700-light: #7a5800; --ramp-pale_yellow-700-dark: #7a5800; --ramp-pale_yellow-800-light: #5c4100; --ramp-pale_yellow-800-dark: #5c4100; --ramp-pale_yellow-900-light: #3a2a10; --ramp-pale_yellow-900-dark: #3a2a10; --ramp-pink-100-dark: #fde2fb; --ramp-pink-100-light: #fff0fe; --ramp-pink-1000-dark: #231a21; --ramp-pink-1000-light: #451138; --ramp-pink-200-dark: #fccaf8; --ramp-pink-200-light: #ffe0fc; --ramp-pink-300-dark: #fbb1ed; --ramp-pink-300-light: #ffbdf2; --ramp-pink-400-dark: #fc9ce0; --ramp-pink-400-light: #ff99e0; --ramp-pink-500-dark: #f316b0; --ramp-pink-500-light: #ff24bd; --ramp-pink-600-dark: #d01b9c; --ramp-pink-600-light: #ea10ac; --ramp-pink-700-dark: #96207a; --ramp-pink-700-light: #cb0b96; --ramp-pink-800-dark: #68275e; --ramp-pink-800-light: #971172; --ramp-pink-900-dark: #46253e; --ramp-pink-900-light: #5f114c; --ramp-purple-100-dark: #f1e7fe; --ramp-purple-100-light: #f9f5ff; --ramp-purple-1000-dark: #1f1924; --ramp-purple-1000-light: #2d0f46; --ramp-purple-200-dark: #e3cffc; --ramp-purple-200-light: #f1e5ff; --ramp-purple-300-dark: #d6b6fb; --ramp-purple-300-light: #e4ccff; --ramp-purple-400-dark: #d1a8ff; --ramp-purple-400-light: #d9b8ff; --ramp-purple-500-dark: #8a38f5; --ramp-purple-500-light: #9747ff; --ramp-purple-600-dark: #7a2ed6; --ramp-purple-600-light: #8638e5; --ramp-purple-700-dark: #652ca8; --ramp-purple-700-light: #7c2bda; --ramp-purple-800-dark: #50297a; --ramp-purple-800-light: #681abb; --ramp-purple-900-dark: #3e2654; --ramp-purple-900-light: #4b0d87; --ramp-red-100-dark: #fee7e7; --ramp-red-100-light: #fff5f5; --ramp-red-1000-dark: #311817; --ramp-red-1000-light: #660e0b; --ramp-red-200-dark: #fccdca; --ramp-red-200-light: #ffe2e0; --ramp-red-300-dark: #fbbcb6; --ramp-red-300-light: #ffc7c2; --ramp-red-400-dark: #fca397; --ramp-red-400-light: #ffafa3; --ramp-red-500-dark: #e03e1a; --ramp-red-500-light: #f24822; --ramp-red-600-dark: #c4381c; --ramp-red-600-light: #dc3412; --ramp-red-700-dark: #963323; --ramp-red-700-light: #bd2915; --ramp-red-800-dark: #7c2622; --ramp-red-800-light: #9f1f18; --ramp-red-900-dark: #54211c; --ramp-red-900-light: #771208; --ramp-tba-dark: initial /* FIX ME */; --ramp-tba-light: initial /* FIX ME */; --ramp-teal-100-dark: #ddf7fd; --ramp-teal-100-light: #ebfbff; --ramp-teal-1000-dark: #0e1f2a; --ramp-teal-1000-light: #0e2f43; --ramp-teal-200-dark: #bce6f1; --ramp-teal-200-light: #cef0f8; --ramp-teal-300-dark: #a4e2ef; --ramp-teal-300-light: #b6ecf7; --ramp-teal-400-dark: #67cbe4; --ramp-teal-400-light: #75d7f0; --ramp-teal-500-dark: #0887a0; --ramp-teal-500-light: #00a2c2; --ramp-teal-600-dark: #087691; --ramp-teal-600-light: #0087a8; --ramp-teal-700-dark: #0a5b76; --ramp-teal-700-light: #047195; --ramp-teal-800-dark: #0c455a; --ramp-teal-800-light: #085a78; --ramp-teal-900-dark: #0c2937; --ramp-teal-900-light: #093c53; --ramp-white-100-light: rgba(255, 255, 255, 0.05); --ramp-white-100-dark: rgba(255, 255, 255, 0.05); --ramp-white-1000-light: rgba(255, 255, 255, 1); --ramp-white-1000-dark: rgba(255, 255, 255, 1); --ramp-white-200-light: rgba(255, 255, 255, 0.1); --ramp-white-200-dark: rgba(255, 255, 255, 0.1); --ramp-white-300-light: rgba(255, 255, 255, 0.2); --ramp-white-300-dark: rgba(255, 255, 255, 0.2); --ramp-white-400-light: rgba(255, 255, 255, 0.4); --ramp-white-400-dark: rgba(255, 255, 255, 0.4); --ramp-white-500-light: rgba(255, 255, 255, 0.7); --ramp-white-500-dark: rgba(255, 255, 255, 0.7); --ramp-white-600-light: rgba(255, 255, 255, 0.8); --ramp-white-600-dark: rgba(255, 255, 255, 0.8); --ramp-white-700-light: rgba(255, 255, 255, 0.85); --ramp-white-700-dark: rgba(255, 255, 255, 0.85); --ramp-white-800-light: rgba(255, 255, 255, 0.9); --ramp-white-800-dark: rgba(255, 255, 255, 0.9); --ramp-white-900-light: rgba(255, 255, 255, 0.95); --ramp-white-900-dark: rgba(255, 255, 255, 0.95); --ramp-yellow-100-dark: #fdf7dd; --ramp-yellow-100-light: #fffbeb; --ramp-yellow-1000-dark: #71440f; --ramp-yellow-1000-light: #b86200; --ramp-yellow-200-dark: #fbe8ad; --ramp-yellow-200-light: #fff1c2; --ramp-yellow-300-dark: #f9df90; --ramp-yellow-300-light: #ffe8a3; --ramp-yellow-400-dark: #f7d15f; --ramp-yellow-400-light: #ffd966; --ramp-yellow-500-dark: #f3c11b; --ramp-yellow-500-light: #ffcd29; --ramp-yellow-600-dark: #f2b50d; --ramp-yellow-600-light: #ffc21a; --ramp-yellow-700-dark: #e4a711; --ramp-yellow-700-light: #fab815; --ramp-yellow-800-dark: #c58011; --ramp-yellow-800-light: #eba611; --ramp-yellow-900-dark: #925711; --ramp-yellow-900-light: #dd940e; } } /* "shared/styles/constants/_tokens_special.css" */ @layer css-modules { /* Warning: please do not add to this file without checking with #feat-dark-mode first. The majority of tokens used day-to-day should be covered by the generated set in _tokens.css. Keep this in sync with the source-of-truth spreadsheet here: https://docs.google.com/spreadsheets/d/1xFti6HPPD_MBXO-6w379uHpXCbXkbD2ptyFQujPDlyk/edit#gid=1806787296. */ :root { --color-bghoveronlightcanvas: initial; --color-bghoverondarkcanvas: initial; --color-bgfocusedoncanvas: initial; --color-textmenuhighlight: initial; --color-icononlightcanvas: initial; --color-iconondarkcanvas: initial; --color-bglburegistrationbanner: initial; --color-shadow: initial; --color-modalbackdrop: initial; --color-prototypeloadingbackdrop: initial; --color-textondarkcanvas: initial; --color-textondarkcanvassecondary: initial; --color-textonlightcanvas: initial; --color-textonlightcanvassecondary: initial; --color-loading: initial; --color-loadingsecondary: initial; --color-loadingmenu: initial; --color-loadingsecondarymenu: initial; --color-conditionalborder: initial; --color-texthighlight: initial; --color-scrollbar: initial; --color-scrollbartrackhover: initial; --color-scrollbartrackdrag: initial; --color-bgselectedarea: initial; /* In legacy mode, we actually want to set the new multiplayer colors so they are available. IMPORTANT NOTE: these should be kept in sync with the hex codes in FGColors.cpp and multiplayer/lib/document.ts. */ --color-multiplayerblue: #007be5; --color-multiplayerpurple: #9747ff; --color-multiplayerpink: #ff24bd; --color-multiplayerred: #f24822; --color-multiplayeryellow: #ffcd29; --color-multiplayergreen: #14ae5c; --color-multiplayergrey: #667799; --color-multiplayerbluehover: #0768cf; --color-multiplayerpurplehover: #8638e5; --color-multiplayerpinkhover: #ea10ac; --color-multiplayerredhover: #dc3412; --color-multiplayeryellowhover: #ffc21a; --color-multiplayergreenhover: #009951; --color-multiplayergreyhover: #536383; --color-multiplayerbluesecondary: #034ac1; --color-multiplayerpurplesecondary: #681abb; --color-multiplayerpinksecondary: #971172; --color-multiplayerredsecondary: #9f1f18; --color-multiplayeryellowsecondary: #eba611; --color-multiplayergreensecondary: #036838; --color-multiplayergreysecondary: #394360; --color-textonmultiplayerblue: rgba(255, 255, 255, 1); --color-textonmultiplayerpurple: rgba(255, 255, 255, 1); --color-textonmultiplayerpink: rgba(255, 255, 255, 1); --color-textonmultiplayerred: rgba(255, 255, 255, 1); --color-textonmultiplayeryellow: rgba(0, 0, 0, 0.9); --color-textonmultiplayergreen: rgba(255, 255, 255, 1); --color-textonmultiplayergrey: rgba(255, 255, 255, 1); --color-bg-slot: rgba(255, 36, 189, 0.25); /* pink_500_light with 25% opacity */ --color-border-slot: #ff24bd; --color-template-slot: var(--color-bg-slot); --color-iconpublishedfile: initial; --color-iconpublishedfilesecondary: initial; --color-iconprototypefile: initial; --color-iconprototypefilesecondary: initial; --color-icondesignfilesecondary: initial; --color-iconfigjamfilesecondary: initial; --color-bghovertransparent: initial; --color-bgcomponent: initial; --text-tracking-pos: 0; --text-tracking-neg: 0.005; /* TODO(ryhan): add missing tokens for desktop */ --color-border-desktopBackgrounded: initial; --color-text-desktopForeground-secondary: initial; --color-bg-desktopBackgrounded: initial; --color-bg-desktopFullscreen-hover: initial; --color-bg-desktopForeground: initial; --color-bg-desktopForeground-secondary: initial; --color-bg-desktopFullscreen: initial; --elevation-100-canvas: initial; --elevation-100-canvas-drop-shadow: initial; --elevation-200-canvas: initial; --elevation-200-canvas-drop-shadow: initial; --elevation-300-tooltip: initial; --elevation-300-tooltip-drop-shadow: initial; --elevation-400-menu-panel: initial; --elevation-500-modal-window: initial; --color-loading-progress-logo: initial; --color-loading-progress-cover: initial; --color-loading-progress-wrapper: initial; --color-loading-progress-bar: initial; --color-loading-progress-accent: initial; --color-code: initial; --color-codecomment: initial; --color-codeproperty: initial; --color-codevalue: initial; --color-codestring: initial; --color-codetag: initial; --color-codeattribute: initial; --color-codeclassname: initial; --color-codestylename: initial; --color-codevariable: initial; --color-codeaccent: initial; /* We need the border between the line numbers and the code to be transparent * to make the copy highlight look correct. */ --color-border-code-well: var(--color-border); --color-bg-code: initial; --color-bg-connected-code-well: initial; --color-bg-manual-code-well: initial; --color-bg-error-code-well: initial; --color-badge-connected-code-well: initial; --color-badge-manual-code-well: initial; --color-badge-error-code-well: initial; --color-instance-pill-code-well: initial; --color-instance-pill-code-well-hover: initial; --color-error-pill-code-well: initial; --color-bgvoting: initial; --color-bgvotingsecondary: initial; --color-bgvotingtertiary: initial; --color-icononvoting: initial; --color-textonvoting: initial; --color-bgvotingwheelhover: initial; --color-bgvotingwheeldial: initial; } [data-preferred-theme='light'] { --color-bghoveronlightcanvas: rgba(0, 0, 0, 0.2); --color-bghoverondarkcanvas: rgba(255, 255, 255, 0.2); --color-bgfocusedoncanvas: rgba(255, 255, 255, 1); --color-icononlightcanvas: rgba(0, 0, 0, 0.9); --color-iconondarkcanvas: rgba(255, 255, 255, 0.9); --color-bglburegistrationbanner: #eeeeee; --color-textmenuhighlight: #007be5; --color-shadow: rgba(0, 0, 0, 0.15); --color-modalbackdrop: rgba(0, 0, 0, 0.5); --color-prototypeloadingbackdrop: rgba(0, 0, 0, 0.9); --color-textondarkcanvas: rgba(255, 255, 255, 0.9); --color-textondarkcanvassecondary: rgba(255, 255, 255, 0.7); --color-textonlightcanvas: rgba(0, 0, 0, 0.9); --color-textonlightcanvassecondary: rgba(0, 0, 0, 0.5); --color-loading: rgba(0, 0, 0, 0.1); --color-loadingsecondary: rgba(0, 0, 0, 0.05); --color-loadingmenu: rgba(255, 255, 255, 0.1); --color-loadingsecondarymenu: rgba(255, 255, 255, 0.05); --color-conditionalborder: initial; --color-texthighlight: rgba(13, 153, 255, 0.4); --color-scrollbar: rgba(179, 179, 179, 0.5); --color-scrollbartrackhover: color( #f5f5f5 a(50%) ); /* Same as --color-bg-hover at 50% opacity */ --color-scrollbartrackdrag: color( rgba(255, 255, 255, 1) a(50%) ); /* Same as --color-bg at 50% opacity */ --color-bgselectedarea: rgba(13, 153, 255, 0.2); --color-multiplayerblue: #007be5; --color-multiplayerpurple: #9747ff; --color-multiplayerpink: #ff24bd; --color-multiplayerred: #f24822; --color-multiplayeryellow: #ffcd29; --color-multiplayergreen: #14ae5c; --color-multiplayergrey: #667799; --color-multiplayerbluehover: #0768cf; --color-multiplayerpurplehover: #8638e5; --color-multiplayerpinkhover: #ea10ac; --color-multiplayerredhover: #dc3412; --color-multiplayeryellowhover: #ffc21a; --color-multiplayergreenhover: #009951; --color-multiplayergreyhover: #536383; --color-multiplayerbluesecondary: #034ac1; --color-multiplayerpurplesecondary: #681abb; --color-multiplayerpinksecondary: #971172; --color-multiplayerredsecondary: #9f1f18; --color-multiplayeryellowsecondary: #eba611; --color-multiplayergreensecondary: #036838; --color-multiplayergreysecondary: #394360; --color-textonmultiplayerblue: rgba(255, 255, 255, 1); --color-textonmultiplayerpurple: rgba(255, 255, 255, 1); --color-textonmultiplayerpink: rgba(255, 255, 255, 1); --color-textonmultiplayerred: rgba(255, 255, 255, 1); --color-textonmultiplayeryellow: rgba(0, 0, 0, 0.9); --color-textonmultiplayergreen: rgba(255, 255, 255, 1); --color-textonmultiplayergrey: rgba(255, 255, 255, 1); --color-bg-slot: rgba(255, 36, 189, 0.25); /* pink_500_light with 25% opacity */ --color-border-slot: #ff24bd; --color-iconpublishedfile: #2c2c2c; --color-iconpublishedfilesecondary: #757575; --color-iconprototypefile: #d9d9d9; --color-iconprototypefilesecondary: #2c2c2c; --color-icondesignfilesecondary: #80caff; --color-iconfigjamfilesecondary: #d9b8ff; --color-bghovertransparent: rgba(0, 0, 0, 0.05); --color-bgcomponent: #e6e6e6; --text-tracking-pos: 0; --text-tracking-neg: 0.005; /* Use in box-shadow rules */ --elevation-100-canvas: 0px 0px 0.5px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15); --elevation-100-canvas-drop-shadow: drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.3)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15)); /* Same as --elevation-100-canvas but used in `filter` */ --elevation-200-canvas: 0px 0px 0.5px rgba(0, 0, 0, 0.18), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1); --elevation-200-canvas-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.18)); --elevation-300-tooltip: 0px 0px 0.5px rgba(0, 0, 0, 0.15), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 1px 3px rgba(0, 0, 0, 0.1); --elevation-300-tooltip-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0px 5px 12px rgba(0, 0, 0, 0.13)) drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15)); --elevation-400-menu-panel: 0px 0px 0.5px rgba(0, 0, 0, 0.12), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 2px 5px rgba(0, 0, 0, 0.15); --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15); --color-loading-progress-logo: #383838; --color-loading-progress-cover: #e6e6e6; --color-loading-progress-wrapper: rgba(255, 255, 255, 1); --color-loading-progress-bar: #383838; --color-loading-progress-accent: rgba(255, 255, 255, 0.4); --color-bginspectpadding: #0d99ff; --color-bginspectpaddingtertiary: #e5f4ff; --color-borderinspectpadding: #0d99ff; --color-textoninspectpadding: rgba(255, 255, 255, 1); --color-bginspectspacing: #ff24bd; --color-borderinspectspacing: #ff24bd; --color-textoninspectspacing: rgba(255, 255, 255, 1); --color-code: rgba(0, 0, 0, 0.9); --color-codecomment: rgba(0, 0, 0, 0.5); --color-codeproperty: rgba(0, 0, 0, 0.9); --color-codevalue: #ea10ac; --color-codestring: #007be5; --color-codetag: #8638e5; --color-codeattribute: rgba(0, 0, 0, 0.9); --color-codeclassname: #007be5; --color-codestylename: #007be5; --color-codevariable: #009951; --color-codeaccent: #ce7012; --color-border-code-well: rgba(0, 0, 0, 0.1); --color-bg-code: rgba(255, 255, 255, 1); --color-bg-connected-code-well: #ede7f3; /* rgba(151, 42, 255, 0.1); */ --color-bg-manual-code-well: #e3ecf2; /* rgba(0, 160, 255, 0.1); */ --color-bg-error-code-well: #f8e5e2; /* rgba(255, 0, 110, 0.1); */ --color-badge-connected-code-well: #9747ff; --color-badge-manual-code-well: #196ec5; --color-badge-error-code-well: #eb0a62; --color-instance-pill-code-well: #e0d4ed; --color-instance-pill-code-well-hover: #c5b2dc; --color-error-pill-code-well: #f3cfc9; --color-content-diff-added: #14ae5c; --color-content-diff-removed: #f24822; --color-bg-code-diff-indicator-added: #14ae5c; --color-bg-code-diff-indicator-removed: #f24822; --color-bg-code-diff-line-added: #cff7d3; --color-bg-code-diff-line-removed: #ffe2e0; --color-bgvoting: #ffcd29; --color-bgvotingsecondary: #fff1c2; --color-bgvotingtertiary: #fffbeb; --color-icononvoting: rgba(0, 0, 0, 0.9); --color-textonvoting: rgba(0, 0, 0, 0.9); --color-bgvotingwheelhover: #fff1c2; --color-bgvotingwheeldial: #ffd966; --dev-handoff-breadcrumbs-text-color: rgba(0, 0, 0, 0.4); --dev-handoff-breadcrumbs-selected-color: rgba(0, 0, 0, 1); --color-imageoverlay: rgba(0, 0, 0, 0.1); --color-imageoverlay-hover: rgba(0, 0, 0, 0.2); } [data-preferred-theme='dark']:not([data-editor-theme='whiteboard']) { --color-bghoveronlightcanvas: rgba(0, 0, 0, 0.2); --color-bghoverondarkcanvas: rgba(255, 255, 255, 0.2); --color-bgfocusedoncanvas: rgba(255, 255, 255, 1); --color-icononlightcanvas: rgba(0, 0, 0, 0.9); --color-iconondarkcanvas: rgba(255, 255, 255, 0.9); --color-bglburegistrationbanner: #5551ff; --color-textmenuhighlight: #0a6dc2; --color-shadow: rgba(0, 0, 0, 0.6); --color-modalbackdrop: rgba(0, 0, 0, 0.5); --color-prototypeloadingbackdrop: rgba(0, 0, 0, 0.9); --color-textondarkcanvas: rgba(255, 255, 255, 0.9); --color-textondarkcanvassecondary: rgba(255, 255, 255, 0.7); --color-textonlightcanvas: rgba(0, 0, 0, 0.9); --color-textonlightcanvassecondary: rgba(0, 0, 0, 0.5); --color-loading: rgba(255, 255, 255, 0.1); --color-loadingsecondary: rgba(255, 255, 255, 0.05); --color-loadingmenu: rgba(255, 255, 255, 0.1); --color-loadingsecondarymenu: rgba(255, 255, 255, 0.05); --color-conditionalborder: #444444; --color-texthighlight: rgba(13, 153, 255, 0.4); --color-scrollbar: rgba(179, 179, 179, 0.5); --color-scrollbartrackhover: color( #383838 a(50%) ); /* Same as --color-bg-hover at 50% opacity */ --color-scrollbartrackdrag: color(#2c2c2c a(50%)); /* Same as --color-bg at 50% opacity */ --color-bgselectedarea: rgba(13, 153, 255, 0.2); --color-multiplayerblue: #0a6dc2; --color-multiplayerpurple: #8a38f5; --color-multiplayerpink: #f316b0; --color-multiplayerred: #e03e1a; --color-multiplayeryellow: #f3c11b; --color-multiplayergreen: #198f51; --color-multiplayergrey: #667799; --color-multiplayerbluehover: #105cad; --color-multiplayerpurplehover: #7a2ed6; --color-multiplayerpinkhover: #d01b9c; --color-multiplayerredhover: #c4381c; --color-multiplayeryellowhover: #f2b50d; --color-multiplayergreenhover: #078348; --color-multiplayergreyhover: #536383; --color-multiplayerbluesecondary: #184591; --color-multiplayerpurplesecondary: #50297a; --color-multiplayerpinksecondary: #68275e; --color-multiplayerredsecondary: #7c2622; --color-multiplayeryellowsecondary: #c58011; --color-multiplayergreensecondary: #0a4c2d; --color-multiplayergreysecondary: #394360; --color-textonmultiplayerblue: rgba(255, 255, 255, 1); --color-textonmultiplayerpurple: rgba(255, 255, 255, 1); --color-textonmultiplayerpink: rgba(255, 255, 255, 1); --color-textonmultiplayerred: rgba(255, 255, 255, 1); --color-textonmultiplayeryellow: rgba(0, 0, 0, 0.9); --color-textonmultiplayergreen: rgba(255, 255, 255, 1); --color-textonmultiplayergrey: rgba(255, 255, 255, 1); --color-bg-slot: rgba(243, 22, 176, 0.25); /* pink_500_dark with 25% opacity */ --color-border-slot: #f316b0; --color-iconpublishedfile: #757575; --color-iconpublishedfilesecondary: #b3b3b3; --color-iconprototypefile: #757575; --color-iconprototypefilesecondary: rgba(255, 255, 255, 1); --color-icondesignfilesecondary: #7cc4f8; --color-iconfigjamfilesecondary: #d1a8ff; --color-bghovertransparent: rgba(255, 255, 255, 0.05); --color-bgcomponent: #e6e6e6; --text-tracking-pos: 0; --text-tracking-neg: 0.005; /* Use in box-shadow rules */ --elevation-100-canvas: 0px 0px 0.5px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3); --elevation-100-canvas-drop-shadow: drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.5)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.4)) drop-shadow(inset 0px 0.5px 0px rgba(255, 255, 255, 0.1)) drop-shadow(inset 0px 0px 0.5px rgba(255, 255, 255, 0.3)); --elevation-200-canvas: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3); --elevation-200-canvas-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.5)) drop-shadow(inset 0px 0px 0.5px rgba(255, 255, 255, 0.3)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.35)) drop-shadow(inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)); --elevation-300-tooltip: 0px 5px 12px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3); --elevation-300-tooltip-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.5)) drop-shadow(inset 0px 0px 0.5px rgba(255, 255, 255, 0.3)) drop-shadow(0px 5px 12px rgba(0, 0, 0, 0.35)) drop-shadow(inset 0px 0.5px 0px rgba(255, 255, 255, 0.08)); --elevation-400-menu-panel: 0px 10px 16px rgba(0, 0, 0, 0.35), 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35); --elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 0.5px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 0.5px rgba(255, 255, 255, 0.35); --color-loading-progress-logo: rgba(255, 255, 255, 1); --color-loading-progress-cover: #1e1e1e; --color-loading-progress-wrapper: #444444; --color-loading-progress-accent: rgba(0, 0, 0, 0.5); --color-loading-progress-bar: rgba(255, 255, 255, 1); --color-bginspectpadding: #0c8ce9; --color-bginspectpaddingtertiary: #394360; --color-borderinspectpadding: #0c8ce9; --color-textoninspectpadding: rgba(255, 255, 255, 1); --color-bginspectspacing: #f316b0; --color-borderinspectspacing: #f316b0; --color-textoninspectspacing: rgba(255, 255, 255, 1); --color-code: rgba(255, 255, 255, 1); --color-codecomment: rgba(255, 255, 255, 0.7); --color-codeproperty: rgba(255, 255, 255, 1); --color-codevalue: #fc9ce0; --color-codestring: #7cc4f8; --color-codetag: #d1a8ff; --color-codeattribute: rgba(255, 255, 255, 1); --color-codeclassname: #7cc4f8; --color-codestylename: #7cc4f8; --color-codevariable: #79d297; --color-codeaccent: #fcb34a; --color-border-code-well: rgba(255, 255, 255, 0.1); --color-bg-code: rgba(255, 255, 255, 1); --color-bg-connected-code-well: #33293d; --color-bg-manual-code-well: #252d41; --color-bg-error-code-well: #412621; --color-badge-connected-code-well: #671ab8; --color-badge-manual-code-well: #196ec5; --color-badge-error-code-well: #eb0a62; --color-instance-pill-code-well: #604d75; --color-instance-pill-code-well-hover: #6b5884; --color-error-pill-code-well: #864537; --color-content-diff-added: #79d297; --color-content-diff-removed: #fca397; --color-bg-code-diff-indicator-added: #078348; --color-bg-code-diff-indicator-removed: #c4381c; --color-bg-code-diff-line-added: #082618; --color-bg-code-diff-line-removed: #311817; --color-bgvoting: #f3c11b; --color-bgvotingsecondary: #fbe8ad; --color-bgvotingtertiary: #fdf7dd; --color-icononvoting: rgba(0, 0, 0, 0.9); --color-textonvoting: rgba(0, 0, 0, 0.9); --color-bgvotingwheelhover: #fbe8ad; --color-bgvotingwheeldial: #f7d15f; --dev-handoff-breadcrumbs-text-color: rgba(255, 255, 255, 0.4); --dev-handoff-breadcrumbs-selected-color: rgba(255, 255, 255, 1); --color-imageoverlay: rgba(255, 255, 255, 0.1); --color-imageoverlay-hover: rgba(255, 255, 255, 0.2); } /* Only include the colors that differ from design light mode here. Most of them will be the same. */ [data-editor-theme='whiteboard'] { --color-texthighlight: rgba(151, 71, 255, 0.4); --color-scrollbar: rgba(179, 179, 179, 0.5); --color-bgselectedarea: rgba(151, 71, 255, 0.2); --color-loading-progress-cover: rgba(255, 255, 255, 1); } /* On low density displays, we apply a special set of elevations in both light and dark modes to avoid visual jankiness with the 0.5px inset shadows in our regular elevation levels. */ @media screen and (max-resolution: 1.5dppx) { [data-preferred-theme='light']:not([data-editor-theme='whiteboard']) { --elevation-100-canvas: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15); --elevation-100-canvas-drop-shadow: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15)); --elevation-200-canvas: 0px 0px 1px rgba(0, 0, 0, 0.18), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1); --elevation-200-canvas-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.18)); --elevation-300-tooltip: 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 1px 3px rgba(0, 0, 0, 0.1); --elevation-300-tooltip-drop-shadow: drop-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.1)) drop-shadow(0px 5px 12px rgba(0, 0, 0, 0.13)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.15)); --elevation-400-menu-panel: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 2px 5px rgba(0, 0, 0, 0.15); --elevation-500-modal-window: 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15); } [data-preferred-theme='dark']:not([data-editor-theme='whiteboard']) { --elevation-100-canvas: 0px 0px 0.5px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 1px rgba(255, 255, 255, 0.3); --elevation-100-canvas-drop-shadow: drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.5)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.4)) drop-shadow(inset 0px 1px 0px rgba(255, 255, 255, 0.1)) drop-shadow(inset 0px 0px 1px rgba(255, 255, 255, 0.3)); --elevation-200-canvas: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 1px rgba(255, 255, 255, 0.3); --elevation-200-canvas-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.5)) drop-shadow(inset 0px 0px 0.5px rgba(255, 255, 255, 0.3)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.35)) drop-shadow(inset 0px 1px 0px rgba(255, 255, 255, 0.08)); --elevation-300-tooltip: 0px 5px 12px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 1px rgba(255, 255, 255, 0.3); --elevation-300-tooltip-drop-shadow: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.5)) drop-shadow(inset 0px 0px 0.5px rgba(255, 255, 255, 0.3)) drop-shadow(0px 5px 12px rgba(0, 0, 0, 0.35)) drop-shadow(inset 0px 1px 0px rgba(255, 255, 255, 0.08)); --elevation-400-menu-panel: 0px 10px 16px rgba(0, 0, 0, 0.35), 0px 2px 5px rgba(0, 0, 0, 0.35), inset 0px 1px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 1px rgba(255, 255, 255, 0.35); --elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35), inset 0px 1px 0px rgba(255, 255, 255, 0.08), inset 0px 0px 1px rgba(255, 255, 255, 0.35); } } [data-editor-theme='dev-handoff'] { --color-texthighlight: rgba(20, 174, 92, 0.4); } [data-preferred-theme='dark'][data-editor-theme='dev-handoff'] { --color-texthighlight: rgba(20, 174, 92, 0.4); } } /* "shared/styles/constants/_retinadevice.css" */ /* "../../fpl/tokens/dist/index.css" */ /* ------------------------------------------- * Autogenerated by ⛋ Terrazzo. DO NOT EDIT! * ------------------------------------------- */ :root { --color-bg: var(--ramp-white-1000); --color-bg-assistive: var(--ramp-pink-500); --color-bg-assistive-hover: var(--ramp-pink-600); --color-bg-assistive-pressed: var(--ramp-pink-600); --color-bg-assistive-secondary: var(--ramp-pink-700); --color-bg-assistive-tertiary: var(--ramp-pink-200); --color-bg-brand: var(--ramp-blue-500); --color-bg-brand-hover: var(--ramp-blue-600); --color-bg-brand-pressed: var(--ramp-blue-700); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-blue-200); --color-bg-brand-tertiary-hover: var(--ramp-blue-300); --color-bg-brand-tertiary-pressed: var(--ramp-blue-400); --color-bg-component: var(--ramp-purple-500); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-700); --color-bg-component-secondary: var(--ramp-purple-700); --color-bg-component-tertiary: var(--ramp-purple-200); --color-bg-component-tertiary-hover: var(--ramp-purple-300); --color-bg-component-tertiary-pressed: var(--ramp-purple-400); --color-bg-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-700); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --color-bg-danger-tertiary-hover: var(--ramp-red-300); --color-bg-danger-tertiary-pressed: var(--ramp-red-400); --color-bg-design: var(--ramp-blue-500); --color-bg-design-hover: var(--ramp-blue-600); --color-bg-design-pressed: var(--ramp-blue-600); --color-bg-design-secondary: var(--ramp-blue-700); --color-bg-design-tertiary: var(--ramp-blue-200); --color-bg-desktopBackgrounded: var(--ramp-grey-700); --color-bg-desktopBackgrounded-disabled: var(--ramp-grey-500); --color-bg-desktopBackgrounded-hover: var(--ramp-grey-600); --color-bg-desktopBackgrounded-pressed: var(--ramp-grey-800); --color-bg-desktopBackgrounded-secondary: var(--ramp-grey-700); --color-bg-desktopBackgrounded-tertiary: var(--ramp-grey-600); --color-bg-desktopForeground: var(--ramp-grey-900); --color-bg-desktopForeground-disabled: var(--ramp-grey-500); --color-bg-desktopForeground-hover: var(--ramp-grey-800); --color-bg-desktopForeground-pressed: var(--ramp-grey-800); --color-bg-desktopForeground-secondary: var(--ramp-grey-700); --color-bg-desktopForeground-tertiary: var(--ramp-grey-600); --color-bg-desktopFullscreen: var(--ramp-black-1000); --color-bg-desktopFullscreen-disabled: var(--ramp-grey-500); --color-bg-desktopFullscreen-hover: var(--ramp-grey-900); --color-bg-desktopFullscreen-pressed: var(--ramp-grey-900); --color-bg-desktopFullscreen-secondary: var(--ramp-grey-700); --color-bg-desktopFullscreen-tertiary: var(--ramp-grey-600); --color-bg-disabled: var(--ramp-grey-300); --color-bg-disabled-secondary: var(--ramp-grey-400); --color-bg-elevated: var(--ramp-white-1000); --color-bg-elevated-hover: var(--ramp-grey-100); --color-bg-figjam: var(--ramp-purple-500); --color-bg-figjam-hover: var(--ramp-purple-600); --color-bg-figjam-pressed: var(--ramp-purple-600); --color-bg-figjam-secondary: var(--ramp-purple-700); --color-bg-figjam-tertiary: var(--ramp-purple-200); --color-bg-fs: var(--color-bg); --color-bg-fs-assistive: var(--color-bg-assistive); --color-bg-fs-assistive-secondary: var(--color-bg-assistive-secondary); --color-bg-fs-assistive-tertiary: var(--color-bg-assistive-tertiary); --color-bg-fs-component: var(--color-bg-component); --color-bg-fs-component-secondary: var(--color-bg-component-secondary); --color-bg-fs-component-tertiary: var(--color-bg-component-tertiary); --color-bg-fs-design: var(--color-bg-design); --color-bg-fs-design-secondary: var(--color-bg-design-secondary); --color-bg-fs-design-tertiary: var(--color-bg-design-tertiary); --color-bg-fs-measure: var(--color-bg-measure); --color-bg-fs-measure-hover: var(--color-bg-measure-hover); --color-bg-fs-measure-secondary: var(--color-bg-measure-secondary); --color-bg-fs-measure-tertiary: var(--color-bg-measure-tertiary); --color-bg-fs-selected: var(--color-bg-selected); --color-bg-fs-selected-secondary: var(--color-bg-selected-secondary); --color-bg-fs-template: var(--color-bg-template); --color-bg-fs-template-secondary: var(--color-bg-template-secondary); --color-bg-fs-template-tertiary: var(--color-bg-template-tertiary); --color-bg-fs-tertiary: var(--color-bg-tertiary); --color-bg-handoff: var(--ramp-green-500); --color-bg-handoff-hover: var(--ramp-green-600); --color-bg-handoff-pressed: var(--ramp-green-700); --color-bg-handoff-secondary: var(--ramp-green-700); --color-bg-handoff-tertiary: var(--ramp-pale-green-200); --color-bg-hover: var(--ramp-grey-100); --color-bg-info: var(--ramp-blue-200); --color-bg-inverse: var(--ramp-grey-800); --color-bg-inverse-hover: var(--ramp-grey-700); --color-bg-inverse-pressed: var(--ramp-grey-600); --color-bg-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-700); --color-bg-measure-secondary: var(--ramp-red-700); --color-bg-measure-tertiary: var(--ramp-red-200); --color-bg-menu: var(--ramp-grey-900); --color-bg-menu-disabled: var(--ramp-grey-500); --color-bg-menu-hover: var(--ramp-grey-800); --color-bg-menu-pressed: var(--ramp-grey-800); --color-bg-menu-secondary: var(--ramp-grey-700); --color-bg-menu-selected: var(--ramp-blue-500); --color-bg-menu-selected-hover: var(--ramp-blue-600); --color-bg-menu-selected-pressed: var(--ramp-blue-600); --color-bg-menu-selected-secondary: var(--ramp-pale-blue-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-menu-tertiary: var(--ramp-grey-600); --color-bg-onselected: var(--ramp-blue-300); --color-bg-onselected-hover: var(--color-bg-onselected); --color-bg-onselected-pressed: var(--color-bg-onselected); --color-bg-pressed: var(--ramp-grey-200); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-300); --color-bg-selected: var(--ramp-blue-200); --color-bg-selected-hover: var(--ramp-blue-300); --color-bg-selected-pressed: var(--ramp-blue-400); --color-bg-selected-secondary: var(--ramp-blue-100); --color-bg-selected-strong: var(--ramp-blue-500); --color-bg-selected-tertiary: var(--ramp-blue-100); --color-bg-strong-hover: var(--ramp-blue-600); --color-bg-strong-pressed: var(--ramp-blue-700); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-700); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-200); --color-bg-success-tertiary-hover: var(--ramp-green-300); --color-bg-success-tertiary-pressed: var(--ramp-green-400); --color-bg-template: var(--ramp-pink-500); --color-bg-template-secondary: var(--ramp-pink-700); --color-bg-template-tertiary: var(--ramp-pink-200); --color-bg-tertiary: var(--ramp-grey-200); --color-bg-toolbar: var(--ramp-grey-800); --color-bg-toolbar-disabled: var(--ramp-grey-500); --color-bg-toolbar-hover: var(--ramp-grey-1000); --color-bg-toolbar-pressed: var(--ramp-grey-1000); --color-bg-toolbar-secondary: var(--ramp-grey-700); --color-bg-toolbar-selected: var(--ramp-blue-500); --color-bg-toolbar-selected-hover: var(--ramp-blue-600); --color-bg-toolbar-selected-pressed: var(--ramp-blue-600); --color-bg-toolbar-selected-secondary: var(--ramp-blue-700); --color-bg-toolbar-selected-tertiary: var(--color-bg-toolbar-selected); --color-bg-toolbar-tertiary: var(--ramp-grey-600); --color-bg-tooltip: var(--ramp-grey-900); --color-bg-tooltip-disabled: var(--ramp-grey-500); --color-bg-tooltip-hover: var(--ramp-grey-800); --color-bg-tooltip-pressed: var(--ramp-grey-800); --color-bg-tooltip-secondary: var(--ramp-grey-700); --color-bg-tooltip-selected: var(--ramp-blue-500); --color-bg-tooltip-selected-hover: var(--ramp-blue-600); --color-bg-tooltip-selected-pressed: var(--ramp-blue-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-blue-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-tooltip-tertiary: var(--ramp-grey-600); --color-bg-transparent: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); --color-bg-transparent-secondary: var(--ramp-black-200); --color-bg-warning: var(--ramp-yellow-500); --color-bg-warning-hover: var(--ramp-yellow-600); --color-bg-warning-pressed: var(--ramp-yellow-700); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --color-bg-warning-tertiary-hover: var(--ramp-yellow-300); --color-bg-warning-tertiary-pressed: var(--ramp-yellow-400); --color-bgannotationblue: var(--ramp-blue-500); --color-bgannotationgreen: var(--ramp-green-500); --color-bgannotationorange: var(--ramp-orange-600); --color-bgannotationpink: var(--ramp-pink-500); --color-bgannotationpurple: var(--ramp-purple-500); --color-bgannotationred: var(--ramp-red-500); --color-bgannotationteal: var(--ramp-teal-600); --color-bgannotationyellow: var(--ramp-yellow-500); --color-bghoverondarkcanvas: var(--ramp-white-300); --color-bghoveronlightcanvas: var(--ramp-black-300); --color-bghovertransparent: var(--ramp-black-100); --color-bginspectpadding: var(--ramp-blue-500); --color-bginspectpaddingtertiary: var(--ramp-blue-200); --color-bginspectspacing: var(--ramp-pink-500); --color-bgsecondaryoncanvas: var(--ramp-grey-200); --color-bgselectedarea: #0d99ff33; --color-bgswitchoff: var(--ramp-grey-200); --color-bgtoolbarmodeswitcher: var(--ramp-grey-100); --color-bgtoolbarmodeswitcher-hover: var(--ramp-grey-200); --color-bgtransparent: #fff9; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #fff; --color-bgvoting: var(--ramp-yellow-500); --color-bgvotingsecondary: var(--ramp-yellow-200); --color-bgvotingtertiary: var(--ramp-yellow-100); --color-bgvotingwheeldial: var(--ramp-yellow-100); --color-bgvotingwheelhover: var(--ramp-yellow-200); --color-border: var(--ramp-grey-200); --color-border-assistive: var(--ramp-pink-300); --color-border-assistive-strong: var(--ramp-pink-600); --color-border-brand: var(--ramp-blue-300); --color-border-brand-strong: var(--ramp-blue-600); --color-border-component: var(--ramp-purple-300); --color-border-component-hover: var(--ramp-purple-500); --color-border-component-selected: var(--ramp-purple-600); --color-border-component-strong: var(--ramp-purple-600); --color-border-danger: var(--ramp-red-300); --color-border-danger-strong: var(--ramp-red-600); --color-border-design: var(--ramp-blue-300); --color-border-design-strong: var(--ramp-blue-600); --color-border-desktopBackgrounded: var(--ramp-grey-600); --color-border-desktopBackgrounded-disabled: var(--ramp-grey-700); --color-border-desktopBackgrounded-strong: var(--ramp-white-500); --color-border-desktopForeground: var(--ramp-grey-700); --color-border-desktopForeground-disabled: var(--ramp-grey-700); --color-border-desktopForeground-strong: var(--ramp-white-1000); --color-border-desktopFullscreen: var(--ramp-grey-900); --color-border-desktopFullscreen-disabled: var(--ramp-grey-900); --color-border-desktopFullscreen-strong: var(--ramp-white-1000); --color-border-disabled: var(--ramp-grey-200); --color-border-disabled-strong: var(--ramp-black-400); --color-border-figjam: var(--ramp-purple-300); --color-border-figjam-strong: var(--ramp-purple-600); --color-border-fs: var(--color-border); --color-border-fs-assistive: var(--color-border-assistive); --color-border-fs-assistive-strong: var(--ramp-pink-500); --color-border-fs-component: var(--ramp-purple-300); --color-border-fs-component-strong: var(--color-bg-fs-component); --color-border-fs-design: var(--ramp-blue-300); --color-border-fs-design-strong: var(--color-bg-fs-design); --color-border-fs-measure: var(--color-border-measure); --color-border-fs-measure-strong: var(--color-bg-fs-measure); --color-border-fs-onassistive: var(--color-border-onassistive); --color-border-fs-onassistive-strong: var(--color-border-onassistive-strong); --color-border-fs-oncomponent: var(--color-border-oncomponent); --color-border-fs-oncomponent-strong: var(--color-border-oncomponent-strong); --color-border-fs-ondesign: var(--color-border-ondesign); --color-border-fs-ondesign-strong: var(--color-border-ondesign-strong); --color-border-fs-onmeasure: var(--color-border-onmeasure); --color-border-fs-onmeasure-strong: var(--color-border-onmeasure-strong); --color-border-fs-onselected: var(--color-border-onselected); --color-border-fs-onselected-strong: var(--color-border-onselected-strong); --color-border-fs-ontemplate: var(--color-border-ontemplate); --color-border-fs-ontemplate-strong: var(--color-border-ontemplate-strong); --color-border-fs-selected: var(--color-border-selected); --color-border-fs-selected-strong: var(--color-border-selected-strong); --color-border-fs-strong: var(--color-border-strong); --color-border-fs-template: var(--ramp-pink-300); --color-border-fs-template-strong: var(--color-bg-fs-template); --color-border-handoff: var(--ramp-pale-green-300); --color-border-handoff-strong: var(--ramp-green-600); --color-border-measure: var(--ramp-red-300); --color-border-measure-strong: var(--ramp-red-600); --color-border-menu: var(--ramp-grey-700); --color-border-menu-disabled: var(--ramp-grey-700); --color-border-menu-disabled-strong: var(--ramp-grey-700); --color-border-menu-onselected: var(--ramp-blue-400); --color-border-menu-onselected-strong: var(--ramp-white-1000); --color-border-menu-selected: var(--ramp-blue-500); --color-border-menu-selected-strong: var(--ramp-blue-400); --color-border-menu-strong: var(--ramp-white-1000); --color-border-onassistive: var(--ramp-pink-600); --color-border-onassistive-strong: var(--ramp-white-1000); --color-border-onbrand: var(--ramp-blue-600); --color-border-onbrand-strong: var(--ramp-white-1000); --color-border-oncomponent: var(--ramp-purple-600); --color-border-oncomponent-strong: var(--ramp-white-1000); --color-border-ondanger: var(--ramp-red-600); --color-border-ondanger-strong: var(--ramp-white-1000); --color-border-ondesign: var(--ramp-blue-600); --color-border-ondesign-strong: var(--ramp-white-1000); --color-border-onfigjam: var(--ramp-purple-600); --color-border-onfigjam-strong: var(--ramp-purple-600); --color-border-onmeasure: var(--ramp-red-600); --color-border-onmeasure-strong: var(--ramp-white-1000); --color-border-onselected: var(--ramp-blue-300); --color-border-onselected-strong: var(--ramp-black-800); --color-border-onsuccess: var(--ramp-green-600); --color-border-onsuccess-strong: var(--ramp-white-1000); --color-border-ontemplate: var(--ramp-pink-600); --color-border-ontemplate-strong: var(--ramp-white-1000); --color-border-onwarning: var(--ramp-yellow-700); --color-border-onwarning-strong: var(--ramp-black-800); --color-border-selected: var(--ramp-blue-500); --color-border-selected-strong: var(--ramp-blue-600); --color-border-strong: var(--ramp-grey-800); --color-border-success: var(--ramp-green-300); --color-border-success-strong: var(--ramp-green-600); --color-border-template-strong: var(--ramp-pink-600); --color-border-toolbar: var(--ramp-grey-600); --color-border-toolbar-disabled: var(--ramp-white-400); --color-border-toolbar-onselected: var(--ramp-white-1000); --color-border-toolbar-selected: var(--ramp-blue-500); --color-border-toolbar-selected-strong: var(--ramp-blue-400); --color-border-toolbar-strong: var(--ramp-white-1000); --color-border-tooltip: var(--ramp-grey-700); --color-border-tooltip-disabled: var(--ramp-grey-700); --color-border-tooltip-disabled-strong: var(--ramp-grey-700); --color-border-tooltip-onselected: var(--ramp-blue-600); --color-border-tooltip-onselected-strong: var(--ramp-white-1000); --color-border-tooltip-selected: var(--ramp-blue-500); --color-border-tooltip-selected-strong: var(--ramp-blue-400); --color-border-tooltip-strong: var(--ramp-white-1000); --color-border-warning: var(--ramp-pale-yellow-300); --color-border-warning-strong: var(--ramp-yellow-1000); --color-borderinspectpadding: var(--ramp-blue-500); --color-borderinspectspacing: var(--ramp-pink-500); --color-borderplacecrosshair: var(--ramp-white-1000); --color-borderselectedec: #fff0; --color-bordertranslucent: var(--ramp-black-200); --color-bordertranslucentstrong: var(--ramp-black-300); --color-code: var(--ramp-black-800); --color-codeaccent: var(--ramp-orange-900); --color-codeattribute: var(--ramp-black-800); --color-codeclassname: var(--ramp-blue-600); --color-codecomment: var(--ramp-black-500); --color-codeproperty: var(--ramp-black-800); --color-codestring: var(--ramp-blue-600); --color-codestylename: var(--ramp-blue-600); --color-codetag: var(--ramp-purple-600); --color-codevalue: var(--ramp-pink-600); --color-codevariable: var(--ramp-green-600); --color-conditionalborder: #fff0; --color-controliconoutline: var(--ramp-black-200); --color-controlknoboffoutline: var(--ramp-black-300); --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); /* Used for input backgrounds on canvas */ --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); --color-fsBorderDesignShadowStrong: var(--ramp-blue-600); --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-200); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-200); --color-fsBorderPlaceholder: var(--ramp-grey-500); --color-fsBorderSelectedImmutableNode: var(--ramp-purple-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-purple-500); --color-fsCanvasDefaultFill: var(--ramp-grey-100); --color-fsCodeNodeBorder: var(--ramp-green-500); --color-fsCodeNodeBorderSecondary: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextErrorOnDarkCanvas: var(--color-border-ondanger); --color-fsCodeNodeTextErrorOnLightCanvas: var(--color-border-ondanger); --color-fsCodeNodeTextOnDarkCanvas: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnLightCanvas: var(--color-fsCodeNodeBorder); --color-fsDevHandoffAutolayoutPadding: var(--ramp-blue-400); --color-fsDevHandoffAutolayoutSpacing: var(--ramp-pink-400); --color-fsFrameDefaultFill: var(--ramp-white-1000); --color-fsGridCellOutline: #80caff99; --color-fsGridCellSelection: #80caff4d; --color-fsGridComponentCellOutline: #d9b8ff99; --color-fsGridComponentCellSelection: #d9b8ff4d; --color-fsIconOnDarkCanvas: var(--color-iconondarkcanvas); --color-fsIconOnDarkCanvasSecondary: var(--ramp-white-400); --color-fsIconOnLightCanvas: var(--color-icononlightcanvas); --color-fsIconOnLightCanvasSecondary: var(--ramp-black-400); --color-fsNodeHandle: var(--ramp-blue-400); --color-fsNodeLabelNoBG: var(--ramp-black-400); --color-fsNodeSymbolSelectedSecondary: var(--ramp-purple-500); --color-fsNoodleCenterLine: #fff0; --color-fsShapeDefaultFill: var(--ramp-grey-300); --color-fsSitesResponsiveSetTextOnDarkCanvas: var(--ramp-white-500); --color-fsSitesResponsiveSetTextOnLightCanvas: var(--ramp-black-500); --color-fsSnappingOverlay: var(--ramp-red-500); --color-fsStickyAuthorTextOnDark: var(--ramp-white-600); --color-fsStickyAuthorTextOnLight: var(--ramp-black-500); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-400); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-600); --color-fsTextOnDarkCanvas: var(--color-textondarkcanvas); --color-fsTextOnDarkCanvasSecondary: var(--color-textondarkcanvassecondary); --color-fsTextOnLightCanvas: var(--color-textonlightcanvas); --color-fsTextOnLightCanvasSecondary: var(--color-textonlightcanvassecondary); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-400); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-600); --color-fsVectorInactive: var(--ramp-grey-400); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-purple-600); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-purple-600); --color-gauge: var(--ramp-grey-500); --color-gauge-brand: var(--ramp-blue-500); --color-gauge-brand-secondary: var(--ramp-blue-400); --color-gauge-danger: var(--ramp-red-500); --color-gauge-danger-secondary: var(--ramp-red-400); --color-gauge-secondary: var(--ramp-grey-400); --color-gauge-strong: var(--ramp-grey-800); --color-gauge-success: var(--ramp-green-500); --color-gauge-success-secondary: var(--ramp-green-400); --color-gauge-warning: var(--ramp-yellow-600); --color-gauge-warning-secondary: var(--ramp-yellow-400); --color-icon: var(--ramp-black-800); --color-icon-assistive: var(--ramp-pink-600); --color-icon-assistive-pressed: var(--ramp-pink-700); --color-icon-assistive-secondary: var(--color-icon-assistive); --color-icon-assistive-tertiary: var(--color-icon-assistive); --color-icon-brand: var(--ramp-blue-600); --color-icon-brand-pressed: var(--ramp-blue-700); --color-icon-brand-secondary: var(--ramp-blue-400); --color-icon-brand-tertiary: var(--ramp-blue-300); --color-icon-component: var(--ramp-purple-600); --color-icon-component-pressed: var(--ramp-purple-700); --color-icon-component-secondary: var(--ramp-pale-purple-400); --color-icon-component-tertiary: var(--ramp-pale-purple-400); --color-icon-danger: var(--ramp-red-600); --color-icon-danger-hover: var(--ramp-red-700); --color-icon-danger-pressed: var(--ramp-red-700); --color-icon-danger-secondary: var(--color-icon-danger); --color-icon-danger-secondary-hover: var(--color-icon-danger); --color-icon-danger-tertiary: var(--color-icon-danger); --color-icon-design: var(--ramp-blue-600); --color-icon-design-pressed: var(--ramp-blue-700); --color-icon-design-secondary: var(--color-icon-design); --color-icon-design-tertiary: var(--color-icon-design); --color-icon-desktopBackgrounded: var(--ramp-white-500); --color-icon-desktopBackgrounded-danger: var(--ramp-red-500); --color-icon-desktopBackgrounded-disabled: var(--ramp-white-400); --color-icon-desktopBackgrounded-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-icon-desktopBackgrounded-secondary: var(--ramp-white-500); --color-icon-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-icon-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-icon-desktopBackgrounded-warning: var(--ramp-yellow-500); --color-icon-desktopForeground: var(--ramp-white-1000); --color-icon-desktopForeground-danger: var(--ramp-red-500); --color-icon-desktopForeground-disabled: var(--ramp-white-400); --color-icon-desktopForeground-hover: var(--ramp-white-1000); --color-icon-desktopForeground-ondisabled: var(--ramp-grey-900); --color-icon-desktopForeground-secondary: var(--ramp-white-500); --color-icon-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-tertiary: var(--ramp-white-400); --color-icon-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-warning: var(--ramp-yellow-500); --color-icon-desktopFullscreen: var(--ramp-white-1000); --color-icon-desktopFullscreen-danger: var(--ramp-red-500); --color-icon-desktopFullscreen-disabled: var(--ramp-white-400); --color-icon-desktopFullscreen-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-icon-desktopFullscreen-secondary: var(--ramp-white-500); --color-icon-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-tertiary: var(--ramp-white-400); --color-icon-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-warning: var(--ramp-yellow-500); --color-icon-disabled: var(--ramp-black-400); --color-icon-figjam: var(--ramp-purple-600); --color-icon-figjam-pressed: var(--ramp-purple-700); --color-icon-figjam-secondary: var(--ramp-pale-purple-400); --color-icon-figjam-tertiary: var(--ramp-pale-purple-400); --color-icon-fs: var(--color-icon); --color-icon-fs-assistive: var(--color-icon-assistive); --color-icon-fs-component: var(--color-icon-component); --color-icon-fs-design: var(--color-icon-design); --color-icon-fs-measure: var(--color-icon-measure); --color-icon-fs-onassistive: var(--color-icon-onassistive); --color-icon-fs-oncomponent: var(--color-icon-oncomponent); --color-icon-fs-ondesign: var(--color-icon-ondesign); --color-icon-fs-onmeasure: var(--color-icon-onmeasure); --color-icon-fs-onselected: var(--color-icon-onselected); --color-icon-fs-ontemplate: var(--color-icon-ontemplate); --color-icon-fs-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --color-icon-fs-template: var(--color-icon-template); --color-icon-fs-tertiary: var(--color-icon-tertiary); --color-icon-handoff: var(--ramp-green-600); --color-icon-handoff-pressed: var(--ramp-green-700); --color-icon-handoff-secondary: var(--color-icon-handoff); --color-icon-handoff-tertiary: var(--color-icon-handoff); --color-icon-hover: var(--ramp-black-800); --color-icon-measure: var(--ramp-red-500); --color-icon-measure-hover: var(--ramp-red-700); --color-icon-measure-pressed: var(--ramp-red-700); --color-icon-measure-secondary: var(--color-icon-measure); --color-icon-measure-secondary-hover: var(--color-icon-measure); --color-icon-measure-tertiary: var(--color-icon-measure); --color-icon-menu: var(--ramp-white-1000); --color-icon-menu-danger: var(--ramp-red-500); --color-icon-menu-disabled: var(--ramp-white-400); --color-icon-menu-hover: var(--ramp-white-1000); --color-icon-menu-ondisabled: var(--ramp-grey-900); --color-icon-menu-onselected: var(--ramp-white-1000); --color-icon-menu-pressed: var(--ramp-blue-500); --color-icon-menu-secondary: var(--ramp-white-500); --color-icon-menu-secondary-hover: var(--ramp-white-1000); --color-icon-menu-selected: var(--ramp-blue-400); --color-icon-menu-selected-secondary: var(--ramp-blue-400); --color-icon-menu-selected-tertiary: var(--ramp-blue-400); --color-icon-menu-tertiary: var(--ramp-white-400); --color-icon-menu-tertiary-hover: var(--ramp-white-1000); --color-icon-menu-warning: var(--ramp-yellow-500); --color-icon-onassistive: var(--ramp-white-1000); --color-icon-onassistive-secondary: var(--ramp-white-600); --color-icon-onassistive-tertiary: var(--ramp-white-400); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-600); --color-icon-onbrand-tertiary: var(--ramp-white-400); --color-icon-oncomponent: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-600); --color-icon-oncomponent-tertiary: var(--ramp-white-400); --color-icon-ondanger: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-600); --color-icon-ondanger-tertiary: var(--ramp-white-400); --color-icon-ondesign: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-600); --color-icon-ondesign-tertiary: var(--ramp-white-400); --color-icon-ondisabled: var(--ramp-white-1000); --color-icon-onfigjam: var(--ramp-white-1000); --color-icon-onfigjam-secondary: var(--ramp-white-600); --color-icon-onfigjam-tertiary: var(--ramp-white-400); --color-icon-oninverse: var(--ramp-white-800); --color-icon-onmeasure: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-600); --color-icon-onmeasure-tertiary: var(--ramp-white-400); --color-icon-onselected: var(--ramp-black-800); --color-icon-onselected-secondary: var(--ramp-black-500); --color-icon-onselected-strong: var(--ramp-white-1000); --color-icon-onselected-tertiary: var(--ramp-black-400); --color-icon-onsuccess: var(--ramp-white-1000); --color-icon-onsuccess-secondary: var(--ramp-white-600); --color-icon-onsuccess-tertiary: var(--ramp-white-400); --color-icon-ontemplate: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-black-800); --color-icon-onwarning-secondary: var(--ramp-black-500); --color-icon-onwarning-tertiary: var(--ramp-black-400); --color-icon-pressed: var(--ramp-blue-600); --color-icon-secondary: var(--ramp-black-500); --color-icon-secondary-hover: var(--ramp-black-800); --color-icon-selected: var(--ramp-blue-600); --color-icon-selected-secondary: var(--color-icon-selected); --color-icon-selected-tertiary: var(--color-icon-selected); --color-icon-success: var(--ramp-green-600); --color-icon-success-pressed: var(--ramp-green-700); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-template: var(--ramp-pink-600); --color-icon-template-secondary: var(--ramp-pale-pink-400); --color-icon-tertiary: var(--ramp-black-400); --color-icon-tertiary-hover: var(--ramp-black-800); --color-icon-toolbar: var(--ramp-white-1000); --color-icon-toolbar-danger: var(--ramp-red-500); --color-icon-toolbar-disabled: var(--ramp-white-400); --color-icon-toolbar-hover: var(--ramp-white-1000); --color-icon-toolbar-ondisabled: var(--ramp-grey-800); --color-icon-toolbar-onselected: var(--ramp-white-1000); --color-icon-toolbar-pressed: var(--ramp-blue-500); --color-icon-toolbar-secondary: var(--ramp-white-500); --color-icon-toolbar-secondary-hover: var(--ramp-white-1000); --color-icon-toolbar-selected: var(--ramp-blue-400); --color-icon-toolbar-selected-secondary: var(--color-icon-toolbar-selected); --color-icon-toolbar-selected-tertiary: var(--color-icon-toolbar-selected); --color-icon-toolbar-tertiary: var(--ramp-white-400); --color-icon-toolbar-tertiary-hover: var(--ramp-white-1000); --color-icon-toolbar-warning: var(--ramp-yellow-500); --color-icon-tooltip: var(--ramp-white-1000); --color-icon-tooltip-danger: var(--ramp-red-500); --color-icon-tooltip-disabled: var(--ramp-white-400); --color-icon-tooltip-hover: var(--ramp-white-1000); --color-icon-tooltip-ondisabled: var(--ramp-grey-900); --color-icon-tooltip-onselected: var(--ramp-white-1000); --color-icon-tooltip-pressed: var(--ramp-blue-500); --color-icon-tooltip-secondary: var(--ramp-white-500); --color-icon-tooltip-secondary-hover: var(--ramp-white-1000); --color-icon-tooltip-selected: var(--ramp-blue-400); --color-icon-tooltip-selected-secondary: var(--color-icon-tooltip-selected); --color-icon-tooltip-selected-tertiary: var(--color-icon-tooltip-selected); --color-icon-tooltip-tertiary: var(--ramp-white-400); --color-icon-tooltip-tertiary-hover: var(--ramp-white-1000); --color-icon-tooltip-warning: var(--ramp-yellow-500); --color-icon-warning: var(--ramp-yellow-1000); --color-icon-warning-pressed: var(--ramp-yellow-1000); --color-icon-warning-secondary: var(--color-icon-warning); --color-icon-warning-tertiary: var(--color-icon-warning); --color-icondesignfilesecondary: var(--ramp-blue-400); --color-iconfavorite: var(--ramp-yellow-500); --color-iconfigjamfilesecondary: var(--ramp-purple-400); --color-iconondarkcanvas: var(--ramp-white-800); --color-icononlightcanvas: var(--ramp-black-800); --color-icononvoting: var(--ramp-black-800); --color-iconprototypefile: var(--ramp-grey-300); --color-iconprototypefilesecondary: var(--ramp-grey-800); --color-iconpublishedfile: var(--ramp-grey-800); --color-iconpublishedfilesecondary: var(--ramp-grey-500); --color-loading: var(--ramp-black-200); --color-loadingmenu: var(--ramp-white-200); --color-loadingsecondary: var(--ramp-black-100); --color-loadingsecondarymenu: var(--ramp-white-100); --color-modalbackdrop: var(--ramp-black-500); --color-multiplayerblue: var(--ramp-blue-600); --color-multiplayerbluehover: var(--ramp-blue-700); --color-multiplayerbluesecondary: var(--ramp-blue-800); --color-multiplayergreen: var(--ramp-green-500); --color-multiplayergreenhover: var(--ramp-green-600); --color-multiplayergreensecondary: var(--ramp-green-800); --color-multiplayergrey: var(--ramp-pale-blue-500); --color-multiplayergreyhover: var(--ramp-pale-blue-600); --color-multiplayergreysecondary: var(--ramp-pale-blue-800); --color-multiplayerpink: var(--ramp-pink-500); --color-multiplayerpinkhover: var(--ramp-pink-600); --color-multiplayerpinksecondary: var(--ramp-pink-800); --color-multiplayerpurple: var(--ramp-purple-500); --color-multiplayerpurplehover: var(--ramp-purple-600); --color-multiplayerpurplesecondary: var(--ramp-purple-800); --color-multiplayerred: var(--ramp-red-500); --color-multiplayerredhover: var(--ramp-red-600); --color-multiplayerredsecondary: var(--ramp-red-800); --color-multiplayeryellow: var(--ramp-yellow-500); --color-multiplayeryellowhover: var(--ramp-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-yellow-800); --color-nodehandle: var(--ramp-blue-400); --color-prototypeloadingbackdrop: var(--ramp-black-800); --color-scrollbar: #b3b3b380; --color-shadow: #00000026; --color-tablenodehoveredprimary: var(--ramp-blue-500); --color-tablenodehoveredsecondary: var(--ramp-blue-300); --color-tablenodeselected: var(--color-tablenodehoveredprimary); --color-template-slot: var(--ramp-pink-300); --color-text: var(--ramp-black-800); --color-text-assistive: var(--ramp-pink-600); --color-text-assistive-pressed: var(--ramp-pink-700); --color-text-assistive-secondary: var(--color-text-assistive); --color-text-assistive-tertiary: var(--color-text-assistive); --color-text-brand: var(--ramp-blue-600); --color-text-brand-secondary: var(--color-text-brand); --color-text-brand-tertiary: var(--color-text-brand); --color-text-component: var(--ramp-purple-600); --color-text-component-pressed: var(--ramp-purple-700); --color-text-component-secondary: var(--ramp-pale-purple-400); --color-text-component-tertiary: var(--ramp-pale-purple-400); --color-text-danger: var(--ramp-red-600); --color-text-danger-secondary: var(--color-text-danger); --color-text-danger-tertiary: var(--color-text-danger); --color-text-design: var(--ramp-blue-600); --color-text-design-pressed: var(--ramp-blue-700); --color-text-design-secondary: var(--color-text-design); --color-text-design-tertiary: var(--color-text-design); --color-text-desktopBackgrounded: var(--ramp-white-500); --color-text-desktopBackgrounded-danger: var(--ramp-red-400); --color-text-desktopBackgrounded-disabled: var(--ramp-white-400); --color-text-desktopBackgrounded-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-text-desktopBackgrounded-secondary: var(--ramp-white-500); --color-text-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-text-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-text-desktopBackgrounded-warning: var(--ramp-yellow-400); --color-text-desktopForeground: var(--ramp-white-1000); --color-text-desktopForeground-danger: var(--ramp-red-400); --color-text-desktopForeground-disabled: var(--ramp-white-400); --color-text-desktopForeground-hover: var(--ramp-white-1000); --color-text-desktopForeground-ondisabled: var(--ramp-grey-900); --color-text-desktopForeground-secondary: var(--ramp-white-500); --color-text-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-text-desktopForeground-tertiary: var(--ramp-white-400); --color-text-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-text-desktopForeground-warning: var(--ramp-yellow-400); --color-text-desktopFullscreen: var(--ramp-white-1000); --color-text-desktopFullscreen-danger: var(--ramp-red-400); --color-text-desktopFullscreen-disabled: var(--ramp-white-400); --color-text-desktopFullscreen-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-text-desktopFullscreen-secondary: var(--ramp-white-500); --color-text-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-tertiary: var(--ramp-white-400); --color-text-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-warning: var(--ramp-yellow-400); --color-text-disabled: var(--ramp-black-400); --color-text-figjam: var(--ramp-purple-600); --color-text-figjam-pressed: var(--ramp-purple-700); --color-text-figjam-secondary: var(--ramp-pale-purple-400); --color-text-figjam-tertiary: var(--ramp-pale-purple-400); --color-text-fs: var(--color-text); --color-text-fs-assistive: var(--color-text-assistive); --color-text-fs-component: var(--color-text-component); --color-text-fs-design: var(--color-text-design); --color-text-fs-measure: var(--color-text-measure); --color-text-fs-onassistive: var(--color-text-onassistive); --color-text-fs-oncomponent: var(--color-text-oncomponent); --color-text-fs-ondesign: var(--color-text-ondesign); --color-text-fs-onmeasure: var(--color-text-onmeasure); --color-text-fs-onselected: var(--color-text-onselected); --color-text-fs-ontemplate: var(--color-text-ontemplate); --color-text-fs-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --color-text-fs-template: var(--color-text-template); --color-text-fs-tertiary: var(--color-text-tertiary); --color-text-handoff: var(--ramp-green-600); --color-text-handoff-secondary: var(--color-text-handoff); --color-text-handoff-tertiary: var(--color-text-handoff); --color-text-hover: var(--ramp-black-800); --color-text-measure: var(--ramp-red-600); --color-text-measure-secondary: var(--color-text-measure); --color-text-measure-tertiary: var(--color-text-measure); --color-text-menu: var(--ramp-white-1000); --color-text-menu-danger: var(--ramp-red-500); --color-text-menu-disabled: var(--ramp-white-400); --color-text-menu-hover: var(--ramp-white-1000); --color-text-menu-ondisabled: var(--ramp-grey-900); --color-text-menu-onselected: var(--ramp-white-1000); --color-text-menu-secondary: var(--ramp-white-500); --color-text-menu-secondary-hover: var(--ramp-white-1000); --color-text-menu-selected: var(--ramp-blue-400); --color-text-menu-selected-secondary: var(--color-text-menu-selected); --color-text-menu-selected-tertiary: var(--color-text-menu-selected); --color-text-menu-tertiary: var(--ramp-white-400); --color-text-menu-tertiary-hover: var(--ramp-white-1000); --color-text-menu-warning: var(--ramp-yellow-400); --color-text-onassistive: var(--ramp-white-1000); --color-text-onassistive-secondary: var(--ramp-white-600); --color-text-onassistive-tertiary: var(--ramp-white-400); --color-text-onbrand: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-oncomponent: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-600); --color-text-oncomponent-tertiary: var(--ramp-white-400); --color-text-ondanger: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-600); --color-text-ondanger-tertiary: var(--ramp-white-400); --color-text-ondesign: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-600); --color-text-ondesign-tertiary: var(--ramp-white-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-onfigjam: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-600); --color-text-onfigjam-tertiary: var(--ramp-white-400); --color-text-oninverse: var(--ramp-white-800); --color-text-oninverse-secondary: var(--ramp-white-600); --color-text-onmeasure: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-600); --color-text-onmeasure-tertiary: var(--ramp-white-400); --color-text-onselected: var(--ramp-black-800); --color-text-onselected-secondary: var(--ramp-black-500); --color-text-onselected-strong: var(--ramp-white-1000); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-onsuccess: var(--ramp-white-1000); --color-text-onsuccess-secondary: var(--ramp-white-600); --color-text-onsuccess-tertiary: var(--ramp-white-400); --color-text-ontemplate: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-black-800); --color-text-onwarning-secondary: var(--ramp-black-500); --color-text-onwarning-tertiary: var(--ramp-black-400); --color-text-secondary: var(--ramp-black-500); --color-text-secondary-hover: var(--ramp-black-800); --color-text-selected: var(--ramp-blue-600); --color-text-selected-secondary: var(--color-text-selected); --color-text-selected-tertiary: var(--color-text-selected); --color-text-success: var(--ramp-green-600); --color-text-success-secondary: var(--color-text-success); --color-text-success-tertiary: var(--color-text-success); --color-text-template: var(--ramp-pink-600); --color-text-template-secondary: var(--ramp-pale-pink-400); --color-text-tertiary: var(--ramp-black-400); --color-text-tertiary-hover: var(--ramp-black-800); --color-text-toolbar: var(--ramp-white-1000); --color-text-toolbar-danger: var(--ramp-red-400); --color-text-toolbar-disabled: var(--ramp-white-400); --color-text-toolbar-hover: var(--ramp-white-1000); --color-text-toolbar-ondisabled: var(--ramp-grey-800); --color-text-toolbar-onselected: var(--ramp-white-1000); --color-text-toolbar-secondary: var(--ramp-white-500); --color-text-toolbar-secondary-hover: var(--ramp-white-1000); --color-text-toolbar-selected: var(--ramp-blue-400); --color-text-toolbar-selected-secondary: var(--color-text-toolbar-selected); --color-text-toolbar-selected-tertiary: var(--color-text-toolbar-selected); --color-text-toolbar-tertiary: var(--ramp-white-400); --color-text-toolbar-tertiary-hover: var(--ramp-white-1000); --color-text-toolbar-warning: var(--ramp-yellow-400); --color-text-tooltip: var(--ramp-white-1000); --color-text-tooltip-danger: var(--ramp-red-400); --color-text-tooltip-disabled: var(--ramp-white-400); --color-text-tooltip-hover: var(--ramp-white-1000); --color-text-tooltip-ondisabled: var(--ramp-grey-900); --color-text-tooltip-onselected: var(--ramp-white-1000); --color-text-tooltip-secondary: var(--ramp-white-500); --color-text-tooltip-secondary-hover: var(--ramp-white-1000); --color-text-tooltip-selected: var(--ramp-blue-400); --color-text-tooltip-selected-secondary: var(--color-text-tooltip-selected); --color-text-tooltip-selected-tertiary: var(--color-text-tooltip-selected); --color-text-tooltip-tertiary: var(--ramp-white-400); --color-text-tooltip-tertiary-hover: var(--ramp-white-1000); --color-text-tooltip-warning: var(--ramp-yellow-400); --color-text-warning: var(--ramp-yellow-1000); --color-text-warning-secondary: var(--color-text-warning); --color-text-warning-tertiary: var(--color-text-warning); --color-texthighlight: #0d99ff66; --color-textondarkannotation: var(--ramp-white-1000); --color-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --color-textonlightannotation: var(--ramp-black-800); --color-textonlightcanvas: var(--ramp-black-800); --color-textonlightcanvassecondary: var(--ramp-black-400); --color-textonmultiplayerblue: var(--ramp-white-1000); --color-textonmultiplayergreen: var(--ramp-white-1000); --color-textonmultiplayergrey: var(--ramp-white-1000); --color-textonmultiplayerpink: var(--ramp-white-1000); --color-textonmultiplayerpurple: var(--ramp-white-1000); --color-textonmultiplayerred: var(--ramp-white-1000); --color-textonmultiplayeryellow: var(--ramp-black-800); --color-textonvoting: var(--ramp-black-800); /* A slower transition for elements that need to call attention */ --duration-lg: 400ms; /* Default transition for most views that slide in or out */ --duration-md: 200ms; /* No motion */ --duration-none: 0ms; /* Very fast, small animations reacting to user input */ --duration-sm: 100ms; --elevation-100: 0 1px 3px 0 #00000026, 0 0 0.5px 0 #0000004d; --elevation-200: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e; --elevation-300: 0 1px 3px 0 #0000001a, 0 5px 12px 0 #00000021, 0 0 0.5px 0 #00000026; --elevation-400: 0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 0.5px 0 #0000001f; --elevation-500: 0 2px 5px 0 #00000026, 0 10px 24px 0 #0000002e, 0 0 0.5px 0 #00000014; --font-family-default: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --font-family-display: "Whyte", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif; --font-family-mono: "Roboto Mono", "Monaco", "Courier New", monospace; --font-weight-default: 450; --font-weight-strong: 550; --radius-full: 9999px; --radius-large: 0.8125rem; --radius-medium: 0.3125rem; --radius-none: 0; --radius-small: 0.125rem; --ramp-black-100: #0000000d; --ramp-black-200: #0000001a; --ramp-black-300: #0003; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000c; --ramp-black-700: #000000d9; --ramp-black-800: #000000e5; --ramp-black-900: #000000f2; --ramp-black-1000: #000; --ramp-blue-100: #f2f9ff; --ramp-blue-200: #e5f4ff; --ramp-blue-300: #bde3ff; --ramp-blue-400: #80caff; --ramp-blue-500: #0d99ff; --ramp-blue-600: #007be5; --ramp-blue-700: #0768cf; --ramp-blue-800: #034ac1; --ramp-blue-900: #093077; --ramp-blue-1000: #0d193f; --ramp-green-100: #edf9ef; --ramp-green-200: #e0f6e5; --ramp-green-300: #b9ebc6; --ramp-green-400: #8ddda4; --ramp-green-500: #14ae5c; --ramp-green-600: #009951; --ramp-green-700: #008043; --ramp-green-800: #036838; --ramp-green-900: #024626; --ramp-green-1000: #083a23; --ramp-grey-100: #f5f5f5; --ramp-grey-200: #e6e6e6; --ramp-grey-300: #d9d9d9; --ramp-grey-400: #b3b3b3; --ramp-grey-500: #757575; --ramp-grey-600: #444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111; --ramp-orange-100: #fff4e5; --ramp-orange-200: #ffe0c2; --ramp-orange-300: #fcd19c; --ramp-orange-400: #ffc470; --ramp-orange-500: #ffa629; --ramp-orange-600: #fc9e24; --ramp-orange-700: #f79722; --ramp-orange-800: #dd7c0e; --ramp-orange-900: #ce7012; --ramp-orange-1000: #8a480f; --ramp-pale-blue-100: #f1f5f8; --ramp-pale-blue-200: #e3ecf2; --ramp-pale-blue-300: #d2dae4; --ramp-pale-blue-400: #afbccf; --ramp-pale-blue-500: #679; --ramp-pale-blue-600: #536383; --ramp-pale-blue-700: #4a5878; --ramp-pale-blue-800: #394360; --ramp-pale-blue-900: #252d41; --ramp-pale-blue-1000: #121721; --ramp-pale-green-100: #f1f8f2; --ramp-pale-green-200: #daecdf; --ramp-pale-green-300: #c3e0cc; --ramp-pale-green-400: #9fc1aa; --ramp-pale-green-500: #678e79; --ramp-pale-green-600: #5c806d; --ramp-pale-green-700: #517361; --ramp-pale-green-800: #476656; --ramp-pale-green-900: #2f483c; --ramp-pale-green-1000: #172b22; --ramp-pale-persimmon-100: #faefeb; --ramp-pale-persimmon-200: #f8e9e2; --ramp-pale-persimmon-300: #f3d6c9; --ramp-pale-persimmon-400: #ebb49d; --ramp-pale-persimmon-500: #d4693b; --ramp-pale-persimmon-600: #a55e40; --ramp-pale-persimmon-700: #864e37; --ramp-pale-persimmon-800: #603a2a; --ramp-pale-persimmon-900: #412b21; --ramp-pale-persimmon-1000: #1f1714; --ramp-pale-pink-100: #f6eef4; --ramp-pale-pink-200: #f2e3ee; --ramp-pale-pink-300: #e8cee1; --ramp-pale-pink-400: #daaace; --ramp-pale-pink-500: #ab5998; --ramp-pale-pink-600: #86507a; --ramp-pale-pink-700: #724667; --ramp-pale-pink-800: #51344a; --ramp-pale-pink-900: #33252f; --ramp-pale-pink-1000: #1b1318; --ramp-pale-purple-100: #f4f1f8; --ramp-pale-purple-200: #ede7f3; --ramp-pale-purple-300: #e0d4ed; --ramp-pale-purple-400: #c5b2dc; --ramp-pale-purple-500: #7f699b; --ramp-pale-purple-600: #6b5884; --ramp-pale-purple-700: #604d75; --ramp-pale-purple-800: #473956; --ramp-pale-purple-900: #33293d; --ramp-pale-purple-1000: #1a141f; --ramp-pale-red-100: #faedeb; --ramp-pale-red-200: #f8e5e2; --ramp-pale-red-300: #f3cfc9; --ramp-pale-red-400: #eba99d; --ramp-pale-red-500: #d4583b; --ramp-pale-red-600: #a55440; --ramp-pale-red-700: #864537; --ramp-pale-red-800: #60332a; --ramp-pale-red-900: #412621; --ramp-pale-red-1000: #1f1514; --ramp-pale-teal-100: #f1f6f8; --ramp-pale-teal-200: #e3eef2; --ramp-pale-teal-300: #cedee4; --ramp-pale-teal-400: #a3c2cc; --ramp-pale-teal-500: #518394; --ramp-pale-teal-600: #436c7a; --ramp-pale-teal-700: #3c606d; --ramp-pale-teal-800: #2f4c56; --ramp-pale-teal-900: #1f3238; --ramp-pale-teal-1000: #101a1e; --ramp-pale-violet-100: #f1f1f8; --ramp-pale-violet-200: #e7e7f3; --ramp-pale-violet-300: #d4d4ed; --ramp-pale-violet-400: #b3b2dc; --ramp-pale-violet-500: #6a699b; --ramp-pale-violet-600: #595884; --ramp-pale-violet-700: #4e4d75; --ramp-pale-violet-800: #393956; --ramp-pale-violet-900: #29293d; --ramp-pale-violet-1000: #14141f; --ramp-pale-yellow-100: #fff5eb; --ramp-pale-yellow-200: #fdeece; --ramp-pale-yellow-300: #f5dfa8; --ramp-pale-yellow-400: #e8cd7d; --ramp-pale-yellow-500: #ad7f00; --ramp-pale-yellow-600: #906800; --ramp-pale-yellow-700: #7a5800; --ramp-pale-yellow-800: #5c4100; --ramp-pale-yellow-900: #3a2a10; --ramp-pale-yellow-1000: #211a12; --ramp-persimmon-100: #fff2eb; --ramp-persimmon-200: #ffdfcc; --ramp-persimmon-300: #ffbb9e; --ramp-persimmon-400: #ffa27a; --ramp-persimmon-500: #ff5c16; --ramp-persimmon-600: #e24c0c; --ramp-persimmon-700: #c53e0d; --ramp-persimmon-800: #aa370d; --ramp-persimmon-900: #842d0b; --ramp-persimmon-1000: #611d0a; --ramp-pink-100: #fff0fe; --ramp-pink-200: #ffe0fc; --ramp-pink-300: #ffbdf2; --ramp-pink-400: #ff99e0; --ramp-pink-500: #ff24bd; --ramp-pink-600: #ea10ac; --ramp-pink-700: #cb0b96; --ramp-pink-800: #971172; --ramp-pink-900: #5f114c; --ramp-pink-1000: #451138; --ramp-purple-100: #f9f5ff; --ramp-purple-200: #f1e5ff; --ramp-purple-300: #e4ccff; --ramp-purple-400: #d9b8ff; --ramp-purple-500: #9747ff; --ramp-purple-600: #8638e5; --ramp-purple-700: #7c2bda; --ramp-purple-800: #681abb; --ramp-purple-900: #4b0d87; --ramp-purple-1000: #2d0f46; --ramp-red-100: #fff5f5; --ramp-red-200: #ffe2e0; --ramp-red-300: #ffc7c2; --ramp-red-400: #ffafa3; --ramp-red-500: #f24822; --ramp-red-600: #dc3412; --ramp-red-700: #bd2915; --ramp-red-800: #9f1f18; --ramp-red-900: #771208; --ramp-red-1000: #660e0b; --ramp-teal-100: #ebfbff; --ramp-teal-200: #cef0f8; --ramp-teal-300: #b6ecf7; --ramp-teal-400: #75d7f0; --ramp-teal-500: #00a2c2; --ramp-teal-600: #0087a8; --ramp-teal-700: #047195; --ramp-teal-800: #085a78; --ramp-teal-900: #093c53; --ramp-teal-1000: #0e2f43; --ramp-violet-100: #f5f5ff; --ramp-violet-200: #ebebff; --ramp-violet-300: #d3d1ff; --ramp-violet-400: #b4b2ff; --ramp-violet-500: #4d49fc; --ramp-violet-600: #443deb; --ramp-violet-700: #3d32e2; --ramp-violet-800: #3620df; --ramp-violet-900: #2f15ac; --ramp-violet-1000: #1d1254; --ramp-white-100: #ffffff0d; --ramp-white-200: #ffffff1a; --ramp-white-300: #fff3; --ramp-white-400: #fff6; --ramp-white-500: #ffffffb2; --ramp-white-600: #fffc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe5; --ramp-white-900: #fffffff2; --ramp-white-1000: #fff; --ramp-yellow-100: #fffbeb; --ramp-yellow-200: #fff1c2; --ramp-yellow-300: #ffe8a3; --ramp-yellow-400: #ffd966; --ramp-yellow-500: #ffcd29; --ramp-yellow-600: #ffc21a; --ramp-yellow-700: #fab815; --ramp-yellow-800: #eba611; --ramp-yellow-900: #dd940e; --ramp-yellow-1000: #b86200; --spacer-0: 0; --spacer-0px: var(--spacer-0); --spacer-1: 0.25rem; --spacer-2: 0.5rem; --spacer-2-5: 0.75rem; --spacer-3: 1rem; --spacer-4: 1.5rem; --spacer-4px: var(--spacer-1); --spacer-5: 2rem; --spacer-6: 2.5rem; --spacer-8px: var(--spacer-2); --spacer-12px: var(--spacer-2-5); --spacer-16px: var(--spacer-3); --spacer-24px: var(--spacer-4); --spacer-32px: var(--spacer-5); --spacer-40px: var(--spacer-6); --text-body-large-font-family: var(--font-family-default); --text-body-large-font-size: 0.8125rem; --text-body-large-font-weight: var(--font-weight-default); --text-body-large-line-height: 1.375rem; --text-body-large-letter-spacing: -0.002rem; --text-body-large: var(--text-body-large-font-weight) var(--text-body-large-font-size)/var(--text-body-large-line-height) var(--text-body-large-font-family); --text-body-large-strong-font-family: var(--font-family-default); --text-body-large-strong-font-size: 0.8125rem; --text-body-large-strong-font-weight: var(--font-weight-strong); --text-body-large-strong-line-height: 1.375rem; --text-body-large-strong-letter-spacing: -0.002rem; --text-body-large-strong: var(--text-body-large-strong-font-weight) var(--text-body-large-strong-font-size)/var(--text-body-large-strong-line-height) var(--text-body-large-strong-font-family); --text-body-medium-font-family: var(--font-family-default); --text-body-medium-font-size: 0.6875rem; --text-body-medium-font-weight: var(--font-weight-default); --text-body-medium-line-height: 1rem; --text-body-medium-letter-spacing: 0.00344rem; --text-body-medium: var(--text-body-medium-font-weight) var(--text-body-medium-font-size)/var(--text-body-medium-line-height) var(--text-body-medium-font-family); --text-body-medium-strong-font-family: var(--font-family-default); --text-body-medium-strong-font-size: 0.6875rem; --text-body-medium-strong-font-weight: var(--font-weight-strong); --text-body-medium-strong-line-height: 1rem; --text-body-medium-strong-letter-spacing: 0.00344rem; --text-body-medium-strong: var(--text-body-medium-strong-font-weight) var(--text-body-medium-strong-font-size)/var(--text-body-medium-strong-line-height) var(--text-body-medium-strong-font-family); --text-body-small-font-family: var(--font-family-default); --text-body-small-font-size: 0.5625rem; --text-body-small-font-weight: var(--font-weight-default); --text-body-small-line-height: 0.875rem; --text-body-small-letter-spacing: 0.00281rem; --text-body-small: var(--text-body-small-font-weight) var(--text-body-small-font-size)/var(--text-body-small-line-height) var(--text-body-small-font-family); --text-body-small-strong-font-family: var(--font-family-default); --text-body-small-strong-font-size: 0.5625rem; --text-body-small-strong-font-weight: 500; --text-body-small-strong-line-height: 0.875rem; --text-body-small-strong-letter-spacing: 0.016875rem; --text-body-small-strong: var(--text-body-small-strong-font-weight) var(--text-body-small-strong-font-size)/var(--text-body-small-strong-line-height) var(--text-body-small-strong-font-family); --text-display-font-family: var(--font-family-display); --text-display-font-size: 3rem; --text-display-font-weight: 400; --text-display-line-height: 3.5rem; --text-display-letter-spacing: -0.09rem; --text-display: var(--text-display-font-weight) var(--text-display-font-size)/var(--text-display-line-height) var(--text-display-font-family); --text-heading-large-font-family: var(--font-family-default); --text-heading-large-font-size: 1.5rem; --text-heading-large-font-weight: var(--font-weight-strong); --text-heading-large-line-height: 2rem; --text-heading-large-letter-spacing: -0.0255rem; --text-heading-large: var(--text-heading-large-font-weight) var(--text-heading-large-font-size)/var(--text-heading-large-line-height) var(--text-heading-large-font-family); --text-heading-medium-font-family: var(--font-family-default); --text-heading-medium-font-size: 0.9375rem; --text-heading-medium-font-weight: var(--font-weight-strong); --text-heading-medium-line-height: 1.5625rem; --text-heading-medium-letter-spacing: -0.00469rem; --text-heading-medium: var(--text-heading-medium-font-weight) var(--text-heading-medium-font-size)/var(--text-heading-medium-line-height) var(--text-heading-medium-font-family); --text-heading-small-font-family: var(--font-family-default); --text-heading-small-font-size: 0.8125rem; --text-heading-small-font-weight: var(--font-weight-strong); --text-heading-small-line-height: 1.375rem; --text-heading-small-letter-spacing: -0.002rem; --text-heading-small: var(--text-heading-small-font-weight) var(--text-heading-small-font-size)/var(--text-heading-small-line-height) var(--text-heading-small-font-family); /* Helper content that floats above the canvas like help/resources icon */ --z-index-assistant: 11; /* Canvas base content */ --z-index-canvas-base: 0; /* Additional info on canvas elements like selection regions or measurement inspections */ --z-index-canvas-modifiers: 1; /* Elements that are pinned to the canvas but not yet interacted with */ --z-index-canvas-pin: 2; /* Elements that are pinned to the canvas like comments in a preview or hover state */ --z-index-canvas-pin-active: 4; /* Temporary UI based on a selection that is easily dismissed like emote sticker wheel */ --z-index-context-editing: 9; /* Cursors in the same page that are not tied to the user specifically */ --z-index-cursor-multiplayer: 3; /* Indicators tied to the mouse like cursor chat */ --z-index-cursor-multiplayer-emote: 5; /* The user's cursor */ --z-index-cursor-user: 15; /* The user's cursor with indicators tied like cursor chat */ --z-index-cursor-user-emote: 14; /* Things like menus or select dropdowns */ --z-index-dropdown: 13; --z-index-modal: 12; /* Bottom or top tooltip */ --z-index-nav: 10; /* The virtual cursor that appears when scrubbing an input. It should always be on top of everything else. */ --z-index-scrub-cursor: 2147483647; /* Sidebars on the left/right/bottom of the editor */ --z-index-sidebar: 6; /* Widgets that persist in the top right corner like timer or audio in FigJam */ --z-index-toolbar-widgets: 8; --z-index-tooltip: 13; /* Alerts or banners */ --z-index-visual-bell: 11; /* Windows that appear out of a sidebar or on a selection */ --z-index-window: 9; } html[lang="ko-kr"] > body.feature_flag_fpl_korean_font_weight { --font-weight-default: 400; --font-weight-strong: 500; --text-body-large-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-body-large-font-size: 0.8125rem; --text-body-large-font-weight: var(--font-weight-default); --text-body-large-line-height: 1.375rem; --text-body-large-letter-spacing: -0.002rem; --text-body-large: var(--text-body-large-font-weight) var(--text-body-large-font-size)/var(--text-body-large-line-height) var(--text-body-large-font-family); --text-body-large-strong-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-body-large-strong-font-size: 0.8125rem; --text-body-large-strong-font-weight: var(--font-weight-strong); --text-body-large-strong-line-height: 1.375rem; --text-body-large-strong-letter-spacing: -0.002rem; --text-body-large-strong: var(--text-body-large-strong-font-weight) var(--text-body-large-strong-font-size)/var(--text-body-large-strong-line-height) var(--text-body-large-strong-font-family); --text-body-medium-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-body-medium-font-size: 0.6875rem; --text-body-medium-font-weight: var(--font-weight-default); --text-body-medium-line-height: 1rem; --text-body-medium-letter-spacing: 0.00344rem; --text-body-medium: var(--text-body-medium-font-weight) var(--text-body-medium-font-size)/var(--text-body-medium-line-height) var(--text-body-medium-font-family); --text-body-medium-strong-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-body-medium-strong-font-size: 0.6875rem; --text-body-medium-strong-font-weight: var(--font-weight-strong); --text-body-medium-strong-line-height: 1rem; --text-body-medium-strong-letter-spacing: 0.00344rem; --text-body-medium-strong: var(--text-body-medium-strong-font-weight) var(--text-body-medium-strong-font-size)/var(--text-body-medium-strong-line-height) var(--text-body-medium-strong-font-family); --text-body-small-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-body-small-font-size: 0.5625rem; --text-body-small-font-weight: var(--font-weight-default); --text-body-small-line-height: 0.875rem; --text-body-small-letter-spacing: 0.00281rem; --text-body-small: var(--text-body-small-font-weight) var(--text-body-small-font-size)/var(--text-body-small-line-height) var(--text-body-small-font-family); --text-heading-large-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-heading-large-font-size: 1.5rem; --text-heading-large-font-weight: var(--font-weight-strong); --text-heading-large-line-height: 2rem; --text-heading-large-letter-spacing: -0.0255rem; --text-heading-large: var(--text-heading-large-font-weight) var(--text-heading-large-font-size)/var(--text-heading-large-line-height) var(--text-heading-large-font-family); --text-heading-medium-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-heading-medium-font-size: 0.9375rem; --text-heading-medium-font-weight: var(--font-weight-strong); --text-heading-medium-line-height: 1.5625rem; --text-heading-medium-letter-spacing: -0.00469rem; --text-heading-medium: var(--text-heading-medium-font-weight) var(--text-heading-medium-font-size)/var(--text-heading-medium-line-height) var(--text-heading-medium-font-family); --text-heading-small-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "SFProLocalRange"; --text-heading-small-font-size: 0.8125rem; --text-heading-small-font-weight: var(--font-weight-strong); --text-heading-small-line-height: 1.375rem; --text-heading-small-letter-spacing: -0.002rem; --text-heading-small: var(--text-heading-small-font-weight) var(--text-heading-small-font-size)/var(--text-heading-small-line-height) var(--text-heading-small-font-family); } [data-preferred-theme="dark"], [data-preferred-theme="dark"][data-editor-theme="design"], :where([data-preferred-theme="dark"] [data-editor-theme="design"]) { --color-bg: var(--ramp-grey-800); --color-bg-fs: var(--color-bg); --color-bg-assistive: var(--ramp-pink-500); --color-bg-fs-assistive: var(--color-bg-assistive); --color-bg-assistive-hover: var(--ramp-pink-600); --color-bg-assistive-pressed: var(--ramp-pink-600); --color-bg-assistive-secondary: var(--ramp-pink-700); --color-bg-fs-assistive-secondary: var(--color-bg-assistive-secondary); --color-bg-assistive-tertiary: var(--ramp-pink-800); --color-bg-fs-assistive-tertiary: var(--color-bg-assistive-tertiary); --color-bg-brand: var(--ramp-blue-500); --color-bg-brand-hover: var(--ramp-blue-600); --color-bg-brand-pressed: var(--ramp-blue-700); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-pale-blue-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-blue-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-blue-600); --color-bg-component: var(--ramp-purple-500); --color-bg-fs-component: var(--color-bg-component); --color-border-fs-component-strong: var(--color-bg-fs-component); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-700); --color-bg-component-secondary: var(--ramp-purple-700); --color-bg-fs-component-secondary: var(--color-bg-component-secondary); --color-bg-component-tertiary: var(--ramp-pale-purple-800); --color-bg-fs-component-tertiary: var(--color-bg-component-tertiary); --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700); --color-bg-component-tertiary-pressed: var(--ramp-pale-purple-600); --color-bg-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-700); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-pale-red-800); --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700); --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600); --color-bg-design: var(--ramp-blue-500); --color-bg-fs-design: var(--color-bg-design); --color-border-fs-design-strong: var(--color-bg-fs-design); --color-bg-design-hover: var(--ramp-blue-600); --color-bg-design-pressed: var(--ramp-blue-600); --color-bg-design-secondary: var(--ramp-blue-700); --color-bg-fs-design-secondary: var(--color-bg-design-secondary); --color-bg-design-tertiary: var(--ramp-pale-blue-800); --color-bg-fs-design-tertiary: var(--color-bg-design-tertiary); --color-bg-desktopBackgrounded: var(--ramp-grey-700); --color-bg-desktopBackgrounded-disabled: var(--ramp-grey-500); --color-bg-desktopBackgrounded-hover: var(--ramp-grey-600); --color-bg-desktopBackgrounded-pressed: var(--ramp-grey-800); --color-bg-desktopBackgrounded-secondary: var(--ramp-grey-700); --color-bg-desktopBackgrounded-tertiary: var(--ramp-grey-600); --color-bg-desktopForeground: var(--ramp-grey-900); --color-bg-desktopForeground-disabled: var(--ramp-grey-500); --color-bg-desktopForeground-hover: var(--ramp-grey-800); --color-bg-desktopForeground-pressed: var(--ramp-grey-800); --color-bg-desktopForeground-secondary: var(--ramp-grey-700); --color-bg-desktopForeground-tertiary: var(--ramp-grey-600); --color-bg-desktopFullscreen: var(--ramp-black-1000); --color-bg-desktopFullscreen-disabled: var(--ramp-grey-500); --color-bg-desktopFullscreen-hover: var(--ramp-grey-900); --color-bg-desktopFullscreen-pressed: var(--ramp-grey-900); --color-bg-desktopFullscreen-secondary: var(--ramp-grey-700); --color-bg-desktopFullscreen-tertiary: var(--ramp-grey-600); --color-bg-disabled: var(--ramp-grey-500); --color-bg-disabled-secondary: var(--ramp-grey-400); --color-bg-elevated: var(--ramp-grey-900); --color-bg-elevated-hover: var(--ramp-grey-800); --color-bg-figjam: var(--ramp-purple-500); --color-bg-fs-measure: var(--color-bg-measure); --color-bg-figjam-hover: var(--ramp-purple-600); --color-bg-figjam-pressed: var(--ramp-purple-600); --color-bg-figjam-secondary: var(--ramp-purple-700); --color-bg-figjam-tertiary: var(--ramp-pale-purple-800); --color-border-fs-measure-strong: var(--color-bg-fs-measure); --color-bg-fs-measure-hover: var(--color-bg-measure-hover); --color-bg-fs-measure-secondary: var(--color-bg-measure-secondary); --color-bg-fs-measure-tertiary: var(--color-bg-measure-tertiary); --color-bg-fs-selected: var(--color-bg-selected); --color-bg-fs-selected-secondary: var(--color-bg-selected-secondary); --color-bg-fs-template: var(--color-bg-template); --color-border-fs-template-strong: var(--color-bg-fs-template); --color-bg-fs-template-secondary: var(--color-bg-template-secondary); --color-bg-fs-template-tertiary: var(--color-bg-template-tertiary); --color-bg-fs-tertiary: var(--color-bg-tertiary); --color-bg-handoff: var(--ramp-green-500); --color-bg-handoff-hover: var(--ramp-green-600); --color-bg-handoff-pressed: var(--ramp-green-700); --color-bg-handoff-secondary: var(--ramp-green-700); --color-bg-handoff-tertiary: var(--ramp-pale-green-800); --color-bg-hover: var(--ramp-grey-700); --color-bg-info: var(--ramp-pale-blue-800); --color-bg-inverse: var(--ramp-white-1000); --color-bg-inverse-hover: var(--ramp-grey-100); --color-bg-inverse-pressed: var(--ramp-grey-200); --color-bg-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-700); --color-bg-measure-secondary: var(--ramp-red-700); --color-bg-measure-tertiary: var(--ramp-pale-red-800); --color-bg-menu: var(--ramp-grey-900); --color-bg-menu-disabled: var(--ramp-grey-500); --color-bg-menu-hover: var(--ramp-grey-800); --color-bg-menu-pressed: var(--ramp-grey-800); --color-bg-menu-secondary: var(--ramp-grey-700); --color-bg-menu-selected: var(--ramp-blue-500); --color-bg-menu-selected-hover: var(--ramp-blue-600); --color-bg-menu-selected-pressed: var(--ramp-blue-600); --color-bg-menu-selected-secondary: var(--ramp-pale-blue-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-menu-tertiary: var(--ramp-grey-600); --color-bg-onselected: var(--ramp-pale-blue-500); --color-bg-onselected-hover: var(--color-bg-onselected); --color-bg-onselected-pressed: var(--color-bg-onselected); --color-bg-pressed: var(--ramp-grey-600); --color-bg-secondary: var(--ramp-grey-700); --color-bg-secondary-hover: var(--ramp-grey-600); --color-bg-secondary-pressed: var(--ramp-grey-500); --color-bg-selected: var(--ramp-pale-blue-700); --color-bg-selected-hover: var(--ramp-pale-blue-600); --color-bghovertransparent: var(--ramp-white-100); --color-bg-selected-pressed: var(--ramp-pale-blue-700); --color-bg-selected-secondary: var(--ramp-pale-blue-800); --color-bg-selected-strong: var(--ramp-blue-500); --color-bg-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-tertiary: var(--ramp-grey-600); --color-bg-strong-hover: var(--ramp-blue-600); --color-bg-strong-pressed: var(--ramp-blue-700); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-700); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-pale-green-900); --color-bg-success-tertiary-hover: var(--ramp-pale-green-800); --color-bg-success-tertiary-pressed: var(--ramp-pale-green-700); --color-bg-template: var(--ramp-pink-500); --color-bg-template-secondary: var(--ramp-pink-700); --color-bg-template-tertiary: var(--ramp-pale-pink-800); --color-bg-toolbar: var(--ramp-grey-800); --color-bg-toolbar-disabled: var(--ramp-grey-500); --color-bg-toolbar-hover: var(--ramp-grey-1000); --color-bg-toolbar-pressed: var(--ramp-grey-1000); --color-bg-toolbar-secondary: var(--ramp-grey-700); --color-bg-toolbar-selected: var(--ramp-blue-500); --color-bg-toolbar-selected-tertiary: var(--color-bg-toolbar-selected); --color-bg-toolbar-selected-hover: var(--ramp-blue-600); --color-bg-toolbar-selected-pressed: var(--ramp-blue-600); --color-bg-toolbar-selected-secondary: var(--ramp-blue-700); --color-bg-toolbar-tertiary: var(--ramp-grey-600); --color-bg-tooltip: var(--ramp-grey-900); --color-bg-tooltip-disabled: var(--ramp-grey-500); --color-bg-tooltip-hover: var(--ramp-grey-800); --color-bg-tooltip-pressed: var(--ramp-grey-800); --color-bg-tooltip-secondary: var(--ramp-grey-700); --color-bg-tooltip-selected: var(--ramp-blue-500); --color-bg-tooltip-selected-hover: var(--ramp-blue-600); --color-bg-tooltip-selected-pressed: var(--ramp-blue-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-blue-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-tooltip-tertiary: var(--ramp-grey-600); --color-bg-transparent: var(--ramp-white-100); /* Use for hover states */ --color-bg-transparent-hover: var(--ramp-white-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-white-200); --color-bg-transparent-secondary: var(--ramp-white-200); --color-bg-warning: var(--ramp-yellow-500); --color-bg-warning-hover: var(--ramp-yellow-600); --color-bg-warning-pressed: var(--ramp-yellow-700); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-pale-yellow-800); --color-bg-warning-tertiary-hover: var(--ramp-pale-yellow-700); --color-bg-warning-tertiary-pressed: var(--ramp-pale-yellow-600); --color-bgannotationblue: var(--ramp-blue-500); --color-bgannotationgreen: var(--ramp-green-500); --color-bgannotationorange: var(--ramp-orange-500); --color-bgannotationpink: var(--ramp-pink-500); --color-bgannotationpurple: var(--ramp-purple-500); --color-bgannotationred: var(--ramp-red-500); --color-bgannotationteal: var(--ramp-teal-600); --color-bgannotationyellow: var(--ramp-yellow-500); --color-bghoverondarkcanvas: var(--ramp-white-300); --color-bghoveronlightcanvas: var(--ramp-black-300); --color-bginspectpadding: var(--ramp-blue-500); --color-bginspectpaddingtertiary: var(--ramp-pale-blue-800); --color-bginspectspacing: var(--ramp-pink-500); --color-bgsecondaryoncanvas: var(--ramp-grey-1000); --color-bgselectedarea: #0d99ff33; --color-bgswitchoff: var(--ramp-grey-600); --color-bgtoolbarmodeswitcher: var(--ramp-grey-600); --color-bgtoolbarmodeswitcher-hover: var(--ramp-grey-700); --color-bgtransparent: #0009; --color-bgtransparent-secondary-hover: var(--ramp-white-200); --color-bgtransparent-secondary-pressed: #ffffff26; --color-bgtransparentsecondary: #ffffff26; --color-bgvoting: var(--ramp-yellow-500); --color-bgvotingsecondary: var(--ramp-yellow-200); --color-bgvotingtertiary: var(--ramp-yellow-100); --color-bgvotingwheeldial: var(--ramp-yellow-100); --color-bgvotingwheelhover: var(--ramp-yellow-200); --color-border: var(--ramp-grey-600); --color-border-fs: var(--color-border); --color-border-assistive: var(--ramp-pink-700); --color-border-fs-assistive: var(--color-border-assistive); --color-border-assistive-strong: var(--ramp-pink-400); --color-border-brand: var(--ramp-pale-blue-600); --color-border-brand-strong: var(--ramp-blue-400); --color-border-component: var(--ramp-pale-purple-700); --color-border-component-hover: var(--ramp-purple-500); --color-border-component-selected: var(--ramp-purple-400); --color-border-component-strong: var(--ramp-purple-300); --color-border-danger: var(--ramp-pale-red-700); --color-border-danger-strong: var(--ramp-red-400); --color-border-design: var(--ramp-blue-700); --color-border-design-strong: var(--ramp-blue-400); --color-border-desktopBackgrounded: var(--ramp-grey-600); --color-border-desktopBackgrounded-disabled: var(--ramp-grey-700); --color-border-desktopBackgrounded-strong: var(--ramp-white-500); --color-border-desktopForeground: var(--ramp-grey-700); --color-border-desktopForeground-disabled: var(--ramp-grey-700); --color-border-desktopForeground-strong: var(--ramp-white-1000); --color-border-desktopFullscreen: var(--ramp-grey-900); --color-border-desktopFullscreen-disabled: var(--ramp-grey-900); --color-border-desktopFullscreen-strong: var(--ramp-white-1000); --color-border-disabled: var(--ramp-grey-600); --color-border-disabled-strong: var(--ramp-white-400); --color-border-figjam: var(--ramp-purple-700); --color-border-figjam-strong: var(--ramp-purple-400); --color-border-fs-assistive-strong: var(--ramp-pink-500); --color-border-fs-component: var(--ramp-purple-300); --color-border-fs-design: var(--ramp-blue-300); --color-border-fs-measure: var(--color-border-measure); --color-border-fs-onassistive: var(--color-border-onassistive); --color-border-fs-onassistive-strong: var(--color-border-onassistive-strong); --color-border-fs-oncomponent: var(--color-border-oncomponent); --color-border-fs-oncomponent-strong: var(--color-border-oncomponent-strong); --color-border-fs-ondesign: var(--color-border-ondesign); --color-border-fs-ondesign-strong: var(--color-border-ondesign-strong); --color-border-fs-onmeasure: var(--color-border-onmeasure); --color-border-fs-onmeasure-strong: var(--color-border-onmeasure-strong); --color-border-fs-onselected: var(--color-border-onselected); --color-border-fs-onselected-strong: var(--color-border-onselected-strong); --color-border-fs-ontemplate: var(--color-border-ontemplate); --color-border-fs-ontemplate-strong: var(--color-border-ontemplate-strong); --color-border-fs-selected: var(--color-border-selected); --color-border-fs-selected-strong: var(--color-border-selected-strong); --color-border-fs-strong: var(--color-border-strong); --color-border-fs-template: var(--ramp-pink-300); --color-border-handoff: var(--ramp-green-700); --color-border-handoff-strong: var(--ramp-green-400); --color-border-measure: var(--ramp-red-700); --color-border-measure-strong: var(--ramp-red-400); --color-border-menu: var(--ramp-grey-700); --color-border-menu-disabled: var(--ramp-grey-700); --color-border-menu-disabled-strong: var(--ramp-grey-700); --color-border-menu-onselected: var(--ramp-blue-400); --color-border-menu-onselected-strong: var(--ramp-white-1000); --color-border-menu-strong: var(--ramp-white-1000); --color-border-menu-selected: var(--ramp-blue-500); --color-border-menu-selected-strong: var(--ramp-blue-400); --color-border-onassistive: var(--ramp-pink-600); --color-border-onassistive-strong: var(--ramp-white-1000); --color-border-onbrand: var(--ramp-blue-600); --color-border-onbrand-strong: var(--ramp-white-1000); --color-border-oncomponent: var(--ramp-purple-600); --color-border-oncomponent-strong: var(--ramp-white-1000); --color-border-ondanger: var(--ramp-red-600); --color-fsCodeNodeTextErrorOnDarkCanvas: var(--color-border-ondanger); --color-fsCodeNodeTextErrorOnLightCanvas: var(--color-border-ondanger); --color-border-ondanger-strong: var(--ramp-white-1000); --color-border-ondesign: var(--ramp-blue-600); --color-border-ondesign-strong: var(--ramp-white-1000); --color-border-onfigjam: var(--ramp-purple-600); --color-border-onfigjam-strong: var(--ramp-purple-600); --color-border-onmeasure: var(--ramp-red-600); --color-border-onmeasure-strong: var(--ramp-white-1000); --color-border-onselected: var(--ramp-pale-blue-500); --color-border-onselected-strong: var(--ramp-white-800); --color-border-onsuccess: var(--ramp-green-600); --color-border-onsuccess-strong: var(--ramp-white-1000); --color-border-ontemplate: var(--ramp-pink-600); --color-border-ontemplate-strong: var(--ramp-white-1000); --color-border-onwarning: var(--ramp-yellow-700); --color-border-onwarning-strong: var(--ramp-black-800); --color-border-selected: var(--ramp-blue-500); --color-border-selected-strong: var(--ramp-blue-400); --color-border-strong: var(--ramp-white-800); --color-border-success: var(--ramp-pale-green-700); --color-border-success-strong: var(--ramp-green-400); --color-border-template-strong: var(--ramp-pink-300); --color-border-toolbar: var(--ramp-grey-600); --color-border-toolbar-disabled: var(--ramp-white-400); --color-border-toolbar-onselected: var(--ramp-white-1000); --color-border-toolbar-selected: var(--ramp-blue-500); --color-border-toolbar-selected-strong: var(--ramp-blue-400); --color-border-toolbar-strong: var(--ramp-white-1000); --color-border-tooltip: var(--ramp-grey-700); --color-border-tooltip-disabled: var(--ramp-grey-700); --color-border-tooltip-disabled-strong: var(--ramp-grey-700); --color-border-tooltip-onselected: var(--ramp-blue-600); --color-border-tooltip-onselected-strong: var(--ramp-white-1000); --color-border-tooltip-selected: var(--ramp-blue-500); --color-border-tooltip-selected-strong: var(--ramp-blue-400); --color-border-tooltip-strong: var(--ramp-white-1000); --color-border-warning: var(--ramp-pale-yellow-700); --color-border-warning-strong: var(--ramp-yellow-400); --color-borderinspectpadding: var(--ramp-blue-500); --color-borderinspectspacing: var(--ramp-pink-500); --color-borderplacecrosshair: var(--ramp-white-1000); --color-borderselectedec: #fff0; --color-bordertranslucent: var(--ramp-white-200); --color-bordertranslucentstrong: var(--ramp-white-300); --color-code: var(--ramp-white-1000); --color-codeaccent: var(--ramp-orange-400); --color-codeattribute: var(--ramp-white-1000); --color-codeclassname: var(--ramp-blue-400); --color-codecomment: var(--ramp-white-500); --color-codeproperty: var(--ramp-white-1000); --color-codestring: var(--ramp-blue-400); --color-codestylename: var(--ramp-blue-400); --color-codetag: var(--ramp-purple-400); --color-codevalue: var(--ramp-pink-400); --color-codevariable: var(--ramp-green-400); --color-conditionalborder: var(--ramp-grey-600); --color-controliconoutline: var(--ramp-black-200); --color-controlknoboffoutline: var(--ramp-black-300); --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); /* Used for input backgrounds on canvas */ --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); --color-fsBorderDesignShadowStrong: var(--ramp-blue-600); --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-200); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-200); --color-fsBorderPlaceholder: var(--ramp-grey-500); --color-fsBorderSelectedImmutableNode: var(--ramp-purple-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-purple-500); --color-fsCanvasDefaultFill: var(--ramp-grey-900); --color-fsCodeNodeBorder: var(--ramp-green-500); --color-fsCodeNodeBorderSecondary: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnDarkCanvas: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnLightCanvas: var(--color-fsCodeNodeBorder); --color-fsDevHandoffAutolayoutPadding: var(--ramp-blue-400); --color-fsDevHandoffAutolayoutSpacing: var(--ramp-pink-400); --color-fsFrameDefaultFill: var(--ramp-white-1000); --color-fsGridCellOutline: #80caff99; --color-fsGridCellSelection: #80caff4d; --color-fsGridComponentCellOutline: #d9b8ff99; --color-fsGridComponentCellSelection: #d9b8ff4d; --color-fsIconOnDarkCanvas: var(--color-iconondarkcanvas); --color-fsIconOnDarkCanvasSecondary: var(--ramp-white-400); --color-fsIconOnLightCanvas: var(--color-icononlightcanvas); --color-fsIconOnLightCanvasSecondary: var(--ramp-black-400); --color-fsNodeHandle: var(--ramp-blue-600); --color-fsNodeLabelNoBG: var(--ramp-black-400); --color-fsNodeSymbolSelectedSecondary: var(--ramp-purple-500); --color-fsNoodleCenterLine: #fff0; --color-fsShapeDefaultFill: var(--ramp-grey-300); --color-fsSitesResponsiveSetTextOnDarkCanvas: var(--ramp-white-500); --color-fsSitesResponsiveSetTextOnLightCanvas: var(--ramp-black-500); --color-fsSnappingOverlay: var(--ramp-red-500); --color-fsStickyAuthorTextOnDark: var(--ramp-white-600); --color-fsStickyAuthorTextOnLight: var(--ramp-black-500); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-400); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-600); --color-fsTextOnDarkCanvas: var(--color-textondarkcanvas); --color-fsTextOnDarkCanvasSecondary: var(--color-textondarkcanvassecondary); --color-fsTextOnLightCanvas: var(--color-textonlightcanvas); --color-fsTextOnLightCanvasSecondary: var(--color-textonlightcanvassecondary); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-400); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-600); --color-fsVectorInactive: var(--ramp-grey-400); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-purple-600); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-purple-600); --color-gauge: var(--ramp-grey-300); --color-gauge-brand: var(--ramp-blue-400); --color-gauge-brand-secondary: var(--ramp-pale-blue-500); --color-gauge-danger: var(--ramp-red-400); --color-gauge-danger-secondary: var(--ramp-pale-red-500); --color-gauge-secondary: var(--ramp-grey-500); --color-gauge-strong: var(--ramp-white-1000); --color-gauge-success: var(--ramp-green-400); --color-gauge-success-secondary: var(--ramp-pale-green-500); --color-gauge-warning: var(--ramp-yellow-300); --color-gauge-warning-secondary: var(--ramp-pale-yellow-500); --color-icon: var(--ramp-white-1000); --color-icon-fs: var(--color-icon); --color-icon-assistive: var(--ramp-pink-400); --color-icon-assistive-secondary: var(--color-icon-assistive); --color-icon-assistive-tertiary: var(--color-icon-assistive); --color-icon-fs-assistive: var(--color-icon-assistive); --color-icon-assistive-pressed: var(--ramp-pink-300); --color-icon-brand: var(--ramp-blue-400); --color-icon-brand-pressed: var(--ramp-blue-500); --color-icon-brand-secondary: var(--ramp-pale-blue-500); --color-icon-brand-tertiary: var(--ramp-pale-blue-700); --color-icon-component: var(--ramp-purple-400); --color-icon-fs-component: var(--color-icon-component); --color-icon-component-pressed: var(--ramp-purple-300); --color-icon-component-secondary: var(--ramp-pale-purple-500); --color-icon-component-tertiary: var(--ramp-pale-purple-500); --color-icon-danger: var(--ramp-red-400); --color-icon-danger-secondary: var(--color-icon-danger); --color-icon-danger-secondary-hover: var(--color-icon-danger); --color-icon-danger-tertiary: var(--color-icon-danger); --color-icon-danger-hover: var(--ramp-red-300); --color-icon-danger-pressed: var(--ramp-red-300); --color-icon-design: var(--ramp-blue-400); --color-icon-design-secondary: var(--color-icon-design); --color-icon-design-tertiary: var(--color-icon-design); --color-icon-fs-design: var(--color-icon-design); --color-icon-design-pressed: var(--ramp-blue-300); --color-icon-desktopBackgrounded: var(--ramp-white-500); --color-icon-desktopBackgrounded-danger: var(--ramp-red-500); --color-icon-desktopBackgrounded-disabled: var(--ramp-white-400); --color-icon-desktopBackgrounded-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-icon-desktopBackgrounded-secondary: var(--ramp-white-500); --color-icon-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-icon-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-icon-desktopBackgrounded-warning: var(--ramp-yellow-500); --color-icon-desktopForeground: var(--ramp-white-1000); --color-icon-desktopForeground-danger: var(--ramp-red-500); --color-icon-desktopForeground-disabled: var(--ramp-white-400); --color-icon-desktopForeground-hover: var(--ramp-white-1000); --color-icon-desktopForeground-ondisabled: var(--ramp-grey-900); --color-icon-desktopForeground-secondary: var(--ramp-white-500); --color-icon-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-tertiary: var(--ramp-white-400); --color-icon-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-warning: var(--ramp-yellow-500); --color-icon-desktopFullscreen: var(--ramp-white-1000); --color-icon-desktopFullscreen-danger: var(--ramp-red-500); --color-icon-desktopFullscreen-disabled: var(--ramp-white-400); --color-icon-desktopFullscreen-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-icon-desktopFullscreen-secondary: var(--ramp-white-500); --color-icon-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-tertiary: var(--ramp-white-400); --color-icon-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-warning: var(--ramp-yellow-500); --color-icon-disabled: var(--ramp-white-400); --color-icon-figjam: var(--ramp-purple-400); --color-icon-figjam-pressed: var(--ramp-purple-300); --color-icon-figjam-secondary: var(--ramp-pale-purple-500); --color-icon-figjam-tertiary: var(--ramp-pale-purple-500); --color-icon-fs-measure: var(--color-icon-measure); --color-icon-fs-onassistive: var(--color-icon-onassistive); --color-icon-fs-oncomponent: var(--color-icon-oncomponent); --color-icon-fs-ondesign: var(--color-icon-ondesign); --color-icon-fs-onmeasure: var(--color-icon-onmeasure); --color-icon-fs-onselected: var(--color-icon-onselected); --color-icon-fs-ontemplate: var(--color-icon-ontemplate); --color-icon-fs-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --color-icon-fs-template: var(--color-icon-template); --color-icon-fs-tertiary: var(--color-icon-tertiary); --color-icon-handoff: var(--ramp-green-400); --color-icon-handoff-secondary: var(--color-icon-handoff); --color-icon-handoff-tertiary: var(--color-icon-handoff); --color-icon-handoff-pressed: var(--ramp-green-300); --color-icon-hover: var(--ramp-white-1000); --color-icon-measure: var(--ramp-red-500); --color-icon-measure-secondary: var(--color-icon-measure); --color-icon-measure-secondary-hover: var(--color-icon-measure); --color-icon-measure-tertiary: var(--color-icon-measure); --color-icon-measure-hover: var(--ramp-red-300); --color-icon-measure-pressed: var(--ramp-red-300); --color-icon-menu: var(--ramp-white-1000); --color-icon-menu-danger: var(--ramp-red-500); --color-icon-menu-disabled: var(--ramp-white-400); --color-icon-menu-hover: var(--ramp-white-1000); --color-icon-menu-ondisabled: var(--ramp-grey-900); --color-icon-menu-onselected: var(--ramp-white-1000); --color-icon-menu-pressed: var(--ramp-blue-500); --color-icon-menu-secondary: var(--ramp-white-500); --color-icon-menu-secondary-hover: var(--ramp-white-1000); --color-icon-menu-selected: var(--ramp-blue-400); --color-icon-menu-selected-secondary: var(--ramp-blue-400); --color-icon-menu-selected-tertiary: var(--ramp-blue-400); --color-icon-menu-tertiary: var(--ramp-white-400); --color-icon-menu-tertiary-hover: var(--ramp-white-1000); --color-icon-menu-warning: var(--ramp-yellow-500); --color-icon-onassistive: var(--ramp-white-1000); --color-icon-onassistive-secondary: var(--ramp-white-600); --color-icon-onassistive-tertiary: var(--ramp-white-400); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-600); --color-icon-onbrand-tertiary: var(--ramp-white-400); --color-icon-oncomponent: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-600); --color-icon-oncomponent-tertiary: var(--ramp-white-400); --color-icon-ondanger: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-600); --color-icon-ondanger-tertiary: var(--ramp-white-400); --color-icon-ondesign: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-600); --color-icon-ondesign-tertiary: var(--ramp-white-400); --color-icon-ondisabled: var(--ramp-grey-800); --color-icon-onfigjam: var(--ramp-white-1000); --color-icon-onfigjam-secondary: var(--ramp-white-600); --color-icon-onfigjam-tertiary: var(--ramp-white-400); --color-icon-oninverse: var(--ramp-black-800); --color-icon-onmeasure: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-600); --color-icon-onmeasure-tertiary: var(--ramp-white-400); --color-icon-onselected: var(--ramp-white-1000); --color-icon-onselected-secondary: var(--ramp-white-500); --color-icon-secondary: var(--ramp-white-500); --color-icon-onselected-strong: var(--ramp-white-1000); --color-icon-onselected-tertiary: var(--ramp-white-400); --color-icon-tertiary: var(--ramp-white-400); --color-icon-onsuccess: var(--ramp-white-1000); --color-icon-onsuccess-secondary: var(--ramp-white-600); --color-icon-onsuccess-tertiary: var(--ramp-white-400); --color-icon-ontemplate: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-black-800); --color-icon-onwarning-secondary: var(--ramp-black-500); --color-icon-onwarning-tertiary: var(--ramp-black-400); --color-icon-pressed: var(--ramp-blue-600); --color-icon-secondary-hover: var(--ramp-white-1000); --color-icon-selected: var(--ramp-blue-400); --color-icon-selected-secondary: var(--color-icon-selected); --color-icon-selected-tertiary: var(--color-icon-selected); --color-icon-success: var(--ramp-green-400); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-success-pressed: var(--ramp-green-300); --color-icon-template: var(--ramp-pink-400); --color-icon-template-secondary: var(--ramp-pale-pink-500); --color-icon-tertiary-hover: var(--ramp-white-1000); --color-icon-toolbar: var(--ramp-white-1000); --color-icon-toolbar-danger: var(--ramp-red-500); --color-icon-toolbar-disabled: var(--ramp-white-400); --color-icon-toolbar-hover: var(--ramp-white-1000); --color-icon-toolbar-ondisabled: var(--ramp-grey-800); --color-icon-toolbar-onselected: var(--ramp-white-1000); --color-icon-toolbar-pressed: var(--ramp-blue-500); --color-icon-toolbar-secondary: var(--ramp-white-500); --color-icon-toolbar-secondary-hover: var(--ramp-white-1000); --color-icon-toolbar-selected: var(--ramp-blue-400); --color-icon-toolbar-selected-secondary: var(--color-icon-toolbar-selected); --color-icon-toolbar-selected-tertiary: var(--color-icon-toolbar-selected); --color-icon-toolbar-tertiary: var(--ramp-white-400); --color-icon-toolbar-tertiary-hover: var(--ramp-white-1000); --color-icon-toolbar-warning: var(--ramp-yellow-500); --color-icon-tooltip: var(--ramp-white-1000); --color-icon-tooltip-danger: var(--ramp-red-500); --color-icon-tooltip-disabled: var(--ramp-white-400); --color-icon-tooltip-hover: var(--ramp-white-1000); --color-icon-tooltip-ondisabled: var(--ramp-grey-900); --color-icon-tooltip-onselected: var(--ramp-white-1000); --color-icon-tooltip-pressed: var(--ramp-blue-500); --color-icon-tooltip-secondary: var(--ramp-white-500); --color-icon-tooltip-secondary-hover: var(--ramp-white-1000); --color-icon-tooltip-selected: var(--ramp-blue-400); --color-icon-tooltip-selected-secondary: var(--color-icon-tooltip-selected); --color-icon-tooltip-selected-tertiary: var(--color-icon-tooltip-selected); --color-icon-tooltip-tertiary: var(--ramp-white-400); --color-icon-tooltip-tertiary-hover: var(--ramp-white-1000); --color-icon-tooltip-warning: var(--ramp-yellow-500); --color-icon-warning: var(--ramp-yellow-400); --color-icon-warning-secondary: var(--color-icon-warning); --color-icon-warning-tertiary: var(--color-icon-warning); --color-icon-warning-pressed: var(--ramp-yellow-400); --color-icondesignfilesecondary: var(--ramp-blue-400); --color-iconfavorite: var(--ramp-yellow-500); --color-iconfigjamfilesecondary: var(--ramp-purple-400); --color-iconondarkcanvas: var(--ramp-white-800); --color-icononlightcanvas: var(--ramp-black-800); --color-icononvoting: var(--ramp-black-800); --color-iconprototypefile: var(--ramp-grey-500); --color-iconprototypefilesecondary: var(--ramp-white-1000); --color-iconpublishedfile: var(--ramp-grey-500); --color-iconpublishedfilesecondary: var(--ramp-grey-400); --color-loading: var(--ramp-white-200); --color-loadingmenu: var(--ramp-white-200); --color-loadingsecondary: var(--ramp-white-100); --color-loadingsecondarymenu: var(--ramp-white-100); --color-modalbackdrop: var(--ramp-black-500); --color-multiplayerblue: var(--ramp-blue-600); --color-multiplayerbluehover: var(--ramp-blue-700); --color-multiplayerbluesecondary: var(--ramp-blue-800); --color-multiplayergreen: var(--ramp-green-500); --color-multiplayergreenhover: var(--ramp-green-600); --color-multiplayergreensecondary: var(--ramp-green-800); --color-multiplayergrey: var(--ramp-pale-blue-500); --color-multiplayergreyhover: var(--ramp-pale-blue-600); --color-multiplayergreysecondary: var(--ramp-pale-blue-800); --color-multiplayerpink: var(--ramp-pink-500); --color-multiplayerpinkhover: var(--ramp-pink-600); --color-multiplayerpinksecondary: var(--ramp-pink-800); --color-multiplayerpurple: var(--ramp-purple-500); --color-multiplayerpurplehover: var(--ramp-purple-600); --color-multiplayerpurplesecondary: var(--ramp-purple-800); --color-multiplayerred: var(--ramp-red-500); --color-multiplayerredhover: var(--ramp-red-600); --color-multiplayerredsecondary: var(--ramp-red-800); --color-multiplayeryellow: var(--ramp-yellow-500); --color-multiplayeryellowhover: var(--ramp-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-yellow-800); --color-nodehandle: var(--ramp-blue-400); --color-prototypeloadingbackdrop: var(--ramp-black-800); --color-scrollbar: #b3b3b380; --color-shadow: #0009; --color-tablenodehoveredprimary: var(--ramp-blue-500); --color-tablenodeselected: var(--color-tablenodehoveredprimary); --color-tablenodehoveredsecondary: var(--ramp-blue-300); --color-template-slot: var(--ramp-pale-pink-700); --color-text: var(--ramp-white-1000); --color-text-fs: var(--color-text); --color-text-assistive: var(--ramp-pink-400); --color-text-assistive-secondary: var(--color-text-assistive); --color-text-assistive-tertiary: var(--color-text-assistive); --color-text-fs-assistive: var(--color-text-assistive); --color-text-assistive-pressed: var(--ramp-pink-300); --color-text-brand: var(--ramp-blue-400); --color-text-brand-secondary: var(--color-text-brand); --color-text-brand-tertiary: var(--color-text-brand); --color-text-component: var(--ramp-purple-400); --color-text-fs-component: var(--color-text-component); --color-text-component-pressed: var(--ramp-purple-300); --color-text-component-secondary: var(--ramp-pale-purple-500); --color-text-component-tertiary: var(--ramp-pale-purple-500); --color-text-danger: var(--ramp-red-400); --color-text-danger-secondary: var(--color-text-danger); --color-text-danger-tertiary: var(--color-text-danger); --color-text-design: var(--ramp-blue-400); --color-text-design-secondary: var(--color-text-design); --color-text-design-tertiary: var(--color-text-design); --color-text-fs-design: var(--color-text-design); --color-text-design-pressed: var(--ramp-blue-300); --color-text-desktopBackgrounded: var(--ramp-white-500); --color-text-desktopBackgrounded-danger: var(--ramp-red-400); --color-text-desktopBackgrounded-disabled: var(--ramp-white-400); --color-text-desktopBackgrounded-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-text-desktopBackgrounded-secondary: var(--ramp-white-500); --color-text-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-text-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-text-desktopBackgrounded-warning: var(--ramp-yellow-400); --color-text-desktopForeground: var(--ramp-white-1000); --color-text-desktopForeground-danger: var(--ramp-red-400); --color-text-desktopForeground-disabled: var(--ramp-white-400); --color-text-desktopForeground-hover: var(--ramp-white-1000); --color-text-desktopForeground-ondisabled: var(--ramp-grey-900); --color-text-desktopForeground-secondary: var(--ramp-white-500); --color-text-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-text-desktopForeground-tertiary: var(--ramp-white-400); --color-text-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-text-desktopForeground-warning: var(--ramp-yellow-400); --color-text-desktopFullscreen: var(--ramp-white-1000); --color-text-desktopFullscreen-danger: var(--ramp-red-400); --color-text-desktopFullscreen-disabled: var(--ramp-white-400); --color-text-desktopFullscreen-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-text-desktopFullscreen-secondary: var(--ramp-white-500); --color-text-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-tertiary: var(--ramp-white-400); --color-text-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-warning: var(--ramp-yellow-400); --color-text-disabled: var(--ramp-white-400); --color-text-figjam: var(--ramp-pale-purple-400); --color-text-figjam-pressed: var(--ramp-purple-300); --color-text-figjam-secondary: var(--ramp-pale-purple-500); --color-text-figjam-tertiary: var(--ramp-pale-purple-500); --color-text-fs-measure: var(--color-text-measure); --color-text-fs-onassistive: var(--color-text-onassistive); --color-text-fs-oncomponent: var(--color-text-oncomponent); --color-text-fs-ondesign: var(--color-text-ondesign); --color-text-fs-onmeasure: var(--color-text-onmeasure); --color-text-fs-onselected: var(--color-text-onselected); --color-text-fs-ontemplate: var(--color-text-ontemplate); --color-text-fs-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --color-text-fs-template: var(--color-text-template); --color-text-fs-tertiary: var(--color-text-tertiary); --color-text-handoff: var(--ramp-green-400); --color-text-handoff-secondary: var(--color-text-handoff); --color-text-handoff-tertiary: var(--color-text-handoff); --color-text-hover: var(--ramp-white-1000); --color-text-measure: var(--ramp-red-400); --color-text-measure-secondary: var(--color-text-measure); --color-text-measure-tertiary: var(--color-text-measure); --color-text-menu: var(--ramp-white-1000); --color-text-menu-danger: var(--ramp-red-400); --color-text-menu-disabled: var(--ramp-white-400); --color-text-menu-hover: var(--ramp-white-1000); --color-text-menu-ondisabled: var(--ramp-grey-900); --color-text-menu-onselected: var(--ramp-white-1000); --color-text-menu-secondary: var(--ramp-white-500); --color-text-menu-secondary-hover: var(--ramp-white-1000); --color-text-menu-selected: var(--ramp-blue-400); --color-text-menu-selected-secondary: var(--color-text-menu-selected); --color-text-menu-selected-tertiary: var(--color-text-menu-selected); --color-text-menu-tertiary: var(--ramp-white-400); --color-text-menu-tertiary-hover: var(--ramp-white-1000); --color-text-menu-warning: var(--ramp-yellow-400); --color-text-onassistive: var(--ramp-white-1000); --color-text-onassistive-secondary: var(--ramp-white-600); --color-text-onassistive-tertiary: var(--ramp-white-400); --color-text-onbrand: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-oncomponent: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-600); --color-text-oncomponent-tertiary: var(--ramp-white-400); --color-text-ondanger: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-600); --color-text-ondanger-tertiary: var(--ramp-white-400); --color-text-ondesign: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-600); --color-text-ondesign-tertiary: var(--ramp-white-400); --color-text-ondisabled: var(--ramp-grey-800); --color-text-onfigjam: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-600); --color-text-onfigjam-tertiary: var(--ramp-white-400); --color-text-oninverse: var(--ramp-black-800); --color-text-oninverse-secondary: var(--ramp-black-600); --color-text-onmeasure: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-600); --color-text-onmeasure-tertiary: var(--ramp-white-400); --color-text-onselected: var(--ramp-white-800); --color-text-onselected-secondary: var(--ramp-white-500); --color-text-secondary: var(--ramp-white-500); --color-text-onselected-strong: var(--ramp-white-1000); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-tertiary: var(--ramp-white-400); --color-text-onsuccess: var(--ramp-white-1000); --color-text-onsuccess-secondary: var(--ramp-white-600); --color-text-onsuccess-tertiary: var(--ramp-white-400); --color-text-ontemplate: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-black-800); --color-text-onwarning-secondary: var(--ramp-black-500); --color-text-onwarning-tertiary: var(--ramp-black-400); --color-text-secondary-hover: var(--ramp-white-1000); --color-text-selected: var(--ramp-blue-400); --color-text-selected-secondary: var(--color-text-selected); --color-text-selected-tertiary: var(--color-text-selected); --color-text-success: var(--ramp-green-400); --color-text-success-secondary: var(--color-text-success); --color-text-success-tertiary: var(--color-text-success); --color-text-template: var(--ramp-pink-400); --color-text-template-secondary: var(--ramp-pale-pink-500); --color-text-tertiary-hover: var(--ramp-white-1000); --color-text-toolbar: var(--ramp-white-1000); --color-text-toolbar-danger: var(--ramp-red-400); --color-text-toolbar-disabled: var(--ramp-white-400); --color-text-toolbar-hover: var(--ramp-white-1000); --color-text-toolbar-ondisabled: var(--ramp-grey-800); --color-text-toolbar-onselected: var(--ramp-white-1000); --color-text-toolbar-secondary: var(--ramp-white-500); --color-text-toolbar-secondary-hover: var(--ramp-white-1000); --color-text-toolbar-selected: var(--ramp-blue-400); --color-text-toolbar-selected-secondary: var(--color-text-toolbar-selected); --color-text-toolbar-selected-tertiary: var(--color-text-toolbar-selected); --color-text-toolbar-tertiary: var(--ramp-white-400); --color-text-toolbar-tertiary-hover: var(--ramp-white-1000); --color-text-toolbar-warning: var(--ramp-yellow-400); --color-text-tooltip: var(--ramp-white-1000); --color-text-tooltip-danger: var(--ramp-red-400); --color-text-tooltip-disabled: var(--ramp-white-400); --color-text-tooltip-hover: var(--ramp-white-1000); --color-text-tooltip-ondisabled: var(--ramp-grey-900); --color-text-tooltip-onselected: var(--ramp-white-1000); --color-text-tooltip-secondary: var(--ramp-white-500); --color-text-tooltip-secondary-hover: var(--ramp-white-1000); --color-text-tooltip-selected: var(--ramp-blue-400); --color-text-tooltip-selected-secondary: var(--color-text-tooltip-selected); --color-text-tooltip-selected-tertiary: var(--color-text-tooltip-selected); --color-text-tooltip-tertiary: var(--ramp-white-400); --color-text-tooltip-tertiary-hover: var(--ramp-white-1000); --color-text-tooltip-warning: var(--ramp-yellow-400); --color-text-warning: var(--ramp-yellow-400); --color-text-warning-secondary: var(--color-text-warning); --color-text-warning-tertiary: var(--color-text-warning); --color-texthighlight: #0d99ff66; --color-textondarkannotation: var(--ramp-white-1000); --color-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --color-textonlightannotation: var(--ramp-black-800); --color-textonlightcanvas: var(--ramp-black-800); --color-textonlightcanvassecondary: var(--ramp-black-400); --color-textonmultiplayerblue: var(--ramp-white-1000); --color-textonmultiplayergreen: var(--ramp-white-1000); --color-textonmultiplayergrey: var(--ramp-white-1000); --color-textonmultiplayerpink: var(--ramp-white-1000); --color-textonmultiplayerpurple: var(--ramp-white-1000); --color-textonmultiplayerred: var(--ramp-white-1000); --color-textonmultiplayeryellow: var(--ramp-black-800); --color-textonvoting: var(--ramp-black-800); --elevation-100: 0 1px 3px 0 #0006, inset 0 0 0.5px 0 #ffffff4d, inset 0 0.5px 0 0 #ffffff1a, 0 0 0.5px 0 #00000080; --elevation-200: 0 1px 3px 0 #00000080, inset 0 0 0.5px 0 #ffffff4d, 0 3px 8px 0 #00000059, inset 0 0.5px 0 0 #ffffff14; --elevation-300: 0 1px 3px 0 #00000080, inset 0 0 0.5px 0 #ffffff4d, 0 5px 12px 0 #00000059, inset 0 0.5px 0 0 #ffffff14; --elevation-400: 0 2px 5px 0 #00000059, inset 0 0 0.5px 0 #ffffff59, 0 10px 16px 0 #00000059, inset 0 0.5px 0 0 #ffffff14; --elevation-500: 0 3px 5px 0 #00000059, inset 0 0 0.5px 0 #ffffff59, 0 10px 24px 0 #00000073, inset 0 0.5px 0 0 #ffffff14; --ramp-black-100: #0000000d; --ramp-black-200: #0000001a; --ramp-black-300: #0003; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000c; --ramp-black-700: #000000d9; --ramp-black-800: #000000e5; --ramp-black-900: #000000f2; --ramp-black-1000: #000; --ramp-blue-100: #e2f1fd; --ramp-blue-200: #cfe9fc; --ramp-blue-300: #a8d7fa; --ramp-blue-400: #7cc4f8; --ramp-blue-500: #0c8ce9; --ramp-blue-600: #0a6dc2; --ramp-blue-700: #105cad; --ramp-blue-800: #184591; --ramp-blue-900: #1b335f; --ramp-blue-1000: #161e36; --ramp-green-100: #e7f8eb; --ramp-green-200: #c3eece; --ramp-green-300: #a5e5b7; --ramp-green-400: #7cd797; --ramp-green-500: #198f51; --ramp-green-600: #078348; --ramp-green-700: #0a5c35; --ramp-green-800: #0a4c2d; --ramp-green-900: #082618; --ramp-green-1000: #0b1e15; --ramp-grey-100: #f5f5f5; --ramp-grey-200: #e6e6e6; --ramp-grey-300: #d9d9d9; --ramp-grey-400: #b3b3b3; --ramp-grey-500: #757575; --ramp-grey-600: #444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111; --ramp-orange-100: #ffedd7; --ramp-orange-200: #fdd9b4; --ramp-orange-300: #fcc67f; --ramp-orange-400: #fcb34a; --ramp-orange-500: #de7d02; --ramp-orange-600: #c86f04; --ramp-orange-700: #ad5f05; --ramp-orange-800: #985306; --ramp-orange-900: #673806; --ramp-orange-1000: #371d06; --ramp-pale-blue-100: #f1f5f8; --ramp-pale-blue-200: #e3ecf2; --ramp-pale-blue-300: #d2dae4; --ramp-pale-blue-400: #afbccf; --ramp-pale-blue-500: #679; --ramp-pale-blue-600: #536383; --ramp-pale-blue-700: #4a5878; --ramp-pale-blue-800: #394360; --ramp-pale-blue-900: #252d41; --ramp-pale-blue-1000: #121721; --ramp-pale-green-100: #f1f8f2; --ramp-pale-green-200: #daecdf; --ramp-pale-green-300: #c3e0cc; --ramp-pale-green-400: #9fc1aa; --ramp-pale-green-500: #678e79; --ramp-pale-green-600: #5c806d; --ramp-pale-green-700: #517361; --ramp-pale-green-800: #476656; --ramp-pale-green-900: #2f483c; --ramp-pale-green-1000: #172b22; --ramp-pale-persimmon-100: #faefeb; --ramp-pale-persimmon-200: #f8e9e2; --ramp-pale-persimmon-300: #f3d6c9; --ramp-pale-persimmon-400: #ebb49d; --ramp-pale-persimmon-500: #d4693b; --ramp-pale-persimmon-600: #a55e40; --ramp-pale-persimmon-700: #864e37; --ramp-pale-persimmon-800: #603a2a; --ramp-pale-persimmon-900: #412b21; --ramp-pale-persimmon-1000: #1f1714; --ramp-pale-pink-100: #f6eef4; --ramp-pale-pink-200: #f2e3ee; --ramp-pale-pink-300: #e8cee1; --ramp-pale-pink-400: #daaace; --ramp-pale-pink-500: #ab5998; --ramp-pale-pink-600: #86507a; --ramp-pale-pink-700: #724667; --ramp-pale-pink-800: #51344a; --ramp-pale-pink-900: #33252f; --ramp-pale-pink-1000: #1b1318; --ramp-pale-purple-100: #f4f1f8; --ramp-pale-purple-200: #ede7f3; --ramp-pale-purple-300: #e0d4ed; --ramp-pale-purple-400: #c5b2dc; --ramp-pale-purple-500: #7f699b; --ramp-pale-purple-600: #6b5884; --ramp-pale-purple-700: #604d75; --ramp-pale-purple-800: #473956; --ramp-pale-purple-900: #33293d; --ramp-pale-purple-1000: #1a141f; --ramp-pale-red-100: #faedeb; --ramp-pale-red-200: #f8e5e2; --ramp-pale-red-300: #f3cfc9; --ramp-pale-red-400: #eba99d; --ramp-pale-red-500: #d4583b; --ramp-pale-red-600: #a55440; --ramp-pale-red-700: #864537; --ramp-pale-red-800: #60332a; --ramp-pale-red-900: #412621; --ramp-pale-red-1000: #1f1514; --ramp-pale-teal-100: #f1f6f8; --ramp-pale-teal-200: #e3eef2; --ramp-pale-teal-300: #cedee4; --ramp-pale-teal-400: #a3c2cc; --ramp-pale-teal-500: #518394; --ramp-pale-teal-600: #436c7a; --ramp-pale-teal-700: #3c606d; --ramp-pale-teal-800: #2f4c56; --ramp-pale-teal-900: #1f3238; --ramp-pale-teal-1000: #101a1e; --ramp-pale-violet-100: #f1f1f8; --ramp-pale-violet-200: #e7e7f3; --ramp-pale-violet-300: #d4d4ed; --ramp-pale-violet-400: #b3b2dc; --ramp-pale-violet-500: #6a699b; --ramp-pale-violet-600: #595884; --ramp-pale-violet-700: #4e4d75; --ramp-pale-violet-800: #393956; --ramp-pale-violet-900: #29293d; --ramp-pale-violet-1000: #14141f; --ramp-pale-yellow-100: #fff5eb; --ramp-pale-yellow-200: #fdeece; --ramp-pale-yellow-300: #f5dfa8; --ramp-pale-yellow-400: #e8cd7d; --ramp-pale-yellow-500: #ad7f00; --ramp-pale-yellow-600: #906800; --ramp-pale-yellow-700: #7a5800; --ramp-pale-yellow-800: #5c4100; --ramp-pale-yellow-900: #3a2a10; --ramp-pale-yellow-1000: #211a12; --ramp-persimmon-100: #ffe8db; --ramp-persimmon-200: #fed2b8; --ramp-persimmon-300: #ffb494; --ramp-persimmon-400: #ffa27a; --ramp-persimmon-500: #f65009; --ramp-persimmon-600: #db4606; --ramp-persimmon-700: #b93f13; --ramp-persimmon-800: #8e3210; --ramp-persimmon-900: #59220d; --ramp-persimmon-1000: #43160a; --ramp-pink-100: #fde2fb; --ramp-pink-200: #fccaf8; --ramp-pink-300: #fbb1ed; --ramp-pink-400: #fc9ce0; --ramp-pink-500: #f316b0; --ramp-pink-600: #d01b9c; --ramp-pink-700: #96207a; --ramp-pink-800: #68275e; --ramp-pink-900: #46253e; --ramp-pink-1000: #231a21; --ramp-purple-100: #f1e7fe; --ramp-purple-200: #e3cffc; --ramp-purple-300: #d6b6fb; --ramp-purple-400: #d1a8ff; --ramp-purple-500: #8a38f5; --ramp-purple-600: #7a2ed6; --ramp-purple-700: #652ca8; --ramp-purple-800: #50297a; --ramp-purple-900: #3e2654; --ramp-purple-1000: #1f1924; --ramp-red-100: #fee7e7; --ramp-red-200: #fccdca; --ramp-red-300: #fbbcb6; --ramp-red-400: #fca397; --ramp-red-500: #e03e1a; --ramp-red-600: #c4381c; --ramp-red-700: #963323; --ramp-red-800: #7c2622; --ramp-red-900: #54211c; --ramp-red-1000: #311817; --ramp-teal-100: #ddf7fd; --ramp-teal-200: #bce6f1; --ramp-teal-300: #a4e2ef; --ramp-teal-400: #67cbe4; --ramp-teal-500: #0887a0; --ramp-teal-600: #087691; --ramp-teal-700: #0a5b76; --ramp-teal-800: #0c455a; --ramp-teal-900: #0c2937; --ramp-teal-1000: #0e1f2a; --ramp-violet-100: #f5f5ff; --ramp-violet-200: #e6e5ff; --ramp-violet-300: #ceccff; --ramp-violet-400: #b9b8ff; --ramp-violet-500: #3d38f5; --ramp-violet-600: #3b34d5; --ramp-violet-700: #372cc9; --ramp-violet-800: #3927be; --ramp-violet-900: #302579; --ramp-violet-1000: #1d1835; --ramp-white-100: #ffffff0d; --ramp-white-200: #ffffff1a; --ramp-white-300: #fff3; --ramp-white-400: #fff6; --ramp-white-500: #ffffffb2; --ramp-white-600: #fffc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe5; --ramp-white-900: #fffffff2; --ramp-white-1000: #fff; --ramp-yellow-100: #fdf7dd; --ramp-yellow-200: #fbe8ad; --ramp-yellow-300: #f9df90; --ramp-yellow-400: #f7d15f; --ramp-yellow-500: #f3c11b; --ramp-yellow-600: #f2b50d; --ramp-yellow-700: #e4a711; --ramp-yellow-800: #c58011; --ramp-yellow-900: #925711; --ramp-yellow-1000: #71440f; } [data-preferred-theme="light"], [data-preferred-theme="light"][data-editor-theme="design"], :where([data-preferred-theme="light"] [data-editor-theme="design"]) { --color-bg: var(--ramp-white-1000); --color-bg-fs: var(--color-bg); --color-bg-assistive: var(--ramp-pink-500); --color-bg-fs-assistive: var(--color-bg-assistive); --color-bg-assistive-hover: var(--ramp-pink-600); --color-bg-assistive-pressed: var(--ramp-pink-600); --color-bg-assistive-secondary: var(--ramp-pink-700); --color-bg-fs-assistive-secondary: var(--color-bg-assistive-secondary); --color-bg-assistive-tertiary: var(--ramp-pink-200); --color-bg-fs-assistive-tertiary: var(--color-bg-assistive-tertiary); --color-bg-brand: var(--ramp-blue-500); --color-bg-brand-hover: var(--ramp-blue-600); --color-bg-brand-pressed: var(--ramp-blue-700); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-blue-200); --color-bg-brand-tertiary-hover: var(--ramp-blue-300); --color-bg-brand-tertiary-pressed: var(--ramp-blue-400); --color-bg-component: var(--ramp-purple-500); --color-bg-fs-component: var(--color-bg-component); --color-border-fs-component-strong: var(--color-bg-fs-component); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-700); --color-bg-component-secondary: var(--ramp-purple-700); --color-bg-fs-component-secondary: var(--color-bg-component-secondary); --color-bg-component-tertiary: var(--ramp-purple-200); --color-bg-fs-component-tertiary: var(--color-bg-component-tertiary); --color-bg-component-tertiary-hover: var(--ramp-purple-300); --color-bg-component-tertiary-pressed: var(--ramp-purple-400); --color-bg-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-700); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --color-bg-danger-tertiary-hover: var(--ramp-red-300); --color-bg-danger-tertiary-pressed: var(--ramp-red-400); --color-bg-design: var(--ramp-blue-500); --color-bg-fs-design: var(--color-bg-design); --color-border-fs-design-strong: var(--color-bg-fs-design); --color-bg-design-hover: var(--ramp-blue-600); --color-bg-design-pressed: var(--ramp-blue-600); --color-bg-design-secondary: var(--ramp-blue-700); --color-bg-fs-design-secondary: var(--color-bg-design-secondary); --color-bg-design-tertiary: var(--ramp-blue-200); --color-bg-fs-design-tertiary: var(--color-bg-design-tertiary); --color-bg-desktopBackgrounded: var(--ramp-grey-700); --color-bg-desktopBackgrounded-disabled: var(--ramp-grey-500); --color-bg-desktopBackgrounded-hover: var(--ramp-grey-600); --color-bg-desktopBackgrounded-pressed: var(--ramp-grey-800); --color-bg-desktopBackgrounded-secondary: var(--ramp-grey-700); --color-bg-desktopBackgrounded-tertiary: var(--ramp-grey-600); --color-bg-desktopForeground: var(--ramp-grey-900); --color-bg-desktopForeground-disabled: var(--ramp-grey-500); --color-bg-desktopForeground-hover: var(--ramp-grey-800); --color-bg-desktopForeground-pressed: var(--ramp-grey-800); --color-bg-desktopForeground-secondary: var(--ramp-grey-700); --color-bg-desktopForeground-tertiary: var(--ramp-grey-600); --color-bg-desktopFullscreen: var(--ramp-black-1000); --color-bg-desktopFullscreen-disabled: var(--ramp-grey-500); --color-bg-desktopFullscreen-hover: var(--ramp-grey-900); --color-bg-desktopFullscreen-pressed: var(--ramp-grey-900); --color-bg-desktopFullscreen-secondary: var(--ramp-grey-700); --color-bg-desktopFullscreen-tertiary: var(--ramp-grey-600); --color-bg-disabled: var(--ramp-grey-300); --color-bg-disabled-secondary: var(--ramp-grey-400); --color-bg-elevated: var(--ramp-white-1000); --color-bg-elevated-hover: var(--ramp-grey-100); --color-bg-figjam: var(--ramp-purple-500); --color-bg-fs-measure: var(--color-bg-measure); --color-bg-figjam-hover: var(--ramp-purple-600); --color-bg-figjam-pressed: var(--ramp-purple-600); --color-bg-figjam-secondary: var(--ramp-purple-700); --color-bg-figjam-tertiary: var(--ramp-purple-200); --color-border-fs-measure-strong: var(--color-bg-fs-measure); --color-bg-fs-measure-hover: var(--color-bg-measure-hover); --color-bg-fs-measure-secondary: var(--color-bg-measure-secondary); --color-bg-fs-measure-tertiary: var(--color-bg-measure-tertiary); --color-bg-fs-selected: var(--color-bg-selected); --color-bg-fs-selected-secondary: var(--color-bg-selected-secondary); --color-bg-fs-template: var(--color-bg-template); --color-border-fs-template-strong: var(--color-bg-fs-template); --color-bg-fs-template-secondary: var(--color-bg-template-secondary); --color-bg-fs-template-tertiary: var(--color-bg-template-tertiary); --color-bg-fs-tertiary: var(--color-bg-tertiary); --color-bg-handoff: var(--ramp-green-500); --color-bg-handoff-hover: var(--ramp-green-600); --color-bg-handoff-pressed: var(--ramp-green-700); --color-bg-handoff-secondary: var(--ramp-green-700); --color-bg-handoff-tertiary: var(--ramp-pale-green-200); --color-bg-hover: var(--ramp-grey-100); --color-bg-info: var(--ramp-blue-200); --color-bg-inverse: var(--ramp-grey-800); --color-bg-inverse-hover: var(--ramp-grey-700); --color-bg-inverse-pressed: var(--ramp-grey-600); --color-bg-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-700); --color-bg-measure-secondary: var(--ramp-red-700); --color-bg-measure-tertiary: var(--ramp-red-200); --color-bg-menu: var(--ramp-grey-900); --color-bg-menu-disabled: var(--ramp-grey-500); --color-bg-menu-hover: var(--ramp-grey-800); --color-bg-menu-pressed: var(--ramp-grey-800); --color-bg-menu-secondary: var(--ramp-grey-700); --color-bg-menu-selected: var(--ramp-blue-500); --color-bg-menu-selected-hover: var(--ramp-blue-600); --color-bg-menu-selected-pressed: var(--ramp-blue-600); --color-bg-menu-selected-secondary: var(--ramp-pale-blue-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-menu-tertiary: var(--ramp-grey-600); --color-bg-onselected: var(--ramp-blue-300); --color-bg-onselected-hover: var(--color-bg-onselected); --color-bg-onselected-pressed: var(--color-bg-onselected); --color-bg-pressed: var(--ramp-grey-200); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-300); --color-bg-selected: var(--ramp-blue-200); --color-bg-selected-hover: var(--ramp-blue-300); --color-bghovertransparent: var(--ramp-black-100); --color-bg-selected-pressed: var(--ramp-blue-400); --color-bg-selected-secondary: var(--ramp-blue-100); --color-bg-selected-strong: var(--ramp-blue-500); --color-bg-selected-tertiary: var(--ramp-blue-100); --color-bg-tertiary: var(--ramp-grey-200); --color-bg-strong-hover: var(--ramp-blue-600); --color-bg-strong-pressed: var(--ramp-blue-700); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-700); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-200); --color-bg-success-tertiary-hover: var(--ramp-green-300); --color-bg-success-tertiary-pressed: var(--ramp-green-400); --color-bg-template: var(--ramp-pink-500); --color-bg-template-secondary: var(--ramp-pink-700); --color-bg-template-tertiary: var(--ramp-pink-200); --color-bg-toolbar: var(--ramp-grey-800); --color-bg-toolbar-disabled: var(--ramp-grey-500); --color-bg-toolbar-hover: var(--ramp-grey-1000); --color-bg-toolbar-pressed: var(--ramp-grey-1000); --color-bg-toolbar-secondary: var(--ramp-grey-700); --color-bg-toolbar-selected: var(--ramp-blue-500); --color-bg-toolbar-selected-tertiary: var(--color-bg-toolbar-selected); --color-bg-toolbar-selected-hover: var(--ramp-blue-600); --color-bg-toolbar-selected-pressed: var(--ramp-blue-600); --color-bg-toolbar-selected-secondary: var(--ramp-blue-700); --color-bg-toolbar-tertiary: var(--ramp-grey-600); --color-bg-tooltip: var(--ramp-grey-900); --color-bg-tooltip-disabled: var(--ramp-grey-500); --color-bg-tooltip-hover: var(--ramp-grey-800); --color-bg-tooltip-pressed: var(--ramp-grey-800); --color-bg-tooltip-secondary: var(--ramp-grey-700); --color-bg-tooltip-selected: var(--ramp-blue-500); --color-bg-tooltip-selected-hover: var(--ramp-blue-600); --color-bg-tooltip-selected-pressed: var(--ramp-blue-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-blue-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-blue-800); --color-bg-tooltip-tertiary: var(--ramp-grey-600); --color-bg-transparent: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); --color-bg-transparent-secondary: var(--ramp-black-200); --color-bg-warning: var(--ramp-yellow-500); --color-bg-warning-hover: var(--ramp-yellow-600); --color-bg-warning-pressed: var(--ramp-yellow-700); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --color-bg-warning-tertiary-hover: var(--ramp-yellow-300); --color-bg-warning-tertiary-pressed: var(--ramp-yellow-400); --color-bgannotationblue: var(--ramp-blue-500); --color-bgannotationgreen: var(--ramp-green-500); --color-bgannotationorange: var(--ramp-orange-600); --color-bgannotationpink: var(--ramp-pink-500); --color-bgannotationpurple: var(--ramp-purple-500); --color-bgannotationred: var(--ramp-red-500); --color-bgannotationteal: var(--ramp-teal-600); --color-bgannotationyellow: var(--ramp-yellow-500); --color-bghoverondarkcanvas: var(--ramp-white-300); --color-bghoveronlightcanvas: var(--ramp-black-300); --color-bginspectpadding: var(--ramp-blue-500); --color-bginspectpaddingtertiary: var(--ramp-blue-200); --color-bginspectspacing: var(--ramp-pink-500); --color-bgsecondaryoncanvas: var(--ramp-grey-200); --color-bgselectedarea: #0d99ff33; --color-bgswitchoff: var(--ramp-grey-200); --color-bgtoolbarmodeswitcher: var(--ramp-grey-100); --color-bgtoolbarmodeswitcher-hover: var(--ramp-grey-200); --color-bgtransparent: #fff9; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #fff; --color-bgvoting: var(--ramp-yellow-500); --color-bgvotingsecondary: var(--ramp-yellow-200); --color-bgvotingtertiary: var(--ramp-yellow-100); --color-bgvotingwheeldial: var(--ramp-yellow-100); --color-bgvotingwheelhover: var(--ramp-yellow-200); --color-border: var(--ramp-grey-200); --color-border-fs: var(--color-border); --color-border-assistive: var(--ramp-pink-300); --color-border-fs-assistive: var(--color-border-assistive); --color-border-assistive-strong: var(--ramp-pink-600); --color-border-brand: var(--ramp-blue-300); --color-border-brand-strong: var(--ramp-blue-600); --color-border-component: var(--ramp-purple-300); --color-border-component-hover: var(--ramp-purple-500); --color-border-component-selected: var(--ramp-purple-600); --color-border-component-strong: var(--ramp-purple-600); --color-border-danger: var(--ramp-red-300); --color-border-danger-strong: var(--ramp-red-600); --color-border-design: var(--ramp-blue-300); --color-border-design-strong: var(--ramp-blue-600); --color-border-desktopBackgrounded: var(--ramp-grey-600); --color-border-desktopBackgrounded-disabled: var(--ramp-grey-700); --color-border-desktopBackgrounded-strong: var(--ramp-white-500); --color-border-desktopForeground: var(--ramp-grey-700); --color-border-desktopForeground-disabled: var(--ramp-grey-700); --color-border-desktopForeground-strong: var(--ramp-white-1000); --color-border-desktopFullscreen: var(--ramp-grey-900); --color-border-desktopFullscreen-disabled: var(--ramp-grey-900); --color-border-desktopFullscreen-strong: var(--ramp-white-1000); --color-border-disabled: var(--ramp-grey-200); --color-border-disabled-strong: var(--ramp-black-400); --color-border-figjam: var(--ramp-purple-300); --color-border-figjam-strong: var(--ramp-purple-600); --color-border-fs-assistive-strong: var(--ramp-pink-500); --color-border-fs-component: var(--ramp-purple-300); --color-border-fs-design: var(--ramp-blue-300); --color-border-fs-measure: var(--color-border-measure); --color-border-fs-onassistive: var(--color-border-onassistive); --color-border-fs-onassistive-strong: var(--color-border-onassistive-strong); --color-border-fs-oncomponent: var(--color-border-oncomponent); --color-border-fs-oncomponent-strong: var(--color-border-oncomponent-strong); --color-border-fs-ondesign: var(--color-border-ondesign); --color-border-fs-ondesign-strong: var(--color-border-ondesign-strong); --color-border-fs-onmeasure: var(--color-border-onmeasure); --color-border-fs-onmeasure-strong: var(--color-border-onmeasure-strong); --color-border-fs-onselected: var(--color-border-onselected); --color-border-fs-onselected-strong: var(--color-border-onselected-strong); --color-border-fs-ontemplate: var(--color-border-ontemplate); --color-border-fs-ontemplate-strong: var(--color-border-ontemplate-strong); --color-border-fs-selected: var(--color-border-selected); --color-border-fs-selected-strong: var(--color-border-selected-strong); --color-border-fs-strong: var(--color-border-strong); --color-border-fs-template: var(--ramp-pink-300); --color-border-handoff: var(--ramp-pale-green-300); --color-border-handoff-strong: var(--ramp-green-600); --color-border-measure: var(--ramp-red-300); --color-border-measure-strong: var(--ramp-red-600); --color-border-menu: var(--ramp-grey-700); --color-border-menu-disabled: var(--ramp-grey-700); --color-border-menu-disabled-strong: var(--ramp-grey-700); --color-border-menu-onselected: var(--ramp-blue-400); --color-border-menu-onselected-strong: var(--ramp-white-1000); --color-border-menu-strong: var(--ramp-white-1000); --color-border-menu-selected: var(--ramp-blue-500); --color-border-menu-selected-strong: var(--ramp-blue-400); --color-border-onassistive: var(--ramp-pink-600); --color-border-onassistive-strong: var(--ramp-white-1000); --color-border-onbrand: var(--ramp-blue-600); --color-border-onbrand-strong: var(--ramp-white-1000); --color-border-oncomponent: var(--ramp-purple-600); --color-border-oncomponent-strong: var(--ramp-white-1000); --color-border-ondanger: var(--ramp-red-600); --color-fsCodeNodeTextErrorOnDarkCanvas: var(--color-border-ondanger); --color-fsCodeNodeTextErrorOnLightCanvas: var(--color-border-ondanger); --color-border-ondanger-strong: var(--ramp-white-1000); --color-border-ondesign: var(--ramp-blue-600); --color-border-ondesign-strong: var(--ramp-white-1000); --color-border-onfigjam: var(--ramp-purple-600); --color-border-onfigjam-strong: var(--ramp-purple-600); --color-border-onmeasure: var(--ramp-red-600); --color-border-onmeasure-strong: var(--ramp-white-1000); --color-border-onselected: var(--ramp-blue-300); --color-border-onselected-strong: var(--ramp-black-800); --color-border-onsuccess: var(--ramp-green-600); --color-border-onsuccess-strong: var(--ramp-white-1000); --color-border-ontemplate: var(--ramp-pink-600); --color-border-ontemplate-strong: var(--ramp-white-1000); --color-border-onwarning: var(--ramp-yellow-700); --color-border-onwarning-strong: var(--ramp-black-800); --color-border-selected: var(--ramp-blue-500); --color-border-selected-strong: var(--ramp-blue-600); --color-border-strong: var(--ramp-grey-800); --color-border-success: var(--ramp-green-300); --color-border-success-strong: var(--ramp-green-600); --color-border-template-strong: var(--ramp-pink-600); --color-border-toolbar: var(--ramp-grey-600); --color-border-toolbar-disabled: var(--ramp-white-400); --color-border-toolbar-onselected: var(--ramp-white-1000); --color-border-toolbar-selected: var(--ramp-blue-500); --color-border-toolbar-selected-strong: var(--ramp-blue-400); --color-border-toolbar-strong: var(--ramp-white-1000); --color-border-tooltip: var(--ramp-grey-700); --color-border-tooltip-disabled: var(--ramp-grey-700); --color-border-tooltip-disabled-strong: var(--ramp-grey-700); --color-border-tooltip-onselected: var(--ramp-blue-600); --color-border-tooltip-onselected-strong: var(--ramp-white-1000); --color-border-tooltip-selected: var(--ramp-blue-500); --color-border-tooltip-selected-strong: var(--ramp-blue-400); --color-border-tooltip-strong: var(--ramp-white-1000); --color-border-warning: var(--ramp-pale-yellow-300); --color-border-warning-strong: var(--ramp-yellow-1000); --color-borderinspectpadding: var(--ramp-blue-500); --color-borderinspectspacing: var(--ramp-pink-500); --color-borderplacecrosshair: var(--ramp-white-1000); --color-borderselectedec: #fff0; --color-bordertranslucent: var(--ramp-black-200); --color-bordertranslucentstrong: var(--ramp-black-300); --color-code: var(--ramp-black-800); --color-codeaccent: var(--ramp-orange-900); --color-codeattribute: var(--ramp-black-800); --color-codeclassname: var(--ramp-blue-600); --color-codecomment: var(--ramp-black-500); --color-codeproperty: var(--ramp-black-800); --color-codestring: var(--ramp-blue-600); --color-codestylename: var(--ramp-blue-600); --color-codetag: var(--ramp-purple-600); --color-codevalue: var(--ramp-pink-600); --color-codevariable: var(--ramp-green-600); --color-conditionalborder: #fff0; --color-controliconoutline: var(--ramp-black-200); --color-controlknoboffoutline: var(--ramp-black-300); --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); /* Used for input backgrounds on canvas */ --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); --color-fsBorderDesignShadowStrong: var(--ramp-blue-600); --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-200); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-200); --color-fsBorderPlaceholder: var(--ramp-grey-500); --color-fsBorderSelectedImmutableNode: var(--ramp-purple-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-purple-500); --color-fsCanvasDefaultFill: var(--ramp-grey-100); --color-fsCodeNodeBorder: var(--ramp-green-500); --color-fsCodeNodeBorderSecondary: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnDarkCanvas: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnLightCanvas: var(--color-fsCodeNodeBorder); --color-fsDevHandoffAutolayoutPadding: var(--ramp-blue-400); --color-fsDevHandoffAutolayoutSpacing: var(--ramp-pink-400); --color-fsFrameDefaultFill: var(--ramp-white-1000); --color-fsGridCellOutline: #80caff99; --color-fsGridCellSelection: #80caff4d; --color-fsGridComponentCellOutline: #d9b8ff99; --color-fsGridComponentCellSelection: #d9b8ff4d; --color-fsIconOnDarkCanvas: var(--color-iconondarkcanvas); --color-fsIconOnDarkCanvasSecondary: var(--ramp-white-400); --color-fsIconOnLightCanvas: var(--color-icononlightcanvas); --color-fsIconOnLightCanvasSecondary: var(--ramp-black-400); --color-fsNodeHandle: var(--ramp-blue-400); --color-fsNodeLabelNoBG: var(--ramp-black-400); --color-fsNodeSymbolSelectedSecondary: var(--ramp-purple-500); --color-fsNoodleCenterLine: #fff0; --color-fsShapeDefaultFill: var(--ramp-grey-300); --color-fsSitesResponsiveSetTextOnDarkCanvas: var(--ramp-white-500); --color-fsSitesResponsiveSetTextOnLightCanvas: var(--ramp-black-500); --color-fsSnappingOverlay: var(--ramp-red-500); --color-fsStickyAuthorTextOnDark: var(--ramp-white-600); --color-fsStickyAuthorTextOnLight: var(--ramp-black-500); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-400); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-600); --color-fsTextOnDarkCanvas: var(--color-textondarkcanvas); --color-fsTextOnDarkCanvasSecondary: var(--color-textondarkcanvassecondary); --color-fsTextOnLightCanvas: var(--color-textonlightcanvas); --color-fsTextOnLightCanvasSecondary: var(--color-textonlightcanvassecondary); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-400); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-600); --color-fsVectorInactive: var(--ramp-grey-400); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-purple-600); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-purple-400); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-purple-600); --color-gauge: var(--ramp-grey-500); --color-gauge-brand: var(--ramp-blue-500); --color-gauge-brand-secondary: var(--ramp-blue-400); --color-gauge-danger: var(--ramp-red-500); --color-gauge-danger-secondary: var(--ramp-red-400); --color-gauge-secondary: var(--ramp-grey-400); --color-gauge-strong: var(--ramp-grey-800); --color-gauge-success: var(--ramp-green-500); --color-gauge-success-secondary: var(--ramp-green-400); --color-gauge-warning: var(--ramp-yellow-600); --color-gauge-warning-secondary: var(--ramp-yellow-400); --color-icon: var(--ramp-black-800); --color-icon-fs: var(--color-icon); --color-icon-assistive: var(--ramp-pink-600); --color-icon-assistive-secondary: var(--color-icon-assistive); --color-icon-assistive-tertiary: var(--color-icon-assistive); --color-icon-fs-assistive: var(--color-icon-assistive); --color-icon-assistive-pressed: var(--ramp-pink-700); --color-icon-brand: var(--ramp-blue-600); --color-icon-brand-pressed: var(--ramp-blue-700); --color-icon-brand-secondary: var(--ramp-blue-400); --color-icon-brand-tertiary: var(--ramp-blue-300); --color-icon-component: var(--ramp-purple-600); --color-icon-fs-component: var(--color-icon-component); --color-icon-component-pressed: var(--ramp-purple-700); --color-icon-component-secondary: var(--ramp-pale-purple-400); --color-icon-component-tertiary: var(--ramp-pale-purple-400); --color-icon-danger: var(--ramp-red-600); --color-icon-danger-secondary: var(--color-icon-danger); --color-icon-danger-secondary-hover: var(--color-icon-danger); --color-icon-danger-tertiary: var(--color-icon-danger); --color-icon-danger-hover: var(--ramp-red-700); --color-icon-danger-pressed: var(--ramp-red-700); --color-icon-design: var(--ramp-blue-600); --color-icon-design-secondary: var(--color-icon-design); --color-icon-design-tertiary: var(--color-icon-design); --color-icon-fs-design: var(--color-icon-design); --color-icon-design-pressed: var(--ramp-blue-700); --color-icon-desktopBackgrounded: var(--ramp-white-500); --color-icon-desktopBackgrounded-danger: var(--ramp-red-500); --color-icon-desktopBackgrounded-disabled: var(--ramp-white-400); --color-icon-desktopBackgrounded-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-icon-desktopBackgrounded-secondary: var(--ramp-white-500); --color-icon-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-icon-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-icon-desktopBackgrounded-warning: var(--ramp-yellow-500); --color-icon-desktopForeground: var(--ramp-white-1000); --color-icon-desktopForeground-danger: var(--ramp-red-500); --color-icon-desktopForeground-disabled: var(--ramp-white-400); --color-icon-desktopForeground-hover: var(--ramp-white-1000); --color-icon-desktopForeground-ondisabled: var(--ramp-grey-900); --color-icon-desktopForeground-secondary: var(--ramp-white-500); --color-icon-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-tertiary: var(--ramp-white-400); --color-icon-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-warning: var(--ramp-yellow-500); --color-icon-desktopFullscreen: var(--ramp-white-1000); --color-icon-desktopFullscreen-danger: var(--ramp-red-500); --color-icon-desktopFullscreen-disabled: var(--ramp-white-400); --color-icon-desktopFullscreen-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-icon-desktopFullscreen-secondary: var(--ramp-white-500); --color-icon-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-tertiary: var(--ramp-white-400); --color-icon-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-warning: var(--ramp-yellow-500); --color-icon-disabled: var(--ramp-black-400); --color-icon-figjam: var(--ramp-purple-600); --color-icon-figjam-pressed: var(--ramp-purple-700); --color-icon-figjam-secondary: var(--ramp-pale-purple-400); --color-icon-figjam-tertiary: var(--ramp-pale-purple-400); --color-icon-fs-measure: var(--color-icon-measure); --color-icon-fs-onassistive: var(--color-icon-onassistive); --color-icon-fs-oncomponent: var(--color-icon-oncomponent); --color-icon-fs-ondesign: var(--color-icon-ondesign); --color-icon-fs-onmeasure: var(--color-icon-onmeasure); --color-icon-fs-onselected: var(--color-icon-onselected); --color-icon-fs-ontemplate: var(--color-icon-ontemplate); --color-icon-fs-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --color-icon-fs-template: var(--color-icon-template); --color-icon-fs-tertiary: var(--color-icon-tertiary); --color-icon-handoff: var(--ramp-green-600); --color-icon-handoff-secondary: var(--color-icon-handoff); --color-icon-handoff-tertiary: var(--color-icon-handoff); --color-icon-handoff-pressed: var(--ramp-green-700); --color-icon-hover: var(--ramp-black-800); --color-icon-measure: var(--ramp-red-500); --color-icon-measure-secondary: var(--color-icon-measure); --color-icon-measure-secondary-hover: var(--color-icon-measure); --color-icon-measure-tertiary: var(--color-icon-measure); --color-icon-measure-hover: var(--ramp-red-700); --color-icon-measure-pressed: var(--ramp-red-700); --color-icon-menu: var(--ramp-white-1000); --color-icon-menu-danger: var(--ramp-red-500); --color-icon-menu-disabled: var(--ramp-white-400); --color-icon-menu-hover: var(--ramp-white-1000); --color-icon-menu-ondisabled: var(--ramp-grey-900); --color-icon-menu-onselected: var(--ramp-white-1000); --color-icon-menu-pressed: var(--ramp-blue-500); --color-icon-menu-secondary: var(--ramp-white-500); --color-icon-menu-secondary-hover: var(--ramp-white-1000); --color-icon-menu-selected: var(--ramp-blue-400); --color-icon-menu-selected-secondary: var(--ramp-blue-400); --color-icon-menu-selected-tertiary: var(--ramp-blue-400); --color-icon-menu-tertiary: var(--ramp-white-400); --color-icon-menu-tertiary-hover: var(--ramp-white-1000); --color-icon-menu-warning: var(--ramp-yellow-500); --color-icon-onassistive: var(--ramp-white-1000); --color-icon-onassistive-secondary: var(--ramp-white-600); --color-icon-onassistive-tertiary: var(--ramp-white-400); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-600); --color-icon-onbrand-tertiary: var(--ramp-white-400); --color-icon-oncomponent: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-600); --color-icon-oncomponent-tertiary: var(--ramp-white-400); --color-icon-ondanger: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-600); --color-icon-ondanger-tertiary: var(--ramp-white-400); --color-icon-ondesign: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-600); --color-icon-ondesign-tertiary: var(--ramp-white-400); --color-icon-ondisabled: var(--ramp-white-1000); --color-icon-onfigjam: var(--ramp-white-1000); --color-icon-onfigjam-secondary: var(--ramp-white-600); --color-icon-onfigjam-tertiary: var(--ramp-white-400); --color-icon-oninverse: var(--ramp-white-800); --color-icon-onmeasure: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-600); --color-icon-onmeasure-tertiary: var(--ramp-white-400); --color-icon-onselected: var(--ramp-black-800); --color-icon-onselected-secondary: var(--ramp-black-500); --color-icon-secondary: var(--ramp-black-500); --color-icon-onselected-strong: var(--ramp-white-1000); --color-icon-onselected-tertiary: var(--ramp-black-400); --color-icon-tertiary: var(--ramp-black-400); --color-icon-onsuccess: var(--ramp-white-1000); --color-icon-onsuccess-secondary: var(--ramp-white-600); --color-icon-onsuccess-tertiary: var(--ramp-white-400); --color-icon-ontemplate: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-black-800); --color-icon-onwarning-secondary: var(--ramp-black-500); --color-icon-onwarning-tertiary: var(--ramp-black-400); --color-icon-pressed: var(--ramp-blue-600); --color-icon-secondary-hover: var(--ramp-black-800); --color-icon-selected: var(--ramp-blue-600); --color-icon-selected-secondary: var(--color-icon-selected); --color-icon-selected-tertiary: var(--color-icon-selected); --color-icon-success: var(--ramp-green-600); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-success-pressed: var(--ramp-green-700); --color-icon-template: var(--ramp-pink-600); --color-icon-template-secondary: var(--ramp-pale-pink-400); --color-icon-tertiary-hover: var(--ramp-black-800); --color-icon-toolbar: var(--ramp-white-1000); --color-icon-toolbar-danger: var(--ramp-red-500); --color-icon-toolbar-disabled: var(--ramp-white-400); --color-icon-toolbar-hover: var(--ramp-white-1000); --color-icon-toolbar-ondisabled: var(--ramp-grey-800); --color-icon-toolbar-onselected: var(--ramp-white-1000); --color-icon-toolbar-pressed: var(--ramp-blue-500); --color-icon-toolbar-secondary: var(--ramp-white-500); --color-icon-toolbar-secondary-hover: var(--ramp-white-1000); --color-icon-toolbar-selected: var(--ramp-blue-400); --color-icon-toolbar-selected-secondary: var(--color-icon-toolbar-selected); --color-icon-toolbar-selected-tertiary: var(--color-icon-toolbar-selected); --color-icon-toolbar-tertiary: var(--ramp-white-400); --color-icon-toolbar-tertiary-hover: var(--ramp-white-1000); --color-icon-toolbar-warning: var(--ramp-yellow-500); --color-icon-tooltip: var(--ramp-white-1000); --color-icon-tooltip-danger: var(--ramp-red-500); --color-icon-tooltip-disabled: var(--ramp-white-400); --color-icon-tooltip-hover: var(--ramp-white-1000); --color-icon-tooltip-ondisabled: var(--ramp-grey-900); --color-icon-tooltip-onselected: var(--ramp-white-1000); --color-icon-tooltip-pressed: var(--ramp-blue-500); --color-icon-tooltip-secondary: var(--ramp-white-500); --color-icon-tooltip-secondary-hover: var(--ramp-white-1000); --color-icon-tooltip-selected: var(--ramp-blue-400); --color-icon-tooltip-selected-secondary: var(--color-icon-tooltip-selected); --color-icon-tooltip-selected-tertiary: var(--color-icon-tooltip-selected); --color-icon-tooltip-tertiary: var(--ramp-white-400); --color-icon-tooltip-tertiary-hover: var(--ramp-white-1000); --color-icon-tooltip-warning: var(--ramp-yellow-500); --color-icon-warning: var(--ramp-yellow-1000); --color-icon-warning-secondary: var(--color-icon-warning); --color-icon-warning-tertiary: var(--color-icon-warning); --color-icon-warning-pressed: var(--ramp-yellow-1000); --color-icondesignfilesecondary: var(--ramp-blue-400); --color-iconfavorite: var(--ramp-yellow-500); --color-iconfigjamfilesecondary: var(--ramp-purple-400); --color-iconondarkcanvas: var(--ramp-white-800); --color-icononlightcanvas: var(--ramp-black-800); --color-icononvoting: var(--ramp-black-800); --color-iconprototypefile: var(--ramp-grey-300); --color-iconprototypefilesecondary: var(--ramp-grey-800); --color-iconpublishedfile: var(--ramp-grey-800); --color-iconpublishedfilesecondary: var(--ramp-grey-500); --color-loading: var(--ramp-black-200); --color-loadingmenu: var(--ramp-white-200); --color-loadingsecondary: var(--ramp-black-100); --color-loadingsecondarymenu: var(--ramp-white-100); --color-modalbackdrop: var(--ramp-black-500); --color-multiplayerblue: var(--ramp-blue-600); --color-multiplayerbluehover: var(--ramp-blue-700); --color-multiplayerbluesecondary: var(--ramp-blue-800); --color-multiplayergreen: var(--ramp-green-500); --color-multiplayergreenhover: var(--ramp-green-600); --color-multiplayergreensecondary: var(--ramp-green-800); --color-multiplayergrey: var(--ramp-pale-blue-500); --color-multiplayergreyhover: var(--ramp-pale-blue-600); --color-multiplayergreysecondary: var(--ramp-pale-blue-800); --color-multiplayerpink: var(--ramp-pink-500); --color-multiplayerpinkhover: var(--ramp-pink-600); --color-multiplayerpinksecondary: var(--ramp-pink-800); --color-multiplayerpurple: var(--ramp-purple-500); --color-multiplayerpurplehover: var(--ramp-purple-600); --color-multiplayerpurplesecondary: var(--ramp-purple-800); --color-multiplayerred: var(--ramp-red-500); --color-multiplayerredhover: var(--ramp-red-600); --color-multiplayerredsecondary: var(--ramp-red-800); --color-multiplayeryellow: var(--ramp-yellow-500); --color-multiplayeryellowhover: var(--ramp-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-yellow-800); --color-nodehandle: var(--ramp-blue-400); --color-prototypeloadingbackdrop: var(--ramp-black-800); --color-scrollbar: #b3b3b380; --color-shadow: #00000026; --color-tablenodehoveredprimary: var(--ramp-blue-500); --color-tablenodeselected: var(--color-tablenodehoveredprimary); --color-tablenodehoveredsecondary: var(--ramp-blue-300); --color-template-slot: var(--ramp-pink-300); --color-text: var(--ramp-black-800); --color-text-fs: var(--color-text); --color-text-assistive: var(--ramp-pink-600); --color-text-assistive-secondary: var(--color-text-assistive); --color-text-assistive-tertiary: var(--color-text-assistive); --color-text-fs-assistive: var(--color-text-assistive); --color-text-assistive-pressed: var(--ramp-pink-700); --color-text-brand: var(--ramp-blue-600); --color-text-brand-secondary: var(--color-text-brand); --color-text-brand-tertiary: var(--color-text-brand); --color-text-component: var(--ramp-purple-600); --color-text-fs-component: var(--color-text-component); --color-text-component-pressed: var(--ramp-purple-700); --color-text-component-secondary: var(--ramp-pale-purple-400); --color-text-component-tertiary: var(--ramp-pale-purple-400); --color-text-danger: var(--ramp-red-600); --color-text-danger-secondary: var(--color-text-danger); --color-text-danger-tertiary: var(--color-text-danger); --color-text-design: var(--ramp-blue-600); --color-text-design-secondary: var(--color-text-design); --color-text-design-tertiary: var(--color-text-design); --color-text-fs-design: var(--color-text-design); --color-text-design-pressed: var(--ramp-blue-700); --color-text-desktopBackgrounded: var(--ramp-white-500); --color-text-desktopBackgrounded-danger: var(--ramp-red-400); --color-text-desktopBackgrounded-disabled: var(--ramp-white-400); --color-text-desktopBackgrounded-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-text-desktopBackgrounded-secondary: var(--ramp-white-500); --color-text-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-text-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-text-desktopBackgrounded-warning: var(--ramp-yellow-400); --color-text-desktopForeground: var(--ramp-white-1000); --color-text-desktopForeground-danger: var(--ramp-red-400); --color-text-desktopForeground-disabled: var(--ramp-white-400); --color-text-desktopForeground-hover: var(--ramp-white-1000); --color-text-desktopForeground-ondisabled: var(--ramp-grey-900); --color-text-desktopForeground-secondary: var(--ramp-white-500); --color-text-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-text-desktopForeground-tertiary: var(--ramp-white-400); --color-text-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-text-desktopForeground-warning: var(--ramp-yellow-400); --color-text-desktopFullscreen: var(--ramp-white-1000); --color-text-desktopFullscreen-danger: var(--ramp-red-400); --color-text-desktopFullscreen-disabled: var(--ramp-white-400); --color-text-desktopFullscreen-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-text-desktopFullscreen-secondary: var(--ramp-white-500); --color-text-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-tertiary: var(--ramp-white-400); --color-text-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-warning: var(--ramp-yellow-400); --color-text-disabled: var(--ramp-black-400); --color-text-figjam: var(--ramp-purple-600); --color-text-figjam-pressed: var(--ramp-purple-700); --color-text-figjam-secondary: var(--ramp-pale-purple-400); --color-text-figjam-tertiary: var(--ramp-pale-purple-400); --color-text-fs-measure: var(--color-text-measure); --color-text-fs-onassistive: var(--color-text-onassistive); --color-text-fs-oncomponent: var(--color-text-oncomponent); --color-text-fs-ondesign: var(--color-text-ondesign); --color-text-fs-onmeasure: var(--color-text-onmeasure); --color-text-fs-onselected: var(--color-text-onselected); --color-text-fs-ontemplate: var(--color-text-ontemplate); --color-text-fs-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --color-text-fs-template: var(--color-text-template); --color-text-fs-tertiary: var(--color-text-tertiary); --color-text-handoff: var(--ramp-green-600); --color-text-handoff-secondary: var(--color-text-handoff); --color-text-handoff-tertiary: var(--color-text-handoff); --color-text-hover: var(--ramp-black-800); --color-text-measure: var(--ramp-red-600); --color-text-measure-secondary: var(--color-text-measure); --color-text-measure-tertiary: var(--color-text-measure); --color-text-menu: var(--ramp-white-1000); --color-text-menu-danger: var(--ramp-red-500); --color-text-menu-disabled: var(--ramp-white-400); --color-text-menu-hover: var(--ramp-white-1000); --color-text-menu-ondisabled: var(--ramp-grey-900); --color-text-menu-onselected: var(--ramp-white-1000); --color-text-menu-secondary: var(--ramp-white-500); --color-text-menu-secondary-hover: var(--ramp-white-1000); --color-text-menu-selected: var(--ramp-blue-400); --color-text-menu-selected-secondary: var(--color-text-menu-selected); --color-text-menu-selected-tertiary: var(--color-text-menu-selected); --color-text-menu-tertiary: var(--ramp-white-400); --color-text-menu-tertiary-hover: var(--ramp-white-1000); --color-text-menu-warning: var(--ramp-yellow-400); --color-text-onassistive: var(--ramp-white-1000); --color-text-onassistive-secondary: var(--ramp-white-600); --color-text-onassistive-tertiary: var(--ramp-white-400); --color-text-onbrand: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-oncomponent: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-600); --color-text-oncomponent-tertiary: var(--ramp-white-400); --color-text-ondanger: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-600); --color-text-ondanger-tertiary: var(--ramp-white-400); --color-text-ondesign: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-600); --color-text-ondesign-tertiary: var(--ramp-white-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-onfigjam: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-600); --color-text-onfigjam-tertiary: var(--ramp-white-400); --color-text-oninverse: var(--ramp-white-800); --color-text-oninverse-secondary: var(--ramp-white-600); --color-text-onmeasure: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-600); --color-text-onmeasure-tertiary: var(--ramp-white-400); --color-text-onselected: var(--ramp-black-800); --color-text-onselected-secondary: var(--ramp-black-500); --color-text-secondary: var(--ramp-black-500); --color-text-onselected-strong: var(--ramp-white-1000); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-tertiary: var(--ramp-black-400); --color-text-onsuccess: var(--ramp-white-1000); --color-text-onsuccess-secondary: var(--ramp-white-600); --color-text-onsuccess-tertiary: var(--ramp-white-400); --color-text-ontemplate: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-black-800); --color-text-onwarning-secondary: var(--ramp-black-500); --color-text-onwarning-tertiary: var(--ramp-black-400); --color-text-secondary-hover: var(--ramp-black-800); --color-text-selected: var(--ramp-blue-600); --color-text-selected-secondary: var(--color-text-selected); --color-text-selected-tertiary: var(--color-text-selected); --color-text-success: var(--ramp-green-600); --color-text-success-secondary: var(--color-text-success); --color-text-success-tertiary: var(--color-text-success); --color-text-template: var(--ramp-pink-600); --color-text-template-secondary: var(--ramp-pale-pink-400); --color-text-tertiary-hover: var(--ramp-black-800); --color-text-toolbar: var(--ramp-white-1000); --color-text-toolbar-danger: var(--ramp-red-400); --color-text-toolbar-disabled: var(--ramp-white-400); --color-text-toolbar-hover: var(--ramp-white-1000); --color-text-toolbar-ondisabled: var(--ramp-grey-800); --color-text-toolbar-onselected: var(--ramp-white-1000); --color-text-toolbar-secondary: var(--ramp-white-500); --color-text-toolbar-secondary-hover: var(--ramp-white-1000); --color-text-toolbar-selected: var(--ramp-blue-400); --color-text-toolbar-selected-secondary: var(--color-text-toolbar-selected); --color-text-toolbar-selected-tertiary: var(--color-text-toolbar-selected); --color-text-toolbar-tertiary: var(--ramp-white-400); --color-text-toolbar-tertiary-hover: var(--ramp-white-1000); --color-text-toolbar-warning: var(--ramp-yellow-400); --color-text-tooltip: var(--ramp-white-1000); --color-text-tooltip-danger: var(--ramp-red-400); --color-text-tooltip-disabled: var(--ramp-white-400); --color-text-tooltip-hover: var(--ramp-white-1000); --color-text-tooltip-ondisabled: var(--ramp-grey-900); --color-text-tooltip-onselected: var(--ramp-white-1000); --color-text-tooltip-secondary: var(--ramp-white-500); --color-text-tooltip-secondary-hover: var(--ramp-white-1000); --color-text-tooltip-selected: var(--ramp-blue-400); --color-text-tooltip-selected-secondary: var(--color-text-tooltip-selected); --color-text-tooltip-selected-tertiary: var(--color-text-tooltip-selected); --color-text-tooltip-tertiary: var(--ramp-white-400); --color-text-tooltip-tertiary-hover: var(--ramp-white-1000); --color-text-tooltip-warning: var(--ramp-yellow-400); --color-text-warning: var(--ramp-yellow-1000); --color-text-warning-secondary: var(--color-text-warning); --color-text-warning-tertiary: var(--color-text-warning); --color-texthighlight: #0d99ff66; --color-textondarkannotation: var(--ramp-white-1000); --color-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --color-textonlightannotation: var(--ramp-black-800); --color-textonlightcanvas: var(--ramp-black-800); --color-textonlightcanvassecondary: var(--ramp-black-400); --color-textonmultiplayerblue: var(--ramp-white-1000); --color-textonmultiplayergreen: var(--ramp-white-1000); --color-textonmultiplayergrey: var(--ramp-white-1000); --color-textonmultiplayerpink: var(--ramp-white-1000); --color-textonmultiplayerpurple: var(--ramp-white-1000); --color-textonmultiplayerred: var(--ramp-white-1000); --color-textonmultiplayeryellow: var(--ramp-black-800); --color-textonvoting: var(--ramp-black-800); --elevation-100: 0 1px 3px 0 #00000026, 0 0 0.5px 0 #0000004d; --elevation-200: 0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e; --elevation-300: 0 1px 3px 0 #0000001a, 0 5px 12px 0 #00000021, 0 0 0.5px 0 #00000026; --elevation-400: 0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 0.5px 0 #0000001f; --elevation-500: 0 2px 5px 0 #00000026, 0 10px 24px 0 #0000002e, 0 0 0.5px 0 #00000014; --ramp-black-100: #0000000d; --ramp-black-200: #0000001a; --ramp-black-300: #0003; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000c; --ramp-black-700: #000000d9; --ramp-black-800: #000000e5; --ramp-black-900: #000000f2; --ramp-black-1000: #000; --ramp-blue-100: #f2f9ff; --ramp-blue-200: #e5f4ff; --ramp-blue-300: #bde3ff; --ramp-blue-400: #80caff; --ramp-blue-500: #0d99ff; --ramp-blue-600: #007be5; --ramp-blue-700: #0768cf; --ramp-blue-800: #034ac1; --ramp-blue-900: #093077; --ramp-blue-1000: #0d193f; --ramp-green-100: #edf9ef; --ramp-green-200: #e0f6e5; --ramp-green-300: #b9ebc6; --ramp-green-400: #8ddda4; --ramp-green-500: #14ae5c; --ramp-green-600: #009951; --ramp-green-700: #008043; --ramp-green-800: #036838; --ramp-green-900: #024626; --ramp-green-1000: #083a23; --ramp-grey-100: #f5f5f5; --ramp-grey-200: #e6e6e6; --ramp-grey-300: #d9d9d9; --ramp-grey-400: #b3b3b3; --ramp-grey-500: #757575; --ramp-grey-600: #444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111; --ramp-orange-100: #fff4e5; --ramp-orange-200: #ffe0c2; --ramp-orange-300: #fcd19c; --ramp-orange-400: #ffc470; --ramp-orange-500: #ffa629; --ramp-orange-600: #fc9e24; --ramp-orange-700: #f79722; --ramp-orange-800: #dd7c0e; --ramp-orange-900: #ce7012; --ramp-orange-1000: #8a480f; --ramp-pale-blue-100: #f1f5f8; --ramp-pale-blue-200: #e3ecf2; --ramp-pale-blue-300: #d2dae4; --ramp-pale-blue-400: #afbccf; --ramp-pale-blue-500: #679; --ramp-pale-blue-600: #536383; --ramp-pale-blue-700: #4a5878; --ramp-pale-blue-800: #394360; --ramp-pale-blue-900: #252d41; --ramp-pale-blue-1000: #121721; --ramp-pale-green-100: #f1f8f2; --ramp-pale-green-200: #daecdf; --ramp-pale-green-300: #c3e0cc; --ramp-pale-green-400: #9fc1aa; --ramp-pale-green-500: #678e79; --ramp-pale-green-600: #5c806d; --ramp-pale-green-700: #517361; --ramp-pale-green-800: #476656; --ramp-pale-green-900: #2f483c; --ramp-pale-green-1000: #172b22; --ramp-pale-persimmon-100: #faefeb; --ramp-pale-persimmon-200: #f8e9e2; --ramp-pale-persimmon-300: #f3d6c9; --ramp-pale-persimmon-400: #ebb49d; --ramp-pale-persimmon-500: #d4693b; --ramp-pale-persimmon-600: #a55e40; --ramp-pale-persimmon-700: #864e37; --ramp-pale-persimmon-800: #603a2a; --ramp-pale-persimmon-900: #412b21; --ramp-pale-persimmon-1000: #1f1714; --ramp-pale-pink-100: #f6eef4; --ramp-pale-pink-200: #f2e3ee; --ramp-pale-pink-300: #e8cee1; --ramp-pale-pink-400: #daaace; --ramp-pale-pink-500: #ab5998; --ramp-pale-pink-600: #86507a; --ramp-pale-pink-700: #724667; --ramp-pale-pink-800: #51344a; --ramp-pale-pink-900: #33252f; --ramp-pale-pink-1000: #1b1318; --ramp-pale-purple-100: #f4f1f8; --ramp-pale-purple-200: #ede7f3; --ramp-pale-purple-300: #e0d4ed; --ramp-pale-purple-400: #c5b2dc; --ramp-pale-purple-500: #7f699b; --ramp-pale-purple-600: #6b5884; --ramp-pale-purple-700: #604d75; --ramp-pale-purple-800: #473956; --ramp-pale-purple-900: #33293d; --ramp-pale-purple-1000: #1a141f; --ramp-pale-red-100: #faedeb; --ramp-pale-red-200: #f8e5e2; --ramp-pale-red-300: #f3cfc9; --ramp-pale-red-400: #eba99d; --ramp-pale-red-500: #d4583b; --ramp-pale-red-600: #a55440; --ramp-pale-red-700: #864537; --ramp-pale-red-800: #60332a; --ramp-pale-red-900: #412621; --ramp-pale-red-1000: #1f1514; --ramp-pale-teal-100: #f1f6f8; --ramp-pale-teal-200: #e3eef2; --ramp-pale-teal-300: #cedee4; --ramp-pale-teal-400: #a3c2cc; --ramp-pale-teal-500: #518394; --ramp-pale-teal-600: #436c7a; --ramp-pale-teal-700: #3c606d; --ramp-pale-teal-800: #2f4c56; --ramp-pale-teal-900: #1f3238; --ramp-pale-teal-1000: #101a1e; --ramp-pale-violet-100: #f1f1f8; --ramp-pale-violet-200: #e7e7f3; --ramp-pale-violet-300: #d4d4ed; --ramp-pale-violet-400: #b3b2dc; --ramp-pale-violet-500: #6a699b; --ramp-pale-violet-600: #595884; --ramp-pale-violet-700: #4e4d75; --ramp-pale-violet-800: #393956; --ramp-pale-violet-900: #29293d; --ramp-pale-violet-1000: #14141f; --ramp-pale-yellow-100: #fff5eb; --ramp-pale-yellow-200: #fdeece; --ramp-pale-yellow-300: #f5dfa8; --ramp-pale-yellow-400: #e8cd7d; --ramp-pale-yellow-500: #ad7f00; --ramp-pale-yellow-600: #906800; --ramp-pale-yellow-700: #7a5800; --ramp-pale-yellow-800: #5c4100; --ramp-pale-yellow-900: #3a2a10; --ramp-pale-yellow-1000: #211a12; --ramp-persimmon-100: #fff2eb; --ramp-persimmon-200: #ffdfcc; --ramp-persimmon-300: #ffbb9e; --ramp-persimmon-400: #ffa27a; --ramp-persimmon-500: #ff5c16; --ramp-persimmon-600: #e24c0c; --ramp-persimmon-700: #c53e0d; --ramp-persimmon-800: #aa370d; --ramp-persimmon-900: #842d0b; --ramp-persimmon-1000: #611d0a; --ramp-pink-100: #fff0fe; --ramp-pink-200: #ffe0fc; --ramp-pink-300: #ffbdf2; --ramp-pink-400: #ff99e0; --ramp-pink-500: #ff24bd; --ramp-pink-600: #ea10ac; --ramp-pink-700: #cb0b96; --ramp-pink-800: #971172; --ramp-pink-900: #5f114c; --ramp-pink-1000: #451138; --ramp-purple-100: #f9f5ff; --ramp-purple-200: #f1e5ff; --ramp-purple-300: #e4ccff; --ramp-purple-400: #d9b8ff; --ramp-purple-500: #9747ff; --ramp-purple-600: #8638e5; --ramp-purple-700: #7c2bda; --ramp-purple-800: #681abb; --ramp-purple-900: #4b0d87; --ramp-purple-1000: #2d0f46; --ramp-red-100: #fff5f5; --ramp-red-200: #ffe2e0; --ramp-red-300: #ffc7c2; --ramp-red-400: #ffafa3; --ramp-red-500: #f24822; --ramp-red-600: #dc3412; --ramp-red-700: #bd2915; --ramp-red-800: #9f1f18; --ramp-red-900: #771208; --ramp-red-1000: #660e0b; --ramp-teal-100: #ebfbff; --ramp-teal-200: #cef0f8; --ramp-teal-300: #b6ecf7; --ramp-teal-400: #75d7f0; --ramp-teal-500: #00a2c2; --ramp-teal-600: #0087a8; --ramp-teal-700: #047195; --ramp-teal-800: #085a78; --ramp-teal-900: #093c53; --ramp-teal-1000: #0e2f43; --ramp-violet-100: #f5f5ff; --ramp-violet-200: #ebebff; --ramp-violet-300: #d3d1ff; --ramp-violet-400: #b4b2ff; --ramp-violet-500: #4d49fc; --ramp-violet-600: #443deb; --ramp-violet-700: #3d32e2; --ramp-violet-800: #3620df; --ramp-violet-900: #2f15ac; --ramp-violet-1000: #1d1254; --ramp-white-100: #ffffff0d; --ramp-white-200: #ffffff1a; --ramp-white-300: #fff3; --ramp-white-400: #fff6; --ramp-white-500: #ffffffb2; --ramp-white-600: #fffc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe5; --ramp-white-900: #fffffff2; --ramp-white-1000: #fff; --ramp-yellow-100: #fffbeb; --ramp-yellow-200: #fff1c2; --ramp-yellow-300: #ffe8a3; --ramp-yellow-400: #ffd966; --ramp-yellow-500: #ffcd29; --ramp-yellow-600: #ffc21a; --ramp-yellow-700: #fab815; --ramp-yellow-800: #eba611; --ramp-yellow-900: #dd940e; --ramp-yellow-1000: #b86200; } [data-fpl-selected="true"], [data-fpl-selected="false"]:hover, [data-fpl-selected="focus"]:focus-within { --color-bg: var(--color-bg-onselected); --color-bg-hover: var(--color-bg-selected-hover); --color-bg-pressed: var(--color-bg-onselected-pressed); --color-bg-secondary: var(--color-bg-selected-secondary); --color-bg-tertiary: var(--color-bg-selected-tertiary); --color-bghovertransparent: var(--color-bg-selected-hover); --color-border: var(--color-border-onselected); --color-border-component: var(--color-border-component-selected); --color-border-menu-strong: var(--color-border-menu-onselected-strong); --color-icon: var(--color-icon-onselected); --color-icon-secondary: var(--color-icon-onselected-secondary); --color-icon-tertiary: var(--color-icon-onselected-tertiary); --color-text: var(--color-text-onselected); --color-text-menu: var(--color-text-menu-onselected); --color-text-secondary: var(--color-text-onselected-secondary); --color-text-tertiary: var(--color-text-onselected-tertiary); } [data-preferred-theme="light"][data-editor-theme="whiteboard"], :where([data-preferred-theme="light"] [data-editor-theme="whiteboard"]) { --color-bg: var(--ramp-white-1000); --color-bg-fs: var(--color-bg); --color-bg-assistive: var(--ramp-pink-500); --color-bg-fs-assistive: var(--color-bg-assistive); --color-bg-assistive-hover: var(--ramp-pink-600); --color-bg-assistive-pressed: var(--ramp-pink-600); --color-bg-assistive-secondary: var(--ramp-pink-700); --color-bg-fs-assistive-secondary: var(--color-bg-assistive-secondary); --color-bg-assistive-tertiary: var(--ramp-pink-200); --color-bg-fs-assistive-tertiary: var(--color-bg-assistive-tertiary); --color-bg-brand: var(--ramp-purple-500); --color-bg-brand-hover: var(--ramp-purple-600); --color-bg-brand-pressed: var(--ramp-purple-700); --color-bg-brand-secondary: var(--ramp-purple-700); --color-bg-brand-tertiary: var(--ramp-purple-200); --color-bg-brand-tertiary-hover: var(--ramp-purple-300); --color-bg-brand-tertiary-pressed: var(--ramp-purple-400); --color-bg-component: var(--ramp-purple-500); --color-bg-fs-component: var(--color-bg-component); --color-border-fs-component-strong: var(--color-bg-fs-component); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-700); --color-bg-component-secondary: var(--ramp-purple-700); --color-bg-fs-component-secondary: var(--color-bg-component-secondary); --color-bg-component-tertiary: var(--ramp-purple-200); --color-bg-fs-component-tertiary: var(--color-bg-component-tertiary); --color-bg-component-tertiary-hover: var(--ramp-purple-300); --color-bg-component-tertiary-pressed: var(--ramp-purple-400); --color-bg-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-700); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --color-bg-danger-tertiary-hover: var(--ramp-red-300); --color-bg-danger-tertiary-pressed: var(--ramp-red-400); --color-bg-design: var(--ramp-blue-500); --color-bg-fs-design: var(--color-bg-design); --color-border-fs-design-strong: var(--color-bg-fs-design); --color-bg-design-hover: var(--ramp-blue-600); --color-bg-design-pressed: var(--ramp-blue-600); --color-bg-design-secondary: var(--ramp-blue-700); --color-bg-fs-design-secondary: var(--color-bg-design-secondary); --color-bg-design-tertiary: var(--ramp-blue-200); --color-bg-fs-design-tertiary: var(--color-bg-design-tertiary); --color-bg-desktopBackgrounded: var(--ramp-grey-700); --color-bg-desktopBackgrounded-disabled: var(--ramp-grey-500); --color-bg-desktopBackgrounded-hover: var(--ramp-grey-600); --color-bg-desktopBackgrounded-pressed: var(--ramp-grey-800); --color-bg-desktopBackgrounded-secondary: var(--ramp-grey-700); --color-bg-desktopBackgrounded-tertiary: var(--ramp-grey-600); --color-bg-desktopForeground: var(--ramp-grey-900); --color-bg-desktopForeground-disabled: var(--ramp-grey-500); --color-bg-desktopForeground-hover: var(--ramp-grey-800); --color-bg-desktopForeground-pressed: var(--ramp-grey-800); --color-bg-desktopForeground-secondary: var(--ramp-grey-700); --color-bg-desktopForeground-tertiary: var(--ramp-grey-600); --color-bg-desktopFullscreen: var(--ramp-black-1000); --color-bg-desktopFullscreen-disabled: var(--ramp-grey-500); --color-bg-desktopFullscreen-hover: var(--ramp-grey-900); --color-bg-desktopFullscreen-pressed: var(--ramp-grey-900); --color-bg-desktopFullscreen-secondary: var(--ramp-grey-700); --color-bg-desktopFullscreen-tertiary: var(--ramp-grey-600); --color-bg-disabled: var(--ramp-grey-300); --color-bg-disabled-secondary: var(--ramp-grey-400); --color-bg-elevated: var(--ramp-white-1000); --color-bg-elevated-hover: var(--ramp-grey-100); --color-bg-figjam: var(--ramp-purple-500); --color-bg-fs-measure: var(--color-bg-figjam); --color-bg-figjam-hover: var(--ramp-purple-600); --color-bg-figjam-pressed: var(--ramp-purple-600); --color-bg-figjam-secondary: var(--ramp-purple-700); --color-bg-figjam-tertiary: var(--ramp-purple-200); --color-border-fs-measure-strong: var(--ramp-red-500); --color-bg-fs-measure-hover: var(--color-bg-measure-hover); --color-bg-fs-measure-secondary: var(--color-bg-measure-secondary); --color-bg-fs-measure-tertiary: var(--color-bg-measure-tertiary); --color-bg-fs-selected: var(--color-bg-selected); --color-bg-fs-selected-secondary: var(--color-bg-selected-secondary); --color-bg-fs-template: var(--color-bg-template); --color-border-fs-template-strong: var(--color-bg-fs-template); --color-bg-fs-template-secondary: var(--color-bg-template-secondary); --color-bg-fs-template-tertiary: var(--color-bg-template-tertiary); --color-bg-fs-tertiary: var(--color-bg-tertiary); --color-bg-handoff: var(--ramp-green-500); --color-bg-handoff-hover: var(--ramp-green-600); --color-bg-handoff-pressed: var(--ramp-green-700); --color-bg-handoff-secondary: var(--ramp-green-700); --color-bg-handoff-tertiary: var(--ramp-pale-green-200); --color-bg-hover: var(--ramp-grey-100); --color-bg-info: var(--ramp-purple-200); --color-bg-inverse: var(--ramp-grey-800); --color-bg-inverse-hover: var(--ramp-grey-700); --color-bg-inverse-pressed: var(--ramp-grey-600); --color-bg-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-700); --color-bg-measure-secondary: var(--ramp-red-700); --color-bg-measure-tertiary: var(--ramp-red-200); --color-bg-menu: var(--ramp-grey-900); --color-bg-menu-disabled: var(--ramp-grey-500); --color-bg-menu-hover: var(--ramp-grey-800); --color-bg-menu-pressed: var(--ramp-grey-800); --color-bg-menu-secondary: var(--ramp-grey-700); --color-bg-menu-selected: var(--ramp-purple-500); --color-bg-menu-selected-hover: var(--ramp-purple-600); --color-bg-menu-selected-pressed: var(--ramp-purple-600); --color-bg-menu-selected-secondary: var(--ramp-pale-purple-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-menu-tertiary: var(--ramp-grey-600); --color-bg-onselected: var(--ramp-purple-300); --color-bg-onselected-hover: var(--color-bg-onselected); --color-bg-onselected-pressed: var(--color-bg-onselected); --color-bg-pressed: var(--ramp-grey-200); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-300); --color-bg-selected: var(--ramp-purple-200); --color-bg-selected-hover: var(--ramp-purple-300); --color-bghovertransparent: var(--ramp-black-100); --color-bg-selected-pressed: var(--ramp-purple-400); --color-bg-selected-secondary: var(--ramp-purple-100); --color-bg-selected-strong: var(--ramp-purple-500); --color-bg-selected-tertiary: var(--ramp-purple-100); --color-bg-tertiary: var(--ramp-grey-200); --color-bg-strong-hover: var(--ramp-purple-600); --color-bg-strong-pressed: var(--ramp-purple-700); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-700); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-200); --color-bg-success-tertiary-hover: var(--ramp-green-300); --color-bg-success-tertiary-pressed: var(--ramp-green-400); --color-bg-template: var(--ramp-pink-500); --color-bg-template-secondary: var(--ramp-pink-700); --color-bg-template-tertiary: var(--ramp-pink-200); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-purple-500); --color-bg-toolbar-selected-tertiary: var(--color-bg-toolbar-selected); --color-bg-toolbar-selected-hover: var(--ramp-purple-600); --color-bg-toolbar-selected-pressed: var(--ramp-purple-600); --color-bg-toolbar-selected-secondary: var(--ramp-purple-700); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip: var(--ramp-grey-900); --color-bg-tooltip-disabled: var(--ramp-grey-500); --color-bg-tooltip-hover: var(--ramp-grey-800); --color-bg-tooltip-pressed: var(--ramp-grey-800); --color-bg-tooltip-secondary: var(--ramp-grey-700); --color-bg-tooltip-selected: var(--ramp-purple-500); --color-bg-tooltip-selected-hover: var(--ramp-purple-600); --color-bg-tooltip-selected-pressed: var(--ramp-purple-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-purple-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-tooltip-tertiary: var(--ramp-grey-600); --color-bg-transparent: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); --color-bg-transparent-secondary: var(--ramp-black-200); --color-bg-warning: var(--ramp-yellow-500); --color-bg-warning-hover: var(--ramp-yellow-600); --color-bg-warning-pressed: var(--ramp-yellow-700); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --color-bg-warning-tertiary-hover: var(--ramp-yellow-300); --color-bg-warning-tertiary-pressed: var(--ramp-yellow-400); --color-bgannotationblue: var(--ramp-blue-500); --color-bgannotationgreen: var(--ramp-green-500); --color-bgannotationorange: var(--ramp-orange-600); --color-bgannotationpink: var(--ramp-pink-500); --color-bgannotationpurple: var(--ramp-purple-500); --color-bgannotationred: var(--ramp-red-500); --color-bgannotationteal: var(--ramp-teal-600); --color-bgannotationyellow: var(--ramp-yellow-500); --color-bghoverondarkcanvas: var(--ramp-white-300); --color-bghoveronlightcanvas: var(--ramp-black-300); --color-bginspectpadding: var(--ramp-blue-500); --color-bginspectpaddingtertiary: var(--ramp-blue-200); --color-bginspectspacing: var(--ramp-pink-500); --color-bgsecondaryoncanvas: var(--ramp-grey-200); --color-bgselectedarea: #974aff33; --color-bgswitchoff: var(--ramp-grey-200); --color-bgtoolbarmodeswitcher: var(--ramp-grey-100); --color-bgtoolbarmodeswitcher-hover: var(--ramp-grey-200); --color-bgtransparent: #fff9; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #fff; --color-bgvoting: var(--ramp-yellow-500); --color-bgvotingsecondary: var(--ramp-yellow-200); --color-bgvotingtertiary: var(--ramp-yellow-100); --color-bgvotingwheeldial: var(--ramp-yellow-100); --color-bgvotingwheelhover: var(--ramp-yellow-200); --color-border: var(--ramp-grey-200); --color-border-fs: var(--color-border); --color-border-assistive: var(--ramp-pink-300); --color-border-fs-assistive: var(--color-border-assistive); --color-border-assistive-strong: var(--ramp-pink-600); --color-border-brand: var(--ramp-purple-300); --color-border-brand-strong: var(--ramp-purple-600); --color-border-component: var(--ramp-purple-300); --color-border-component-hover: var(--ramp-purple-500); --color-border-component-selected: var(--ramp-purple-600); --color-border-component-strong: var(--ramp-purple-600); --color-border-danger: var(--ramp-red-300); --color-border-danger-strong: var(--ramp-red-600); --color-border-design: var(--ramp-blue-300); --color-border-design-strong: var(--ramp-blue-600); --color-border-desktopBackgrounded: var(--ramp-grey-600); --color-border-desktopBackgrounded-disabled: var(--ramp-grey-700); --color-border-desktopBackgrounded-strong: var(--ramp-white-500); --color-border-desktopForeground: var(--ramp-grey-700); --color-border-desktopForeground-disabled: var(--ramp-grey-700); --color-border-desktopForeground-strong: var(--ramp-white-1000); --color-border-desktopFullscreen: var(--ramp-grey-900); --color-border-desktopFullscreen-disabled: var(--ramp-grey-900); --color-border-desktopFullscreen-strong: var(--ramp-white-1000); --color-border-disabled: var(--ramp-grey-200); --color-border-disabled-strong: var(--ramp-black-400); --color-border-figjam: var(--ramp-purple-300); --color-border-figjam-strong: var(--ramp-purple-600); --color-border-fs-assistive-strong: var(--ramp-pink-500); --color-border-fs-component: var(--ramp-purple-300); --color-border-fs-design: var(--ramp-blue-300); --color-border-fs-measure: var(--color-border-measure); --color-border-fs-onassistive: var(--color-border-onassistive); --color-border-fs-onassistive-strong: var(--color-border-onassistive-strong); --color-border-fs-oncomponent: var(--color-border-oncomponent); --color-border-fs-oncomponent-strong: var(--color-border-oncomponent-strong); --color-border-fs-ondesign: var(--color-border-ondesign); --color-border-fs-ondesign-strong: var(--color-border-ondesign-strong); --color-border-fs-onmeasure: var(--color-border-onmeasure); --color-border-fs-onmeasure-strong: var(--color-border-onmeasure-strong); --color-border-fs-onselected: var(--color-border-onselected); --color-border-fs-onselected-strong: var(--color-border-onselected-strong); --color-border-fs-ontemplate: var(--color-border-ontemplate); --color-border-fs-ontemplate-strong: var(--color-border-ontemplate-strong); --color-border-fs-selected: var(--color-border-selected); --color-border-fs-selected-strong: var(--color-border-selected-strong); --color-border-fs-strong: var(--color-border-strong); --color-border-fs-template: var(--ramp-pink-300); --color-border-handoff: var(--ramp-pale-green-300); --color-border-handoff-strong: var(--ramp-green-600); --color-border-measure: var(--ramp-red-300); --color-border-measure-strong: var(--ramp-red-600); --color-border-menu: var(--ramp-grey-700); --color-border-menu-disabled: var(--ramp-grey-700); --color-border-menu-disabled-strong: var(--ramp-grey-700); --color-border-menu-onselected: var(--ramp-purple-400); --color-border-menu-onselected-strong: var(--ramp-white-1000); --color-border-menu-strong: var(--ramp-white-1000); --color-border-menu-selected: var(--ramp-purple-500); --color-border-menu-selected-strong: var(--ramp-purple-400); --color-border-onassistive: var(--ramp-pink-600); --color-border-onassistive-strong: var(--ramp-white-1000); --color-border-onbrand: var(--ramp-purple-600); --color-border-onbrand-strong: var(--ramp-white-1000); --color-border-oncomponent: var(--ramp-purple-600); --color-border-oncomponent-strong: var(--ramp-white-1000); --color-border-ondanger: var(--ramp-red-600); --color-fsCodeNodeTextErrorOnDarkCanvas: var(--color-border-ondanger); --color-fsCodeNodeTextErrorOnLightCanvas: var(--color-border-ondanger); --color-border-ondanger-strong: var(--ramp-white-1000); --color-border-ondesign: var(--ramp-blue-600); --color-border-ondesign-strong: var(--ramp-white-1000); --color-border-onfigjam: var(--ramp-purple-600); --color-border-onfigjam-strong: var(--ramp-purple-600); --color-border-onmeasure: var(--ramp-red-600); --color-border-onmeasure-strong: var(--ramp-white-1000); --color-border-onselected: var(--ramp-purple-300); --color-border-onselected-strong: var(--ramp-black-800); --color-border-onsuccess: var(--ramp-green-600); --color-border-onsuccess-strong: var(--ramp-white-1000); --color-border-ontemplate: var(--ramp-pink-600); --color-border-ontemplate-strong: var(--ramp-white-1000); --color-border-onwarning: var(--ramp-yellow-700); --color-border-onwarning-strong: var(--ramp-black-800); --color-border-selected: var(--ramp-purple-500); --color-border-selected-strong: var(--ramp-purple-600); --color-border-strong: var(--ramp-grey-800); --color-border-success: var(--ramp-green-300); --color-border-success-strong: var(--ramp-green-600); --color-border-template-strong: var(--ramp-pink-600); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-onselected: var(--ramp-white-1000); --color-border-toolbar-selected: var(--ramp-purple-500); --color-border-toolbar-selected-strong: var(--ramp-purple-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip: var(--ramp-grey-700); --color-border-tooltip-disabled: var(--ramp-grey-700); --color-border-tooltip-disabled-strong: var(--ramp-grey-700); --color-border-tooltip-onselected: var(--ramp-purple-600); --color-border-tooltip-onselected-strong: var(--ramp-white-1000); --color-border-tooltip-selected: var(--ramp-purple-500); --color-border-tooltip-selected-strong: var(--ramp-purple-400); --color-border-tooltip-strong: var(--ramp-white-1000); --color-border-warning: var(--ramp-pale-yellow-300); --color-border-warning-strong: var(--ramp-yellow-1000); --color-borderinspectpadding: var(--ramp-blue-500); --color-borderinspectspacing: var(--ramp-pink-500); --color-borderplacecrosshair: var(--ramp-white-1000); --color-borderselectedec: #fff0; --color-bordertranslucent: var(--ramp-black-200); --color-bordertranslucentstrong: var(--ramp-black-300); --color-code: var(--ramp-black-800); --color-codeaccent: var(--ramp-orange-900); --color-codeattribute: var(--ramp-black-800); --color-codeclassname: var(--ramp-blue-600); --color-codecomment: var(--ramp-black-500); --color-codeproperty: var(--ramp-black-800); --color-codestring: var(--ramp-blue-600); --color-codestylename: var(--ramp-blue-600); --color-codetag: var(--ramp-purple-600); --color-codevalue: var(--ramp-pink-600); --color-codevariable: var(--ramp-green-600); --color-conditionalborder: #fff0; --color-controliconoutline: var(--ramp-black-200); --color-controlknoboffoutline: var(--ramp-black-300); --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); /* Used for input backgrounds on canvas */ --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); --color-fsBorderDesignShadowStrong: var(--ramp-blue-600); --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-200); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-200); --color-fsBorderPlaceholder: var(--ramp-grey-500); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-300); --color-fsCanvasDefaultFill: var(--ramp-grey-100); --color-fsCodeNodeBorder: var(--ramp-green-500); --color-fsCodeNodeBorderSecondary: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnDarkCanvas: var(--color-fsCodeNodeBorder); --color-fsCodeNodeTextOnLightCanvas: var(--color-fsCodeNodeBorder); --color-fsDevHandoffAutolayoutPadding: var(--ramp-blue-400); --color-fsDevHandoffAutolayoutSpacing: var(--ramp-pink-400); --color-fsFrameDefaultFill: var(--ramp-white-1000); --color-fsGridCellOutline: #80caff99; --color-fsGridCellSelection: #80caff4d; --color-fsGridComponentCellOutline: #d9b8ff99; --color-fsGridComponentCellSelection: #d9b8ff4d; --color-fsIconOnDarkCanvas: var(--color-iconondarkcanvas); --color-fsIconOnDarkCanvasSecondary: var(--ramp-white-400); --color-fsIconOnLightCanvas: var(--color-icononlightcanvas); --color-fsIconOnLightCanvasSecondary: var(--ramp-black-400); --color-fsNodeHandle: var(--ramp-blue-400); --color-fsNodeLabelNoBG: var(--ramp-black-400); --color-fsNodeSymbolSelectedSecondary: var(--ramp-pale-purple-400); --color-fsNoodleCenterLine: #fff0; --color-fsShapeDefaultFill: var(--ramp-grey-300); --color-fsSitesResponsiveSetTextOnDarkCanvas: var(--ramp-white-500); --color-fsSitesResponsiveSetTextOnLightCanvas: var(--ramp-black-500); --color-fsSnappingOverlay: var(--ramp-blue-600); --color-fsStickyAuthorTextOnDark: var(--ramp-white-600); --color-fsStickyAuthorTextOnLight: var(--ramp-black-500); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-400); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-600); --color-fsTextOnDarkCanvas: var(--color-textondarkcanvas); --color-fsTextOnDarkCanvasSecondary: var(--color-textondarkcanvassecondary); --color-fsTextOnLightCanvas: var(--color-textonlightcanvas); --color-fsTextOnLightCanvasSecondary: var(--color-textonlightcanvassecondary); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-fsVectorInactive: var(--ramp-grey-400); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-gauge: var(--ramp-grey-500); --color-gauge-brand: var(--ramp-blue-500); --color-gauge-brand-secondary: var(--ramp-blue-400); --color-gauge-danger: var(--ramp-red-500); --color-gauge-danger-secondary: var(--ramp-red-400); --color-gauge-secondary: var(--ramp-grey-400); --color-gauge-strong: var(--ramp-grey-800); --color-gauge-success: var(--ramp-green-500); --color-gauge-success-secondary: var(--ramp-green-400); --color-gauge-warning: var(--ramp-yellow-600); --color-gauge-warning-secondary: var(--ramp-yellow-400); --color-icon: var(--ramp-black-800); --color-icon-fs: var(--color-icon); --color-icon-assistive: var(--ramp-pink-600); --color-icon-assistive-secondary: var(--color-icon-assistive); --color-icon-assistive-tertiary: var(--color-icon-assistive); --color-icon-fs-assistive: var(--color-icon-assistive); --color-icon-assistive-pressed: var(--ramp-pink-700); --color-icon-brand: var(--ramp-purple-600); --color-icon-brand-pressed: var(--ramp-purple-700); --color-icon-brand-secondary: var(--ramp-purple-400); --color-icon-brand-tertiary: var(--ramp-purple-300); --color-icon-component: var(--ramp-purple-600); --color-icon-fs-component: var(--color-icon-component); --color-icon-component-pressed: var(--ramp-purple-700); --color-icon-component-secondary: var(--ramp-pale-purple-400); --color-icon-component-tertiary: var(--ramp-pale-purple-400); --color-icon-danger: var(--ramp-red-600); --color-icon-danger-secondary: var(--color-icon-danger); --color-icon-danger-secondary-hover: var(--color-icon-danger); --color-icon-danger-tertiary: var(--color-icon-danger); --color-icon-danger-hover: var(--ramp-red-700); --color-icon-danger-pressed: var(--ramp-red-700); --color-icon-design: var(--ramp-blue-600); --color-icon-design-secondary: var(--color-icon-design); --color-icon-design-tertiary: var(--color-icon-design); --color-icon-fs-design: var(--color-icon-design); --color-icon-design-pressed: var(--ramp-blue-700); --color-icon-desktopBackgrounded: var(--ramp-white-500); --color-icon-desktopBackgrounded-danger: var(--ramp-red-500); --color-icon-desktopBackgrounded-disabled: var(--ramp-white-400); --color-icon-desktopBackgrounded-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-icon-desktopBackgrounded-secondary: var(--ramp-white-500); --color-icon-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-icon-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-icon-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-icon-desktopBackgrounded-warning: var(--ramp-yellow-500); --color-icon-desktopForeground: var(--ramp-white-1000); --color-icon-desktopForeground-danger: var(--ramp-red-500); --color-icon-desktopForeground-disabled: var(--ramp-white-400); --color-icon-desktopForeground-hover: var(--ramp-white-1000); --color-icon-desktopForeground-ondisabled: var(--ramp-grey-900); --color-icon-desktopForeground-secondary: var(--ramp-white-500); --color-icon-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-tertiary: var(--ramp-white-400); --color-icon-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopForeground-warning: var(--ramp-yellow-500); --color-icon-desktopFullscreen: var(--ramp-white-1000); --color-icon-desktopFullscreen-danger: var(--ramp-red-500); --color-icon-desktopFullscreen-disabled: var(--ramp-white-400); --color-icon-desktopFullscreen-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-icon-desktopFullscreen-secondary: var(--ramp-white-500); --color-icon-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-tertiary: var(--ramp-white-400); --color-icon-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-icon-desktopFullscreen-warning: var(--ramp-yellow-500); --color-icon-disabled: var(--ramp-black-400); --color-icon-figjam: var(--ramp-purple-600); --color-icon-figjam-pressed: var(--ramp-purple-700); --color-icon-figjam-secondary: var(--ramp-pale-purple-400); --color-icon-figjam-tertiary: var(--ramp-pale-purple-400); --color-icon-fs-measure: var(--color-icon-measure); --color-icon-fs-onassistive: var(--color-icon-onassistive); --color-icon-fs-oncomponent: var(--color-icon-oncomponent); --color-icon-fs-ondesign: var(--color-icon-ondesign); --color-icon-fs-onmeasure: var(--color-icon-onmeasure); --color-icon-fs-onselected: var(--color-icon-onselected); --color-icon-fs-ontemplate: var(--color-icon-ontemplate); --color-icon-fs-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --color-icon-fs-template: var(--color-icon-template); --color-icon-fs-tertiary: var(--color-icon-tertiary); --color-icon-handoff: var(--ramp-green-600); --color-icon-handoff-secondary: var(--color-icon-handoff); --color-icon-handoff-tertiary: var(--color-icon-handoff); --color-icon-handoff-pressed: var(--ramp-green-700); --color-icon-hover: var(--ramp-black-800); --color-icon-measure: var(--ramp-red-500); --color-icon-measure-secondary: var(--color-icon-measure); --color-icon-measure-secondary-hover: var(--color-icon-measure); --color-icon-measure-tertiary: var(--color-icon-measure); --color-icon-measure-hover: var(--ramp-red-700); --color-icon-measure-pressed: var(--ramp-red-700); --color-icon-menu: var(--ramp-white-1000); --color-icon-menu-danger: var(--ramp-red-500); --color-icon-menu-disabled: var(--ramp-white-400); --color-icon-menu-hover: var(--ramp-white-1000); --color-icon-menu-ondisabled: var(--ramp-grey-900); --color-icon-menu-onselected: var(--ramp-white-1000); --color-icon-menu-pressed: var(--ramp-purple-500); --color-icon-menu-secondary: var(--ramp-white-500); --color-icon-menu-secondary-hover: var(--ramp-white-1000); --color-icon-menu-selected: var(--ramp-purple-400); --color-icon-menu-selected-secondary: var(--ramp-purple-400); --color-icon-menu-selected-tertiary: var(--ramp-purple-400); --color-icon-menu-tertiary: var(--ramp-white-400); --color-icon-menu-tertiary-hover: var(--ramp-white-1000); --color-icon-menu-warning: var(--ramp-yellow-500); --color-icon-onassistive: var(--ramp-white-1000); --color-icon-onassistive-secondary: var(--ramp-white-600); --color-icon-onassistive-tertiary: var(--ramp-white-400); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-600); --color-icon-onbrand-tertiary: var(--ramp-white-400); --color-icon-oncomponent: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-600); --color-icon-oncomponent-tertiary: var(--ramp-white-400); --color-icon-ondanger: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-600); --color-icon-ondanger-tertiary: var(--ramp-white-400); --color-icon-ondesign: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-600); --color-icon-ondesign-tertiary: var(--ramp-white-400); --color-icon-ondisabled: var(--ramp-white-1000); --color-icon-onfigjam: var(--ramp-white-1000); --color-icon-onfigjam-secondary: var(--ramp-white-600); --color-icon-onfigjam-tertiary: var(--ramp-white-400); --color-icon-oninverse: var(--ramp-white-800); --color-icon-onmeasure: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-600); --color-icon-onmeasure-tertiary: var(--ramp-white-400); --color-icon-onselected: var(--ramp-black-800); --color-icon-onselected-secondary: var(--ramp-black-500); --color-icon-secondary: var(--ramp-black-500); --color-icon-onselected-strong: var(--ramp-white-1000); --color-icon-onselected-tertiary: var(--ramp-black-400); --color-icon-tertiary: var(--ramp-black-400); --color-icon-onsuccess: var(--ramp-white-1000); --color-icon-onsuccess-secondary: var(--ramp-white-600); --color-icon-onsuccess-tertiary: var(--ramp-white-400); --color-icon-ontemplate: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-black-800); --color-icon-onwarning-secondary: var(--ramp-black-500); --color-icon-onwarning-tertiary: var(--ramp-black-400); --color-icon-pressed: var(--ramp-purple-600); --color-icon-secondary-hover: var(--ramp-black-800); --color-icon-selected: var(--ramp-purple-600); --color-icon-selected-secondary: var(--color-icon-selected); --color-icon-selected-tertiary: var(--color-icon-selected); --color-icon-success: var(--ramp-green-600); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-success-pressed: var(--ramp-green-700); --color-icon-template: var(--ramp-pink-600); --color-icon-template-secondary: var(--ramp-pale-pink-400); --color-icon-tertiary-hover: var(--ramp-black-800); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-danger: var(--ramp-red-500); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-onselected: var(--ramp-white-1000); --color-icon-toolbar-pressed: var(--ramp-purple-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-purple-600); --color-icon-toolbar-selected-secondary: var(--color-icon-toolbar-selected); --color-icon-toolbar-selected-tertiary: var(--color-icon-toolbar-selected); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-toolbar-warning: var(--ramp-yellow-500); --color-icon-tooltip: var(--ramp-white-1000); --color-icon-tooltip-danger: var(--ramp-red-500); --color-icon-tooltip-disabled: var(--ramp-white-400); --color-icon-tooltip-hover: var(--ramp-white-1000); --color-icon-tooltip-ondisabled: var(--ramp-grey-900); --color-icon-tooltip-onselected: var(--ramp-white-1000); --color-icon-tooltip-pressed: var(--ramp-purple-500); --color-icon-tooltip-secondary: var(--ramp-white-500); --color-icon-tooltip-secondary-hover: var(--ramp-white-1000); --color-icon-tooltip-selected: var(--ramp-purple-400); --color-icon-tooltip-selected-secondary: var(--color-icon-tooltip-selected); --color-icon-tooltip-selected-tertiary: var(--color-icon-tooltip-selected); --color-icon-tooltip-tertiary: var(--ramp-white-400); --color-icon-tooltip-tertiary-hover: var(--ramp-white-1000); --color-icon-tooltip-warning: var(--ramp-yellow-500); --color-icon-warning: var(--ramp-yellow-1000); --color-icon-warning-secondary: var(--color-icon-warning); --color-icon-warning-tertiary: var(--color-icon-warning); --color-icon-warning-pressed: var(--ramp-yellow-1000); --color-icondesignfilesecondary: var(--ramp-blue-400); --color-iconfavorite: var(--ramp-yellow-500); --color-iconfigjamfilesecondary: var(--ramp-purple-400); --color-iconondarkcanvas: var(--ramp-white-800); --color-icononlightcanvas: var(--ramp-black-800); --color-icononvoting: var(--ramp-black-800); --color-iconprototypefile: var(--ramp-grey-300); --color-iconprototypefilesecondary: var(--ramp-grey-800); --color-iconpublishedfile: var(--ramp-grey-800); --color-iconpublishedfilesecondary: var(--ramp-grey-500); --color-loading: var(--ramp-black-200); --color-loadingmenu: var(--ramp-white-200); --color-loadingsecondary: var(--ramp-black-100); --color-loadingsecondarymenu: var(--ramp-white-100); --color-modalbackdrop: var(--ramp-black-500); --color-multiplayerblue: var(--ramp-blue-600); --color-multiplayerbluehover: var(--ramp-blue-700); --color-multiplayerbluesecondary: var(--ramp-blue-800); --color-multiplayergreen: var(--ramp-green-500); --color-multiplayergreenhover: var(--ramp-green-600); --color-multiplayergreensecondary: var(--ramp-green-800); --color-multiplayergrey: var(--ramp-pale-blue-500); --color-multiplayergreyhover: var(--ramp-pale-blue-600); --color-multiplayergreysecondary: var(--ramp-pale-blue-800); --color-multiplayerpink: var(--ramp-pink-500); --color-multiplayerpinkhover: var(--ramp-pink-600); --color-multiplayerpinksecondary: var(--ramp-pink-800); --color-multiplayerpurple: var(--ramp-purple-500); --color-multiplayerpurplehover: var(--ramp-purple-600); --color-multiplayerpurplesecondary: var(--ramp-purple-800); --color-multiplayerred: var(--ramp-red-500); --color-multiplayerredhover: var(--ramp-red-600); --color-multiplayerredsecondary: var(--ramp-red-800); --color-multiplayeryellow: var(--ramp-yellow-500); --color-multiplayeryellowhover: var(--ramp-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-yellow-800); --color-nodehandle: var(--ramp-blue-400); --color-prototypeloadingbackdrop: var(--ramp-black-800); --color-scrollbar: #b3b3b380; --color-shadow: #00000026; --color-tablenodehoveredprimary: var(--ramp-blue-500); --color-tablenodeselected: var(--color-tablenodehoveredprimary); --color-tablenodehoveredsecondary: var(--ramp-blue-300); --color-template-slot: var(--ramp-pink-300); --color-text: var(--ramp-black-800); --color-text-fs: var(--color-text); --color-text-assistive: var(--ramp-pink-600); --color-text-assistive-secondary: var(--color-text-assistive); --color-text-assistive-tertiary: var(--color-text-assistive); --color-text-fs-assistive: var(--color-text-assistive); --color-text-assistive-pressed: var(--ramp-pink-700); --color-text-brand: var(--ramp-purple-600); --color-text-brand-secondary: var(--color-text-brand); --color-text-brand-tertiary: var(--color-text-brand); --color-text-component: var(--ramp-purple-600); --color-text-fs-component: var(--color-text-component); --color-text-component-pressed: var(--ramp-purple-700); --color-text-component-secondary: var(--ramp-pale-purple-400); --color-text-component-tertiary: var(--ramp-pale-purple-400); --color-text-danger: var(--ramp-red-600); --color-text-danger-secondary: var(--color-text-danger); --color-text-danger-tertiary: var(--color-text-danger); --color-text-design: var(--ramp-blue-600); --color-text-design-secondary: var(--color-text-design); --color-text-design-tertiary: var(--color-text-design); --color-text-fs-design: var(--color-text-design); --color-text-design-pressed: var(--ramp-blue-700); --color-text-desktopBackgrounded: var(--ramp-white-500); --color-text-desktopBackgrounded-danger: var(--ramp-red-400); --color-text-desktopBackgrounded-disabled: var(--ramp-white-400); --color-text-desktopBackgrounded-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-ondisabled: var(--ramp-grey-700); --color-text-desktopBackgrounded-secondary: var(--ramp-white-500); --color-text-desktopBackgrounded-secondary-hover: var(--ramp-white-500); --color-text-desktopBackgrounded-tertiary: var(--ramp-white-400); --color-text-desktopBackgrounded-tertiary-hover: var(--ramp-white-400); --color-text-desktopBackgrounded-warning: var(--ramp-yellow-400); --color-text-desktopForeground: var(--ramp-white-1000); --color-text-desktopForeground-danger: var(--ramp-red-400); --color-text-desktopForeground-disabled: var(--ramp-white-400); --color-text-desktopForeground-hover: var(--ramp-white-1000); --color-text-desktopForeground-ondisabled: var(--ramp-grey-900); --color-text-desktopForeground-secondary: var(--ramp-white-500); --color-text-desktopForeground-secondary-hover: var(--ramp-white-1000); --color-text-desktopForeground-tertiary: var(--ramp-white-400); --color-text-desktopForeground-tertiary-hover: var(--ramp-white-1000); --color-text-desktopForeground-warning: var(--ramp-yellow-400); --color-text-desktopFullscreen: var(--ramp-white-1000); --color-text-desktopFullscreen-danger: var(--ramp-red-400); --color-text-desktopFullscreen-disabled: var(--ramp-white-400); --color-text-desktopFullscreen-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-ondisabled: var(--ramp-black-1000); --color-text-desktopFullscreen-secondary: var(--ramp-white-500); --color-text-desktopFullscreen-secondary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-tertiary: var(--ramp-white-400); --color-text-desktopFullscreen-tertiary-hover: var(--ramp-white-1000); --color-text-desktopFullscreen-warning: var(--ramp-yellow-400); --color-text-disabled: var(--ramp-black-400); --color-text-figjam: var(--ramp-purple-600); --color-text-figjam-pressed: var(--ramp-purple-700); --color-text-figjam-secondary: var(--ramp-pale-purple-400); --color-text-figjam-tertiary: var(--ramp-pale-purple-400); --color-text-fs-measure: var(--color-text-measure); --color-text-fs-onassistive: var(--color-text-onassistive); --color-text-fs-oncomponent: var(--color-text-oncomponent); --color-text-fs-ondesign: var(--color-text-ondesign); --color-text-fs-onmeasure: var(--color-text-onmeasure); --color-text-fs-onselected: var(--color-text-onselected); --color-text-fs-ontemplate: var(--color-text-ontemplate); --color-text-fs-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --color-text-fs-template: var(--color-text-template); --color-text-fs-tertiary: var(--color-text-tertiary); --color-text-handoff: var(--ramp-green-600); --color-text-handoff-secondary: var(--color-text-handoff); --color-text-handoff-tertiary: var(--color-text-handoff); --color-text-hover: var(--ramp-black-800); --color-text-measure: var(--ramp-red-600); --color-text-measure-secondary: var(--color-text-measure); --color-text-measure-tertiary: var(--color-text-measure); --color-text-menu: var(--ramp-white-1000); --color-text-menu-danger: var(--ramp-red-500); --color-text-menu-disabled: var(--ramp-white-400); --color-text-menu-hover: var(--ramp-white-1000); --color-text-menu-ondisabled: var(--ramp-grey-900); --color-text-menu-onselected: var(--ramp-white-1000); --color-text-menu-secondary: var(--ramp-white-500); --color-text-menu-secondary-hover: var(--ramp-white-1000); --color-text-menu-selected: var(--ramp-purple-400); --color-text-menu-selected-secondary: var(--color-text-menu-selected); --color-text-menu-selected-tertiary: var(--color-text-menu-selected); --color-text-menu-tertiary: var(--ramp-white-400); --color-text-menu-tertiary-hover: var(--ramp-white-1000); --color-text-menu-warning: var(--ramp-yellow-400); --color-text-onassistive: var(--ramp-white-1000); --color-text-onassistive-secondary: var(--ramp-white-600); --color-text-onassistive-tertiary: var(--ramp-white-400); --color-text-onbrand: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-oncomponent: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-600); --color-text-oncomponent-tertiary: var(--ramp-white-400); --color-text-ondanger: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-600); --color-text-ondanger-tertiary: var(--ramp-white-400); --color-text-ondesign: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-600); --color-text-ondesign-tertiary: var(--ramp-white-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-onfigjam: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-600); --color-text-onfigjam-tertiary: var(--ramp-white-400); --color-text-oninverse: var(--ramp-white-800); --color-text-oninverse-secondary: var(--ramp-white-600); --color-text-onmeasure: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-600); --color-text-onmeasure-tertiary: var(--ramp-white-400); --color-text-onselected: var(--ramp-black-800); --color-text-onselected-secondary: var(--ramp-black-500); --color-text-secondary: var(--ramp-black-500); --color-text-onselected-strong: var(--ramp-white-1000); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-tertiary: var(--ramp-black-400); --color-text-onsuccess: var(--ramp-white-1000); --color-text-onsuccess-secondary: var(--ramp-white-600); --color-text-onsuccess-tertiary: var(--ramp-white-400); --color-text-ontemplate: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-black-800); --color-text-onwarning-secondary: var(--ramp-black-500); --color-text-onwarning-tertiary: var(--ramp-black-400); --color-text-secondary-hover: var(--ramp-black-800); --color-text-selected: var(--ramp-purple-600); --color-text-selected-secondary: var(--color-text-selected); --color-text-selected-tertiary: var(--color-text-selected); --color-text-success: var(--ramp-green-600); --color-text-success-secondary: var(--color-text-success); --color-text-success-tertiary: var(--color-text-success); --color-text-template: var(--ramp-pink-600); --color-text-template-secondary: var(--ramp-pale-pink-400); --color-text-tertiary-hover: var(--ramp-black-800); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-danger: var(--ramp-red-400); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-ondisabled: var(--ramp-grey-800); --color-text-toolbar-onselected: var(--ramp-white-1000); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-purple-400); --color-text-toolbar-selected-secondary: var(--color-text-toolbar-selected); --color-text-toolbar-selected-tertiary: var(--color-text-toolbar-selected); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip: var(--ramp-white-1000); --color-text-tooltip-danger: var(--ramp-red-400); --color-text-tooltip-disabled: var(--ramp-white-400); --color-text-tooltip-hover: var(--ramp-white-1000); --color-text-tooltip-ondisabled: var(--ramp-grey-900); --color-text-tooltip-onselected: var(--ramp-white-1000); --color-text-tooltip-secondary: var(--ramp-white-500); --color-text-tooltip-secondary-hover: var(--ramp-white-1000); --color-text-tooltip-selected: var(--ramp-purple-400); --color-text-tooltip-selected-secondary: var(--color-text-tooltip-selected); --color-text-tooltip-selected-tertiary: var(--color-text-tooltip-selected); --color-text-tooltip-tertiary: var(--ramp-white-400); --color-text-tooltip-tertiary-hover: var(--ramp-white-1000); --color-text-tooltip-warning: var(--ramp-yellow-400); --color-text-warning: var(--ramp-yellow-1000); --color-text-warning-secondary: var(--color-text-warning); --color-text-warning-tertiary: var(--color-text-warning); --color-texthighlight: #974aff66; --color-textondarkannotation: var(--ramp-white-1000); --color-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --color-textonlightannotation: var(--ramp-black-800); --color-textonlightcanvas: var(--ramp-black-800); --color-textonlightcanvassecondary: var(--ramp-black-400); --color-textonmultiplayerblue: var(--ramp-white-1000); --color-textonmultiplayergreen: var(--ramp-white-1000); --color-textonmultiplayergrey: var(--ramp-white-1000); --color-textonmultiplayerpink: var(--ramp-white-1000); --color-textonmultiplayerpurple: var(--ramp-white-1000); --color-textonmultiplayerred: var(--ramp-white-1000); --color-textonmultiplayeryellow: var(--ramp-black-800); --color-textonvoting: var(--ramp-black-800); --ramp-black-100: #0000000d; --ramp-black-200: #0000001a; --ramp-black-300: #0003; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000c; --ramp-black-700: #000000d9; --ramp-black-800: #000000e5; --ramp-black-900: #000000f2; --ramp-black-1000: #000; --ramp-blue-100: #f2f9ff; --ramp-blue-200: #e5f4ff; --ramp-blue-300: #bde3ff; --ramp-blue-400: #80caff; --ramp-blue-500: #0d99ff; --ramp-blue-600: #007be5; --ramp-blue-700: #0768cf; --ramp-blue-800: #034ac1; --ramp-blue-900: #093077; --ramp-blue-1000: #0d193f; --ramp-green-100: #edf9ef; --ramp-green-200: #e0f6e5; --ramp-green-300: #b9ebc6; --ramp-green-400: #8ddda4; --ramp-green-500: #14ae5c; --ramp-green-600: #009951; --ramp-green-700: #008043; --ramp-green-800: #036838; --ramp-green-900: #024626; --ramp-green-1000: #083a23; --ramp-grey-100: #f5f5f5; --ramp-grey-200: #e6e6e6; --ramp-grey-300: #d9d9d9; --ramp-grey-400: #b3b3b3; --ramp-grey-500: #757575; --ramp-grey-600: #444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111; --ramp-orange-100: #fff4e5; --ramp-orange-200: #ffe0c2; --ramp-orange-300: #fcd19c; --ramp-orange-400: #ffc470; --ramp-orange-500: #ffa629; --ramp-orange-600: #fc9e24; --ramp-orange-700: #f79722; --ramp-orange-800: #dd7c0e; --ramp-orange-900: #ce7012; --ramp-orange-1000: #8a480f; --ramp-pale-blue-100: #f1f5f8; --ramp-pale-blue-200: #e3ecf2; --ramp-pale-blue-300: #d2dae4; --ramp-pale-blue-400: #afbccf; --ramp-pale-blue-500: #679; --ramp-pale-blue-600: #536383; --ramp-pale-blue-700: #4a5878; --ramp-pale-blue-800: #394360; --ramp-pale-blue-900: #252d41; --ramp-pale-blue-1000: #121721; --ramp-pale-green-100: #f1f8f2; --ramp-pale-green-200: #daecdf; --ramp-pale-green-300: #c3e0cc; --ramp-pale-green-400: #9fc1aa; --ramp-pale-green-500: #678e79; --ramp-pale-green-600: #5c806d; --ramp-pale-green-700: #517361; --ramp-pale-green-800: #476656; --ramp-pale-green-900: #2f483c; --ramp-pale-green-1000: #172b22; --ramp-pale-persimmon-100: #faefeb; --ramp-pale-persimmon-200: #f8e9e2; --ramp-pale-persimmon-300: #f3d6c9; --ramp-pale-persimmon-400: #ebb49d; --ramp-pale-persimmon-500: #d4693b; --ramp-pale-persimmon-600: #a55e40; --ramp-pale-persimmon-700: #864e37; --ramp-pale-persimmon-800: #603a2a; --ramp-pale-persimmon-900: #412b21; --ramp-pale-persimmon-1000: #1f1714; --ramp-pale-pink-100: #f6eef4; --ramp-pale-pink-200: #f2e3ee; --ramp-pale-pink-300: #e8cee1; --ramp-pale-pink-400: #daaace; --ramp-pale-pink-500: #ab5998; --ramp-pale-pink-600: #86507a; --ramp-pale-pink-700: #724667; --ramp-pale-pink-800: #51344a; --ramp-pale-pink-900: #33252f; --ramp-pale-pink-1000: #1b1318; --ramp-pale-purple-100: #f4f1f8; --ramp-pale-purple-200: #ede7f3; --ramp-pale-purple-300: #e0d4ed; --ramp-pale-purple-400: #c5b2dc; --ramp-pale-purple-500: #7f699b; --ramp-pale-purple-600: #6b5884; --ramp-pale-purple-700: #604d75; --ramp-pale-purple-800: #473956; --ramp-pale-purple-900: #33293d; --ramp-pale-purple-1000: #1a141f; --ramp-pale-red-100: #faedeb; --ramp-pale-red-200: #f8e5e2; --ramp-pale-red-300: #f3cfc9; --ramp-pale-red-400: #eba99d; --ramp-pale-red-500: #d4583b; --ramp-pale-red-600: #a55440; --ramp-pale-red-700: #864537; --ramp-pale-red-800: #60332a; --ramp-pale-red-900: #412621; --ramp-pale-red-1000: #1f1514; --ramp-pale-teal-100: #f1f6f8; --ramp-pale-teal-200: #e3eef2; --ramp-pale-teal-300: #cedee4; --ramp-pale-teal-400: #a3c2cc; --ramp-pale-teal-500: #518394; --ramp-pale-teal-600: #436c7a; --ramp-pale-teal-700: #3c606d; --ramp-pale-teal-800: #2f4c56; --ramp-pale-teal-900: #1f3238; --ramp-pale-teal-1000: #101a1e; --ramp-pale-violet-100: #f1f1f8; --ramp-pale-violet-200: #e7e7f3; --ramp-pale-violet-300: #d4d4ed; --ramp-pale-violet-400: #b3b2dc; --ramp-pale-violet-500: #6a699b; --ramp-pale-violet-600: #595884; --ramp-pale-violet-700: #4e4d75; --ramp-pale-violet-800: #393956; --ramp-pale-violet-900: #29293d; --ramp-pale-violet-1000: #14141f; --ramp-pale-yellow-100: #fff5eb; --ramp-pale-yellow-200: #fdeece; --ramp-pale-yellow-300: #f5dfa8; --ramp-pale-yellow-400: #e8cd7d; --ramp-pale-yellow-500: #ad7f00; --ramp-pale-yellow-600: #906800; --ramp-pale-yellow-700: #7a5800; --ramp-pale-yellow-800: #5c4100; --ramp-pale-yellow-900: #3a2a10; --ramp-pale-yellow-1000: #211a12; --ramp-persimmon-100: #fff2eb; --ramp-persimmon-200: #ffdfcc; --ramp-persimmon-300: #ffbb9e; --ramp-persimmon-400: #ffa27a; --ramp-persimmon-500: #ff5c16; --ramp-persimmon-600: #e24c0c; --ramp-persimmon-700: #c53e0d; --ramp-persimmon-800: #aa370d; --ramp-persimmon-900: #842d0b; --ramp-persimmon-1000: #611d0a; --ramp-pink-100: #fff0fe; --ramp-pink-200: #ffe0fc; --ramp-pink-300: #ffbdf2; --ramp-pink-400: #ff99e0; --ramp-pink-500: #ff24bd; --ramp-pink-600: #ea10ac; --ramp-pink-700: #cb0b96; --ramp-pink-800: #971172; --ramp-pink-900: #5f114c; --ramp-pink-1000: #451138; --ramp-purple-100: #f9f5ff; --ramp-purple-200: #f1e5ff; --ramp-purple-300: #e4ccff; --ramp-purple-400: #d9b8ff; --ramp-purple-500: #9747ff; --ramp-purple-600: #8638e5; --ramp-purple-700: #7c2bda; --ramp-purple-800: #681abb; --ramp-purple-900: #4b0d87; --ramp-purple-1000: #2d0f46; --ramp-red-100: #fff5f5; --ramp-red-200: #ffe2e0; --ramp-red-300: #ffc7c2; --ramp-red-400: #ffafa3; --ramp-red-500: #f24822; --ramp-red-600: #dc3412; --ramp-red-700: #bd2915; --ramp-red-800: #9f1f18; --ramp-red-900: #771208; --ramp-red-1000: #660e0b; --ramp-teal-100: #ebfbff; --ramp-teal-200: #cef0f8; --ramp-teal-300: #b6ecf7; --ramp-teal-400: #75d7f0; --ramp-teal-500: #00a2c2; --ramp-teal-600: #0087a8; --ramp-teal-700: #047195; --ramp-teal-800: #085a78; --ramp-teal-900: #093c53; --ramp-teal-1000: #0e2f43; --ramp-violet-100: #f5f5ff; --ramp-violet-200: #ebebff; --ramp-violet-300: #d3d1ff; --ramp-violet-400: #b4b2ff; --ramp-violet-500: #4d49fc; --ramp-violet-600: #443deb; --ramp-violet-700: #3d32e2; --ramp-violet-800: #3620df; --ramp-violet-900: #2f15ac; --ramp-violet-1000: #1d1254; --ramp-white-100: #ffffff0d; --ramp-white-200: #ffffff1a; --ramp-white-300: #fff3; --ramp-white-400: #fff6; --ramp-white-500: #ffffffb2; --ramp-white-600: #fffc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe5; --ramp-white-900: #fffffff2; --ramp-white-1000: #fff; --ramp-yellow-100: #fffbeb; --ramp-yellow-200: #fff1c2; --ramp-yellow-300: #ffe8a3; --ramp-yellow-400: #ffd966; --ramp-yellow-500: #ffcd29; --ramp-yellow-600: #ffc21a; --ramp-yellow-700: #fab815; --ramp-yellow-800: #eba611; --ramp-yellow-900: #dd940e; --ramp-yellow-1000: #b86200; } [data-preferred-theme="dark"][data-editor-theme="whiteboard"], :where([data-preferred-theme="dark"] [data-editor-theme="whiteboard"]) { --color-bg-brand: var(--ramp-purple-500); --color-bg-brand-hover: var(--ramp-purple-600); --color-bg-brand-pressed: var(--ramp-purple-700); --color-bg-brand-secondary: var(--ramp-purple-700); --color-bg-brand-tertiary: var(--ramp-pale-purple-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-purple-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-purple-600); --color-bg-fs-measure: var(--color-bg-figjam); --color-border-fs-measure-strong: var(--ramp-red-500); --color-bg-info: var(--ramp-pale-purple-800); --color-bg-menu-selected: var(--ramp-purple-500); --color-bg-menu-selected-hover: var(--ramp-purple-600); --color-bg-menu-selected-pressed: var(--ramp-purple-600); --color-bg-menu-selected-secondary: var(--ramp-pale-purple-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-onselected: var(--ramp-pale-purple-500); --color-bg-selected: var(--ramp-pale-purple-700); --color-bg-selected-hover: var(--ramp-pale-purple-600); --color-bg-selected-pressed: var(--ramp-pale-purple-500); --color-bg-selected-secondary: var(--ramp-pale-purple-800); --color-bg-selected-strong: var(--ramp-purple-800); --color-bg-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-strong-hover: var(--ramp-purple-700); --color-bg-strong-pressed: var(--ramp-purple-600); --color-bg-toolbar-selected: var(--ramp-purple-500); --color-bg-toolbar-selected-hover: var(--ramp-purple-600); --color-bg-toolbar-selected-pressed: var(--ramp-purple-600); --color-bg-toolbar-selected-secondary: var(--ramp-purple-700); --color-bg-tooltip-selected: var(--ramp-purple-500); --color-bg-tooltip-selected-hover: var(--ramp-purple-600); --color-bg-tooltip-selected-pressed: var(--ramp-purple-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-purple-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-purple-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-pale-purple-700); --color-border-brand-strong: var(--ramp-purple-400); --color-border-menu-onselected: var(--ramp-purple-400); --color-border-menu-selected: var(--ramp-purple-500); --color-border-menu-selected-strong: var(--ramp-purple-400); --color-border-onbrand: var(--ramp-purple-600); --color-border-onselected: var(--ramp-pale-purple-500); --color-border-selected: var(--ramp-purple-500); --color-border-selected-strong: var(--ramp-purple-400); --color-border-toolbar-selected: var(--ramp-purple-500); --color-border-toolbar-selected-strong: var(--ramp-purple-400); --color-border-tooltip-onselected: var(--ramp-purple-600); --color-border-tooltip-selected: var(--ramp-purple-500); --color-border-tooltip-selected-strong: var(--ramp-purple-400); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-300); --color-fsNodeSymbolSelectedSecondary: var(--ramp-pale-purple-400); --color-fsSnappingOverlay: var(--ramp-blue-600); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-icon-brand: var(--ramp-purple-400); --color-icon-brand-pressed: var(--ramp-purple-500); --color-icon-brand-secondary: var(--ramp-purple-600); --color-icon-brand-tertiary: var(--ramp-pale-purple-800); --color-icon-menu-pressed: var(--ramp-purple-500); --color-icon-menu-selected: var(--ramp-purple-400); --color-icon-menu-selected-secondary: var(--ramp-purple-400); --color-icon-menu-selected-tertiary: var(--ramp-purple-400); --color-icon-pressed: var(--ramp-purple-600); --color-icon-selected: var(--ramp-purple-400); --color-icon-toolbar-pressed: var(--ramp-purple-500); --color-icon-toolbar-selected: var(--ramp-purple-400); --color-icon-tooltip-pressed: var(--ramp-purple-500); --color-icon-tooltip-selected: var(--ramp-purple-400); --color-text-brand: var(--ramp-purple-400); --color-text-menu-selected: var(--ramp-purple-400); --color-text-selected: var(--ramp-purple-400); --color-text-toolbar-selected: var(--ramp-purple-400); --color-text-tooltip-selected: var(--ramp-purple-400); --color-texthighlight: #974aff66; } [data-preferred-theme="dark"][data-editor-theme="dev-handoff"], :where([data-preferred-theme="dark"] [data-editor-theme="dev-handoff"]) { --color-bg-brand: var(--ramp-green-500); --color-bg-brand-hover: var(--ramp-green-600); --color-bg-brand-pressed: var(--ramp-green-700); --color-bg-brand-secondary: var(--ramp-green-700); --color-bg-brand-tertiary: var(--ramp-pale-green-900); --color-bg-brand-tertiary-hover: var(--ramp-pale-green-800); --color-bg-brand-tertiary-pressed: var(--ramp-pale-green-700); --color-bg-info: var(--ramp-pale-green-800); --color-bg-menu-selected: var(--ramp-green-500); --color-bg-menu-selected-hover: var(--ramp-green-600); --color-bg-menu-selected-pressed: var(--ramp-green-600); --color-bg-menu-selected-secondary: var(--ramp-pale-green-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-green-800); --color-bg-onselected: var(--ramp-pale-green-500); --color-bg-selected: var(--ramp-pale-green-700); --color-bg-selected-hover: var(--ramp-pale-green-600); --color-bg-selected-pressed: var(--ramp-pale-green-500); --color-bg-selected-secondary: var(--ramp-pale-green-800); --color-bg-selected-strong: var(--ramp-green-500); --color-bg-selected-tertiary: var(--ramp-pale-green-800); --color-bg-strong-hover: var(--ramp-green-600); --color-bg-strong-pressed: var(--ramp-green-700); --color-bg-toolbar-selected: var(--ramp-green-500); --color-bg-toolbar-selected-hover: var(--ramp-green-600); --color-bg-toolbar-selected-pressed: var(--ramp-green-600); --color-bg-toolbar-selected-secondary: var(--ramp-green-700); --color-bg-tooltip-selected: var(--ramp-green-500); --color-bg-tooltip-selected-hover: var(--ramp-green-600); --color-bg-tooltip-selected-pressed: var(--ramp-green-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-green-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-green-800); --color-bgselectedarea: #14ae5c33; --color-border-brand: var(--ramp-pale-green-700); --color-border-brand-strong: var(--ramp-green-400); --color-border-menu-onselected: var(--ramp-green-400); --color-border-menu-selected: var(--ramp-green-500); --color-border-menu-selected-strong: var(--ramp-green-400); --color-border-onbrand: var(--ramp-green-600); --color-border-onselected: var(--ramp-pale-green-500); --color-border-selected: var(--ramp-green-500); --color-border-selected-strong: var(--ramp-green-400); --color-border-toolbar-selected: var(--ramp-green-500); --color-border-toolbar-selected-strong: var(--ramp-green-400); --color-border-tooltip-onselected: var(--ramp-green-600); --color-border-tooltip-selected: var(--ramp-green-500); --color-border-tooltip-selected-strong: var(--ramp-green-400); --color-fsAutoFillHighlight: #0da8ff33; --color-icon-brand: var(--ramp-green-400); --color-icon-brand-pressed: var(--ramp-green-500); --color-icon-brand-secondary: var(--ramp-green-600); --color-icon-brand-tertiary: var(--ramp-pale-green-800); --color-icon-menu-pressed: var(--ramp-green-500); --color-icon-menu-selected: var(--ramp-green-400); --color-icon-menu-selected-secondary: var(--ramp-green-400); --color-icon-menu-selected-tertiary: var(--ramp-green-400); --color-icon-pressed: var(--ramp-green-600); --color-icon-selected: var(--ramp-green-400); --color-icon-toolbar-pressed: var(--ramp-green-500); --color-icon-toolbar-selected: var(--ramp-green-400); --color-icon-tooltip-pressed: var(--ramp-green-500); --color-icon-tooltip-selected: var(--ramp-green-400); --color-text-brand: var(--ramp-green-400); --color-text-menu-selected: var(--ramp-green-400); --color-text-selected: var(--ramp-green-400); --color-text-toolbar-selected: var(--ramp-green-400); --color-text-tooltip-selected: var(--ramp-green-400); --color-texthighlight: #14ae5c66; } [data-preferred-theme="light"][data-editor-theme="dev-handoff"], :where([data-preferred-theme="light"] [data-editor-theme="dev-handoff"]) { --color-bg-brand: var(--ramp-green-500); --color-bg-brand-hover: var(--ramp-green-600); --color-bg-brand-pressed: var(--ramp-green-700); --color-bg-brand-secondary: var(--ramp-green-700); --color-bg-brand-tertiary: var(--ramp-green-200); --color-bg-brand-tertiary-hover: var(--ramp-green-300); --color-bg-brand-tertiary-pressed: var(--ramp-green-400); --color-bg-info: var(--ramp-pale-green-200); --color-bg-menu-selected: var(--ramp-green-500); --color-bg-menu-selected-hover: var(--ramp-green-600); --color-bg-menu-selected-pressed: var(--ramp-green-600); --color-bg-menu-selected-secondary: var(--ramp-pale-green-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-green-800); --color-bg-onselected: var(--ramp-green-300); --color-bg-selected: var(--ramp-green-200); --color-bg-selected-hover: var(--ramp-green-300); --color-bg-selected-pressed: var(--ramp-green-400); --color-bg-selected-secondary: var(--ramp-pale-green-100); --color-bg-selected-strong: var(--ramp-green-500); --color-bg-selected-tertiary: var(--ramp-pale-green-100); --color-bg-strong-hover: var(--ramp-green-600); --color-bg-strong-pressed: var(--ramp-green-700); --color-bg-toolbar-selected: var(--ramp-green-500); --color-bg-toolbar-selected-hover: var(--ramp-green-600); --color-bg-toolbar-selected-pressed: var(--ramp-green-600); --color-bg-toolbar-selected-secondary: var(--ramp-green-700); --color-bg-tooltip-selected: var(--ramp-green-500); --color-bg-tooltip-selected-hover: var(--ramp-green-600); --color-bg-tooltip-selected-pressed: var(--ramp-green-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-green-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-green-800); --color-bgselectedarea: #14ae5c33; --color-border-brand: var(--ramp-pale-green-300); --color-border-brand-strong: var(--ramp-green-600); --color-border-menu-onselected: var(--ramp-green-400); --color-border-menu-selected: var(--ramp-green-500); --color-border-menu-selected-strong: var(--ramp-green-400); --color-border-onbrand: var(--ramp-green-600); --color-border-onselected: var(--ramp-green-300); --color-border-selected: var(--ramp-green-500); --color-border-selected-strong: var(--ramp-green-600); --color-border-toolbar-selected: var(--ramp-green-500); --color-border-toolbar-selected-strong: var(--ramp-green-400); --color-border-tooltip-onselected: var(--ramp-green-600); --color-border-tooltip-selected: var(--ramp-green-500); --color-border-tooltip-selected-strong: var(--ramp-green-400); --color-icon-brand: var(--ramp-green-600); --color-icon-brand-pressed: var(--ramp-green-700); --color-icon-brand-secondary: var(--ramp-pale-green-400); --color-icon-brand-tertiary: var(--ramp-pale-green-300); --color-icon-menu-pressed: var(--ramp-green-500); --color-icon-menu-selected: var(--ramp-green-400); --color-icon-menu-selected-secondary: var(--ramp-green-400); --color-icon-menu-selected-tertiary: var(--ramp-green-400); --color-icon-pressed: var(--ramp-green-600); --color-icon-selected: var(--ramp-green-600); --color-icon-toolbar-pressed: var(--ramp-green-500); --color-icon-toolbar-selected: var(--ramp-green-400); --color-icon-tooltip-pressed: var(--ramp-green-500); --color-icon-tooltip-selected: var(--ramp-green-400); --color-text-brand: var(--ramp-green-600); --color-text-menu-selected: var(--ramp-green-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-selected: var(--ramp-green-600); --color-text-toolbar-selected: var(--ramp-green-400); --color-text-tooltip-selected: var(--ramp-green-400); --color-texthighlight: #14ae5c66; } [data-preferred-theme="dark"][data-editor-theme="piper"], :where([data-preferred-theme="dark"] [data-editor-theme="piper"]) { --color-bg-brand: var(--ramp-persimmon-500); --color-bg-brand-hover: var(--ramp-persimmon-600); --color-bg-brand-pressed: var(--ramp-persimmon-700); --color-bg-brand-secondary: var(--ramp-persimmon-700); --color-bg-brand-tertiary: var(--ramp-pale-persimmon-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-persimmon-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-persimmon-600); --color-bg-info: var(--ramp-pale-persimmon-800); --color-bg-menu-selected: var(--ramp-persimmon-500); --color-bg-menu-selected-hover: var(--ramp-persimmon-600); --color-bg-menu-selected-pressed: var(--ramp-persimmon-600); --color-bg-menu-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bg-onselected: var(--ramp-pale-persimmon-500); --color-bg-selected: var(--ramp-pale-persimmon-700); --color-bg-selected-hover: var(--ramp-pale-persimmon-600); --color-bg-selected-pressed: var(--ramp-pale-persimmon-500); --color-bg-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-selected-strong: var(--ramp-persimmon-500); --color-bg-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bg-strong-hover: var(--ramp-persimmon-600); --color-bg-strong-pressed: var(--ramp-persimmon-700); --color-bg-toolbar-selected: var(--ramp-persimmon-500); --color-bg-toolbar-selected-hover: var(--ramp-persimmon-600); --color-bg-toolbar-selected-pressed: var(--ramp-persimmon-600); --color-bg-toolbar-selected-secondary: var(--ramp-persimmon-700); --color-bg-tooltip-selected: var(--ramp-persimmon-500); --color-bg-tooltip-selected-hover: var(--ramp-persimmon-600); --color-bg-tooltip-selected-pressed: var(--ramp-persimmon-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bgselectedarea: #ff5c1633; --color-border-brand: var(--ramp-pale-persimmon-700); --color-border-brand-strong: var(--ramp-persimmon-400); --color-border-menu-onselected: var(--ramp-persimmon-400); --color-border-menu-selected: var(--ramp-persimmon-500); --color-border-menu-selected-strong: var(--ramp-persimmon-400); --color-border-onbrand: var(--ramp-persimmon-600); --color-border-onselected: var(--ramp-pale-persimmon-500); --color-border-selected: var(--ramp-persimmon-500); --color-border-selected-strong: var(--ramp-persimmon-400); --color-border-toolbar-selected: var(--ramp-persimmon-500); --color-border-toolbar-selected-strong: var(--ramp-persimmon-400); --color-border-tooltip-onselected: var(--ramp-persimmon-600); --color-border-tooltip-selected: var(--ramp-persimmon-500); --color-border-tooltip-selected-strong: var(--ramp-persimmon-400); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-300); --color-icon-brand: var(--ramp-persimmon-400); --color-icon-brand-pressed: var(--ramp-persimmon-500); --color-icon-brand-secondary: var(--ramp-persimmon-600); --color-icon-brand-tertiary: var(--ramp-pale-persimmon-800); --color-icon-menu-pressed: var(--ramp-persimmon-500); --color-icon-menu-selected: var(--ramp-persimmon-400); --color-icon-menu-selected-secondary: var(--ramp-persimmon-400); --color-icon-menu-selected-tertiary: var(--ramp-persimmon-400); --color-icon-pressed: var(--ramp-persimmon-600); --color-icon-selected: var(--ramp-persimmon-400); --color-icon-toolbar-pressed: var(--ramp-persimmon-500); --color-icon-toolbar-selected: var(--ramp-persimmon-400); --color-icon-tooltip-pressed: var(--ramp-persimmon-500); --color-icon-tooltip-selected: var(--ramp-persimmon-400); --color-text-brand: var(--ramp-persimmon-400); --color-text-menu-selected: var(--ramp-persimmon-400); --color-text-ondisabled: var(--ramp-grey-800); --color-text-selected: var(--ramp-persimmon-400); --color-text-toolbar-selected: var(--ramp-persimmon-400); --color-text-tooltip-selected: var(--ramp-persimmon-400); --color-texthighlight: #ff5c1666; } [data-preferred-theme="light"][data-editor-theme="piper"], :where([data-preferred-theme="light"] [data-editor-theme="piper"]) { --color-bg-brand: var(--ramp-persimmon-500); --color-bg-brand-hover: var(--ramp-persimmon-600); --color-bg-brand-pressed: var(--ramp-persimmon-700); --color-bg-brand-secondary: var(--ramp-persimmon-700); --color-bg-brand-tertiary: var(--ramp-persimmon-200); --color-bg-brand-tertiary-hover: var(--ramp-persimmon-300); --color-bg-brand-tertiary-pressed: var(--ramp-persimmon-400); --color-bg-info: var(--ramp-persimmon-200); --color-bg-menu-selected: var(--ramp-persimmon-500); --color-bg-menu-selected-hover: var(--ramp-persimmon-600); --color-bg-menu-selected-pressed: var(--ramp-persimmon-600); --color-bg-menu-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bg-onselected: var(--ramp-persimmon-300); --color-bg-selected: var(--ramp-persimmon-200); --color-bg-selected-hover: var(--ramp-persimmon-300); --color-bg-selected-pressed: var(--ramp-persimmon-400); --color-bg-selected-secondary: var(--ramp-persimmon-100); --color-bg-selected-strong: var(--ramp-persimmon-500); --color-bg-selected-tertiary: var(--ramp-persimmon-100); --color-bg-strong-hover: var(--ramp-persimmon-600); --color-bg-strong-pressed: var(--ramp-persimmon-700); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-persimmon-500); --color-bg-toolbar-selected-hover: var(--ramp-persimmon-600); --color-bg-toolbar-selected-pressed: var(--ramp-persimmon-600); --color-bg-toolbar-selected-secondary: var(--ramp-persimmon-700); --color-bg-tooltip-selected: var(--ramp-persimmon-500); --color-bg-tooltip-selected-hover: var(--ramp-persimmon-600); --color-bg-tooltip-selected-pressed: var(--ramp-persimmon-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bgselectedarea: #ff5c1633; --color-border-brand: var(--ramp-persimmon-300); --color-border-brand-strong: var(--ramp-persimmon-600); --color-border-menu-onselected: var(--ramp-persimmon-400); --color-border-menu-selected: var(--ramp-persimmon-500); --color-border-menu-selected-strong: var(--ramp-persimmon-400); --color-border-onbrand: var(--ramp-persimmon-600); --color-border-onselected: var(--ramp-persimmon-300); --color-border-selected: var(--ramp-persimmon-500); --color-border-selected-strong: var(--ramp-persimmon-600); --color-border-toolbar-selected: var(--ramp-persimmon-500); --color-border-toolbar-selected-strong: var(--ramp-persimmon-400); --color-border-tooltip-onselected: var(--ramp-persimmon-600); --color-border-tooltip-selected: var(--ramp-persimmon-500); --color-border-tooltip-selected-strong: var(--ramp-persimmon-400); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-500); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-300); --color-icon-brand: var(--ramp-persimmon-600); --color-icon-brand-pressed: var(--ramp-persimmon-700); --color-icon-brand-secondary: var(--ramp-persimmon-400); --color-icon-brand-tertiary: var(--ramp-persimmon-300); --color-icon-menu-pressed: var(--ramp-persimmon-500); --color-icon-menu-selected: var(--ramp-persimmon-400); --color-icon-menu-selected-secondary: var(--ramp-persimmon-400); --color-icon-menu-selected-tertiary: var(--ramp-persimmon-400); --color-icon-pressed: var(--ramp-persimmon-600); --color-icon-selected: var(--ramp-persimmon-600); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-pressed: var(--ramp-persimmon-500); --color-icon-toolbar-selected: var(--ramp-persimmon-400); --color-icon-tooltip-pressed: var(--ramp-persimmon-500); --color-icon-tooltip-selected: var(--ramp-persimmon-400); --color-text-brand: var(--ramp-persimmon-600); --color-text-menu-selected: var(--ramp-persimmon-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-selected: var(--ramp-persimmon-600); --color-text-toolbar-selected: var(--ramp-persimmon-400); --color-text-tooltip-selected: var(--ramp-persimmon-400); --color-texthighlight: #ff5c1666; } [data-preferred-theme="light"][data-editor-theme="seascape"], :where([data-preferred-theme="light"] [data-editor-theme="seascape"]) { --color-bg-brand: var(--ramp-violet-500); --color-bg-brand-hover: var(--ramp-violet-600); --color-bg-brand-pressed: var(--ramp-violet-700); --color-bg-brand-secondary: var(--ramp-violet-700); --color-bg-brand-tertiary: var(--ramp-violet-200); --color-bg-brand-tertiary-hover: var(--ramp-violet-300); --color-bg-brand-tertiary-pressed: var(--ramp-violet-400); --color-bg-info: var(--ramp-violet-200); --color-bg-menu-selected: var(--ramp-violet-500); --color-bg-menu-selected-hover: var(--ramp-violet-600); --color-bg-menu-selected-pressed: var(--ramp-violet-600); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-violet-300); --color-bg-selected: var(--ramp-violet-200); --color-bg-selected-hover: var(--ramp-violet-300); --color-bg-selected-pressed: var(--ramp-violet-400); --color-bg-selected-secondary: var(--ramp-violet-100); --color-bg-selected-strong: var(--ramp-violet-500); --color-bg-selected-tertiary: var(--ramp-violet-100); --color-bg-strong-hover: var(--ramp-violet-600); --color-bg-strong-pressed: var(--ramp-violet-700); --color-bg-toolbar-selected: var(--ramp-violet-500); --color-bg-toolbar-selected-hover: var(--ramp-violet-600); --color-bg-toolbar-selected-pressed: var(--ramp-violet-600); --color-bg-toolbar-selected-secondary: var(--ramp-violet-700); --color-bg-tooltip-selected: var(--ramp-violet-500); --color-bg-tooltip-selected-hover: var(--ramp-violet-600); --color-bg-tooltip-selected-pressed: var(--ramp-violet-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-violet-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-violet-300); --color-border-brand-strong: var(--ramp-violet-600); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-600); --color-border-onselected: var(--ramp-violet-300); --color-border-selected: var(--ramp-violet-500); --color-border-selected-strong: var(--ramp-violet-500); --color-border-strong: var(--ramp-grey-400); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-icon-brand: var(--ramp-violet-600); --color-icon-brand-pressed: var(--ramp-violet-700); --color-icon-brand-secondary: var(--ramp-violet-400); --color-icon-brand-tertiary: var(--ramp-violet-300); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-600); --color-icon-selected: var(--ramp-violet-600); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-600); --color-text-menu-selected: var(--ramp-violet-400); --color-text-selected: var(--ramp-violet-600); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="dark"][data-editor-theme="seascape"], :where([data-preferred-theme="dark"] [data-editor-theme="seascape"]) { --color-bg-brand: var(--ramp-violet-500); --color-bg-brand-hover: var(--ramp-violet-600); --color-bg-brand-pressed: var(--ramp-violet-700); --color-bg-brand-secondary: var(--ramp-violet-700); --color-bg-brand-tertiary: var(--ramp-pale-violet-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-violet-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-violet-600); --color-bg-info: var(--ramp-pale-violet-800); --color-bg-menu-selected: var(--ramp-violet-500); --color-bg-menu-selected-hover: var(--ramp-violet-600); --color-bg-menu-selected-pressed: var(--ramp-violet-600); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-pale-violet-500); --color-bg-selected: var(--ramp-pale-violet-700); --color-bg-selected-hover: var(--ramp-pale-violet-600); --color-bg-selected-pressed: var(--ramp-pale-violet-500); --color-bg-selected-secondary: var(--ramp-pale-violet-800); --color-bg-selected-strong: var(--ramp-violet-500); --color-bg-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-strong-hover: var(--ramp-violet-600); --color-bg-strong-pressed: var(--ramp-violet-700); --color-bg-toolbar-selected: var(--ramp-violet-500); --color-bg-toolbar-selected-hover: var(--ramp-violet-600); --color-bg-toolbar-selected-pressed: var(--ramp-violet-600); --color-bg-toolbar-selected-secondary: var(--ramp-violet-700); --color-bg-tooltip-selected: var(--ramp-violet-500); --color-bg-tooltip-selected-hover: var(--ramp-violet-600); --color-bg-tooltip-selected-pressed: var(--ramp-violet-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-violet-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-pale-violet-700); --color-border-brand-strong: var(--ramp-violet-400); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-600); --color-border-onselected: var(--ramp-pale-violet-500); --color-border-selected: var(--ramp-violet-500); --color-border-selected-strong: var(--ramp-violet-400); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-icon-brand: var(--ramp-violet-400); --color-icon-brand-pressed: var(--ramp-violet-500); --color-icon-brand-secondary: var(--ramp-violet-600); --color-icon-brand-tertiary: var(--ramp-pale-violet-800); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-600); --color-icon-selected: var(--ramp-violet-400); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-400); --color-text-menu-selected: var(--ramp-violet-400); --color-text-selected: var(--ramp-violet-400); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="light"][data-editor-theme="cooper"], :where([data-preferred-theme="light"] [data-editor-theme="cooper"]) { --color-bg-brand: var(--ramp-pink-500); --color-bg-brand-hover: var(--ramp-pink-600); --color-bg-brand-pressed: var(--ramp-pink-700); --color-bg-brand-secondary: var(--ramp-pink-700); --color-bg-brand-tertiary: var(--ramp-pink-200); --color-bg-brand-tertiary-hover: var(--ramp-pink-300); --color-bg-brand-tertiary-pressed: var(--ramp-pink-400); --color-bg-info: var(--ramp-pink-200); --color-bg-menu-selected: var(--ramp-pink-500); --color-bg-menu-selected-hover: var(--ramp-pink-600); --color-bg-menu-selected-pressed: var(--ramp-pink-600); --color-bg-menu-selected-secondary: var(--ramp-pale-pink-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-onselected: var(--ramp-pink-300); --color-bg-selected: var(--ramp-pink-200); --color-bg-selected-hover: var(--ramp-pink-300); --color-bg-selected-pressed: var(--ramp-pink-400); --color-bg-selected-secondary: var(--ramp-pink-100); --color-bg-selected-strong: var(--ramp-pink-500); --color-bg-selected-tertiary: var(--ramp-pink-100); --color-bg-strong-hover: var(--ramp-pink-600); --color-bg-strong-pressed: var(--ramp-pink-700); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-pink-500); --color-bg-toolbar-selected-hover: var(--ramp-pink-600); --color-bg-toolbar-selected-pressed: var(--ramp-pink-600); --color-bg-toolbar-selected-secondary: var(--ramp-pink-700); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip-selected: var(--ramp-pink-500); --color-bg-tooltip-selected-hover: var(--ramp-pink-600); --color-bg-tooltip-selected-pressed: var(--ramp-pink-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-pink-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-pink-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-pink-300); --color-border-brand-strong: var(--ramp-pink-600); --color-border-menu-onselected: var(--ramp-pink-400); --color-border-menu-selected: var(--ramp-pink-500); --color-border-menu-selected-strong: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-pink-600); --color-border-onselected: var(--ramp-pink-300); --color-border-selected: var(--ramp-pink-500); --color-border-selected-strong: var(--ramp-pink-600); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-selected: var(--ramp-pink-500); --color-border-toolbar-selected-strong: var(--ramp-pink-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip-onselected: var(--ramp-pink-600); --color-border-tooltip-selected: var(--ramp-pink-500); --color-border-tooltip-selected-strong: var(--ramp-pink-400); --color-fsTextComponentOnDarkCanvas: var(--ramp-pink-400); --color-fsTextComponentOnLightCanvas: var(--ramp-pink-600); --color-icon-brand: var(--ramp-pink-600); --color-icon-brand-pressed: var(--ramp-pink-700); --color-icon-brand-secondary: var(--ramp-pink-400); --color-icon-brand-tertiary: var(--ramp-pink-300); --color-icon-menu-pressed: var(--ramp-pink-500); --color-icon-menu-selected: var(--ramp-pink-400); --color-icon-menu-selected-secondary: var(--ramp-pink-400); --color-icon-menu-selected-tertiary: var(--ramp-pink-400); --color-icon-pressed: var(--ramp-pink-600); --color-icon-selected: var(--ramp-pink-600); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-pressed: var(--ramp-pink-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-pink-600); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-tooltip-pressed: var(--ramp-pink-500); --color-icon-tooltip-selected: var(--ramp-pink-400); --color-text-brand: var(--ramp-pink-600); --color-text-menu-selected: var(--ramp-pink-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-selected: var(--ramp-pink-600); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-pink-400); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip-selected: var(--ramp-pink-400); --color-texthighlight: #ff24bd66; } [data-preferred-theme="dark"][data-editor-theme="cooper"], :where([data-preferred-theme="dark"] [data-editor-theme="cooper"]) { --color-bg-brand: var(--ramp-pink-500); --color-bg-brand-hover: var(--ramp-pink-600); --color-bg-brand-pressed: var(--ramp-pink-700); --color-bg-brand-secondary: var(--ramp-pink-700); --color-bg-brand-tertiary: var(--ramp-pale-pink-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-pink-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-pink-600); --color-bg-info: var(--ramp-pale-pink-800); --color-bg-menu-selected: var(--ramp-pink-500); --color-bg-menu-selected-hover: var(--ramp-pink-600); --color-bg-menu-selected-pressed: var(--ramp-pink-600); --color-bg-menu-selected-secondary: var(--ramp-pale-pink-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-onselected: var(--ramp-pale-pink-500); --color-bg-selected: var(--ramp-pale-pink-700); --color-bg-selected-hover: var(--ramp-pale-pink-600); --color-bg-selected-pressed: var(--ramp-pale-pink-500); --color-bg-selected-secondary: var(--ramp-pale-pink-800); --color-bg-selected-strong: var(--ramp-pink-800); --color-bg-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-strong-hover: var(--ramp-pink-700); --color-bg-strong-pressed: var(--ramp-pink-600); --color-bg-toolbar-selected: var(--ramp-pink-500); --color-bg-toolbar-selected-hover: var(--ramp-pink-600); --color-bg-toolbar-selected-pressed: var(--ramp-pink-600); --color-bg-toolbar-selected-secondary: var(--ramp-pink-700); --color-bg-tooltip-selected: var(--ramp-pink-500); --color-bg-tooltip-selected-hover: var(--ramp-pink-600); --color-bg-tooltip-selected-pressed: var(--ramp-pink-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-pink-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-pink-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-pink-700); --color-border-brand-strong: var(--ramp-pink-400); --color-border-menu-onselected: var(--ramp-pink-400); --color-border-menu-selected: var(--ramp-pink-500); --color-border-menu-selected-strong: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-pink-600); --color-border-onselected: var(--ramp-pale-pink-500); --color-border-selected: var(--ramp-pink-500); --color-border-selected-strong: var(--ramp-pink-400); --color-border-toolbar-selected: var(--ramp-pink-500); --color-border-toolbar-selected-strong: var(--ramp-pink-400); --color-border-tooltip-onselected: var(--ramp-pink-600); --color-border-tooltip-selected: var(--ramp-pink-500); --color-border-tooltip-selected-strong: var(--ramp-pink-400); --color-fsTextComponentOnDarkCanvas: var(--ramp-pink-400); --color-fsTextComponentOnLightCanvas: var(--ramp-pink-600); --color-icon-brand: var(--ramp-pink-400); --color-icon-brand-pressed: var(--ramp-pink-500); --color-icon-brand-secondary: var(--ramp-pink-600); --color-icon-brand-tertiary: var(--ramp-pale-pink-800); --color-icon-menu-pressed: var(--ramp-pink-500); --color-icon-menu-selected: var(--ramp-pink-400); --color-icon-menu-selected-secondary: var(--ramp-pink-400); --color-icon-menu-selected-tertiary: var(--ramp-pink-400); --color-icon-pressed: var(--ramp-pink-600); --color-icon-selected: var(--ramp-pink-400); --color-icon-toolbar-pressed: var(--ramp-pink-500); --color-icon-toolbar-selected: var(--ramp-pink-400); --color-icon-tooltip-pressed: var(--ramp-pink-500); --color-icon-tooltip-selected: var(--ramp-pink-400); --color-text-brand: var(--ramp-pink-400); --color-text-menu-selected: var(--ramp-pink-400); --color-text-selected: var(--ramp-pink-400); --color-text-toolbar-selected: var(--ramp-pink-400); --color-text-tooltip-selected: var(--ramp-pink-400); --color-texthighlight: #ff24bd66; } [data-preferred-theme="light"][data-editor-theme="sulli"], :where([data-preferred-theme="light"] [data-editor-theme="sulli"]) { --color-bg-brand: var(--ramp-teal-500); --color-bg-brand-hover: var(--ramp-teal-600); --color-bg-brand-pressed: var(--ramp-teal-700); --color-bg-brand-secondary: var(--ramp-teal-700); --color-bg-brand-tertiary: var(--ramp-teal-200); --color-bg-brand-tertiary-hover: var(--ramp-teal-300); --color-bg-brand-tertiary-pressed: var(--ramp-teal-400); --color-bg-info: var(--ramp-teal-200); --color-bg-menu-selected: var(--ramp-teal-500); --color-bg-menu-selected-hover: var(--ramp-teal-600); --color-bg-menu-selected-pressed: var(--ramp-teal-600); --color-bg-menu-selected-secondary: var(--ramp-pale-teal-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-teal-800); --color-bg-onselected: var(--ramp-teal-300); --color-bg-selected: var(--ramp-teal-200); --color-bg-selected-hover: var(--ramp-teal-300); --color-bg-selected-pressed: var(--ramp-teal-400); --color-bg-selected-secondary: var(--ramp-teal-100); --color-bg-selected-strong: var(--ramp-teal-500); --color-bg-selected-tertiary: var(--ramp-teal-100); --color-bg-strong-hover: var(--ramp-teal-600); --color-bg-strong-pressed: var(--ramp-teal-700); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-teal-500); --color-bg-toolbar-selected-hover: var(--ramp-teal-600); --color-bg-toolbar-selected-pressed: var(--ramp-teal-600); --color-bg-toolbar-selected-secondary: var(--ramp-teal-700); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip-selected: var(--ramp-teal-500); --color-bg-tooltip-selected-hover: var(--ramp-teal-600); --color-bg-tooltip-selected-pressed: var(--ramp-teal-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-teal-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-teal-800); --color-bgselectedarea: #00a2c233; --color-border-brand: var(--ramp-teal-300); --color-border-brand-strong: var(--ramp-teal-600); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-border-menu-onselected: var(--ramp-teal-400); --color-border-menu-selected: var(--ramp-teal-500); --color-border-menu-selected-strong: var(--ramp-teal-400); --color-border-onbrand: var(--ramp-teal-600); --color-border-onselected: var(--ramp-teal-300); --color-border-selected: var(--ramp-teal-500); --color-border-selected-strong: var(--ramp-teal-600); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-selected: var(--ramp-teal-500); --color-border-toolbar-selected-strong: var(--ramp-teal-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip-onselected: var(--ramp-teal-600); --color-border-tooltip-selected: var(--ramp-teal-500); --color-border-tooltip-selected-strong: var(--ramp-teal-400); --color-icon-brand: var(--ramp-teal-600); --color-icon-brand-pressed: var(--ramp-teal-700); --color-icon-brand-secondary: var(--ramp-teal-400); --color-icon-brand-tertiary: var(--ramp-teal-300); --color-icon-menu-pressed: var(--ramp-teal-500); --color-icon-menu-selected: var(--ramp-teal-400); --color-icon-menu-selected-secondary: var(--ramp-teal-400); --color-icon-menu-selected-tertiary: var(--ramp-teal-400); --color-icon-pressed: var(--ramp-teal-600); --color-icon-selected: var(--ramp-teal-600); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-pressed: var(--ramp-teal-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-teal-600); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-tooltip-pressed: var(--ramp-teal-500); --color-icon-tooltip-selected: var(--ramp-teal-400); --color-text-brand: var(--ramp-teal-600); --color-text-menu-selected: var(--ramp-teal-400); --color-text-ondisabled: var(--ramp-white-1000); --color-text-selected: var(--ramp-teal-600); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-teal-400); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip-selected: var(--ramp-teal-400); --color-texthighlight: #00a2c266; } [data-preferred-theme="dark"][data-editor-theme="sulli"], :where([data-preferred-theme="dark"] [data-editor-theme="sulli"]) { --color-bg-brand: var(--ramp-teal-500); --color-bg-brand-hover: var(--ramp-teal-600); --color-bg-brand-pressed: var(--ramp-teal-700); --color-bg-brand-secondary: var(--ramp-teal-700); --color-bg-brand-tertiary: var(--ramp-pale-teal-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-teal-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-teal-600); --color-bg-info: var(--ramp-pale-teal-800); --color-bg-menu-selected: var(--ramp-teal-500); --color-bg-menu-selected-hover: var(--ramp-teal-600); --color-bg-menu-selected-pressed: var(--ramp-teal-600); --color-bg-menu-selected-secondary: var(--ramp-pale-teal-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-teal-800); --color-bg-onselected: var(--ramp-pale-teal-500); --color-bg-selected: var(--ramp-pale-teal-700); --color-bg-selected-hover: var(--ramp-pale-teal-600); --color-bg-selected-pressed: var(--ramp-pale-teal-500); --color-bg-selected-secondary: var(--ramp-pale-teal-800); --color-bg-selected-strong: var(--ramp-teal-800); --color-bg-selected-tertiary: var(--ramp-pale-teal-800); --color-bg-strong-hover: var(--ramp-teal-700); --color-bg-strong-pressed: var(--ramp-teal-600); --color-bg-toolbar-selected: var(--ramp-teal-500); --color-bg-toolbar-selected-hover: var(--ramp-teal-600); --color-bg-toolbar-selected-pressed: var(--ramp-teal-600); --color-bg-toolbar-selected-secondary: var(--ramp-teal-700); --color-bg-tooltip-selected: var(--ramp-teal-500); --color-bg-tooltip-selected-hover: var(--ramp-teal-600); --color-bg-tooltip-selected-pressed: var(--ramp-teal-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-teal-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-teal-800); --color-bgselectedarea: #00a2c233; --color-border-brand: var(--ramp-teal-700); --color-border-brand-strong: var(--ramp-teal-400); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-border-menu-onselected: var(--ramp-teal-400); --color-border-menu-selected: var(--ramp-teal-500); --color-border-menu-selected-strong: var(--ramp-teal-400); --color-border-onbrand: var(--ramp-teal-600); --color-border-onselected: var(--ramp-pale-teal-500); --color-border-selected: var(--ramp-teal-500); --color-border-selected-strong: var(--ramp-teal-400); --color-border-toolbar-selected: var(--ramp-teal-500); --color-border-toolbar-selected-strong: var(--ramp-teal-400); --color-border-tooltip-onselected: var(--ramp-teal-600); --color-border-tooltip-selected: var(--ramp-teal-500); --color-border-tooltip-selected-strong: var(--ramp-teal-400); --color-icon-brand: var(--ramp-teal-400); --color-icon-brand-pressed: var(--ramp-teal-500); --color-icon-brand-secondary: var(--ramp-teal-600); --color-icon-brand-tertiary: var(--ramp-pale-teal-800); --color-icon-menu-pressed: var(--ramp-teal-500); --color-icon-menu-selected: var(--ramp-teal-400); --color-icon-menu-selected-secondary: var(--ramp-teal-400); --color-icon-menu-selected-tertiary: var(--ramp-teal-400); --color-icon-pressed: var(--ramp-teal-600); --color-icon-selected: var(--ramp-teal-400); --color-icon-toolbar-pressed: var(--ramp-teal-500); --color-icon-toolbar-selected: var(--ramp-teal-400); --color-icon-tooltip-pressed: var(--ramp-teal-500); --color-icon-tooltip-selected: var(--ramp-teal-400); --color-text-brand: var(--ramp-teal-400); --color-text-menu-selected: var(--ramp-teal-400); --color-text-selected: var(--ramp-teal-400); --color-text-toolbar-selected: var(--ramp-teal-400); --color-text-tooltip-selected: var(--ramp-teal-400); --color-texthighlight: #00a2c266; } [data-preferred-theme="light"][data-editor-theme="bake-filebrowser"], :where([data-preferred-theme="light"] [data-editor-theme="bake-filebrowser"]) { --color-bg-brand: var(--ramp-grey-800); --color-bg-brand-hover: var(--ramp-grey-900); --color-bg-brand-pressed: var(--ramp-grey-900); --color-bg-brand-secondary: var(--ramp-grey-700); --color-bg-brand-tertiary: var(--ramp-grey-200); --color-bg-brand-tertiary-hover: var(--ramp-grey-300); --color-bg-brand-tertiary-pressed: var(--ramp-grey-400); --color-bg-info: var(--ramp-violet-200); --color-bg-menu-selected: var(--ramp-violet-500); --color-bg-menu-selected-hover: var(--ramp-violet-600); --color-bg-menu-selected-pressed: var(--ramp-violet-600); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-grey-300); --color-bg-selected: var(--ramp-grey-200); --color-bg-selected-hover: var(--ramp-grey-300); --color-bg-selected-pressed: var(--ramp-grey-300); --color-bg-selected-secondary: var(--ramp-grey-100); --color-bg-selected-strong: var(--ramp-grey-500); --color-bg-selected-tertiary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-violet-500); --color-bg-toolbar-selected-hover: var(--ramp-violet-600); --color-bg-toolbar-selected-pressed: var(--ramp-violet-600); --color-bg-toolbar-selected-secondary: var(--ramp-violet-700); --color-bg-tooltip-selected: var(--ramp-violet-500); --color-bg-tooltip-selected-hover: var(--ramp-violet-600); --color-bg-tooltip-selected-pressed: var(--ramp-violet-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-violet-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-black-300); --color-border-brand-strong: var(--ramp-black-600); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-black-600); --color-border-onselected: var(--ramp-violet-300); --color-border-selected: var(--ramp-grey-800); --color-border-selected-strong: var(--ramp-grey-1000); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-icon-brand: var(--ramp-black-600); --color-icon-brand-pressed: var(--ramp-black-700); --color-icon-brand-secondary: var(--ramp-black-400); --color-icon-brand-tertiary: var(--ramp-black-300); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-600); --color-icon-selected: var(--ramp-violet-600); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-600); --color-text-menu-selected: var(--ramp-violet-400); --color-text-selected: var(--ramp-violet-600); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="dark"][data-editor-theme="bake-filebrowser"], :where([data-preferred-theme="dark"] [data-editor-theme="bake-filebrowser"]) { --color-bg-brand: var(--ramp-white-1000); --color-bg-brand-hover: var(--ramp-white-1000); --color-bg-brand-pressed: var(--ramp-white-1000); --color-bg-brand-secondary: var(--ramp-white-700); --color-bg-brand-tertiary: var(--ramp-white-300); --color-bg-brand-tertiary-hover: var(--ramp-white-400); --color-bg-brand-tertiary-pressed: var(--ramp-white-500); --color-bg-info: var(--ramp-pale-violet-800); --color-bg-menu-selected: var(--ramp-violet-500); --color-bg-menu-selected-hover: var(--ramp-violet-600); --color-bg-menu-selected-pressed: var(--ramp-violet-600); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-white-500); --color-bg-selected: var(--ramp-white-700); --color-bg-selected-hover: var(--ramp-white-600); --color-bg-selected-pressed: var(--ramp-white-600); --color-bg-selected-secondary: var(--ramp-white-800); --color-bg-selected-strong: var(--ramp-white-500); --color-bg-selected-tertiary: var(--ramp-white-800); --color-bg-toolbar-selected: var(--ramp-violet-500); --color-bg-toolbar-selected-hover: var(--ramp-violet-600); --color-bg-toolbar-selected-pressed: var(--ramp-violet-600); --color-bg-toolbar-selected-secondary: var(--ramp-violet-700); --color-bg-tooltip-selected: var(--ramp-violet-500); --color-bg-tooltip-selected-hover: var(--ramp-violet-600); --color-bg-tooltip-selected-pressed: var(--ramp-violet-600); --color-bg-tooltip-selected-secondary: var(--ramp-pale-violet-800); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-white-400); --color-border-brand-strong: var(--ramp-white-700); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-white-600); --color-border-onselected: var(--ramp-pale-violet-500); --color-border-selected: var(--ramp-white-1000); --color-border-selected-strong: var(--ramp-white-1000); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-icon-brand: var(--ramp-white-500); --color-icon-brand-pressed: var(--ramp-white-400); --color-icon-brand-secondary: var(--ramp-white-300); --color-icon-brand-tertiary: var(--ramp-white-100); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-onbrand: var(--ramp-grey-1000); --color-icon-onbrand-secondary: var(--ramp-grey-600); --color-icon-onbrand-tertiary: var(--ramp-grey-400); --color-icon-pressed: var(--ramp-violet-600); --color-icon-selected: var(--ramp-violet-400); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-400); --color-text-menu-selected: var(--ramp-violet-400); --color-text-onbrand: var(--ramp-grey-1000); --color-text-onbrand-secondary: var(--ramp-grey-600); --color-text-onbrand-tertiary: var(--ramp-grey-400); --color-text-selected: var(--ramp-violet-400); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="light"][data-editor-theme="figspec"], :where([data-preferred-theme="light"] [data-editor-theme="figspec"]) { --color-bg-brand: var(--ramp-yellow-500); --color-bg-brand-hover: var(--ramp-yellow-600); --color-bg-brand-pressed: var(--ramp-yellow-700); --color-bg-brand-secondary: var(--ramp-yellow-700); --color-bg-brand-tertiary: var(--ramp-yellow-200); --color-bg-brand-tertiary-hover: var(--ramp-yellow-300); --color-bg-brand-tertiary-pressed: var(--ramp-yellow-400); --color-bg-menu-selected: var(--ramp-yellow-500); --color-bg-menu-selected-hover: var(--ramp-yellow-600); --color-bg-menu-selected-pressed: var(--ramp-yellow-600); --color-bg-selected: var(--ramp-yellow-200); --color-bg-selected-hover: var(--ramp-yellow-300); --color-bg-selected-pressed: var(--ramp-yellow-400); --color-bg-selected-strong: var(--ramp-yellow-500); --color-bg-toolbar-selected: var(--ramp-yellow-500); --color-bg-toolbar-selected-hover: var(--ramp-yellow-600); --color-bg-toolbar-selected-pressed: var(--ramp-yellow-600); --color-border-brand: var(--ramp-yellow-300); --color-border-brand-strong: var(--ramp-yellow-600); --color-border-selected: var(--ramp-yellow-500); --color-border-selected-strong: var(--ramp-yellow-600); --color-border-toolbar-selected: var(--ramp-yellow-500); --color-icon-brand: var(--ramp-yellow-600); --color-icon-brand-pressed: var(--ramp-yellow-700); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-selected: var(--ramp-yellow-600); --color-icon-toolbar-selected: var(--ramp-yellow-600); --color-text-brand: var(--ramp-yellow-600); --color-text-onbrand: var(--ramp-white-1000); --color-text-selected: var(--ramp-yellow-600); --color-text-toolbar-selected: var(--ramp-yellow-600); } [data-preferred-theme="dark"][data-editor-theme="figspec"], :where([data-preferred-theme="dark"] [data-editor-theme="figspec"]) { --color-bg-brand: var(--ramp-yellow-500); --color-bg-brand-hover: var(--ramp-yellow-400); --color-bg-brand-pressed: var(--ramp-yellow-300); --color-bg-brand-secondary: var(--ramp-yellow-300); --color-bg-brand-tertiary: var(--ramp-yellow-900); --color-bg-brand-tertiary-hover: var(--ramp-yellow-800); --color-bg-brand-tertiary-pressed: var(--ramp-yellow-700); --color-bg-menu-selected: var(--ramp-yellow-500); --color-bg-menu-selected-hover: var(--ramp-yellow-400); --color-bg-menu-selected-pressed: var(--ramp-yellow-400); --color-bg-selected: var(--ramp-yellow-900); --color-bg-selected-hover: var(--ramp-yellow-800); --color-bg-selected-pressed: var(--ramp-yellow-700); --color-bg-selected-strong: var(--ramp-yellow-500); --color-bg-toolbar-selected: var(--ramp-yellow-500); --color-bg-toolbar-selected-hover: var(--ramp-yellow-400); --color-bg-toolbar-selected-pressed: var(--ramp-yellow-400); --color-border-brand: var(--ramp-yellow-700); --color-border-brand-strong: var(--ramp-yellow-400); --color-border-selected: var(--ramp-yellow-500); --color-border-selected-strong: var(--ramp-yellow-400); --color-border-toolbar-selected: var(--ramp-yellow-500); --color-icon-brand: var(--ramp-yellow-400); --color-icon-brand-pressed: var(--ramp-yellow-300); --color-icon-onbrand: var(--ramp-grey-900); --color-icon-selected: var(--ramp-yellow-400); --color-icon-toolbar-selected: var(--ramp-yellow-400); --color-text-brand: var(--ramp-yellow-400); --color-text-onbrand: var(--ramp-grey-900); --color-text-selected: var(--ramp-yellow-400); --color-text-toolbar-selected: var(--ramp-yellow-400); } [data-preferred-theme="light"][data-editor-theme="figspec"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="figspec"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-yellow-500); --color-bg-brand-hover: var(--ramp-yellow-600); --color-bg-brand-pressed: var(--ramp-yellow-700); --color-bg-brand-secondary: var(--ramp-yellow-700); --color-bg-brand-tertiary: var(--ramp-yellow-200); --color-bg-brand-tertiary-hover: var(--ramp-yellow-300); --color-bg-brand-tertiary-pressed: var(--ramp-yellow-400); --color-bg-menu-selected: var(--ramp-yellow-500); --color-bg-menu-selected-hover: var(--ramp-yellow-600); --color-bg-menu-selected-pressed: var(--ramp-yellow-600); --color-bg-selected: var(--ramp-yellow-200); --color-bg-selected-hover: var(--ramp-yellow-300); --color-bg-selected-pressed: var(--ramp-yellow-400); --color-bg-selected-strong: var(--ramp-yellow-500); --color-bg-toolbar-selected: var(--ramp-yellow-500); --color-bg-toolbar-selected-hover: var(--ramp-yellow-600); --color-bg-toolbar-selected-pressed: var(--ramp-yellow-600); --color-border-brand: var(--ramp-yellow-300); --color-border-brand-strong: var(--ramp-yellow-600); --color-border-selected: var(--ramp-yellow-500); --color-border-selected-strong: var(--ramp-yellow-600); --color-border-toolbar-selected: var(--ramp-yellow-500); --color-icon-brand: var(--ramp-yellow-600); --color-icon-brand-pressed: var(--ramp-yellow-700); --color-icon-onbrand: var(--ramp-white-1000); --color-icon-selected: var(--ramp-yellow-600); --color-icon-toolbar-selected: var(--ramp-yellow-600); --color-text-brand: var(--ramp-yellow-600); --color-text-onbrand: var(--ramp-white-1000); --color-text-selected: var(--ramp-yellow-600); --color-text-toolbar-selected: var(--ramp-yellow-600); } [data-preferred-theme="dark"][data-editor-theme="figspec"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="figspec"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-yellow-500); --color-bg-brand-hover: var(--ramp-yellow-400); --color-bg-brand-pressed: var(--ramp-yellow-300); --color-bg-brand-secondary: var(--ramp-yellow-300); --color-bg-brand-tertiary: var(--ramp-yellow-900); --color-bg-brand-tertiary-hover: var(--ramp-yellow-800); --color-bg-brand-tertiary-pressed: var(--ramp-yellow-700); --color-bg-menu-selected: var(--ramp-yellow-500); --color-bg-menu-selected-hover: var(--ramp-yellow-400); --color-bg-menu-selected-pressed: var(--ramp-yellow-400); --color-bg-selected: var(--ramp-yellow-900); --color-bg-selected-hover: var(--ramp-yellow-800); --color-bg-selected-pressed: var(--ramp-yellow-700); --color-bg-selected-strong: var(--ramp-yellow-500); --color-bg-toolbar-selected: var(--ramp-yellow-500); --color-bg-toolbar-selected-hover: var(--ramp-yellow-400); --color-bg-toolbar-selected-pressed: var(--ramp-yellow-400); --color-border-brand: var(--ramp-yellow-700); --color-border-brand-strong: var(--ramp-yellow-400); --color-border-selected: var(--ramp-yellow-500); --color-border-selected-strong: var(--ramp-yellow-400); --color-border-toolbar-selected: var(--ramp-yellow-500); --color-icon-brand: var(--ramp-yellow-400); --color-icon-brand-pressed: var(--ramp-yellow-300); --color-icon-onbrand: var(--ramp-grey-900); --color-icon-selected: var(--ramp-yellow-400); --color-icon-toolbar-selected: var(--ramp-yellow-400); --color-text-brand: var(--ramp-yellow-400); --color-text-onbrand: var(--ramp-grey-900); --color-text-selected: var(--ramp-yellow-400); --color-text-toolbar-selected: var(--ramp-yellow-400); } [data-preferred-theme="dark"][data-enhanced-contrast], [data-preferred-theme="dark"][data-editor-theme="design"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="design"][data-enhanced-contrast]) { --color-bg-assistive: var(--ramp-pink-400); --color-bg-assistive-hover: var(--ramp-pink-300); --color-bg-assistive-pressed: var(--ramp-pink-300); --color-bg-assistive-secondary: var(--ramp-pink-300); --color-bg-brand: var(--ramp-blue-400); --color-bg-brand-hover: var(--ramp-blue-300); --color-bg-brand-pressed: var(--ramp-blue-200); --color-bg-brand-secondary: var(--ramp-blue-400); --color-bg-component: var(--ramp-purple-200); --color-fsBorderSelectedImmutableNode: var(--color-bg-fs-component); --color-fsBorderSelectedImmutableNodeSecondary: var(--color-bg-fs-component); --color-bg-component-hover: var(--ramp-purple-300); --color-bg-component-pressed: var(--ramp-purple-400); --color-bg-component-secondary: var(--ramp-pale-purple-400); --color-bg-danger: var(--ramp-red-200); --color-bg-danger-hover: var(--ramp-red-300); --color-bg-danger-pressed: var(--ramp-red-400); --color-bg-danger-secondary: var(--ramp-pale-red-400); --color-bg-design: var(--ramp-blue-400); --color-bg-design-hover: var(--ramp-blue-300); --color-bg-design-pressed: var(--ramp-blue-300); --color-bg-design-secondary: var(--ramp-blue-400); --color-bg-design-tertiary: var(--ramp-pale-blue-700); --color-bg-figjam: var(--ramp-purple-400); --color-bg-figjam-hover: var(--ramp-purple-300); --color-bg-figjam-pressed: var(--ramp-purple-300); --color-bg-figjam-secondary: var(--ramp-purple-300); --color-bg-figjam-tertiary: var(--ramp-purple-800); --color-bg-handoff: var(--ramp-green-400); --color-bg-handoff-hover: var(--ramp-green-300); --color-bg-handoff-pressed: var(--ramp-green-200); --color-bg-handoff-secondary: var(--ramp-pale-green-400); --color-bg-handoff-tertiary: var(--ramp-green-800); --color-bg-measure: var(--ramp-red-200); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-bg-measure-hover: var(--ramp-red-300); --color-bg-measure-pressed: var(--ramp-red-400); --color-bg-measure-secondary: var(--ramp-pale-red-400); --color-bg-menu-hover: var(--ramp-grey-400); --color-bg-menu-selected: var(--ramp-blue-400); --color-bg-menu-selected-hover: var(--ramp-blue-300); --color-bg-menu-selected-pressed: var(--ramp-blue-300); --color-bg-selected: var(--ramp-pale-blue-800); --color-bg-selected-secondary: var(--ramp-pale-blue-900); --color-bg-selected-strong: var(--ramp-blue-400); --color-bg-strong-hover: var(--ramp-blue-500); --color-bg-strong-pressed: var(--ramp-blue-600); --color-bg-success: var(--ramp-green-400); --color-bg-success-hover: var(--ramp-green-300); --color-bg-success-pressed: var(--ramp-green-200); --color-bg-success-secondary: var(--ramp-pale-green-400); --color-bg-template: var(--ramp-pink-200); --color-bg-template-secondary: var(--ramp-pale-pink-400); --color-bg-toolbar-selected: var(--ramp-blue-400); --color-bg-toolbar-selected-hover: var(--ramp-blue-300); --color-bg-toolbar-selected-pressed: var(--ramp-blue-300); --color-bg-toolbar-selected-secondary: var(--ramp-blue-400); --color-bg-tooltip-selected: var(--ramp-blue-400); --color-bg-tooltip-selected-hover: var(--ramp-blue-300); --color-bg-tooltip-selected-pressed: var(--ramp-blue-300); --color-bg-tooltip-selected-secondary: var(--ramp-blue-400); --color-bgannotationblue: var(--ramp-blue-400); --color-bgannotationgreen: var(--ramp-green-400); --color-bgannotationorange: var(--ramp-orange-400); --color-bgannotationpink: var(--ramp-pink-400); --color-bgannotationpurple: var(--ramp-purple-400); --color-bgannotationred: var(--ramp-red-400); --color-bgannotationteal: var(--ramp-teal-400); --color-bgannotationyellow: var(--ramp-yellow-300); --color-bgswitchoff: var(--ramp-grey-500); --color-border: var(--ramp-grey-500); --color-border-assistive: var(--ramp-pink-400); --color-border-assistive-strong: var(--ramp-pink-300); --color-border-fs-assistive-strong: var(--color-border-assistive-strong); --color-border-brand: var(--ramp-blue-400); --color-border-brand-strong: var(--ramp-blue-300); --color-border-component: var(--ramp-purple-300); --color-border-component-hover: var(--ramp-purple-100); --color-border-component-selected: var(--ramp-purple-200); --color-border-component-strong: var(--ramp-purple-100); --color-border-danger: var(--ramp-red-400); --color-border-danger-strong: var(--ramp-red-100); --color-border-design: var(--ramp-blue-400); --color-border-design-strong: var(--ramp-blue-300); --color-border-figjam: var(--ramp-purple-300); --color-border-figjam-strong: var(--ramp-purple-200); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-handoff: var(--ramp-green-400); --color-border-handoff-strong: var(--ramp-green-300); --color-border-measure: var(--ramp-red-400); --color-border-measure-strong: var(--ramp-red-100); --color-border-onassistive: var(--ramp-pink-800); --color-border-onassistive-strong: var(--ramp-pink-1000); --color-border-onbrand: var(--ramp-blue-800); --color-border-onbrand-strong: var(--ramp-blue-1000); --color-border-oncomponent: var(--ramp-purple-800); --color-border-oncomponent-strong: var(--ramp-purple-1000); --color-border-ondanger: var(--ramp-red-800); --color-border-ondanger-strong: var(--ramp-red-1000); --color-border-ondesign: var(--ramp-blue-800); --color-border-ondesign-strong: var(--ramp-blue-1000); --color-border-onfigjam: var(--ramp-purple-800); --color-border-onfigjam-strong: var(--ramp-purple-1000); --color-border-onmeasure: var(--ramp-red-800); --color-border-onmeasure-strong: var(--ramp-red-1000); --color-border-onselected: var(--ramp-pale-blue-400); --color-border-onsuccess: var(--ramp-green-900); --color-border-onsuccess-strong: var(--ramp-green-1000); --color-border-ontemplate: var(--ramp-pink-800); --color-border-ontemplate-strong: var(--ramp-pink-1000); --color-border-onwarning: var(--ramp-pale-yellow-800); --color-border-onwarning-strong: var(--ramp-yellow-1000); --color-border-selected: var(--ramp-blue-400); --color-border-selected-strong: var(--ramp-blue-300); --color-border-success: var(--ramp-green-400); --color-border-success-strong: var(--ramp-green-100); --color-border-template-strong: var(--ramp-pink-100); --color-border-warning: var(--ramp-yellow-400); --color-border-warning-strong: var(--ramp-yellow-300); --color-borderplacecrosshair: var(--ramp-black-200); --color-borderselectedec: var(--ramp-blue-500); --color-bordertranslucent: var(--ramp-white-400); --color-bordertranslucentstrong: var(--ramp-white-400); --color-conditionalborder: var(--ramp-grey-500); --color-controliconoutline: var(--ramp-white-200); --color-controlknoboffoutline: var(--ramp-white-400); --color-fsBgHeaderOnDarkCanvas: #2c2c2ce5; --color-fsBgHeaderOnLightCanvas: #e6e6e6e5; --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-600); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-600); --color-fsCodeNodeBorder: var(--ramp-green-400); --color-fsNoodleCenterLine: var(--ramp-white-800); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-300); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-800); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-800); --color-gauge: var(--ramp-white-1000); --color-gauge-brand: var(--ramp-blue-300); --color-gauge-danger: var(--ramp-red-300); --color-gauge-secondary: var(--ramp-grey-400); --color-gauge-success: var(--ramp-green-300); --color-gauge-warning: var(--ramp-yellow-200); --color-icon-brand-pressed: var(--ramp-blue-400); --color-icon-brand-secondary: var(--ramp-blue-400); --color-icon-brand-tertiary: var(--ramp-pale-blue-800); --color-icon-component: var(--ramp-purple-300); --color-icon-component-pressed: var(--ramp-purple-200); --color-icon-component-secondary: var(--ramp-purple-300); --color-icon-component-tertiary: var(--ramp-purple-300); --color-icon-figjam: var(--ramp-purple-300); --color-icon-figjam-pressed: var(--ramp-purple-200); --color-icon-figjam-secondary: var(--ramp-purple-300); --color-icon-figjam-tertiary: var(--ramp-purple-300); --color-icon-measure: var(--ramp-red-400); --color-icon-menu-hover: var(--ramp-grey-800); --color-icon-menu-onselected: var(--ramp-grey-800); --color-icon-onassistive-secondary: var(--ramp-white-1000); --color-icon-onassistive-tertiary: var(--ramp-white-1000); --color-icon-onbrand: var(--ramp-grey-800); --color-icon-onbrand-secondary: var(--ramp-grey-800); --color-icon-onbrand-tertiary: var(--ramp-grey-800); --color-icon-oncomponent: var(--ramp-grey-800); --color-icon-oncomponent-secondary: var(--ramp-grey-800); --color-icon-oncomponent-tertiary: var(--ramp-grey-800); --color-icon-ondanger: var(--ramp-grey-800); --color-icon-ondanger-secondary: var(--ramp-grey-800); --color-icon-ondanger-tertiary: var(--ramp-grey-800); --color-icon-ondesign: var(--ramp-grey-800); --color-icon-ondesign-secondary: var(--ramp-grey-800); --color-icon-ondesign-tertiary: var(--ramp-grey-800); --color-icon-onfigjam: var(--ramp-grey-800); --color-icon-onfigjam-secondary: var(--ramp-grey-800); --color-icon-onfigjam-tertiary: var(--ramp-grey-800); --color-icon-onmeasure: var(--ramp-grey-800); --color-icon-onmeasure-secondary: var(--ramp-grey-800); --color-icon-onmeasure-tertiary: var(--ramp-grey-800); --color-icon-onselected-secondary: var(--ramp-white-1000); --color-icon-onselected-tertiary: var(--ramp-white-1000); --color-icon-tertiary: var(--ramp-white-500); --color-icon-onsuccess: var(--ramp-grey-800); --color-icon-onsuccess-secondary: var(--ramp-grey-800); --color-icon-onsuccess-tertiary: var(--ramp-grey-800); --color-icon-ontemplate: var(--ramp-grey-800); --color-icon-onwarning-secondary: var(--ramp-black-800); --color-icon-onwarning-tertiary: var(--ramp-black-800); --color-icon-pressed: var(--ramp-blue-400); --color-icon-template: var(--ramp-pink-300); --color-icon-template-secondary: var(--ramp-pink-300); --color-icon-warning-pressed: var(--ramp-yellow-300); --color-iconfavorite: var(--ramp-pale-yellow-500); --color-multiplayergreen: var(--ramp-green-600); --color-multiplayergreenhover: var(--ramp-green-700); --color-multiplayeryellow: var(--ramp-pale-yellow-500); --color-multiplayeryellowhover: var(--ramp-pale-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-pale-yellow-800); --color-template-slot: var(--ramp-pink-300); --color-text-component: var(--ramp-purple-300); --color-text-component-pressed: var(--ramp-purple-200); --color-text-component-secondary: var(--ramp-purple-300); --color-text-component-tertiary: var(--ramp-purple-300); --color-text-figjam: var(--ramp-purple-300); --color-text-figjam-pressed: var(--ramp-purple-200); --color-text-figjam-secondary: var(--ramp-purple-300); --color-text-figjam-tertiary: var(--ramp-purple-300); --color-text-menu-hover: var(--ramp-grey-800); --color-text-menu-onselected: var(--ramp-grey-800); --color-text-onassistive: var(--ramp-grey-800); --color-text-onassistive-secondary: var(--ramp-grey-800); --color-text-onassistive-tertiary: var(--ramp-grey-800); --color-text-onbrand: var(--ramp-grey-800); --color-text-onbrand-secondary: var(--ramp-grey-800); --color-text-onbrand-tertiary: var(--ramp-grey-800); --color-text-oncomponent: var(--ramp-grey-800); --color-text-oncomponent-secondary: var(--ramp-grey-800); --color-text-oncomponent-tertiary: var(--ramp-grey-800); --color-text-ondanger: var(--ramp-grey-800); --color-text-ondanger-secondary: var(--ramp-grey-800); --color-text-ondanger-tertiary: var(--ramp-grey-800); --color-text-ondesign: var(--ramp-grey-800); --color-text-ondesign-secondary: var(--ramp-grey-800); --color-text-ondesign-tertiary: var(--ramp-grey-800); --color-text-onfigjam: var(--ramp-grey-800); --color-text-onfigjam-secondary: var(--ramp-grey-800); --color-text-onfigjam-tertiary: var(--ramp-grey-800); --color-text-onmeasure: var(--ramp-grey-800); --color-text-onmeasure-secondary: var(--ramp-grey-800); --color-text-onmeasure-tertiary: var(--ramp-grey-800); --color-text-onselected: var(--ramp-white-1000); --color-text-onselected-secondary: var(--ramp-white-1000); --color-text-secondary: var(--ramp-white-1000); --color-text-onselected-tertiary: var(--ramp-white-1000); --color-text-tertiary: var(--ramp-white-600); --color-text-onsuccess: var(--ramp-grey-800); --color-text-onsuccess-secondary: var(--ramp-grey-800); --color-text-onsuccess-tertiary: var(--ramp-grey-800); --color-text-ontemplate: var(--ramp-grey-800); --color-text-onwarning-secondary: var(--ramp-black-800); --color-text-onwarning-tertiary: var(--ramp-black-800); --color-text-template: var(--ramp-pink-300); --color-text-template-secondary: var(--ramp-pink-300); --color-text-tooltip-disabled: var(--ramp-grey-400); --color-textondarkannotation: var(--ramp-black-800); --color-textondarkcanvassecondary: var(--ramp-white-800); --color-textonlightcanvassecondary: var(--ramp-black-600); } [data-preferred-theme="light"][data-enhanced-contrast], [data-preferred-theme="light"][data-editor-theme="design"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="design"][data-enhanced-contrast]) { --color-bg-assistive: var(--ramp-pink-800); --color-bg-assistive-hover: var(--ramp-pink-900); --color-bg-assistive-pressed: var(--ramp-pink-900); --color-bg-assistive-secondary: var(--ramp-pink-1000); --color-bg-brand: var(--ramp-blue-800); --color-bg-brand-hover: var(--ramp-blue-900); --color-bg-brand-pressed: var(--ramp-blue-1000); --color-bg-brand-secondary: var(--ramp-blue-1000); --color-bg-component: var(--ramp-purple-800); --color-fsBorderSelectedImmutableNode: var(--color-bg-fs-component); --color-fsBorderSelectedImmutableNodeSecondary: var(--color-bg-fs-component); --color-bg-component-hover: var(--ramp-purple-900); --color-bg-component-pressed: var(--ramp-purple-1000); --color-bg-component-secondary: var(--ramp-purple-900); --color-bg-danger: var(--ramp-red-800); --color-bg-danger-hover: var(--ramp-red-900); --color-bg-danger-pressed: var(--ramp-red-1000); --color-bg-danger-secondary: var(--ramp-red-1000); --color-bg-design: var(--ramp-blue-800); --color-bg-design-hover: var(--ramp-blue-900); --color-bg-design-pressed: var(--ramp-blue-900); --color-bg-design-secondary: var(--ramp-blue-1000); --color-bg-figjam: var(--ramp-purple-800); --color-bg-figjam-hover: var(--ramp-purple-900); --color-bg-figjam-pressed: var(--ramp-purple-900); --color-bg-figjam-secondary: var(--ramp-purple-1000); --color-bg-handoff: var(--ramp-green-900); --color-bg-handoff-hover: var(--ramp-green-1000); --color-bg-handoff-pressed: var(--ramp-green-1000); --color-bg-handoff-secondary: var(--ramp-pale-green-1000); --color-bg-measure: var(--ramp-red-800); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-bg-measure-hover: var(--ramp-red-900); --color-bg-measure-pressed: var(--ramp-red-1000); --color-bg-measure-secondary: var(--ramp-red-1000); --color-bg-menu-hover: var(--ramp-grey-400); --color-bg-menu-selected: var(--ramp-blue-400); --color-bg-menu-selected-hover: var(--ramp-blue-300); --color-bg-menu-selected-pressed: var(--ramp-blue-300); --color-bg-selected-strong: var(--ramp-blue-400); --color-bg-strong-hover: var(--ramp-blue-500); --color-bg-strong-pressed: var(--ramp-blue-600); --color-bg-success: var(--ramp-green-900); --color-bg-success-hover: var(--ramp-green-1000); --color-bg-success-pressed: var(--ramp-green-1000); --color-bg-success-secondary: var(--ramp-pale-green-1000); --color-bg-template: var(--ramp-pink-800); --color-bg-template-secondary: var(--ramp-pink-900); --color-bg-toolbar-selected: var(--ramp-blue-800); --color-bg-toolbar-selected-hover: var(--ramp-blue-900); --color-bg-toolbar-selected-pressed: var(--ramp-blue-900); --color-bg-toolbar-selected-secondary: var(--ramp-blue-1000); --color-bg-tooltip-selected: var(--ramp-blue-800); --color-bg-tooltip-selected-hover: var(--ramp-blue-900); --color-bg-tooltip-selected-pressed: var(--ramp-blue-900); --color-bg-tooltip-selected-secondary: var(--ramp-blue-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-blue-200); --color-bg-warning: var(--ramp-pale-yellow-800); --color-bg-warning-hover: var(--ramp-pale-yellow-900); --color-bg-warning-pressed: var(--ramp-pale-yellow-1000); --color-bg-warning-secondary: var(--ramp-pale-yellow-900); --color-bgannotationblue: var(--ramp-blue-700); --color-bgannotationgreen: var(--ramp-green-700); --color-bgannotationpink: var(--ramp-pink-700); --color-bgannotationpurple: var(--ramp-purple-700); --color-bgannotationred: var(--ramp-red-700); --color-bgannotationteal: var(--ramp-teal-700); --color-bgswitchoff: var(--ramp-grey-500); --color-border: var(--ramp-grey-500); --color-border-assistive: var(--ramp-pink-800); --color-border-assistive-strong: var(--ramp-pink-900); --color-border-fs-assistive-strong: var(--color-border-assistive-strong); --color-border-brand: var(--ramp-blue-800); --color-border-brand-strong: var(--ramp-blue-900); --color-border-component: var(--ramp-purple-800); --color-border-component-hover: var(--ramp-purple-1000); --color-border-component-selected: var(--ramp-purple-900); --color-border-component-strong: var(--ramp-purple-1000); --color-border-danger: var(--ramp-red-800); --color-border-danger-strong: var(--ramp-red-900); --color-border-design: var(--ramp-blue-800); --color-border-design-strong: var(--ramp-blue-900); --color-border-figjam: var(--ramp-purple-800); --color-border-figjam-strong: var(--ramp-purple-900); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-handoff: var(--ramp-green-900); --color-border-handoff-strong: var(--ramp-green-1000); --color-border-measure: var(--ramp-red-800); --color-border-measure-strong: var(--ramp-red-900); --color-border-onassistive: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-blue-400); --color-border-oncomponent: var(--ramp-purple-300); --color-border-ondanger: var(--ramp-red-200); --color-border-ondesign: var(--ramp-blue-400); --color-border-onfigjam: var(--ramp-purple-400); --color-border-onfigjam-strong: var(--ramp-white-1000); --color-border-onmeasure: var(--ramp-red-200); --color-border-onselected: var(--ramp-blue-800); --color-border-onsuccess: var(--ramp-green-500); --color-border-ontemplate: var(--ramp-pink-300); --color-border-onwarning: var(--ramp-yellow-400); --color-border-onwarning-strong: var(--ramp-white-1000); --color-border-selected: var(--ramp-blue-800); --color-border-selected-strong: var(--ramp-blue-900); --color-border-success: var(--ramp-green-900); --color-border-success-strong: var(--ramp-green-1000); --color-border-template-strong: var(--ramp-pink-1000); --color-border-warning: var(--ramp-pale-yellow-800); --color-border-warning-strong: var(--ramp-pale-yellow-900); --color-borderplacecrosshair: var(--ramp-white-200); --color-borderselectedec: var(--ramp-blue-600); --color-bordertranslucent: var(--ramp-black-500); --color-bordertranslucentstrong: var(--ramp-black-500); --color-codeaccent: var(--ramp-orange-1000); --color-codeattribute: var(--ramp-black-1000); --color-codeclassname: var(--ramp-blue-700); --color-codecomment: var(--ramp-black-600); --color-codeproperty: var(--ramp-black-1000); --color-codestring: var(--ramp-blue-700); --color-codestylename: var(--ramp-blue-700); --color-codevalue: var(--ramp-pink-700); --color-codevariable: var(--ramp-green-700); --color-controlknoboffoutline: var(--ramp-black-500); --color-fsBgHeaderOnDarkCanvas: #2c2c2ce5; --color-fsBgHeaderOnLightCanvas: #e6e6e6e5; --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-600); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-600); --color-fsCodeNodeBorder: var(--ramp-green-900); --color-fsGridCellOutline: #034ac199; --color-fsGridComponentCellOutline: #681abb99; --color-fsNoodleCenterLine: var(--ramp-white-800); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-300); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-800); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-800); --color-gauge: var(--ramp-grey-800); --color-gauge-brand: var(--ramp-blue-900); --color-gauge-brand-secondary: var(--ramp-pale-blue-500); --color-gauge-danger: var(--ramp-red-800); --color-gauge-danger-secondary: var(--ramp-pale-red-500); --color-gauge-secondary: var(--ramp-grey-500); --color-gauge-success: var(--ramp-green-800); --color-gauge-success-secondary: var(--ramp-pale-green-500); --color-gauge-warning: var(--ramp-pale-yellow-800); --color-gauge-warning-secondary: var(--ramp-pale-yellow-500); --color-icon-assistive: var(--ramp-pink-800); --color-icon-assistive-pressed: var(--ramp-pink-900); --color-icon-brand: var(--ramp-blue-800); --color-icon-brand-pressed: var(--ramp-blue-800); --color-icon-brand-secondary: var(--ramp-blue-800); --color-icon-brand-tertiary: var(--ramp-blue-800); --color-icon-component: var(--ramp-purple-800); --color-icon-component-pressed: var(--ramp-purple-900); --color-icon-component-secondary: var(--ramp-purple-800); --color-icon-component-tertiary: var(--ramp-purple-800); --color-icon-danger: var(--ramp-red-800); --color-icon-danger-hover: var(--ramp-red-900); --color-icon-danger-pressed: var(--ramp-red-900); --color-icon-design: var(--ramp-blue-800); --color-icon-design-pressed: var(--ramp-blue-900); --color-icon-figjam: var(--ramp-purple-800); --color-icon-figjam-pressed: var(--ramp-purple-900); --color-icon-figjam-secondary: var(--ramp-purple-800); --color-icon-figjam-tertiary: var(--ramp-purple-800); --color-icon-handoff: var(--ramp-green-900); --color-icon-handoff-pressed: var(--ramp-green-1000); --color-icon-measure: var(--ramp-red-800); --color-icon-measure-hover: var(--ramp-red-900); --color-icon-measure-pressed: var(--ramp-red-900); --color-icon-menu-hover: var(--ramp-grey-800); --color-icon-menu-onselected: var(--ramp-grey-800); --color-icon-onassistive-secondary: var(--ramp-white-1000); --color-icon-onassistive-tertiary: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-1000); --color-icon-onbrand-tertiary: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-1000); --color-icon-oncomponent-tertiary: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-1000); --color-icon-ondanger-tertiary: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-1000); --color-icon-ondesign-tertiary: var(--ramp-white-1000); --color-icon-ondisabled: var(--ramp-grey-500); --color-icon-onfigjam-secondary: var(--ramp-white-1000); --color-icon-onfigjam-tertiary: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-1000); --color-icon-onmeasure-tertiary: var(--ramp-white-1000); --color-icon-onselected: var(--ramp-black-1000); --color-icon-onselected-secondary: var(--ramp-black-1000); --color-icon-secondary: var(--ramp-black-600); --color-icon-onselected-tertiary: var(--ramp-black-1000); --color-icon-tertiary: var(--ramp-black-600); --color-icon-onsuccess-secondary: var(--ramp-white-1000); --color-icon-onsuccess-tertiary: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-white-1000); --color-icon-onwarning-secondary: var(--ramp-white-1000); --color-icon-onwarning-tertiary: var(--ramp-white-1000); --color-icon-pressed: var(--ramp-blue-800); --color-icon-selected: var(--ramp-blue-800); --color-icon-success: var(--ramp-green-900); --color-icon-success-pressed: var(--ramp-green-1000); --color-icon-template: var(--ramp-pink-800); --color-icon-template-secondary: var(--ramp-pink-800); --color-icon-warning: var(--ramp-pale-yellow-800); --color-icon-warning-pressed: var(--ramp-pale-yellow-900); --color-iconfavorite: var(--ramp-pale-yellow-500); --color-multiplayergreen: var(--ramp-green-600); --color-multiplayergreenhover: var(--ramp-green-700); --color-multiplayeryellow: var(--ramp-pale-yellow-500); --color-multiplayeryellowhover: var(--ramp-pale-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-pale-yellow-800); --color-template-slot: var(--ramp-pink-800); --color-text-assistive: var(--ramp-pink-800); --color-text-assistive-pressed: var(--ramp-pink-900); --color-text-brand: var(--ramp-blue-800); --color-text-component: var(--ramp-purple-800); --color-text-component-pressed: var(--ramp-purple-900); --color-text-component-secondary: var(--ramp-purple-800); --color-text-component-tertiary: var(--ramp-purple-800); --color-text-danger: var(--ramp-red-800); --color-text-design: var(--ramp-blue-800); --color-text-design-pressed: var(--ramp-blue-900); --color-text-figjam: var(--ramp-purple-800); --color-text-figjam-pressed: var(--ramp-purple-900); --color-text-figjam-secondary: var(--ramp-purple-800); --color-text-figjam-tertiary: var(--ramp-purple-800); --color-text-handoff: var(--ramp-green-900); --color-text-measure: var(--ramp-red-800); --color-text-menu-hover: var(--ramp-grey-800); --color-text-menu-onselected: var(--ramp-grey-800); --color-text-onassistive-secondary: var(--ramp-white-1000); --color-text-onassistive-tertiary: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-1000); --color-text-onbrand-tertiary: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-1000); --color-text-oncomponent-tertiary: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-1000); --color-text-ondanger-tertiary: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-1000); --color-text-ondesign-tertiary: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-1000); --color-text-onfigjam-tertiary: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-1000); --color-text-onmeasure-tertiary: var(--ramp-white-1000); --color-text-onselected: var(--ramp-black-1000); --color-text-onselected-secondary: var(--ramp-black-1000); --color-text-secondary: var(--ramp-black-600); --color-text-onselected-tertiary: var(--ramp-black-1000); --color-text-tertiary: var(--ramp-grey-600); --color-text-onsuccess-secondary: var(--ramp-white-1000); --color-text-onsuccess-tertiary: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-white-1000); --color-text-onwarning-secondary: var(--ramp-white-1000); --color-text-onwarning-tertiary: var(--ramp-white-1000); --color-text-selected: var(--ramp-blue-800); --color-text-success: var(--ramp-green-900); --color-text-template: var(--ramp-pink-800); --color-text-template-secondary: var(--ramp-pink-800); --color-text-warning: var(--ramp-pale-yellow-800); --color-textondarkcanvassecondary: var(--ramp-white-800); --color-textonlightcanvassecondary: var(--ramp-black-600); } [data-preferred-theme="light"][data-editor-theme="whiteboard"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="whiteboard"][data-enhanced-contrast]) { --color-bg-assistive: var(--ramp-pink-800); --color-bg-assistive-hover: var(--ramp-pink-900); --color-bg-assistive-pressed: var(--ramp-pink-900); --color-bg-assistive-secondary: var(--ramp-pink-1000); --color-bg-brand: var(--ramp-purple-800); --color-bg-brand-hover: var(--ramp-purple-900); --color-bg-brand-pressed: var(--ramp-purple-1000); --color-bg-brand-secondary: var(--ramp-purple-1000); --color-bg-brand-tertiary: var(--ramp-purple-200); --color-bg-brand-tertiary-hover: var(--ramp-purple-300); --color-bg-brand-tertiary-pressed: var(--ramp-purple-400); --color-bg-component: var(--ramp-purple-800); --color-bg-component-hover: var(--ramp-purple-900); --color-bg-component-pressed: var(--ramp-purple-1000); --color-bg-component-secondary: var(--ramp-purple-900); --color-bg-danger: var(--ramp-red-800); --color-bg-danger-hover: var(--ramp-red-900); --color-bg-danger-pressed: var(--ramp-red-1000); --color-bg-danger-secondary: var(--ramp-red-1000); --color-bg-design: var(--ramp-blue-800); --color-bg-design-hover: var(--ramp-blue-900); --color-bg-design-pressed: var(--ramp-blue-900); --color-bg-design-secondary: var(--ramp-blue-1000); --color-bg-figjam: var(--ramp-purple-800); --color-bg-fs-measure: var(--color-bg-figjam); --color-bg-figjam-hover: var(--ramp-purple-900); --color-bg-figjam-pressed: var(--ramp-purple-900); --color-bg-figjam-secondary: var(--ramp-purple-1000); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-bg-handoff: var(--ramp-green-900); --color-bg-handoff-hover: var(--ramp-green-1000); --color-bg-handoff-pressed: var(--ramp-green-1000); --color-bg-handoff-secondary: var(--ramp-pale-green-1000); --color-bg-info: var(--ramp-purple-200); --color-bg-measure: var(--ramp-red-800); --color-bg-measure-hover: var(--ramp-red-900); --color-bg-measure-pressed: var(--ramp-red-1000); --color-bg-measure-secondary: var(--ramp-red-1000); --color-bg-menu-hover: var(--ramp-grey-400); --color-bg-menu-selected: var(--ramp-purple-400); --color-bg-menu-selected-hover: var(--ramp-purple-300); --color-bg-menu-selected-pressed: var(--ramp-purple-300); --color-bg-menu-selected-secondary: var(--ramp-pale-purple-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-onselected: var(--ramp-purple-300); --color-bg-selected: var(--ramp-purple-200); --color-bg-selected-hover: var(--ramp-purple-300); --color-bg-selected-pressed: var(--ramp-purple-400); --color-bg-selected-secondary: var(--ramp-purple-100); --color-bg-selected-strong: var(--ramp-purple-400); --color-bg-selected-tertiary: var(--ramp-purple-100); --color-bg-strong-hover: var(--ramp-purple-500); --color-bg-strong-pressed: var(--ramp-purple-600); --color-bg-success: var(--ramp-green-900); --color-bg-success-hover: var(--ramp-green-1000); --color-bg-success-pressed: var(--ramp-green-1000); --color-bg-success-secondary: var(--ramp-pale-green-1000); --color-bg-template: var(--ramp-pink-800); --color-bg-template-secondary: var(--ramp-pink-900); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-purple-800); --color-bg-toolbar-selected-hover: var(--ramp-purple-900); --color-bg-toolbar-selected-pressed: var(--ramp-purple-900); --color-bg-toolbar-selected-secondary: var(--ramp-purple-1000); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip-selected: var(--ramp-purple-800); --color-bg-tooltip-selected-hover: var(--ramp-purple-900); --color-bg-tooltip-selected-pressed: var(--ramp-purple-900); --color-bg-tooltip-selected-secondary: var(--ramp-purple-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-purple-200); --color-bg-warning: var(--ramp-pale-yellow-800); --color-bg-warning-hover: var(--ramp-pale-yellow-900); --color-bg-warning-pressed: var(--ramp-pale-yellow-1000); --color-bg-warning-secondary: var(--ramp-pale-yellow-900); --color-bgannotationblue: var(--ramp-blue-700); --color-bgannotationgreen: var(--ramp-green-700); --color-bgannotationpink: var(--ramp-pink-700); --color-bgannotationpurple: var(--ramp-purple-700); --color-bgannotationred: var(--ramp-red-700); --color-bgannotationteal: var(--ramp-teal-700); --color-bgselectedarea: #974aff33; --color-bgswitchoff: var(--ramp-grey-500); --color-border: var(--ramp-grey-500); --color-border-assistive: var(--ramp-pink-800); --color-border-assistive-strong: var(--ramp-pink-900); --color-border-fs-assistive-strong: var(--color-border-assistive-strong); --color-border-brand: var(--ramp-purple-800); --color-border-brand-strong: var(--ramp-purple-900); --color-border-component: var(--ramp-purple-800); --color-border-component-hover: var(--ramp-purple-1000); --color-border-component-selected: var(--ramp-purple-900); --color-border-component-strong: var(--ramp-purple-1000); --color-border-danger: var(--ramp-red-800); --color-border-danger-strong: var(--ramp-red-900); --color-border-design: var(--ramp-blue-800); --color-border-design-strong: var(--ramp-blue-900); --color-border-figjam: var(--ramp-purple-800); --color-border-figjam-strong: var(--ramp-purple-900); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-handoff: var(--ramp-green-900); --color-border-handoff-strong: var(--ramp-green-1000); --color-border-measure: var(--ramp-red-800); --color-border-measure-strong: var(--ramp-red-900); --color-border-menu-onselected: var(--ramp-purple-400); --color-border-menu-selected: var(--ramp-purple-500); --color-border-menu-selected-strong: var(--ramp-purple-400); --color-border-onassistive: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-purple-400); --color-border-oncomponent: var(--ramp-purple-300); --color-border-ondanger: var(--ramp-red-200); --color-border-ondesign: var(--ramp-blue-400); --color-border-onfigjam: var(--ramp-purple-400); --color-border-onfigjam-strong: var(--ramp-white-1000); --color-border-onmeasure: var(--ramp-red-200); --color-border-onselected: var(--ramp-purple-800); --color-border-onsuccess: var(--ramp-green-500); --color-border-ontemplate: var(--ramp-pink-300); --color-border-onwarning: var(--ramp-yellow-400); --color-border-onwarning-strong: var(--ramp-white-1000); --color-border-selected: var(--ramp-purple-800); --color-border-selected-strong: var(--ramp-purple-900); --color-border-success: var(--ramp-green-900); --color-border-success-strong: var(--ramp-green-1000); --color-border-template-strong: var(--ramp-pink-1000); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-selected: var(--ramp-purple-500); --color-border-toolbar-selected-strong: var(--ramp-purple-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip-onselected: var(--ramp-purple-600); --color-border-tooltip-selected: var(--ramp-purple-500); --color-border-tooltip-selected-strong: var(--ramp-purple-400); --color-border-warning: var(--ramp-pale-yellow-800); --color-border-warning-strong: var(--ramp-pale-yellow-900); --color-borderplacecrosshair: var(--ramp-white-200); --color-borderselectedec: var(--ramp-purple-600); --color-bordertranslucent: var(--ramp-black-500); --color-bordertranslucentstrong: var(--ramp-black-500); --color-codeaccent: var(--ramp-orange-1000); --color-codeattribute: var(--ramp-black-1000); --color-codeclassname: var(--ramp-blue-700); --color-codecomment: var(--ramp-black-600); --color-codeproperty: var(--ramp-black-1000); --color-codestring: var(--ramp-blue-700); --color-codestylename: var(--ramp-blue-700); --color-codevalue: var(--ramp-pink-700); --color-codevariable: var(--ramp-green-700); --color-controlknoboffoutline: var(--ramp-black-500); --color-fsBgHeaderOnDarkCanvas: #2c2c2ce5; --color-fsBgHeaderOnLightCanvas: #e6e6e6e5; --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-600); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-600); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-800); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-600); --color-fsCodeNodeBorder: var(--ramp-green-900); --color-fsGridCellOutline: #034ac199; --color-fsGridComponentCellOutline: #681abb99; --color-fsNodeSymbolSelectedSecondary: var(--ramp-pale-purple-400); --color-fsNoodleCenterLine: var(--ramp-white-800); --color-fsSnappingOverlay: var(--ramp-blue-600); --color-fsTextComponentOnDarkCanvas: var(--ramp-purple-300); --color-fsTextComponentOnLightCanvas: var(--ramp-purple-800); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsTextSelectedOnLightCanvas: var(--ramp-blue-800); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-gauge: var(--ramp-grey-800); --color-gauge-brand: var(--ramp-blue-900); --color-gauge-brand-secondary: var(--ramp-pale-blue-500); --color-gauge-danger: var(--ramp-red-800); --color-gauge-danger-secondary: var(--ramp-pale-red-500); --color-gauge-secondary: var(--ramp-grey-500); --color-gauge-success: var(--ramp-green-800); --color-gauge-success-secondary: var(--ramp-pale-green-500); --color-gauge-warning: var(--ramp-pale-yellow-800); --color-gauge-warning-secondary: var(--ramp-pale-yellow-500); --color-icon-assistive: var(--ramp-pink-800); --color-icon-assistive-pressed: var(--ramp-pink-900); --color-icon-brand: var(--ramp-purple-800); --color-icon-brand-pressed: var(--ramp-purple-800); --color-icon-brand-secondary: var(--ramp-purple-800); --color-icon-brand-tertiary: var(--ramp-purple-300); --color-icon-component: var(--ramp-purple-800); --color-icon-component-pressed: var(--ramp-purple-900); --color-icon-component-secondary: var(--ramp-purple-800); --color-icon-component-tertiary: var(--ramp-purple-800); --color-icon-danger: var(--ramp-red-800); --color-icon-danger-hover: var(--ramp-red-900); --color-icon-danger-pressed: var(--ramp-red-900); --color-icon-design: var(--ramp-blue-800); --color-icon-design-pressed: var(--ramp-blue-900); --color-icon-figjam: var(--ramp-purple-800); --color-icon-figjam-pressed: var(--ramp-purple-900); --color-icon-figjam-secondary: var(--ramp-purple-800); --color-icon-figjam-tertiary: var(--ramp-purple-800); --color-icon-handoff: var(--ramp-green-900); --color-icon-handoff-pressed: var(--ramp-green-1000); --color-icon-measure: var(--ramp-red-800); --color-icon-measure-hover: var(--ramp-red-900); --color-icon-measure-pressed: var(--ramp-red-900); --color-icon-menu-hover: var(--ramp-grey-800); --color-icon-menu-onselected: var(--ramp-grey-800); --color-icon-menu-pressed: var(--ramp-purple-500); --color-icon-menu-selected: var(--ramp-purple-400); --color-icon-menu-selected-secondary: var(--ramp-purple-400); --color-icon-menu-selected-tertiary: var(--ramp-purple-400); --color-icon-onassistive-secondary: var(--ramp-white-1000); --color-icon-onassistive-tertiary: var(--ramp-white-1000); --color-icon-onbrand-secondary: var(--ramp-white-1000); --color-icon-onbrand-tertiary: var(--ramp-white-1000); --color-icon-oncomponent-secondary: var(--ramp-white-1000); --color-icon-oncomponent-tertiary: var(--ramp-white-1000); --color-icon-ondanger-secondary: var(--ramp-white-1000); --color-icon-ondanger-tertiary: var(--ramp-white-1000); --color-icon-ondesign-secondary: var(--ramp-white-1000); --color-icon-ondesign-tertiary: var(--ramp-white-1000); --color-icon-ondisabled: var(--ramp-grey-500); --color-icon-onfigjam-secondary: var(--ramp-white-1000); --color-icon-onfigjam-tertiary: var(--ramp-white-1000); --color-icon-onmeasure-secondary: var(--ramp-white-1000); --color-icon-onmeasure-tertiary: var(--ramp-white-1000); --color-icon-onselected: var(--ramp-black-1000); --color-icon-onselected-secondary: var(--ramp-black-1000); --color-icon-secondary: var(--ramp-black-600); --color-icon-onselected-tertiary: var(--ramp-black-1000); --color-icon-tertiary: var(--ramp-black-600); --color-icon-onsuccess-secondary: var(--ramp-white-1000); --color-icon-onsuccess-tertiary: var(--ramp-white-1000); --color-icon-onwarning: var(--ramp-white-1000); --color-icon-onwarning-secondary: var(--ramp-white-1000); --color-icon-onwarning-tertiary: var(--ramp-white-1000); --color-icon-pressed: var(--ramp-purple-800); --color-icon-selected: var(--ramp-purple-800); --color-icon-success: var(--ramp-green-900); --color-icon-success-pressed: var(--ramp-green-1000); --color-icon-template: var(--ramp-pink-800); --color-icon-template-secondary: var(--ramp-pink-800); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-pressed: var(--ramp-purple-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-purple-600); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-tooltip-pressed: var(--ramp-purple-500); --color-icon-tooltip-selected: var(--ramp-purple-400); --color-icon-warning: var(--ramp-pale-yellow-800); --color-icon-warning-pressed: var(--ramp-pale-yellow-900); --color-iconfavorite: var(--ramp-pale-yellow-500); --color-multiplayergreen: var(--ramp-green-600); --color-multiplayergreenhover: var(--ramp-green-700); --color-multiplayeryellow: var(--ramp-pale-yellow-500); --color-multiplayeryellowhover: var(--ramp-pale-yellow-600); --color-multiplayeryellowsecondary: var(--ramp-pale-yellow-800); --color-template-slot: var(--ramp-pink-800); --color-text-assistive: var(--ramp-pink-800); --color-text-assistive-pressed: var(--ramp-pink-900); --color-text-brand: var(--ramp-purple-800); --color-text-component: var(--ramp-purple-800); --color-text-component-pressed: var(--ramp-purple-900); --color-text-component-secondary: var(--ramp-purple-800); --color-text-component-tertiary: var(--ramp-purple-800); --color-text-danger: var(--ramp-red-800); --color-text-design: var(--ramp-blue-800); --color-text-design-pressed: var(--ramp-blue-900); --color-text-figjam: var(--ramp-purple-800); --color-text-figjam-pressed: var(--ramp-purple-900); --color-text-figjam-secondary: var(--ramp-purple-800); --color-text-figjam-tertiary: var(--ramp-purple-800); --color-text-handoff: var(--ramp-green-900); --color-text-measure: var(--ramp-red-800); --color-text-menu-hover: var(--ramp-grey-800); --color-text-menu-onselected: var(--ramp-grey-800); --color-text-menu-selected: var(--ramp-purple-400); --color-text-onassistive-secondary: var(--ramp-white-1000); --color-text-onassistive-tertiary: var(--ramp-white-1000); --color-text-onbrand-secondary: var(--ramp-white-1000); --color-text-onbrand-tertiary: var(--ramp-white-1000); --color-text-oncomponent-secondary: var(--ramp-white-1000); --color-text-oncomponent-tertiary: var(--ramp-white-1000); --color-text-ondanger-secondary: var(--ramp-white-1000); --color-text-ondanger-tertiary: var(--ramp-white-1000); --color-text-ondesign-secondary: var(--ramp-white-1000); --color-text-ondesign-tertiary: var(--ramp-white-1000); --color-text-onfigjam-secondary: var(--ramp-white-1000); --color-text-onfigjam-tertiary: var(--ramp-white-1000); --color-text-onmeasure-secondary: var(--ramp-white-1000); --color-text-onmeasure-tertiary: var(--ramp-white-1000); --color-text-onselected: var(--ramp-black-1000); --color-text-onselected-secondary: var(--ramp-black-1000); --color-text-secondary: var(--ramp-black-600); --color-text-onselected-tertiary: var(--ramp-black-1000); --color-text-tertiary: var(--ramp-grey-600); --color-text-onsuccess-secondary: var(--ramp-white-1000); --color-text-onsuccess-tertiary: var(--ramp-white-1000); --color-text-onwarning: var(--ramp-white-1000); --color-text-onwarning-secondary: var(--ramp-white-1000); --color-text-onwarning-tertiary: var(--ramp-white-1000); --color-text-selected: var(--ramp-purple-800); --color-text-success: var(--ramp-green-900); --color-text-template: var(--ramp-pink-800); --color-text-template-secondary: var(--ramp-pink-800); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-purple-400); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip-selected: var(--ramp-purple-400); --color-text-warning: var(--ramp-pale-yellow-800); --color-texthighlight: #974aff66; --color-textondarkcanvassecondary: var(--ramp-white-800); --color-textonlightcanvassecondary: var(--ramp-black-600); } [data-preferred-theme="dark"][data-editor-theme="whiteboard"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="whiteboard"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-purple-400); --color-bg-brand-hover: var(--ramp-purple-300); --color-bg-brand-pressed: var(--ramp-purple-200); --color-bg-brand-secondary: var(--ramp-purple-300); --color-bg-brand-tertiary: var(--ramp-pale-purple-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-purple-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-purple-600); --color-bg-fs-measure: var(--color-bg-figjam); --color-bg-info: var(--ramp-pale-purple-800); --color-bg-menu-selected: var(--ramp-purple-400); --color-bg-menu-selected-hover: var(--ramp-purple-300); --color-bg-menu-selected-pressed: var(--ramp-purple-300); --color-bg-menu-selected-secondary: var(--ramp-pale-purple-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-purple-800); --color-bg-onselected: var(--ramp-pale-purple-500); --color-bg-selected: var(--ramp-pale-purple-800); --color-bg-selected-hover: var(--ramp-pale-purple-700); --color-bg-selected-pressed: var(--ramp-pale-purple-600); --color-bg-selected-secondary: var(--ramp-purple-900); --color-bg-selected-strong: var(--ramp-purple-700); --color-bg-selected-tertiary: var(--ramp-purple-900); --color-bg-strong-hover: var(--ramp-purple-800); --color-bg-strong-pressed: var(--ramp-purple-900); --color-bg-toolbar-selected: var(--ramp-purple-400); --color-bg-toolbar-selected-hover: var(--ramp-purple-300); --color-bg-toolbar-selected-pressed: var(--ramp-purple-300); --color-bg-toolbar-selected-secondary: var(--ramp-purple-300); --color-bg-tooltip-selected: var(--ramp-purple-400); --color-bg-tooltip-selected-hover: var(--ramp-purple-300); --color-bg-tooltip-selected-pressed: var(--ramp-purple-300); --color-bg-tooltip-selected-secondary: var(--ramp-purple-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-purple-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-purple-300); --color-border-brand-strong: var(--ramp-purple-200); --color-border-menu-onselected: var(--ramp-purple-400); --color-border-menu-selected: var(--ramp-purple-500); --color-border-menu-selected-strong: var(--ramp-purple-400); --color-border-onbrand: var(--ramp-purple-800); --color-border-onbrand-strong: var(--ramp-purple-1000); --color-border-onselected: var(--ramp-pale-purple-400); --color-border-selected: var(--ramp-purple-400); --color-border-selected-strong: var(--ramp-purple-300); --color-border-toolbar-selected: var(--ramp-purple-500); --color-border-toolbar-selected-strong: var(--ramp-purple-400); --color-border-tooltip-onselected: var(--ramp-purple-600); --color-border-tooltip-selected: var(--ramp-purple-500); --color-border-tooltip-selected-strong: var(--ramp-purple-400); --color-borderselectedec: var(--ramp-purple-400); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-800); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-600); --color-fsNodeSymbolSelectedSecondary: var(--ramp-pale-purple-400); --color-fsSnappingOverlay: var(--ramp-blue-600); --color-fsTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextOnDarkCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-black-500); --color-fsWidgetFrameTextSelectedOnDarkCanvas: var(--ramp-blue-500); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-blue-500); --color-icon-brand: var(--ramp-purple-300); --color-icon-brand-pressed: var(--ramp-purple-300); --color-icon-brand-secondary: var(--ramp-purple-300); --color-icon-brand-tertiary: var(--ramp-pale-purple-800); --color-icon-menu-pressed: var(--ramp-purple-500); --color-icon-menu-selected: var(--ramp-purple-400); --color-icon-menu-selected-secondary: var(--ramp-purple-400); --color-icon-menu-selected-tertiary: var(--ramp-purple-400); --color-icon-pressed: var(--ramp-purple-300); --color-icon-selected: var(--ramp-purple-300); --color-icon-toolbar-pressed: var(--ramp-purple-500); --color-icon-toolbar-selected: var(--ramp-purple-400); --color-icon-tooltip-pressed: var(--ramp-purple-500); --color-icon-tooltip-selected: var(--ramp-purple-400); --color-text-brand: var(--ramp-purple-300); --color-text-menu-selected: var(--ramp-purple-400); --color-text-onselected: var(--ramp-white-800); --color-text-selected: var(--ramp-purple-300); --color-text-toolbar-selected: var(--ramp-purple-400); --color-text-tooltip-selected: var(--ramp-purple-400); --color-texthighlight: #974aff66; } [data-preferred-theme="dark"][data-editor-theme="dev-handoff"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="dev-handoff"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-green-400); --color-bg-brand-hover: var(--ramp-green-300); --color-bg-brand-pressed: var(--ramp-green-200); --color-bg-brand-secondary: var(--ramp-green-300); --color-bg-brand-tertiary: var(--ramp-pale-green-900); --color-bg-brand-tertiary-hover: var(--ramp-pale-green-800); --color-bg-brand-tertiary-pressed: var(--ramp-pale-green-700); --color-bg-info: var(--ramp-pale-green-800); --color-bg-menu-selected: var(--ramp-green-400); --color-bg-menu-selected-hover: var(--ramp-green-300); --color-bg-menu-selected-pressed: var(--ramp-green-300); --color-bg-menu-selected-secondary: var(--ramp-pale-green-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-green-800); --color-bg-onselected: var(--ramp-pale-green-500); --color-bg-selected: var(--ramp-pale-green-800); --color-bg-selected-hover: var(--ramp-pale-green-700); --color-bg-selected-pressed: var(--ramp-pale-green-600); --color-bg-selected-secondary: var(--ramp-pale-green-900); --color-bg-selected-strong: var(--ramp-green-400); --color-bg-selected-tertiary: var(--ramp-pale-green-900); --color-bg-strong-hover: var(--ramp-green-500); --color-bg-strong-pressed: var(--ramp-green-600); --color-bg-toolbar-selected: var(--ramp-green-400); --color-bg-toolbar-selected-hover: var(--ramp-green-300); --color-bg-toolbar-selected-pressed: var(--ramp-green-300); --color-bg-toolbar-selected-secondary: var(--ramp-green-300); --color-bg-tooltip-selected: var(--ramp-green-400); --color-bg-tooltip-selected-hover: var(--ramp-green-300); --color-bg-tooltip-selected-pressed: var(--ramp-green-300); --color-bg-tooltip-selected-secondary: var(--ramp-green-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-green-800); --color-bgselectedarea: #14ae5c33; --color-border-brand: var(--ramp-green-400); --color-border-brand-strong: var(--ramp-green-300); --color-border-menu-onselected: var(--ramp-green-400); --color-border-menu-selected: var(--ramp-green-500); --color-border-menu-selected-strong: var(--ramp-green-400); --color-border-onbrand: var(--ramp-green-900); --color-border-onbrand-strong: var(--ramp-green-1000); --color-border-onselected: var(--ramp-pale-green-400); --color-border-selected: var(--ramp-green-400); --color-border-selected-strong: var(--ramp-green-300); --color-border-toolbar-selected: var(--ramp-green-500); --color-border-toolbar-selected-strong: var(--ramp-green-400); --color-border-tooltip-onselected: var(--ramp-green-600); --color-border-tooltip-selected: var(--ramp-green-500); --color-border-tooltip-selected-strong: var(--ramp-green-400); --color-borderselectedec: var(--ramp-green-500); --color-fsAutoFillHighlight: #0da8ff33; --color-icon-brand: var(--ramp-green-400); --color-icon-brand-pressed: var(--ramp-green-400); --color-icon-brand-secondary: var(--ramp-green-400); --color-icon-brand-tertiary: var(--ramp-pale-green-800); --color-icon-menu-pressed: var(--ramp-green-500); --color-icon-menu-selected: var(--ramp-green-400); --color-icon-menu-selected-secondary: var(--ramp-green-400); --color-icon-menu-selected-tertiary: var(--ramp-green-400); --color-icon-pressed: var(--ramp-green-400); --color-icon-selected: var(--ramp-green-400); --color-icon-toolbar-pressed: var(--ramp-green-500); --color-icon-toolbar-selected: var(--ramp-green-400); --color-icon-tooltip-pressed: var(--ramp-green-500); --color-icon-tooltip-selected: var(--ramp-green-400); --color-text-brand: var(--ramp-green-400); --color-text-menu-selected: var(--ramp-green-400); --color-text-selected: var(--ramp-green-400); --color-text-toolbar-selected: var(--ramp-green-400); --color-text-tooltip-selected: var(--ramp-green-400); --color-texthighlight: #14ae5c66; } [data-preferred-theme="light"][data-editor-theme="dev-handoff"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="dev-handoff"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-green-800); --color-bg-brand-hover: var(--ramp-green-900); --color-bg-brand-pressed: var(--ramp-green-1000); --color-bg-brand-secondary: var(--ramp-green-1000); --color-bg-brand-tertiary: var(--ramp-green-200); --color-bg-brand-tertiary-hover: var(--ramp-green-300); --color-bg-brand-tertiary-pressed: var(--ramp-green-400); --color-bg-info: var(--ramp-pale-green-200); --color-bg-menu-selected: var(--ramp-green-400); --color-bg-menu-selected-hover: var(--ramp-green-300); --color-bg-menu-selected-pressed: var(--ramp-green-300); --color-bg-menu-selected-secondary: var(--ramp-pale-green-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-green-800); --color-bg-onselected: var(--ramp-green-300); --color-bg-selected: var(--ramp-pale-green-200); --color-bg-selected-hover: var(--ramp-pale-green-300); --color-bg-selected-pressed: var(--ramp-pale-green-400); --color-bg-selected-secondary: var(--ramp-pale-green-100); --color-bg-selected-strong: var(--ramp-green-400); --color-bg-selected-tertiary: var(--ramp-pale-green-100); --color-bg-strong-hover: var(--ramp-green-500); --color-bg-strong-pressed: var(--ramp-green-600); --color-bg-toolbar-selected: var(--ramp-green-900); --color-bg-toolbar-selected-hover: var(--ramp-green-1000); --color-bg-toolbar-selected-pressed: var(--ramp-green-1000); --color-bg-toolbar-selected-secondary: var(--ramp-green-1000); --color-bg-tooltip-selected: var(--ramp-green-900); --color-bg-tooltip-selected-hover: var(--ramp-green-1000); --color-bg-tooltip-selected-pressed: var(--ramp-green-1000); --color-bg-tooltip-selected-secondary: var(--ramp-green-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-green-200); --color-bgselectedarea: #14ae5c33; --color-border-brand: var(--ramp-green-900); --color-border-brand-strong: var(--ramp-green-1000); --color-border-menu-onselected: var(--ramp-green-400); --color-border-menu-selected: var(--ramp-green-500); --color-border-menu-selected-strong: var(--ramp-green-400); --color-border-onbrand: var(--ramp-green-500); --color-border-onselected: var(--ramp-pale-green-800); --color-border-selected: var(--ramp-green-900); --color-border-selected-strong: var(--ramp-green-1000); --color-border-toolbar-selected: var(--ramp-green-500); --color-border-toolbar-selected-strong: var(--ramp-green-400); --color-border-tooltip-onselected: var(--ramp-green-600); --color-border-tooltip-selected: var(--ramp-green-500); --color-border-tooltip-selected-strong: var(--ramp-green-400); --color-borderselectedec: var(--ramp-green-600); --color-icon-brand: var(--ramp-green-900); --color-icon-brand-pressed: var(--ramp-green-900); --color-icon-brand-secondary: var(--ramp-green-900); --color-icon-brand-tertiary: var(--ramp-green-900); --color-icon-menu-pressed: var(--ramp-green-500); --color-icon-menu-selected: var(--ramp-green-400); --color-icon-menu-selected-secondary: var(--ramp-green-400); --color-icon-menu-selected-tertiary: var(--ramp-green-400); --color-icon-pressed: var(--ramp-green-900); --color-icon-selected: var(--ramp-green-900); --color-icon-toolbar-pressed: var(--ramp-green-500); --color-icon-toolbar-selected: var(--ramp-green-400); --color-icon-tooltip-pressed: var(--ramp-green-500); --color-icon-tooltip-selected: var(--ramp-green-400); --color-text-brand: var(--ramp-green-900); --color-text-menu-selected: var(--ramp-green-400); --color-text-selected: var(--ramp-green-900); --color-text-toolbar-selected: var(--ramp-green-400); --color-text-tooltip-selected: var(--ramp-green-400); --color-texthighlight: #14ae5c66; } [data-preferred-theme="dark"][data-editor-theme="piper"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="piper"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-persimmon-400); --color-bg-brand-hover: var(--ramp-persimmon-300); --color-bg-brand-pressed: var(--ramp-persimmon-200); --color-bg-brand-secondary: var(--ramp-persimmon-300); --color-bg-brand-tertiary: var(--ramp-pale-persimmon-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-persimmon-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-persimmon-600); --color-bg-info: var(--ramp-pale-persimmon-800); --color-bg-menu-selected: var(--ramp-persimmon-400); --color-bg-menu-selected-hover: var(--ramp-persimmon-300); --color-bg-menu-selected-pressed: var(--ramp-persimmon-300); --color-bg-menu-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bg-onselected: var(--ramp-pale-persimmon-500); --color-bg-selected: var(--ramp-pale-persimmon-800); --color-bg-selected-hover: var(--ramp-pale-persimmon-700); --color-bg-selected-pressed: var(--ramp-pale-persimmon-600); --color-bg-selected-secondary: var(--ramp-pale-persimmon-900); --color-bg-selected-strong: var(--ramp-persimmon-400); --color-bg-selected-tertiary: var(--ramp-pale-persimmon-900); --color-bg-strong-hover: var(--ramp-persimmon-500); --color-bg-strong-pressed: var(--ramp-persimmon-600); --color-bg-toolbar-selected: var(--ramp-persimmon-400); --color-bg-toolbar-selected-hover: var(--ramp-persimmon-300); --color-bg-toolbar-selected-pressed: var(--ramp-persimmon-300); --color-bg-toolbar-selected-secondary: var(--ramp-persimmon-300); --color-bg-tooltip-selected: var(--ramp-persimmon-400); --color-bg-tooltip-selected-hover: var(--ramp-persimmon-300); --color-bg-tooltip-selected-pressed: var(--ramp-persimmon-300); --color-bg-tooltip-selected-secondary: var(--ramp-persimmon-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bgselectedarea: #ff5c1633; --color-border-brand: var(--ramp-persimmon-400); --color-border-brand-strong: var(--ramp-persimmon-200); --color-border-menu-onselected: var(--ramp-persimmon-400); --color-border-menu-selected: var(--ramp-persimmon-500); --color-border-menu-selected-strong: var(--ramp-persimmon-400); --color-border-onbrand: var(--ramp-persimmon-900); --color-border-onbrand-strong: var(--ramp-persimmon-1000); --color-border-onselected: var(--ramp-pale-persimmon-400); --color-border-selected: var(--ramp-persimmon-400); --color-border-selected-strong: var(--ramp-persimmon-300); --color-border-toolbar-selected: var(--ramp-persimmon-500); --color-border-toolbar-selected-strong: var(--ramp-persimmon-400); --color-border-tooltip-onselected: var(--ramp-persimmon-600); --color-border-tooltip-selected: var(--ramp-persimmon-500); --color-border-tooltip-selected-strong: var(--ramp-persimmon-400); --color-borderselectedec: var(--ramp-persimmon-500); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-300); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-600); --color-icon-brand: var(--ramp-persimmon-400); --color-icon-brand-pressed: var(--ramp-persimmon-400); --color-icon-brand-secondary: var(--ramp-persimmon-400); --color-icon-brand-tertiary: var(--ramp-pale-persimmon-800); --color-icon-menu-pressed: var(--ramp-persimmon-500); --color-icon-menu-selected: var(--ramp-persimmon-400); --color-icon-menu-selected-secondary: var(--ramp-persimmon-400); --color-icon-menu-selected-tertiary: var(--ramp-persimmon-400); --color-icon-pressed: var(--ramp-persimmon-400); --color-icon-selected: var(--ramp-persimmon-400); --color-icon-toolbar-pressed: var(--ramp-persimmon-500); --color-icon-toolbar-selected: var(--ramp-persimmon-400); --color-icon-tooltip-pressed: var(--ramp-persimmon-500); --color-icon-tooltip-selected: var(--ramp-persimmon-400); --color-text-brand: var(--ramp-persimmon-400); --color-text-menu-selected: var(--ramp-persimmon-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-selected: var(--ramp-persimmon-400); --color-text-toolbar-selected: var(--ramp-persimmon-400); --color-text-tooltip-selected: var(--ramp-persimmon-400); } [data-preferred-theme="light"][data-editor-theme="piper"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="piper"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-persimmon-800); --color-bg-brand-hover: var(--ramp-persimmon-900); --color-bg-brand-pressed: var(--ramp-persimmon-1000); --color-bg-brand-secondary: var(--ramp-persimmon-1000); --color-bg-brand-tertiary: var(--ramp-persimmon-200); --color-bg-brand-tertiary-hover: var(--ramp-persimmon-300); --color-bg-brand-tertiary-pressed: var(--ramp-persimmon-400); --color-bg-info: var(--ramp-persimmon-200); --color-bg-menu-selected: var(--ramp-persimmon-400); --color-bg-menu-selected-hover: var(--ramp-persimmon-300); --color-bg-menu-selected-pressed: var(--ramp-persimmon-300); --color-bg-menu-selected-secondary: var(--ramp-pale-persimmon-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-persimmon-800); --color-bg-onselected: var(--ramp-persimmon-300); --color-bg-selected: var(--ramp-persimmon-200); --color-bg-selected-hover: var(--ramp-persimmon-300); --color-bg-selected-pressed: var(--ramp-persimmon-400); --color-bg-selected-secondary: var(--ramp-persimmon-100); --color-bg-selected-strong: var(--ramp-persimmon-400); --color-bg-selected-tertiary: var(--ramp-persimmon-100); --color-bg-strong-hover: var(--ramp-persimmon-500); --color-bg-strong-pressed: var(--ramp-persimmon-600); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-persimmon-900); --color-bg-toolbar-selected-hover: var(--ramp-persimmon-1000); --color-bg-toolbar-selected-pressed: var(--ramp-persimmon-1000); --color-bg-toolbar-selected-secondary: var(--ramp-persimmon-1000); --color-bg-tooltip-selected: var(--ramp-persimmon-900); --color-bg-tooltip-selected-hover: var(--ramp-persimmon-1000); --color-bg-tooltip-selected-pressed: var(--ramp-persimmon-1000); --color-bg-tooltip-selected-secondary: var(--ramp-persimmon-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-persimmon-200); --color-bgselectedarea: #ff5c1633; --color-border-brand: var(--ramp-persimmon-900); --color-border-brand-strong: var(--ramp-persimmon-1000); --color-border-menu-onselected: var(--ramp-persimmon-400); --color-border-menu-selected: var(--ramp-persimmon-500); --color-border-menu-selected-strong: var(--ramp-persimmon-400); --color-border-onbrand: var(--ramp-persimmon-400); --color-border-onselected: var(--ramp-persimmon-800); --color-border-selected: var(--ramp-persimmon-900); --color-border-selected-strong: var(--ramp-persimmon-1000); --color-border-toolbar-selected: var(--ramp-persimmon-500); --color-border-toolbar-selected-strong: var(--ramp-persimmon-400); --color-border-tooltip-onselected: var(--ramp-persimmon-600); --color-border-tooltip-selected: var(--ramp-persimmon-500); --color-border-tooltip-selected-strong: var(--ramp-persimmon-400); --color-borderselectedec: var(--ramp-persimmon-600); --color-fsBorderSelectedImmutableNode: var(--ramp-blue-800); --color-fsBorderSelectedImmutableNodeSecondary: var(--ramp-blue-600); --color-icon-brand: var(--ramp-persimmon-900); --color-icon-brand-pressed: var(--ramp-persimmon-900); --color-icon-brand-secondary: var(--ramp-persimmon-900); --color-icon-brand-tertiary: var(--ramp-persimmon-900); --color-icon-menu-pressed: var(--ramp-persimmon-500); --color-icon-menu-selected: var(--ramp-persimmon-400); --color-icon-menu-selected-secondary: var(--ramp-persimmon-400); --color-icon-menu-selected-tertiary: var(--ramp-persimmon-400); --color-icon-pressed: var(--ramp-persimmon-900); --color-icon-selected: var(--ramp-persimmon-900); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-pressed: var(--ramp-persimmon-500); --color-icon-toolbar-selected: var(--ramp-persimmon-400); --color-icon-tooltip-pressed: var(--ramp-persimmon-500); --color-icon-tooltip-selected: var(--ramp-persimmon-400); --color-text-brand: var(--ramp-persimmon-900); --color-text-disabled: var(--ramp-white-400); --color-text-menu-selected: var(--ramp-persimmon-400); --color-text-selected: var(--ramp-persimmon-900); --color-text-toolbar-selected: var(--ramp-persimmon-400); --color-text-tooltip-selected: var(--ramp-persimmon-400); } [data-preferred-theme="light"][data-editor-theme="seascape"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="seascape"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-violet-700); --color-bg-brand-hover: var(--ramp-violet-800); --color-bg-brand-pressed: var(--ramp-violet-900); --color-bg-brand-secondary: var(--ramp-violet-900); --color-bg-brand-tertiary: var(--ramp-violet-200); --color-bg-brand-tertiary-hover: var(--ramp-violet-300); --color-bg-brand-tertiary-pressed: var(--ramp-violet-400); --color-bg-info: var(--ramp-violet-200); --color-bg-menu-selected: var(--ramp-violet-400); --color-bg-menu-selected-hover: var(--ramp-violet-300); --color-bg-menu-selected-pressed: var(--ramp-violet-300); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-violet-300); --color-bg-selected: var(--ramp-violet-200); --color-bg-selected-hover: var(--ramp-violet-300); --color-bg-selected-pressed: var(--ramp-violet-400); --color-bg-selected-secondary: var(--ramp-violet-100); --color-bg-selected-strong: var(--ramp-violet-400); --color-bg-selected-tertiary: var(--ramp-violet-100); --color-bg-strong-hover: var(--ramp-violet-500); --color-bg-strong-pressed: var(--ramp-violet-600); --color-bg-toolbar-selected: var(--ramp-violet-700); --color-bg-toolbar-selected-hover: var(--ramp-violet-800); --color-bg-toolbar-selected-pressed: var(--ramp-violet-800); --color-bg-toolbar-selected-secondary: var(--ramp-violet-900); --color-bg-tooltip-selected: var(--ramp-violet-700); --color-bg-tooltip-selected-hover: var(--ramp-violet-800); --color-bg-tooltip-selected-pressed: var(--ramp-violet-800); --color-bg-tooltip-selected-secondary: var(--ramp-violet-900); --color-bg-tooltip-selected-tertiary: var(--ramp-violet-200); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-violet-800); --color-border-brand-strong: var(--ramp-violet-900); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-400); --color-border-onselected: var(--ramp-violet-800); --color-border-selected: var(--ramp-violet-700); --color-border-selected-strong: var(--ramp-violet-800); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-borderselectedec: var(--ramp-violet-500); --color-icon-brand: var(--ramp-violet-800); --color-icon-brand-pressed: var(--ramp-violet-800); --color-icon-brand-secondary: var(--ramp-violet-800); --color-icon-brand-tertiary: var(--ramp-violet-300); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-800); --color-icon-selected: var(--ramp-violet-800); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-800); --color-text-menu-selected: var(--ramp-violet-400); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-selected: var(--ramp-violet-800); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="dark"][data-editor-theme="seascape"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="seascape"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-violet-400); --color-bg-brand-hover: var(--ramp-violet-300); --color-bg-brand-pressed: var(--ramp-violet-200); --color-bg-brand-secondary: var(--ramp-violet-300); --color-bg-brand-tertiary: var(--ramp-pale-violet-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-violet-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-violet-600); --color-bg-info: var(--ramp-pale-violet-800); --color-bg-menu-selected: var(--ramp-violet-400); --color-bg-menu-selected-hover: var(--ramp-violet-300); --color-bg-menu-selected-pressed: var(--ramp-violet-300); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-pale-violet-500); --color-bg-selected: var(--ramp-pale-violet-800); --color-bg-selected-hover: var(--ramp-pale-violet-700); --color-bg-selected-pressed: var(--ramp-pale-violet-600); --color-bg-selected-secondary: var(--ramp-pale-violet-900); --color-bg-selected-strong: var(--ramp-violet-400); --color-bg-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-strong-hover: var(--ramp-violet-300); --color-bg-strong-pressed: var(--ramp-violet-200); --color-bg-toolbar-selected: var(--ramp-violet-400); --color-bg-toolbar-selected-hover: var(--ramp-violet-300); --color-bg-toolbar-selected-pressed: var(--ramp-violet-300); --color-bg-toolbar-selected-secondary: var(--ramp-violet-300); --color-bg-tooltip-selected: var(--ramp-violet-400); --color-bg-tooltip-selected-hover: var(--ramp-violet-300); --color-bg-tooltip-selected-pressed: var(--ramp-violet-300); --color-bg-tooltip-selected-secondary: var(--ramp-violet-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-violet-400); --color-border-brand-strong: var(--ramp-violet-300); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-800); --color-border-onbrand-strong: var(--ramp-violet-1000); --color-border-onselected: var(--ramp-pale-violet-400); --color-border-selected: var(--ramp-violet-400); --color-border-selected-strong: var(--ramp-violet-300); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-borderselectedec: var(--ramp-violet-400); --color-icon-brand: var(--ramp-violet-400); --color-icon-brand-pressed: var(--ramp-violet-400); --color-icon-brand-secondary: var(--ramp-violet-400); --color-icon-brand-tertiary: var(--ramp-pale-violet-800); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-400); --color-icon-selected: var(--ramp-violet-400); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-400); --color-text-menu-selected: var(--ramp-violet-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-tertiary: var(--ramp-white-500); --color-text-selected: var(--ramp-violet-400); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } [data-preferred-theme="light"][data-editor-theme="cooper"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="cooper"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-pink-800); --color-bg-brand-hover: var(--ramp-pink-900); --color-bg-brand-pressed: var(--ramp-pink-1000); --color-bg-brand-secondary: var(--ramp-pink-1000); --color-bg-brand-tertiary: var(--ramp-pink-200); --color-bg-brand-tertiary-hover: var(--ramp-pink-300); --color-bg-brand-tertiary-pressed: var(--ramp-pink-400); --color-bg-info: var(--ramp-pink-200); --color-bg-menu-selected: var(--ramp-pink-400); --color-bg-menu-selected-hover: var(--ramp-pink-300); --color-bg-menu-selected-pressed: var(--ramp-pink-300); --color-bg-menu-selected-secondary: var(--ramp-pale-pink-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-onselected: var(--ramp-pink-300); --color-bg-selected: var(--ramp-pink-200); --color-bg-selected-hover: var(--ramp-pink-300); --color-bg-selected-pressed: var(--ramp-pink-400); --color-bg-selected-secondary: var(--ramp-pink-100); --color-bg-selected-strong: var(--ramp-pink-400); --color-bg-selected-tertiary: var(--ramp-pink-100); --color-bg-strong-hover: var(--ramp-pink-500); --color-bg-strong-pressed: var(--ramp-pink-700); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-pink-800); --color-bg-toolbar-selected-hover: var(--ramp-pink-900); --color-bg-toolbar-selected-pressed: var(--ramp-pink-900); --color-bg-toolbar-selected-secondary: var(--ramp-pink-1000); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip-selected: var(--ramp-pink-800); --color-bg-tooltip-selected-hover: var(--ramp-pink-900); --color-bg-tooltip-selected-pressed: var(--ramp-pink-900); --color-bg-tooltip-selected-secondary: var(--ramp-pink-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-pink-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-pink-800); --color-border-brand-strong: var(--ramp-pink-900); --color-border-menu-onselected: var(--ramp-pink-400); --color-border-menu-selected: var(--ramp-pink-500); --color-border-menu-selected-strong: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-pink-400); --color-border-onselected: var(--ramp-pink-800); --color-border-selected: var(--ramp-pink-800); --color-border-selected-strong: var(--ramp-pink-900); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-selected: var(--ramp-pink-500); --color-border-toolbar-selected-strong: var(--ramp-pink-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip-onselected: var(--ramp-pink-600); --color-border-tooltip-selected: var(--ramp-pink-500); --color-border-tooltip-selected-strong: var(--ramp-pink-400); --color-borderselectedec: var(--ramp-pink-600); --color-fsTextComponentOnDarkCanvas: var(--ramp-pink-400); --color-fsTextComponentOnLightCanvas: var(--ramp-pink-800); --color-icon-brand: var(--ramp-pink-800); --color-icon-brand-pressed: var(--ramp-pink-800); --color-icon-brand-secondary: var(--ramp-pink-800); --color-icon-brand-tertiary: var(--ramp-pink-300); --color-icon-menu-pressed: var(--ramp-pink-500); --color-icon-menu-selected: var(--ramp-pink-400); --color-icon-menu-selected-secondary: var(--ramp-pink-400); --color-icon-menu-selected-tertiary: var(--ramp-pink-400); --color-icon-pressed: var(--ramp-pink-800); --color-icon-selected: var(--ramp-pink-800); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-pressed: var(--ramp-pink-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-pink-600); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-tooltip-pressed: var(--ramp-pink-500); --color-icon-tooltip-selected: var(--ramp-pink-400); --color-text-brand: var(--ramp-pink-800); --color-text-menu-selected: var(--ramp-pink-400); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-selected: var(--ramp-pink-800); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-pink-400); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip-selected: var(--ramp-pink-400); --color-texthighlight: #ff24bd66; } [data-preferred-theme="dark"][data-editor-theme="cooper"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="cooper"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-pink-400); --color-bg-brand-hover: var(--ramp-pink-300); --color-bg-brand-pressed: var(--ramp-pink-200); --color-bg-brand-secondary: var(--ramp-pink-300); --color-bg-brand-tertiary: var(--ramp-pale-pink-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-pink-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-pink-600); --color-bg-info: var(--ramp-pale-pink-800); --color-bg-menu-selected: var(--ramp-pink-400); --color-bg-menu-selected-hover: var(--ramp-pink-300); --color-bg-menu-selected-pressed: var(--ramp-pink-300); --color-bg-menu-selected-secondary: var(--ramp-pale-pink-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-onselected: var(--ramp-pale-pink-500); --color-bg-selected: var(--ramp-pale-pink-800); --color-bg-selected-hover: var(--ramp-pale-pink-700); --color-bg-selected-pressed: var(--ramp-pale-pink-600); --color-bg-selected-secondary: var(--ramp-pale-pink-900); --color-bg-selected-strong: var(--ramp-pink-700); --color-bg-selected-tertiary: var(--ramp-pale-pink-800); --color-bg-strong-hover: var(--ramp-pink-800); --color-bg-strong-pressed: var(--ramp-pink-900); --color-bg-toolbar-selected: var(--ramp-pink-400); --color-bg-toolbar-selected-hover: var(--ramp-pink-300); --color-bg-toolbar-selected-pressed: var(--ramp-pink-300); --color-bg-toolbar-selected-secondary: var(--ramp-pink-300); --color-bg-tooltip-selected: var(--ramp-pink-400); --color-bg-tooltip-selected-hover: var(--ramp-pink-300); --color-bg-tooltip-selected-pressed: var(--ramp-pink-300); --color-bg-tooltip-selected-secondary: var(--ramp-pink-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-pink-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-pink-400); --color-border-brand-strong: var(--ramp-pink-300); --color-border-menu-onselected: var(--ramp-pink-400); --color-border-menu-selected: var(--ramp-pink-500); --color-border-menu-selected-strong: var(--ramp-pink-400); --color-border-onbrand: var(--ramp-pink-800); --color-border-onbrand-strong: var(--ramp-pink-1000); --color-border-onselected: var(--ramp-pale-pink-400); --color-border-selected: var(--ramp-pink-400); --color-border-selected-strong: var(--ramp-pink-300); --color-border-toolbar-selected: var(--ramp-pink-500); --color-border-toolbar-selected-strong: var(--ramp-pink-400); --color-border-tooltip-onselected: var(--ramp-pink-600); --color-border-tooltip-selected: var(--ramp-pink-500); --color-border-tooltip-selected-strong: var(--ramp-pink-400); --color-borderselectedec: var(--ramp-pink-500); --color-fsTextComponentOnDarkCanvas: var(--ramp-pink-400); --color-fsTextComponentOnLightCanvas: var(--ramp-pink-800); --color-icon-brand: var(--ramp-pink-400); --color-icon-brand-pressed: var(--ramp-pink-400); --color-icon-brand-secondary: var(--ramp-pink-400); --color-icon-brand-tertiary: var(--ramp-pale-pink-800); --color-icon-menu-pressed: var(--ramp-pink-500); --color-icon-menu-selected: var(--ramp-pink-400); --color-icon-menu-selected-secondary: var(--ramp-pink-400); --color-icon-menu-selected-tertiary: var(--ramp-pink-400); --color-icon-pressed: var(--ramp-pink-400); --color-icon-selected: var(--ramp-pink-400); --color-icon-toolbar-pressed: var(--ramp-pink-500); --color-icon-toolbar-selected: var(--ramp-pink-400); --color-icon-tooltip-pressed: var(--ramp-pink-500); --color-icon-tooltip-selected: var(--ramp-pink-400); --color-text-brand: var(--ramp-pink-400); --color-text-menu-selected: var(--ramp-pink-400); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-tertiary: var(--ramp-white-500); --color-text-selected: var(--ramp-pink-400); --color-text-toolbar-selected: var(--ramp-pink-400); --color-text-tooltip-selected: var(--ramp-pink-400); --color-texthighlight: #ff24bd66; } [data-preferred-theme="light"][data-editor-theme="sulli"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="sulli"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-teal-800); --color-bg-brand-hover: var(--ramp-teal-900); --color-bg-brand-pressed: var(--ramp-teal-1000); --color-bg-brand-secondary: var(--ramp-teal-1000); --color-bg-brand-tertiary: var(--ramp-teal-200); --color-bg-brand-tertiary-hover: var(--ramp-teal-300); --color-bg-brand-tertiary-pressed: var(--ramp-teal-400); --color-bg-handoff-pressed: var(--ramp-green-600); --color-bg-info: var(--ramp-teal-200); --color-bg-menu-selected: var(--ramp-teal-400); --color-bg-menu-selected-hover: var(--ramp-teal-300); --color-bg-menu-selected-pressed: var(--ramp-teal-300); --color-bg-menu-selected-secondary: var(--ramp-pale-teal-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-teal-800); --color-bg-onselected: var(--ramp-teal-300); --color-bg-selected: var(--ramp-teal-200); --color-bg-selected-hover: var(--ramp-teal-300); --color-bg-selected-pressed: var(--ramp-teal-400); --color-bg-selected-secondary: var(--ramp-teal-100); --color-bg-selected-strong: var(--ramp-teal-400); --color-bg-selected-tertiary: var(--ramp-teal-100); --color-bg-strong-hover: var(--ramp-teal-500); --color-bg-strong-pressed: var(--ramp-teal-600); --color-bg-toolbar: var(--ramp-white-1000); --color-bg-toolbar-disabled: var(--ramp-grey-300); --color-bg-toolbar-hover: var(--ramp-grey-100); --color-bg-toolbar-pressed: var(--ramp-grey-100); --color-bg-toolbar-secondary: var(--ramp-grey-100); --color-bg-toolbar-selected: var(--ramp-teal-800); --color-bg-toolbar-selected-hover: var(--ramp-teal-900); --color-bg-toolbar-selected-pressed: var(--ramp-teal-900); --color-bg-toolbar-selected-secondary: var(--ramp-teal-1000); --color-bg-toolbar-tertiary: var(--ramp-grey-200); --color-bg-tooltip-selected: var(--ramp-teal-800); --color-bg-tooltip-selected-hover: var(--ramp-teal-900); --color-bg-tooltip-selected-pressed: var(--ramp-teal-900); --color-bg-tooltip-selected-secondary: var(--ramp-teal-1000); --color-bg-tooltip-selected-tertiary: var(--ramp-teal-200); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-teal-800); --color-border-brand-strong: var(--ramp-teal-900); --color-border-menu-onselected: var(--ramp-teal-400); --color-border-menu-selected: var(--ramp-teal-500); --color-border-menu-selected-strong: var(--ramp-teal-400); --color-border-onbrand: var(--ramp-teal-400); --color-border-onselected: var(--ramp-teal-800); --color-border-selected: var(--ramp-teal-800); --color-border-selected-strong: var(--ramp-teal-900); --color-border-toolbar: var(--ramp-grey-200); --color-border-toolbar-disabled: var(--ramp-grey-200); --color-border-toolbar-selected: var(--ramp-teal-500); --color-border-toolbar-selected-strong: var(--ramp-teal-400); --color-border-toolbar-strong: var(--ramp-grey-800); --color-border-tooltip-onselected: var(--ramp-teal-600); --color-border-tooltip-selected: var(--ramp-teal-500); --color-border-tooltip-selected-strong: var(--ramp-teal-400); --color-borderselectedec: var(--ramp-teal-600); --color-icon-brand: var(--ramp-teal-800); --color-icon-brand-pressed: var(--ramp-teal-800); --color-icon-brand-secondary: var(--ramp-teal-800); --color-icon-brand-tertiary: var(--ramp-teal-300); --color-icon-menu-pressed: var(--ramp-teal-500); --color-icon-menu-selected: var(--ramp-teal-400); --color-icon-menu-selected-secondary: var(--ramp-teal-400); --color-icon-menu-selected-tertiary: var(--ramp-teal-400); --color-icon-pressed: var(--ramp-teal-800); --color-icon-selected: var(--ramp-teal-800); --color-icon-toolbar: var(--ramp-black-800); --color-icon-toolbar-disabled: var(--ramp-black-400); --color-icon-toolbar-hover: var(--ramp-black-800); --color-icon-toolbar-ondisabled: var(--ramp-black-400); --color-icon-toolbar-pressed: var(--ramp-teal-500); --color-icon-toolbar-secondary: var(--ramp-black-500); --color-icon-toolbar-secondary-hover: var(--ramp-black-800); --color-icon-toolbar-selected: var(--ramp-teal-600); --color-icon-toolbar-tertiary: var(--ramp-black-400); --color-icon-toolbar-tertiary-hover: var(--ramp-black-800); --color-icon-tooltip-pressed: var(--ramp-teal-500); --color-icon-tooltip-selected: var(--ramp-teal-400); --color-text-brand: var(--ramp-teal-800); --color-text-menu-selected: var(--ramp-teal-400); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-selected: var(--ramp-teal-800); --color-text-toolbar: var(--ramp-black-800); --color-text-toolbar-disabled: var(--ramp-black-400); --color-text-toolbar-hover: var(--ramp-black-800); --color-text-toolbar-secondary: var(--ramp-black-500); --color-text-toolbar-secondary-hover: var(--ramp-black-800); --color-text-toolbar-selected: var(--ramp-teal-400); --color-text-toolbar-tertiary: var(--ramp-black-400); --color-text-toolbar-tertiary-hover: var(--ramp-black-800); --color-text-toolbar-warning: var(--ramp-yellow-1000); --color-text-tooltip-selected: var(--ramp-teal-400); --color-texthighlight: #974aff66; } [data-preferred-theme="dark"][data-editor-theme="sulli"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="sulli"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-teal-400); --color-bg-brand-hover: var(--ramp-teal-300); --color-bg-brand-pressed: var(--ramp-teal-200); --color-bg-brand-secondary: var(--ramp-teal-300); --color-bg-brand-tertiary: var(--ramp-pale-teal-800); --color-bg-brand-tertiary-hover: var(--ramp-pale-teal-700); --color-bg-brand-tertiary-pressed: var(--ramp-pale-teal-600); --color-bg-info: var(--ramp-pale-teal-800); --color-bg-menu-selected: var(--ramp-teal-400); --color-bg-menu-selected-hover: var(--ramp-teal-300); --color-bg-menu-selected-pressed: var(--ramp-teal-300); --color-bg-menu-selected-secondary: var(--ramp-pale-teal-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-teal-800); --color-bg-onselected: var(--ramp-pale-teal-500); --color-bg-selected: var(--ramp-pale-teal-800); --color-bg-selected-hover: var(--ramp-pale-teal-700); --color-bg-selected-pressed: var(--ramp-pale-teal-600); --color-bg-selected-secondary: var(--ramp-teal-900); --color-bg-selected-strong: var(--ramp-teal-700); --color-bg-selected-tertiary: var(--ramp-teal-800); --color-bg-strong-hover: var(--ramp-teal-800); --color-bg-strong-pressed: var(--ramp-teal-900); --color-bg-toolbar-selected: var(--ramp-teal-400); --color-bg-toolbar-selected-hover: var(--ramp-teal-300); --color-bg-toolbar-selected-pressed: var(--ramp-teal-300); --color-bg-toolbar-selected-secondary: var(--ramp-teal-300); --color-bg-tooltip-selected: var(--ramp-teal-400); --color-bg-tooltip-selected-hover: var(--ramp-teal-300); --color-bg-tooltip-selected-pressed: var(--ramp-teal-300); --color-bg-tooltip-selected-secondary: var(--ramp-teal-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-teal-800); --color-bgselectedarea: #974aff33; --color-border-brand: var(--ramp-teal-400); --color-border-brand-strong: var(--ramp-teal-300); --color-border-menu-onselected: var(--ramp-teal-400); --color-border-menu-selected: var(--ramp-teal-500); --color-border-menu-selected-strong: var(--ramp-teal-400); --color-border-onbrand: var(--ramp-teal-800); --color-border-onbrand-strong: var(--ramp-teal-1000); --color-border-onselected: var(--ramp-pale-teal-400); --color-border-selected: var(--ramp-teal-400); --color-border-selected-strong: var(--ramp-teal-300); --color-border-toolbar-selected: var(--ramp-teal-500); --color-border-toolbar-selected-strong: var(--ramp-teal-400); --color-border-tooltip-onselected: var(--ramp-teal-600); --color-border-tooltip-selected: var(--ramp-teal-500); --color-border-tooltip-selected-strong: var(--ramp-teal-400); --color-borderselectedec: var(--ramp-teal-500); --color-fsWidgetFrameTextOnLightCanvas: var(--ramp-purple-500); --color-fsWidgetFrameTextSelectedOnLightCanvas: var(--ramp-purple-500); --color-icon-brand: var(--ramp-teal-400); --color-icon-brand-pressed: var(--ramp-teal-400); --color-icon-brand-secondary: var(--ramp-teal-400); --color-icon-brand-tertiary: var(--ramp-pale-teal-800); --color-icon-menu-pressed: var(--ramp-teal-500); --color-icon-menu-selected: var(--ramp-teal-400); --color-icon-menu-selected-secondary: var(--ramp-teal-400); --color-icon-menu-selected-tertiary: var(--ramp-teal-400); --color-icon-oncomponent-tertiary: var(--ramp-white-1000); --color-icon-onwarning-secondary: var(--ramp-black-500); --color-icon-onwarning-tertiary: var(--ramp-black-400); --color-icon-pressed: var(--ramp-teal-400); --color-icon-selected: var(--ramp-teal-400); --color-icon-toolbar-pressed: var(--ramp-teal-500); --color-icon-toolbar-selected: var(--ramp-teal-400); --color-icon-tooltip-pressed: var(--ramp-teal-500); --color-icon-tooltip-selected: var(--ramp-teal-400); --color-text-brand: var(--ramp-teal-400); --color-text-menu-selected: var(--ramp-teal-400); --color-text-onassistive-tertiary: var(--ramp-white-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-tertiary: var(--ramp-white-500); --color-text-selected: var(--ramp-teal-400); --color-text-toolbar-selected: var(--ramp-teal-400); --color-text-tooltip-selected: var(--ramp-teal-400); --color-texthighlight: #974aff66; } [data-preferred-theme="light"][data-editor-theme="bake-filebrowser"][data-enhanced-contrast], :where([data-preferred-theme="light"] [data-editor-theme="bake-filebrowser"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-grey-800); --color-bg-brand-hover: var(--ramp-grey-900); --color-bg-brand-pressed: var(--ramp-grey-900); --color-bg-brand-secondary: var(--ramp-grey-700); --color-bg-brand-tertiary: var(--ramp-grey-200); --color-bg-brand-tertiary-hover: var(--ramp-grey-300); --color-bg-brand-tertiary-pressed: var(--ramp-grey-400); --color-bg-info: var(--ramp-violet-200); --color-bg-menu-selected: var(--ramp-violet-400); --color-bg-menu-selected-hover: var(--ramp-violet-300); --color-bg-menu-selected-pressed: var(--ramp-violet-300); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-violet-300); --color-bg-selected: var(--ramp-violet-200); --color-bg-selected-hover: var(--ramp-violet-300); --color-bg-selected-pressed: var(--ramp-violet-300); --color-bg-selected-secondary: var(--ramp-violet-100); --color-bg-selected-strong: var(--ramp-violet-400); --color-bg-selected-tertiary: var(--ramp-violet-100); --color-bg-toolbar-selected: var(--ramp-violet-700); --color-bg-toolbar-selected-hover: var(--ramp-violet-800); --color-bg-toolbar-selected-pressed: var(--ramp-violet-800); --color-bg-toolbar-selected-secondary: var(--ramp-violet-900); --color-bg-tooltip-selected: var(--ramp-violet-700); --color-bg-tooltip-selected-hover: var(--ramp-violet-800); --color-bg-tooltip-selected-pressed: var(--ramp-violet-800); --color-bg-tooltip-selected-secondary: var(--ramp-violet-900); --color-bg-tooltip-selected-tertiary: var(--ramp-violet-200); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-violet-800); --color-border-brand-strong: var(--ramp-violet-900); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-400); --color-border-onselected: var(--ramp-violet-300); --color-border-selected: var(--ramp-violet-700); --color-border-selected-strong: var(--ramp-violet-800); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-borderselectedec: var(--ramp-black-600); --color-icon-brand: var(--ramp-black-600); --color-icon-brand-pressed: var(--ramp-black-700); --color-icon-brand-secondary: var(--ramp-black-400); --color-icon-brand-tertiary: var(--ramp-black-300); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-800); --color-icon-selected: var(--ramp-violet-800); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-800); --color-text-menu-selected: var(--ramp-violet-400); --color-text-onselected-tertiary: var(--ramp-black-400); --color-text-selected: var(--ramp-violet-800); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; --color-textonlightcanvassecondary: var(--ramp-black-400); } [data-preferred-theme="dark"][data-editor-theme="bake-filebrowser"][data-enhanced-contrast], :where([data-preferred-theme="dark"] [data-editor-theme="bake-filebrowser"][data-enhanced-contrast]) { --color-bg-brand: var(--ramp-white-1000); --color-bg-brand-hover: var(--ramp-white-1000); --color-bg-brand-pressed: var(--ramp-white-1000); --color-bg-brand-secondary: var(--ramp-white-700); --color-bg-brand-tertiary: var(--ramp-white-300); --color-bg-brand-tertiary-hover: var(--ramp-white-400); --color-bg-brand-tertiary-pressed: var(--ramp-white-500); --color-bg-info: var(--ramp-pale-violet-800); --color-bg-menu-selected: var(--ramp-violet-400); --color-bg-menu-selected-hover: var(--ramp-violet-300); --color-bg-menu-selected-pressed: var(--ramp-violet-300); --color-bg-menu-selected-secondary: var(--ramp-pale-violet-800); --color-bg-menu-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-onselected: var(--ramp-pale-violet-500); --color-bg-selected: var(--ramp-pale-violet-800); --color-bg-selected-hover: var(--ramp-pale-violet-600); --color-bg-selected-pressed: var(--ramp-pale-violet-600); --color-bg-selected-secondary: var(--ramp-pale-violet-900); --color-bg-selected-strong: var(--ramp-violet-400); --color-bg-selected-tertiary: var(--ramp-pale-violet-800); --color-bg-toolbar-selected: var(--ramp-violet-400); --color-bg-toolbar-selected-hover: var(--ramp-violet-300); --color-bg-toolbar-selected-pressed: var(--ramp-violet-300); --color-bg-toolbar-selected-secondary: var(--ramp-violet-300); --color-bg-tooltip-selected: var(--ramp-violet-400); --color-bg-tooltip-selected-hover: var(--ramp-violet-300); --color-bg-tooltip-selected-pressed: var(--ramp-violet-300); --color-bg-tooltip-selected-secondary: var(--ramp-violet-300); --color-bg-tooltip-selected-tertiary: var(--ramp-pale-violet-800); --color-bgselectedarea: #4d49fc33; --color-border-brand: var(--ramp-violet-400); --color-border-brand-strong: var(--ramp-violet-300); --color-border-menu-onselected: var(--ramp-violet-400); --color-border-menu-selected: var(--ramp-violet-500); --color-border-menu-selected-strong: var(--ramp-violet-400); --color-border-onbrand: var(--ramp-violet-800); --color-border-onbrand-strong: var(--ramp-violet-1000); --color-border-onselected: var(--ramp-pale-violet-500); --color-border-selected: var(--ramp-violet-400); --color-border-selected-strong: var(--ramp-violet-300); --color-border-toolbar-selected: var(--ramp-violet-500); --color-border-toolbar-selected-strong: var(--ramp-violet-400); --color-border-tooltip-onselected: var(--ramp-violet-600); --color-border-tooltip-selected: var(--ramp-violet-500); --color-border-tooltip-selected-strong: var(--ramp-violet-400); --color-borderselectedec: var(--ramp-white-500); --color-icon-brand: var(--ramp-white-500); --color-icon-brand-pressed: var(--ramp-white-400); --color-icon-brand-secondary: var(--ramp-white-300); --color-icon-brand-tertiary: var(--ramp-white-100); --color-icon-menu-pressed: var(--ramp-violet-500); --color-icon-menu-selected: var(--ramp-violet-400); --color-icon-menu-selected-secondary: var(--ramp-violet-400); --color-icon-menu-selected-tertiary: var(--ramp-violet-400); --color-icon-pressed: var(--ramp-violet-400); --color-icon-selected: var(--ramp-violet-400); --color-icon-toolbar-pressed: var(--ramp-violet-500); --color-icon-toolbar-selected: var(--ramp-violet-400); --color-icon-tooltip-pressed: var(--ramp-violet-500); --color-icon-tooltip-selected: var(--ramp-violet-400); --color-text-brand: var(--ramp-violet-400); --color-text-menu-selected: var(--ramp-violet-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-tertiary: var(--ramp-white-500); --color-text-selected: var(--ramp-violet-400); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } /* "shared/styles/mixins/utilities.css" */ @layer css-modules { /* KEEP_IN_SYNC(fpl/tokens/src/utilities.css) */ /* noop that exists solely to bump the selector specificity of declarations so that they can correctly override any class composed from a class that uses the ui3 or ui2 mixin. */ } /* "shared/styles/constants/constants.css" */ @layer css-modules { /** * constants.css * * Parent file to import all constants i.e. variables, media queries, etc. that * don't generate any CSS. */ /** * This doesn't actually import any PostCSS directives (the file contains none), * but it does register the file as a dependency, so its plain CSS contents are * included in the bundle. * * TODO: Should be explicitly imported from .ts entrypoints instead, like * @figma/fpl-components/fpl.css. */ /** * This is here for backward compatibility from when we imported utilities.css from FPL. * * TODO: Should be inlined in files that actually need the mixins. */ } /* "shared/components/forms/basic_form/basic_form_constants.css" */ @layer css-modules { /* Display */ /* Visual */ } /* "shared/styles/mixins/ellipsis.css" */ @layer css-modules { /** @postcss-export-raw */ /** * ellipsis.css * * Add an ellipsis if text is too long. * * The element that composes this mixin MUST have a defined width or max-width in pixels. * - Only works on a single line of text. See below for multi-line ellipses */ .ellipsis--ellipsis--IdJAr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /** * Add an ellipsis after n lines of text. * https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp * * The element that composes this mixin MUST: * - Have a defined width or max-width in pixels. * - Have a defined fallback height or max-height set to `line-height * n`, * in case browsers do not support -webkit-line-clamp or box-orient * at least the container size will be correct (with no ellipses) * * TODO(golf): start using `line-clamp` instead of -webkit-line-clamp once browsers start supporting it */ .ellipsis--_ellipsisAfterNLines--xuqJO { display: -webkit-inline-box; overflow: hidden; /* https://github.com/postcss/autoprefixer/issues/776#issuecomment-297734206 */ /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ } .ellipsis--ellipsisAfter2Lines--UW3rF { -webkit-line-clamp: 2; } .ellipsis--ellipsisAfter3Lines--uKAHI { -webkit-line-clamp: 3; } .ellipsis--ellipsisAfter6Lines--Bikmt { -webkit-line-clamp: 6; } .ellipsis--ellipsisAfter8Lines--Odjef { -webkit-line-clamp: 8; } } /* "shared/styles/mixins/text.css" */ @layer css-modules { /** * If you edit this file, please make sure to update stylex-typography.ts */ /* Please do not use this style directly, as that might subvert the typographical design system. */ .text--_negText--000VH { /* Needed for Safari */ color: #fff; /* stylelint-disable-line @figma/color-no-raw -- negative text polyfill */ } /* This file contains classes that can be composed to apply the Figma typography scale. To apply a font size and apply the corresponding line-height and letter-spacing (among other things), compose a class in your css like this: .yourClassName { composes: fontPos11 from 'shared/styles/mixins/text.css'; } That's it! */ .text--_fontBase--Qq3Bi { /* Please do not use this style directly. Use one of the rules below */ font-family: Inter, sans-serif; } .text--_fontBaseWhyteInktrap--LLUDo { font-family: WhyteInktrap, sans-serif; } .text--_fontBaseWhyte--3CoZp { font-family: Whyte, sans-serif; } /* Use these for black text on white background */ .text--fontPos9--9GaHH { font-size: 9px; line-height: 16px; letter-spacing: calc(0.016px + var(--text-tracking-pos, 0)*9px); } .text--fontPos10--t5mKh { font-size: 10px; line-height: 16px; letter-spacing: calc(0.01px + var(--text-tracking-pos, 0)*10px); } .text--fontPos11--vZqT1 { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontPos12--6EQ5l { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontPos13--C-XzX { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontPos14--HEpjz { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontPos15--GUmb8 { font-size: 15px; line-height: 24px; letter-spacing: calc(-0.009px + var(--text-tracking-pos, 0)*15px); } .text--fontPos16--uNB4k { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontPos18--cgQsm { font-size: 18px; line-height: 24px; letter-spacing: calc(-0.014px + var(--text-tracking-pos, 0)*18px); } .text--fontPos20--I4tPF { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontPos22--AFEdT { font-size: 22px; line-height: 32px; letter-spacing: calc(-0.018px + var(--text-tracking-pos, 0)*22px); } .text--fontPos24---wO4X { font-size: 24px; line-height: 32px; letter-spacing: calc(-0.019px + var(--text-tracking-pos, 0)*24px); } .text--fontPos30--O1dD- { font-size: 30px; line-height: 40px; letter-spacing: calc(-0.021px + var(--text-tracking-pos, 0)*30px); } .text--fontPos48--5jveF { font-size: 48px; line-height: 64px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*48px); } .text--fontPos11Whyte--XJzOe { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontPos12Whyte--3-MDP { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontPos13Whyte--8WKty { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontPos14Whyte--3-1ib { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontPos16Whyte--ocW85 { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontPos18Whyte--HXCIM { font-size: 18px; line-height: 24px; letter-spacing: calc(-0.014px + var(--text-tracking-pos, 0)*18px); } .text--fontPos20Whyte--Y3PUO { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontPos22Whyte--KmE-c { font-size: 22px; line-height: 32px; letter-spacing: calc(-0.018px + var(--text-tracking-pos, 0)*22px); } .text--fontPos24Whyte--wTmZ4 { font-size: 24px; line-height: 32px; letter-spacing: calc(-0.019px + var(--text-tracking-pos, 0)*24px); } .text--fontPos32Whyte--KnHV0 { font-size: 32px; line-height: 48px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*32px); } .text--fontPos32WhyteInktrap--xFycY { font-size: 32px; line-height: 48px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*32px); } /* Use these for white text on black background */ .text--fontNeg11--2slM- { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontNeg12--CK-5Q { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontNeg13--Kypg7 { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontNeg14---MsMf { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontNeg16--vUxa9 { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontNeg20--pIa18 { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontNeg40--AXEa9 { font-size: 40px; line-height: 56px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*40px); } .text--fontNeg16Whyte--f9DCO { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } /* For an explanation of our type scale from a design systems perspective, please refer to the Figma design system file: https://staging.figma.com/file/nYn4yDtQDBVF1XCrEfcSqA/!-UI2 How do these classes get generated? The example: .yourClassName { composes: fontPos11 from 'shared/styles/mixins/text.css'; } translates to: .fontPos11 { composes: _fontBase; @mixin _font 11; } which, via a mixin defined in web/bundler/esbuild/src/plugin-css.ts, generates the following CSS: // a localized classname, with a hash at the end .text--fontPos11--RSei3 { // from the `@mixin` font-size: 11px; line-height: 16px; letter-spacing: 0.053px; } Our typography system is defined procedurally. That is, given a font size and whether the text will appear in a positive (black text on white background) or negative (white text on black background) treatment, we can compute the correct line-height, letter-spacing, and other attributes that should go along with that text. This is nice because it makes it easy for us to maintain this system as long as we can generate the rules for this system programmatically. While this is not possible to do in raw CSS, we can leverage postcss mixins to accomplish this: https://github.com/postcss/postcss-mixins If you need a rule for a font size that isn't captured by these classes, you can declare a new rule in this file by following the pattern established by the existing classes, which will automatically ensure that your new text style conforms to our typography scale. */ } /* "shared/styles/mixins/blue_link.css" */ @layer css-modules { .blue_link--blueLink--m6bav { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; } .blue_link--blueLinkDefaultPointer--rhAiW { cursor: default; } .blue_link--blueLinkWithFocus--x9vzH:focus-visible { outline: 1px solid var(--color-text-brand); } } /* "shared/components/forms/basic_form/basic_form.css" */ @layer css-modules { .basic_form--input--c0T0l { height: 30px; box-sizing: border-box; border-radius: 2px; font-size: 11px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--input--c0T0l, :where([data-fpl-ui3-override]) .basic_form--input--c0T0l { height: var(--spacer-4); } .basic_form--bigInput--XpOVB { height: 42px; font-size: 14px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--bigInput--XpOVB, :where([data-fpl-ui3-override]) .basic_form--bigInput--XpOVB { height: var(--spacer-5); } .basic_form--textInput--6j7Y6 { height: var(--spacer-4); box-sizing: border-box; border-radius: 2px; font-size: 11px; color: var(--color-text); border: 1px solid var(--color-border); padding: 0 6px; background-color: var(--color-bg, white); } .basic_form--textInput--6j7Y6:focus { border: 2px solid var(--color-border-selected); padding: 0 5px; } .basic_form--textInput--6j7Y6::placeholder { color: var(--color-text-tertiary); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--textInput--6j7Y6, :where([data-fpl-ui3-override]) .basic_form--textInput--6j7Y6 { background-color: var(--color-bg-secondary); border-radius: var(--radius-medium); border-color: var(--color-bg-secondary); padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2) - 1px); } [data-fpl-version='ui3'] .basic_form--textInput--6j7Y6:focus, :where([data-fpl-ui3-override]) .basic_form--textInput--6j7Y6:focus { border: 1px solid var(--color-border-selected); padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2) - 1px); } .basic_form--labeledInputGroup--oRR2z { display: flex; flex-flow: column nowrap; justify-content: center; margin-bottom: 16px; position: relative; border: 1px solid var(--color-border); background: var(--color-bg, white); box-sizing: border-box; border-radius: 3px; width: 100%; height: 44px; } .basic_form--labeledInputGroup--oRR2z input, .basic_form--labeledInputGroup--oRR2z select { color: var(--color-text); background: var(--color-bg, white); height: 22px; padding: 0 16px; letter-spacing: -0.006em; } .basic_form--labeledInputGroup--oRR2z input::placeholder, .basic_form--labeledInputGroup--oRR2z select::placeholder { color: var( --color-text-secondary, rgba(0, 0, 0, 0.3) ); /* inputs have placeholder pseduo-selectors but not select boxes */ } .basic_form--labeledInputGroup--oRR2z input:-webkit-autofill, .basic_form--labeledInputGroup--oRR2z select:-webkit-autofill { -webkit-text-fill-color: var(--color-text); } .basic_form--labeledInputGroup--oRR2z select.basic_form--selectPlaceholder--OMDch { color: var(--color-text-secondary); } .basic_form--labeledInputGroup--oRR2z select { height: 42px; appearance: none; background: var(--color-bg, white); flex-grow: 1; width: 17px; /* arbitrary width, but needs to be smaller than the smallest select width (i.e. US State selector). use flex-grow to use extra space */ } .basic_form--labeledInputGroup--oRR2z label { padding: 2px 0 0 16px; } .basic_form--labeledInputGroup--oRR2z label:not(.basic_form--hoverLabel__hasValue--qHX2G) { display: none; } .basic_form--labeledInputGroup--oRR2z:focus-within { box-shadow: 0 0 0 1px var(--color-border-selected); border: 1px solid var(--color-border-selected); } .basic_form--labeledInputGroup--oRR2z:focus-within label { display: block; } .basic_form--labeledInputGroupDisabled--hS2Df { background-color: var(--color-bg, #fafafa) !important; } .basic_form--labeledInputGroupDisabled--hS2Df input { color: var(--color-text-secondary); background-color: var(--color-bg); } .basic_form--hoverLabel--w7kgn { font-size: 9px; line-height: 11px; color: var(--color-text-secondary); -webkit-user-select: none; user-select: none; } .basic_form--bigTextInput--IQimY { padding: 0 12px; } .basic_form--bigTextInput--IQimY:focus { padding: 0 11px; } .basic_form--bigTextInput--IQimY::placeholder { color: var(--color-text-tertiary); } .basic_form--checkboxContainer--0o5Ya { -webkit-user-select: none; user-select: none; cursor: default; align-items: center; display: inline-flex; position: relative; margin-right: 8px; width: fit-content; } .basic_form--checkbox--P1ray { appearance: none; width: 14px; height: 14px; display: inline-flex; /* Prevent invisible checkbox from affecting layout */ } .basic_form--checkbox--P1ray::after { content: ''; display: inline-flex; margin: 1px; width: 12px; height: 12px; border-radius: 2px; box-sizing: border-box; background-color: var(--color-bg, white); border: 1px solid var(--color-icon); } .basic_form--checkbox--P1ray:disabled::after { border: 1px solid var(--color-icon-disabled); } .basic_form--checkbox--P1ray:checked::after { border: 1px solid var(--color-bg-brand); background-color: var(--color-bg-brand); } .basic_form--checkbox--P1ray:checked:focus::after { /* Guidance from Ryhan, dark mode: Since this “border” is meant to look like it blends into the background, use color-bg. */ border: 1px solid var(--color-bg); } .basic_form--checkbox--P1ray:disabled:checked::after { border: 1px solid var(--color-icon-disabled); background-color: var(--color-icon-disabled); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--checkbox--P1ray, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray { width: var(--spacer-3); height: var(--spacer-3); } [data-fpl-version='ui3'] .basic_form--checkbox--P1ray::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray::after { width: var(--spacer-3); height: var(--spacer-3); margin: var(--spacer-0); border-radius: var(--radius-medium); } [data-fpl-version='ui3'] .basic_form--checkbox--P1ray:disabled::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray:disabled::after { border-color: var(--color-border-disabled); } [data-fpl-version='ui3'] .basic_form--checkbox--P1ray:disabled:checked::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray:disabled:checked::after { border-color: var(--color-bg-disabled); background-color: var(--color-bg-disabled); } .basic_form--checkboxSvg--crYzv { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); pointer-events: none; fill: var(--color-icon-onbrand); /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--checkboxSvg--crYzv, :where([data-fpl-ui3-override]) .basic_form--checkboxSvg--crYzv { --color-icon: var(--color-icon-onbrand); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--checkbox--P1ray:disabled + .basic_form--checkboxSvg--crYzv, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray:disabled + .basic_form--checkboxSvg--crYzv { --color-icon: var(--color-icon-ondisabled); } .basic_form--checkboxShowFocus--0z-8w:focus::after, .basic_form--checkboxShowFocus--0z-8w:active::after, .basic_form--checkbox--P1ray:focus::after { box-shadow: 0 0 0 1px var(--color-icon-pressed); border: 1px solid var(--color-icon-pressed); /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--checkboxShowFocus--0z-8w:focus::after, [data-fpl-version='ui3'] .basic_form--checkboxShowFocus--0z-8w:active::after, [data-fpl-version='ui3'] .basic_form--checkbox--P1ray:focus::after, :where([data-fpl-ui3-override]) .basic_form--checkboxShowFocus--0z-8w:focus::after, :where([data-fpl-ui3-override]) .basic_form--checkboxShowFocus--0z-8w:active::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--P1ray:focus::after { box-shadow: 0 0 0 1px var(--color-border-selected-strong); border: none; } .basic_form--label--nylQE { font-size: 11px; -webkit-user-select: none; user-select: none; cursor: default; color: var(--color-text); } .basic_form--buttonGroup---J9UB { display: flex; flex-direction: row; } .basic_form--buttonGroup_reversed--WpNYL { flex-direction: row-reverse; } /* TODO: Re-skin buttons for Ui3. Status: In progress Notes: Converted to use UI3 tokens with UI2 fallbacks, but icons still need to be updated to use new icon component. Asana: https://app.asana.com/0/1205320263314793/1205551413950844 */ .basic_form--btn--GL7of { font-weight: 400; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 32px; line-height: 32px; max-width: 200px; padding: 0 12px; background-color: transparent; border-radius: 6px; -moz-outline-radius: 6px; cursor: default; -webkit-user-select: none; user-select: none; color: var(--color-text); /* Dark mode: button border should match text color. */ outline: 1px solid var(--color-text); outline-offset: -1px; background-clip: padding-box; box-sizing: border-box; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--btn--GL7of, :where([data-fpl-ui3-override]) .basic_form--btn--GL7of { height: var(--spacer-4); padding: var(--spacer-1) var(--spacer-2); width: fit-content; border-radius: var(--radius-medium); outline-color: var(--color-border); font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); } .basic_form--btn--GL7of:focus:not(:disabled) { outline-color: var(--color-bg-toolbar-selected); /* The where clause allows us to make changes without changing specificity */ /* Only match if the page is set to UI2 and the element doesn't have an ancestor UI3 override property (in which case it should be matched by the UI3 mixin */ /* data-fpl-version is set by ThemeProvider, but we're intentionally not checking for data-fpl-version='ui2' here because apps that don't use ThemeProvider should use UI2 styles by default */ /* stylelint-disable-next-line selector-max-type */ } body:not([data-fpl-version='ui3']) .basic_form--btn--GL7of:focus:not(:disabled):where(:not([data-fpl-ui3-override] *)) { outline-width: 2px; outline-offset: -2px; } .basic_form--btn--GL7of:disabled { background-color: transparent; color: var(--color-text-disabled); /* Dark mode: button border should match text color. */ outline-color: var(--color-text-disabled); } .basic_form--btn--GL7of:active:not(:disabled) { background-color: var(--color-bg-pressed); } .basic_form--btnSecondaryMenu--K0KsN { background-color: transparent; /* should just take on the bg color of the menu */ /* make the text color match the border color */ stroke: var(--color-text-menu); outline-color: var(--color-text-menu); color: var(--color-text-menu); } .basic_form--btnSecondaryMenu--K0KsN:focus:not(:disabled), .basic_form--btnSecondaryMenu--K0KsN:active:not(:disabled) { background-color: var(--color-bg-menu-pressed); } .basic_form--btnBig--lRAn3 { /* Duplicate from .btn because css compilation resulted in being unable to override focus */ font-weight: 400; display: flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: 200px; padding: 0 16px; background-color: transparent; box-sizing: border-box; cursor: default; -webkit-user-select: none; user-select: none; color: var(--color-text); outline: 1px solid var(--color-icon); outline-offset: -1px; background-clip: padding-box; font-size: 14px; height: 44px; border-radius: 8px; line-height: 44px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--btnBig--lRAn3, :where([data-fpl-ui3-override]) .basic_form--btnBig--lRAn3 { height: var(--spacer-5); padding: var(--spacer-1) var(--spacer-2); width: fit-content; border-radius: var(--radius-medium); font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); } .basic_form--btnBig--lRAn3:focus:not(:disabled) { outline-color: var(--color-bg-toolbar-selected); /* The where clause allows us to make changes without changing specificity */ /* Only match if the page is set to UI2 and the element doesn't have an ancestor UI3 override property (in which case it should be matched by the UI3 mixin */ /* data-fpl-version is set by ThemeProvider, but we're intentionally not checking for data-fpl-version='ui2' here because apps that don't use ThemeProvider should use UI2 styles by default */ /* stylelint-disable-next-line selector-max-type */ } body:not([data-fpl-version='ui3']) .basic_form--btnBig--lRAn3:focus:not(:disabled):where(:not([data-fpl-ui3-override] *)) { outline-width: 2px; outline-offset: -2px; } .basic_form--btnBig--lRAn3:disabled { background-color: transparent; color: var(--color-text-disabled); outline: var(--color-icon-disabled); } .basic_form--fullWidth--XUs72 { max-width: unset; width: 100%; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--fullWidth--XUs72, :where([data-fpl-ui3-override]) .basic_form--fullWidth--XUs72 { /* Explicitly re-declare 100% width here, since it is getting overridden by the ui3 mixin on .btn */ width: 100%; } /* stylelint-disable-next-line selector-max-type -- FIXME: This was disabled while enabling the selector-max-type rule. Do we need the added specificity from the 'button' tag here? */ button.basic_form--btn--GL7of::-moz-focus-inner { border: 0; outline: 0; } .basic_form--primaryBtn--abwtN { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--primaryBtn--abwtN:focus:not(:disabled), .basic_form--primaryBtn--abwtN:active:not(:disabled) { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); outline-color: var(--color-border-selected-strong); } .basic_form--primaryBtn--abwtN:disabled { color: var(--color-text-ondisabled); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--primaryBtn--abwtN:active:not(:disabled) { background-color: var(--color-bg-brand-pressed); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--primaryBtn--abwtN, :where([data-fpl-ui3-override]) .basic_form--primaryBtn--abwtN { /* ui3 mixins are applied after base styles so we need to override the outline color that the mixin in .btn sets. */ outline-color: transparent; } [data-fpl-version='ui3'] .basic_form--primaryBtn--abwtN:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--primaryBtn--abwtN:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--primaryBtnBig--ZJFE7 { } .basic_form--negativeBtn--tfznt { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--negativeBtn--tfznt:focus:not(:disabled), .basic_form--negativeBtn--tfznt:active:not(:disabled) { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); outline-color: var(--color-icon-danger-pressed); } .basic_form--negativeBtn--tfznt:disabled { color: var(--color-text-ondanger); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--negativeBtn--tfznt:active:not(:disabled) { background-color: var(--color-bg-danger-pressed); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--negativeBtn--tfznt, :where([data-fpl-ui3-override]) .basic_form--negativeBtn--tfznt { /* ui3 mixins are applied after base styles so we need to override the outline color that the mixin in .btn sets. */ outline-color: transparent; } [data-fpl-version='ui3'] .basic_form--negativeBtn--tfznt:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--negativeBtn--tfznt:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--secondaryNegativeBtn--UeCRz { outline-color: var(--color-icon-danger); color: var(--color-text-danger); } .basic_form--negativeBtnBig--N6CMr { } .basic_form--greenBtn--OJSb- { color: var(--color-text-onsuccess); background-color: var(--color-bg-success); outline-color: transparent; background-clip: border-box; } .basic_form--greenBtn--OJSb-:focus:not(:disabled), .basic_form--greenBtn--OJSb-:active:not(:disabled) { outline-color: var(--color-icon-success-pressed); } .basic_form--greenBtn--OJSb-:active:not(:disabled) { background-color: var(--color-bg-success-pressed); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--greenBtn--OJSb-, :where([data-fpl-ui3-override]) .basic_form--greenBtn--OJSb- { /* ui3 mixins are applied after base styles so we need to override the outline color that the mixin in .btn sets. */ outline-color: transparent; } [data-fpl-version='ui3'] .basic_form--greenBtn--OJSb-:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--greenBtn--OJSb-:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--greyBtn--Wk4Hu { color: var(--color-text-tooltip); background-color: var(--color-bg-tooltip); outline-color: var(--color-border-tooltip-strong); background-clip: border-box; } .basic_form--greyBtn--Wk4Hu:disabled { color: var(--color-text-tooltip-disabled); background-color: var(--color-bg-tooltip-disabled); outline-color: var(--color-border-tooltip-disabled); } .basic_form--whiteBtn--eZaYp { } .basic_form--whiteBtn--eZaYp:disabled { color: var(--color-text-disabled); outline-color: var(--color-icon-disabled); } .basic_form--inverseBtn--PUuyk { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--inverseBtn--PUuyk:focus:not(:disabled), .basic_form--inverseBtn--PUuyk:active:not(:disabled) { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); outline-color: transparent; } .basic_form--inverseBtn--PUuyk:disabled { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); outline-color: transparent; } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--inverseBtn--PUuyk, :where([data-fpl-ui3-override]) .basic_form--inverseBtn--PUuyk { /* ui3 mixins are applied after base styles so we need to override the outline color that the mixin in .btn sets. */ outline-color: transparent; } [data-fpl-version='ui3'] .basic_form--inverseBtn--PUuyk:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--inverseBtn--PUuyk:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--inverseBtnBig--pu2MT { } /* TODO(dark mode): this button isn't used anywhere other than a few standalone apps. Should we create a set of variables to support this? */ .basic_form--blackBtn--jJdBz { color: var(--color-text-toolbar); background-color: var(--color-bg-toolbar); outline-color: transparent; background-clip: border-box; } .basic_form--blackBtn--jJdBz:focus:not(:disabled), .basic_form--blackBtn--jJdBz:active:not(:disabled) { outline-color: var(--color-bg-toolbar-pressed); } .basic_form--blackBtnBig--O-7hC { } .basic_form--greenBtnBig--CjYSB { } .basic_form--greenBtnBigSolidWhenDisabled--bcNjR:disabled { color: var(--color-text-onsuccess); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--secondaryBtnBig--Bf51w { } .basic_form--link--qNEwz { display: flex; align-items: center; height: 32px; background-color: transparent; } .basic_form--link--qNEwz:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } .basic_form--inlineLink--3kqtN:focus-visible { outline: 1px dashed var(--color-text-brand); outline-offset: 1px; } .basic_form--bigSelect--n00gz { appearance: none; background-color: var(--color-bg); background-image: url('/images/caret_light_gray_072116.svg'); background-repeat: no-repeat; background-position: right 8px center; } .basic_form--buttonText--IPQ1V { background-color: transparent; } .basic_form--buttonText--IPQ1V:disabled { color: var(--color-text-disabled); } .basic_form--infoIcon--zblHl { padding: 4px 8px; color: var(--color-text); fill: var(--color-icon); position: absolute; right: 0; } .basic_form--error--B3VYl { color: var(--color-text-danger); } } /* "shared/components/badge/badge.css" */ @layer css-modules { .badge--badgeSmall--377Be { box-sizing: border-box; border-radius: 5px; font-weight: 500; height: 16px; margin-right: 8px; -webkit-user-select: none; user-select: none; } .badge--badgeLarge--hqJIu { box-sizing: border-box; border-radius: 4px; font-weight: 500; -webkit-user-select: none; user-select: none; } .badge--badgeExtraLarge--R2Isw { line-height: 20px; box-sizing: border-box; border-radius: 4px; font-weight: 500; -webkit-user-select: none; user-select: none; } .badge--badgeInlineBlock--dr06q { display: inline-block; } .badge--badgeFlex--Oarwc { display: flex; flex-direction: row; align-items: center; } .badge--badgeSmallPadding--cOOGj { padding: 0 4px; } .badge--badgeSmallPaddingWithIcon--fO8SH { padding-left: 0; padding-right: 4px; } .badge--badgeLargePadding--RGPaq { padding: 0 6px; } .badge--badgeLargePaddingWithIcon--cSBWE { padding-left: 2px; padding-right: 6px; } .badge--badgeExtraLargePadding--tcvE0 { padding: 2px 8px; } .badge--subtle--1LPOU { border-width: 1px; border-style: solid; line-height: 14px; } .badge--subtleInvert--UACg3 { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .badge--strongInvert--Zc8zQ { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); } .badge--subtleDefault--gLxpI { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .badge--strongTranslucentDefault--IEN0n { color: var(--color-text); background-color: var(--color-bgtransparent-secondary-hover); } .badge--strongTranslucentLight--1HWvT { color: var(--color-text-onbrand); /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-white-200); } .badge--strongDefault--RYR64 { color: var(--color-text); background-color: var(--color-bg-secondary); } .badge--strongTertiary--0Le-Z { color: var(--color-text); background-color: var(--color-bg-tertiary); } .badge--subtleSuccess--8KY1F { background: transparent; color: var(--color-text-success); border-color: var(--color-border-success); } .badge--strongSuccess--SdEty { color: var(--color-text-onsuccess); background-color: var(--color-bg-success); } .badge--subtleWarning--JPMdR { background: transparent; color: var(--color-text-warning); border-color: var(--color-border-warning); } .badge--strongWarning--Ffrsx { color: var(--color-text-onwarning); background-color: var(--color-bg-warning); } .badge--subtleWarningTertiary--q-LLm { background: transparent; color: var(--color-text-warning); border-color: var(--color-border-warning); } .badge--strongWarningTertiary--KnNFP { color: var(--color-text); background-color: var(--color-bg-warning-tertiary); } .badge--subtleDanger--CprIs { background: transparent; color: var(--color-text-danger); border-color: var(--color-border-danger); } .badge--strongDanger--jBH0y { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); } .badge--subtleDesign--gBnSb { background: transparent; color: var(--color-text-design); border-color: var(--color-bg-design-secondary); } .badge--strongDesign--dND06 { color: var(--color-text-ondesign); background-color: var(--color-bg-design); } .badge--subtleComponent--QgjW- { background: transparent; color: var(--color-text-component); border-color: var(--color-bg-component-secondary); } .badge--strongComponent--Z7-LU { color: var(--color-text-oncomponent); background-color: var(--color-bg-component); } .badge--subtleFigjam--ZFzLH { background: transparent; color: var(--color-text-figjam); border-color: var(--color-border-figjam); } .badge--strongFigjam--NqX1C { color: var(--color-text-oncomponent); background-color: var(--color-bg-component); } .badge--subtleBrand--fKQCZ { background: transparent; color: var(--color-text-brand); /* defaulting to blue brand in legacy version of app */ border-color: var(--color-bg-selected-hover); } .badge--strongBrand--B9cno { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); } .badge--strongInformational--lyIPB { color: var(--color-text-brand); background-color: var(--color-bg-selected-secondary); } .badge--strongInformational--lyIPB:hover { background-color: var(--color-bg-selected-hover); } .badge--subtleToolbar--n3xcz { background: transparent; color: var(--color-text-toolbar); border-color: var(--color-border-toolbar); } .badge--strongToolbar---4iGO { color: var(--color-text-toolbar); background-color: var(--color-bg-toolbar); } .badge--strongDisabled--xUoRb { color: var(--color-text-secondary); background-color: var(--color-bg-secondary); } .badge--strongLight--4Hr24 { color: var(--color-text-onwarning); /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-blue-300); } /*For this specific subtle style, we don't want a border*/ .badge--subtleLight--n-hcq { color: var(--color-text-onwarning); /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-blue-200); border: none; line-height: 16px; } .badge--xImg---wJ0s svg { display: inline; margin-left: 15px; cursor: pointer; } .badge--toolbarSelected--oWWPG { /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ color: var(--ramp-black-900); /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-blue-300); } } /* "shared/styles/mixins/focus_border.css" */ @layer css-modules { /** Our common visual focus properties for controls such as icon buttons. */ /** The same focus styling as @mixin focus-border, with logic specifying when to apply (eg, rules rather than just a property list.) */ /** The same logic as @mixin focus-visible-border, but for elements that are disabled. */ /** The same focus styling as @mixin focus-border-with-separator, with logic specifying when to apply (eg, rules rather than just a property list.) */ /** The same focus styling as @mixin focus-border-with-outline, with logic specifying when to apply (eg, rules rather than just a property list.) */ /* FireFox draws outlines differently, which makes our blur focus state appear incorrectly, so in FF we draw our focus state with a box shadow instead, which isn't perfect but is good enough. */ /* Must be used with the not-focus-visible mixin. Together, these mixins provide visual focus using the focus-visible logic where available; provide the focused style with @mixin focus-visible and undo the focus styling in @mixin not-focus-invisible. */ /** Must be used with the focus-visible mixin. See notes on that mixin. */ /** Allows specifying visual focus using on a parent element when a child element is focused */ .focus_border--focusVisibleOutline--masAI:focus-visible { outline: 1px solid var(--color-border-selected); } } /* "shared/components/close_button/close_button.css" */ @layer css-modules { .close_button--closeX--5gquL { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; flex: 0 0 32px; line-height: 32px; cursor: default; fill: var(--color-icon); color: var(--color-icon); /* See IconButton for explanation why we do border/background this way (so it’s 30px rather than 32px) */ border-radius: 2px; background-clip: padding-box; background-color: transparent; } .close_button--closeX--5gquL:hover { background-color: var(--color-bg-hover); border-radius: 3px; } .close_button--closeX--5gquL { border: 1px solid transparent; outline: none; } .close_button--closeX--5gquL:focus-visible { border: 1px solid var(--color-border-selected); outline: 1px solid var(--color-border-selected); outline-offset: -2px; } .close_button--closeX--5gquL:focus { border: 1px solid var(--color-border-selected); outline: 1px solid var(--color-border-selected); outline-offset: -2px; } .close_button--closeX--5gquL:focus:not(:focus-visible) { border: 1px solid transparent; outline: none; } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .close_button--closeX--5gquL, :where([data-fpl-ui3-override]) .close_button--closeX--5gquL { display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; flex: 0 0 24px; line-height: 24px; border-radius: var(--radius-medium); outline-style: solid; outline-width: 0.0625rem; outline-offset: -0.0625rem; outline-color: transparent; } [data-fpl-version='ui3'] .close_button--closeX--5gquL:focus-visible, :where([data-fpl-ui3-override]) .close_button--closeX--5gquL:focus-visible { outline-color: var(--color-border-selected); } .close_button--modalUpperRightCorner--1ISv1 { position: absolute; right: 15px; top: 14px; } .close_button--smallModal--juKje { right: 7px; top: 6px; } } /* "shared/css_builder/gen/css_builder_display.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_block--pd580 { display: block; } .cx_flex--tV5oZ { display: flex; } .cx_grid--r3HZv { display: grid; } .cx_hidden--8Lusi { display: none; } .cx_inline---aiIT { display: inline; } .cx_inlineBlock--JyoOF { display: inline-block; } .cx_inlineFlex--0ZcKR { display: inline-flex; } } /* "shared/css_builder/gen/css_builder_alignContent.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_contentCenter--3D3h1 { align-content: center; } } /* "shared/css_builder/gen/css_builder_alignItems.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_itemsBaseline--dwzOL { align-items: baseline; } .cx_itemsCenter--wgGPq { align-items: center; } .cx_itemsEnd--k-3a0 { align-items: flex-end; } .cx_itemsStart--eqjHi { align-items: flex-start; } .cx_itemsStretch--C8KOQ { align-items: stretch; } } /* "shared/css_builder/gen/css_builder_alignSelf.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_itemSelfStretch--pjkRY { align-self: stretch; } .cx_itemSelfCenter--s-9sc { align-self: center; } .cx_itemSelfStart--PUn9T { align-self: flex-start; } } /* "shared/css_builder/gen/css_builder_placeSelf.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_selfCenter--v8GOx { place-self: center; } } /* "shared/css_builder/gen/css_builder_justifyContent.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_justifyCenter--cxQSz { justify-content: center; } .cx_justifyEnd--lFoZr { justify-content: flex-end; } .cx_justifyBetween--NNVTq { justify-content: space-between; } .cx_justifyStart--RpFPY { justify-content: flex-start; } } /* "shared/css_builder/gen/css_builder_flexDirection.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexColumn--IOAJe { flex-direction: column; } .cx_flexColumnReverse--NysK- { flex-direction: column-reverse; } .cx_flexRow--6BGYq { flex-direction: row; } .cx_flexRowReverse--hhw9k { flex-direction: row-reverse; } } /* "shared/css_builder/gen/css_builder_flexFlow.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexRowNoWrap--h7dbc { flex-flow: row nowrap; } } /* "shared/css_builder/gen/css_builder_flexGrow.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexGrow0--Mh45M { flex-grow: 0; } .cx_flexGrow1--IRFtW { flex-grow: 1; } } /* "shared/css_builder/gen/css_builder_flexShrink.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexShrink0--tfcHm { flex-shrink: 0; } .cx_flexShrink1--HTMk6 { flex-shrink: 1; } } /* "shared/css_builder/gen/css_builder_flexWrap.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexNowrap--6UCcl { flex-wrap: nowrap; } .cx_flexWrap--6xhF1 { flex-wrap: wrap; } } /* "shared/css_builder/gen/css_builder_flexBasis.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_flexBasis0--xUinj { flex-basis: 0; } .cx_flexBasisAuto--gdpZ4 { flex-basis: auto; } } /* "shared/css_builder/gen/css_builder_overflow.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_overflowAuto--JpFAf { overflow: auto; } .cx_overflowHidden---fxjU { overflow: hidden; } } /* "shared/css_builder/gen/css_builder_overflowWrap.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_overflowBreakWord--WWcdP { overflow-wrap: break-word; } .cx_overflowWrapAnywhere--84b9R { overflow-wrap: anywhere; } } /* "shared/css_builder/gen/css_builder_overflowX.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_overflowXHidden--6QzIc { overflow-x: hidden; } } /* "shared/css_builder/gen/css_builder_overflowY.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_overflowYScroll--fFR-P { overflow-y: scroll; } } /* "shared/css_builder/gen/css_builder_textOverflow.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_ellipsis--K-ZQU { text-overflow: ellipsis; } } /* "shared/css_builder/gen/css_builder_opacity.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_opacity0--P6ssw { opacity: 0; } .cx_opacity0_3--u1uqX { opacity: 0.3; } .cx_opacity0_5--VniWR { opacity: 0.5; } .cx_opacity1--vFITS { opacity: 1; } } /* "shared/css_builder/gen/css_builder_position.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_absolute--9lPxt { position: absolute; } .cx_fixed--1L6R4 { position: fixed; } .cx_relative--RCmk0 { position: relative; } .cx_sticky---5t1x { position: sticky; } } /* "shared/css_builder/gen/css_builder_top.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_topHalf--iqmW- { top: 50%; } .cx_topToolbarHeight--OKHPo { top: var(--toolbar-height); } .cx_top0--Vj6YX { top: 0; } } /* "shared/css_builder/gen/css_builder_right.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_right0--cruNS { right: 0; } } /* "shared/css_builder/gen/css_builder_bottom.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bottom0--aJLuB { bottom: 0; } } /* "shared/css_builder/gen/css_builder_left.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_left0--mKceU { left: 0; } .cx_leftHalf--hPSwM { left: 50%; } } /* "shared/css_builder/gen/css_builder_backgroundSize.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bgContain--tk5IE { background-size: contain; } .cx_bgCover--oMN9Q { background-size: cover; } } /* "shared/css_builder/gen/css_builder_backgroundRepeat.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bgNoRepeat--zjANI { background-repeat: no-repeat; } } /* "shared/css_builder/gen/css_builder_backgroundPosition.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bgPosCenter--wpObw { background-position: center; } } /* "shared/css_builder/gen/css_builder_backgroundClip.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bgClipPaddingBox--GHoXk { background-clip: padding-box; } } /* "shared/css_builder/gen/css_builder_backgroundColor.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bgTransparent--Hc5O9 { background-color: transparent; } .cx_bgNone---IMzj { background-color: initial; } .cx_colorBg--fz3nn { background-color: var(--color-bg, var(--fallback-color-bg)); } .cx_colorBgAssistive--CBe6u { background-color: var(--color-bg-assistive, var(--fallback-color-bg-assistive)); } .cx_colorBgAssistiveHover--iRWJw { background-color: var(--color-bg-assistive-hover, var(--fallback-color-bg-assistive-hover)); } .cx_colorBgAssistivePressed--wxp0e { background-color: var(--color-bg-assistive-pressed, var(--fallback-color-bg-assistive-pressed)); } .cx_colorBgAssistiveSecondary--tffrv { background-color: var(--color-bg-assistive-secondary, var(--fallback-color-bg-assistive-secondary)); } .cx_colorBgAssistiveTertiary--94CMP { background-color: var(--color-bg-assistive-tertiary, var(--fallback-color-bg-assistive-tertiary)); } .cx_colorBgBrand--ai8ej { background-color: var(--color-bg-brand, var(--fallback-color-bg-brand)); } .cx_colorBgBrandHover--HJe78 { background-color: var(--color-bg-brand-hover, var(--fallback-color-bg-brand-hover)); } .cx_colorBgBrandPressed--LdeIb { background-color: var(--color-bg-brand-pressed, var(--fallback-color-bg-brand-pressed)); } .cx_colorBgBrandSecondary--eWo8v { background-color: var(--color-bg-brand-secondary, var(--fallback-color-bg-brand-secondary)); } .cx_colorBgBrandTertiary--ZUCbI { background-color: var(--color-bg-brand-tertiary, var(--fallback-color-bg-brand-tertiary)); } .cx_colorBgComponent--roipZ { background-color: var(--color-bg-component, var(--fallback-color-bg-component)); } .cx_colorBgComponentHover--dblMC { background-color: var(--color-bg-component-hover, var(--fallback-color-bg-component-hover)); } .cx_colorBgComponentPressed--EO7jH { background-color: var(--color-bg-component-pressed, var(--fallback-color-bg-component-pressed)); } .cx_colorBgComponentSecondary--wk59s { background-color: var(--color-bg-component-secondary, var(--fallback-color-bg-component-secondary)); } .cx_colorBgComponentTertiary--YxuOV { background-color: var(--color-bg-component-tertiary, var(--fallback-color-bg-component-tertiary)); } .cx_colorBgDanger--XGuqL { background-color: var(--color-bg-danger, var(--fallback-color-bg-danger)); } .cx_colorBgDangerHover--3K2MT { background-color: var(--color-bg-danger-hover, var(--fallback-color-bg-danger-hover)); } .cx_colorBgDangerPressed--NXUzt { background-color: var(--color-bg-danger-pressed, var(--fallback-color-bg-danger-pressed)); } .cx_colorBgDangerSecondary--CMK4s { background-color: var(--color-bg-danger-secondary, var(--fallback-color-bg-danger-secondary)); } .cx_colorBgDangerTertiary--wmGi- { background-color: var(--color-bg-danger-tertiary, var(--fallback-color-bg-danger-tertiary)); } .cx_colorBgDesign--62Jqq { background-color: var(--color-bg-design, var(--fallback-color-bg-design)); } .cx_colorBgDesignHover--GAXcB { background-color: var(--color-bg-design-hover, var(--fallback-color-bg-design-hover)); } .cx_colorBgDesignPressed--e4Yxt { background-color: var(--color-bg-design-pressed, var(--fallback-color-bg-design-pressed)); } .cx_colorBgDesignSecondary--MCi9s { background-color: var(--color-bg-design-secondary, var(--fallback-color-bg-design-secondary)); } .cx_colorBgDesignTertiary--7TSmP { background-color: var(--color-bg-design-tertiary, var(--fallback-color-bg-design-tertiary)); } .cx_colorBgDisabled--mpeyL { background-color: var(--color-bg-disabled, var(--fallback-color-bg-disabled)); } .cx_colorBgDisabledSecondary--gC04b { background-color: var(--color-bg-disabled-secondary, var(--fallback-color-bg-disabled-secondary)); } .cx_colorBgFigjam--9uGlW { background-color: var(--color-bg-figjam, var(--fallback-color-bg-figjam)); } .cx_colorBgFigjamHover--VUmE8 { background-color: var(--color-bg-figjam-hover, var(--fallback-color-bg-figjam-hover)); } .cx_colorBgFigjamPressed--7-FyO { background-color: var(--color-bg-figjam-pressed, var(--fallback-color-bg-figjam-pressed)); } .cx_colorBgFigjamSecondary--yJVBH { background-color: var(--color-bg-figjam-secondary, var(--fallback-color-bg-figjam-secondary)); } .cx_colorBgFigjamTertiary--z3KdK { background-color: var(--color-bg-figjam-tertiary, var(--fallback-color-bg-figjam-tertiary)); } .cx_colorBgHover--S-Hsw { background-color: var(--color-bg-hover, var(--fallback-color-bg-hover)); } .cx_colorBgInfo---pEob { background-color: var(--color-bg-info, var(--fallback-color-bg-info)); } .cx_colorBgInverse--GTQVe { background-color: var(--color-bg-inverse, var(--fallback-color-bg-inverse)); } .cx_colorBgMenu--3t26G { background-color: var(--color-bg-menu, var(--fallback-color-bg-menu)); } .cx_colorBgMenuDisabled--Kv18C { background-color: var(--color-bg-menu-disabled, var(--fallback-color-bg-menu-disabled)); } .cx_colorBgMenuHover--mttnM { background-color: var(--color-bg-menu-hover, var(--fallback-color-bg-menu-hover)); } .cx_colorBgMenuPressed--76tFf { background-color: var(--color-bg-menu-pressed, var(--fallback-color-bg-menu-pressed)); } .cx_colorBgMenuSecondary--j4A11 { background-color: var(--color-bg-menu-secondary, var(--fallback-color-bg-menu-secondary)); } .cx_colorBgMenuSelected---GaFF { background-color: var(--color-bg-menu-selected, var(--fallback-color-bg-menu-selected)); } .cx_colorBgMenuSelectedHover--jzs-F { background-color: var(--color-bg-menu-selected-hover, var(--fallback-color-bg-menu-selected-hover)); } .cx_colorBgMenuSelectedPressed--OC2K- { background-color: var(--color-bg-menu-selected-pressed, var(--fallback-color-bg-menu-selected-pressed)); } .cx_colorBgMenuSelectedSecondary--4LUgk { background-color: var(--color-bg-menu-selected-secondary, var(--fallback-color-bg-menu-selected-secondary)); } .cx_colorBgMenuSelectedTertiary--hwSPM { background-color: var(--color-bg-menu-selected-tertiary, var(--fallback-color-bg-menu-selected-tertiary)); } .cx_colorBgMenuTertiary--HUvUz { background-color: var(--color-bg-menu-tertiary, var(--fallback-color-bg-menu-tertiary)); } .cx_colorBgOnselected--lojIv { background-color: var(--color-bg-onselected, var(--fallback-color-bg-onselected)); } .cx_colorBgOnselectedHover--IeBOR { background-color: var(--color-bg-onselected-hover, var(--fallback-color-bg-onselected-hover)); } .cx_colorBgOnselectedPressed--NLelH { background-color: var(--color-bg-onselected-pressed, var(--fallback-color-bg-onselected-pressed)); } .cx_colorBgPressed--RYV1W { background-color: var(--color-bg-pressed, var(--fallback-color-bg-pressed)); } .cx_colorBgSecondary--nurE- { background-color: var(--color-bg-secondary, var(--fallback-color-bg-secondary)); } .cx_colorBgSelected--M8tCq { background-color: var(--color-bg-selected, var(--fallback-color-bg-selected)); } .cx_colorBgSelectedHover--TVoCp { background-color: var(--color-bg-selected-hover, var(--fallback-color-bg-selected-hover)); } .cx_colorBgSelectedPressed--ctgYF { background-color: var(--color-bg-selected-pressed, var(--fallback-color-bg-selected-pressed)); } .cx_colorBgSelectedSecondary--3Vbi7 { background-color: var(--color-bg-selected-secondary, var(--fallback-color-bg-selected-secondary)); } .cx_colorBgSelectedStrong--ax0Lq { background-color: var(--color-bg-selected-strong, var(--fallback-color-bg-selected-strong)); } .cx_colorBgSelectedTertiary--ayI49 { background-color: var(--color-bg-selected-tertiary, var(--fallback-color-bg-selected-tertiary)); } .cx_colorBgSuccess--WLCEa { background-color: var(--color-bg-success, var(--fallback-color-bg-success)); } .cx_colorBgSuccessHover--Dqjki { background-color: var(--color-bg-success-hover, var(--fallback-color-bg-success-hover)); } .cx_colorBgSuccessPressed--Z1P0e { background-color: var(--color-bg-success-pressed, var(--fallback-color-bg-success-pressed)); } .cx_colorBgSuccessSecondary--t9mBS { background-color: var(--color-bg-success-secondary, var(--fallback-color-bg-success-secondary)); } .cx_colorBgSuccessTertiary--da6SQ { background-color: var(--color-bg-success-tertiary, var(--fallback-color-bg-success-tertiary)); } .cx_colorBgTertiary--izw3s { background-color: var(--color-bg-tertiary, var(--fallback-color-bg-tertiary)); } .cx_colorBgToolbar--fH1Id { background-color: var(--color-bg-toolbar, var(--fallback-color-bg-toolbar)); } .cx_colorBgToolbarDisabled--Hgjaa { background-color: var(--color-bg-toolbar-disabled, var(--fallback-color-bg-toolbar-disabled)); } .cx_colorBgToolbarHover--0hY0k { background-color: var(--color-bg-toolbar-hover, var(--fallback-color-bg-toolbar-hover)); } .cx_colorBgToolbarPressed--E9VIc { background-color: var(--color-bg-toolbar-pressed, var(--fallback-color-bg-toolbar-pressed)); } .cx_colorBgToolbarSecondary--VF6w0 { background-color: var(--color-bg-toolbar-secondary, var(--fallback-color-bg-toolbar-secondary)); } .cx_colorBgToolbarSelected--VXSn- { background-color: var(--color-bg-toolbar-selected, var(--fallback-color-bg-toolbar-selected)); } .cx_colorBgToolbarSelectedHover--URjn7 { background-color: var(--color-bg-toolbar-selected-hover, var(--fallback-color-bg-toolbar-selected-hover)); } .cx_colorBgToolbarSelectedPressed--1yY-l { background-color: var(--color-bg-toolbar-selected-pressed, var(--fallback-color-bg-toolbar-selected-pressed)); } .cx_colorBgToolbarSelectedSecondary--tT2-Q { background-color: var(--color-bg-toolbar-selected-secondary, var(--fallback-color-bg-toolbar-selected-secondary)); } .cx_colorBgToolbarSelectedTertiary--CBCDQ { background-color: var(--color-bg-toolbar-selected-tertiary, var(--fallback-color-bg-toolbar-selected-tertiary)); } .cx_colorBgToolbarTertiary--ycn97 { background-color: var(--color-bg-toolbar-tertiary, var(--fallback-color-bg-toolbar-tertiary)); } .cx_colorBgTooltip--Zuqa1 { background-color: var(--color-bg-tooltip, var(--fallback-color-bg-tooltip)); } .cx_colorBgTooltipDisabled--vdPqF { background-color: var(--color-bg-tooltip-disabled, var(--fallback-color-bg-tooltip-disabled)); } .cx_colorBgTooltipHover--h0EQI { background-color: var(--color-bg-tooltip-hover, var(--fallback-color-bg-tooltip-hover)); } .cx_colorBgTooltipPressed--8xbfa { background-color: var(--color-bg-tooltip-pressed, var(--fallback-color-bg-tooltip-pressed)); } .cx_colorBgTooltipSecondary--AlApT { background-color: var(--color-bg-tooltip-secondary, var(--fallback-color-bg-tooltip-secondary)); } .cx_colorBgTooltipSelected--EvrvU { background-color: var(--color-bg-tooltip-selected, var(--fallback-color-bg-tooltip-selected)); } .cx_colorBgTooltipSelectedHover--gCgXv { background-color: var(--color-bg-tooltip-selected-hover, var(--fallback-color-bg-tooltip-selected-hover)); } .cx_colorBgTooltipSelectedPressed--y25X4 { background-color: var(--color-bg-tooltip-selected-pressed, var(--fallback-color-bg-tooltip-selected-pressed)); } .cx_colorBgTooltipSelectedSecondary--sCHKw { background-color: var(--color-bg-tooltip-selected-secondary, var(--fallback-color-bg-tooltip-selected-secondary)); } .cx_colorBgTooltipSelectedTertiary--97Afs { background-color: var(--color-bg-tooltip-selected-tertiary, var(--fallback-color-bg-tooltip-selected-tertiary)); } .cx_colorBgTooltipTertiary--6j8Yq { background-color: var(--color-bg-tooltip-tertiary, var(--fallback-color-bg-tooltip-tertiary)); } .cx_colorBgWarning---8R-B { background-color: var(--color-bg-warning, var(--fallback-color-bg-warning)); } .cx_colorBgWarningHover--PYf6E { background-color: var(--color-bg-warning-hover, var(--fallback-color-bg-warning-hover)); } .cx_colorBgWarningPressed--wD3xP { background-color: var(--color-bg-warning-pressed, var(--fallback-color-bg-warning-pressed)); } .cx_colorBgWarningSecondary--bWKS0 { background-color: var(--color-bg-warning-secondary, var(--fallback-color-bg-warning-secondary)); } .cx_colorBgWarningTertiary--5x5A- { background-color: var(--color-bg-warning-tertiary, var(--fallback-color-bg-warning-tertiary)); } .cx_colorBgvoting--2zcqL { background-color: var(--color-bgvoting); } .cx_colorBgvotingsecondary---FU2s { background-color: var(--color-bgvotingsecondary); } .cx_colorBgvotingtertiary--9PlZ2 { background-color: var(--color-bgvotingtertiary); } .cx_colorBgvotingwheelhover--OmV8z { background-color: var(--color-bgvotingwheelhover); } .cx_colorBgvotingwheeldial--Or8sd { background-color: var(--color-bgvotingwheeldial); } } /* "shared/css_builder/gen/css_builder_borderColor.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_colorBorder--BP-qT { border-color: var(--color-border, var(--fallback-color-border)); } .cx_colorBorderAssistive--Srxwq { border-color: var(--color-border-assistive, var(--fallback-color-border-assistive)); } .cx_colorBorderAssistiveStrong--qrv7B { border-color: var(--color-border-assistive-strong, var(--fallback-color-border-assistive-strong)); } .cx_colorBorderBg--GeZ4O { border-color: var(--color-bg, var(--fallback-color-bg)); } .cx_colorBorderBrand--AE8oq { border-color: var(--color-border-brand, var(--fallback-color-border-brand)); } .cx_colorBorderBrandStrong--p6njs { border-color: var(--color-border-brand-strong, var(--fallback-color-border-brand-strong)); } .cx_colorBorderComponent--kf4J4 { border-color: var(--color-border-component, var(--fallback-color-border-component)); } .cx_colorBorderComponentStrong--SFjmb { border-color: var(--color-border-component-strong, var(--fallback-color-border-component-strong)); } .cx_colorBorderComponentHover--Y7s58 { border-color: var(--color-border-component-hover, var(--fallback-color-border-component-hover)); } .cx_colorBorderDanger--Ts4p- { border-color: var(--color-border-danger, var(--fallback-color-border-danger)); } .cx_colorBorderDangerStrong--d7fyi { border-color: var(--color-border-danger-strong, var(--fallback-color-border-danger-strong)); } .cx_colorBorderDesign--m3Rxv { border-color: var(--color-border-design, var(--fallback-color-border-design)); } .cx_colorBorderDesignStrong--DU4Ft { border-color: var(--color-border-design-strong, var(--fallback-color-border-design-strong)); } .cx_colorBorderDisabled--k9jhr { border-color: var(--color-border-disabled, var(--fallback-color-border-disabled)); } .cx_colorBorderDisabledStrong--9buo1 { border-color: var(--color-border-disabled-strong, var(--fallback-color-border-disabled-strong)); } .cx_colorBorderFigjam--b2UxB { border-color: var(--color-border-figjam, var(--fallback-color-border-figjam)); } .cx_colorBorderFigjamStrong--kATh8 { border-color: var(--color-border-figjam-strong, var(--fallback-color-border-figjam-strong)); } .cx_colorBorderMenu--vetv4 { border-color: var(--color-border-menu, var(--fallback-color-border-menu)); } .cx_colorBorderMenuDisabled--DbOov { border-color: var(--color-border-menu-disabled, var(--fallback-color-border-menu-disabled)); } .cx_colorBorderMenuDisabledStrong--yINuQ { border-color: var(--color-border-menu-disabled-strong, var(--fallback-color-border-menu-disabled-strong)); } .cx_colorBorderMenuOnselected--Rc1EK { border-color: var(--color-border-menu-onselected, var(--fallback-color-border-menu-onselected)); } .cx_colorBorderMenuOnselectedStrong--wNGt7 { border-color: var(--color-border-menu-onselected-strong, var(--fallback-color-border-menu-onselected-strong)); } .cx_colorBorderMenuSelected--IAAot { border-color: var(--color-border-menu-selected, var(--fallback-color-border-menu-selected)); } .cx_colorBorderMenuSelectedStrong---H7Ow { border-color: var(--color-border-menu-selected-strong, var(--fallback-color-border-menu-selected-strong)); } .cx_colorBorderMenuStrong--6bHDH { border-color: var(--color-border-menu-strong, var(--fallback-color-border-menu-strong)); } .cx_colorBorderOnassistive--rD-fY { border-color: var(--color-border-onassistive, var(--fallback-color-border-onassistive)); } .cx_colorBorderOnassistiveStrong--LWL2S { border-color: var(--color-border-onassistive-strong, var(--fallback-color-border-onassistive-strong)); } .cx_colorBorderOnbrand--PFxgD { border-color: var(--color-border-onbrand, var(--fallback-color-border-onbrand)); } .cx_colorBorderOnbrandStrong--5DVXS { border-color: var(--color-border-onbrand-strong, var(--fallback-color-border-onbrand-strong)); } .cx_colorBorderOncomponent--oMus1 { border-color: var(--color-border-oncomponent, var(--fallback-color-border-oncomponent)); } .cx_colorBorderOncomponentStrong--dJef2 { border-color: var(--color-border-oncomponent-strong, var(--fallback-color-border-oncomponent-strong)); } .cx_colorBorderOndanger--Im1Du { border-color: var(--color-border-ondanger, var(--fallback-color-border-ondanger)); } .cx_colorBorderOndangerStrong--sGXKD { border-color: var(--color-border-ondanger-strong, var(--fallback-color-border-ondanger-strong)); } .cx_colorBorderOndesign--bFf-F { border-color: var(--color-border-ondesign, var(--fallback-color-border-ondesign)); } .cx_colorBorderOndesignStrong--vCjA- { border-color: var(--color-border-ondesign-strong, var(--fallback-color-border-ondesign-strong)); } .cx_colorBorderOnfigjam--8MH4M { border-color: var(--color-border-onfigjam, var(--fallback-color-border-onfigjam)); } .cx_colorBorderOnfigjamStrong--SxwMV { border-color: var(--color-border-onfigjam-strong, var(--fallback-color-border-onfigjam-strong)); } .cx_colorBorderOnselected--qIvBM { border-color: var(--color-border-onselected, var(--fallback-color-border-onselected)); } .cx_colorBorderOnselectedStrong--FDptJ { border-color: var(--color-border-onselected-strong, var(--fallback-color-border-onselected-strong)); } .cx_colorBorderOnsuccess--Ys8Z7 { border-color: var(--color-border-onsuccess, var(--fallback-color-border-onsuccess)); } .cx_colorBorderOnsuccessStrong--OYRQw { border-color: var(--color-border-onsuccess-strong, var(--fallback-color-border-onsuccess-strong)); } .cx_colorBorderOnwarning--dR3I6 { border-color: var(--color-border-onwarning, var(--fallback-color-border-onwarning)); } .cx_colorBorderOnwarningStrong--Zdt0E { border-color: var(--color-border-onwarning-strong, var(--fallback-color-border-onwarning-strong)); } .cx_colorBorderSelected--tg-sx { border-color: var(--color-border-selected, var(--fallback-color-border-selected)); } .cx_colorBorderSelectedStrong--sfWrQ { border-color: var(--color-border-selected-strong, var(--fallback-color-border-selected-strong)); } .cx_colorBorderStrong--CIy2s { border-color: var(--color-border-strong, var(--fallback-color-border-strong)); } .cx_colorBorderSuccess--b0KJ9 { border-color: var(--color-border-success, var(--fallback-color-border-success)); } .cx_colorBorderSuccessStrong--NEzx4 { border-color: var(--color-border-success-strong, var(--fallback-color-border-success-strong)); } .cx_colorBorderToolbar--aoo7- { border-color: var(--color-border-toolbar, var(--fallback-color-border-toolbar)); } .cx_colorBorderToolbarDisabled--mxDQl { border-color: var(--color-border-toolbar-disabled, var(--fallback-color-border-toolbar-disabled)); } .cx_colorBorderToolbarOnselected--ZHdyY { border-color: var(--color-border-toolbar-onselected, var(--fallback-color-border-toolbar-onselected)); } .cx_colorBorderToolbarSelected--FDe1K { border-color: var(--color-border-toolbar-selected, var(--fallback-color-border-toolbar-selected)); } .cx_colorBorderToolbarSelectedStrong--k1-Dl { border-color: var(--color-border-toolbar-selected-strong, var(--fallback-color-border-toolbar-selected-strong)); } .cx_colorBorderToolbarStrong--oGZIH { border-color: var(--color-border-toolbar-strong, var(--fallback-color-border-toolbar-strong)); } .cx_colorBorderTooltip----8a1 { border-color: var(--color-border-tooltip, var(--fallback-color-border-tooltip)); } .cx_colorBorderTooltipDisabled--FaJsv { border-color: var(--color-border-tooltip-disabled, var(--fallback-color-border-tooltip-disabled)); } .cx_colorBorderTooltipDisabledStrong--Pck5P { border-color: var(--color-border-tooltip-disabled-strong, var(--fallback-color-border-tooltip-disabled-strong)); } .cx_colorBorderTooltipOnselected--RhnCK { border-color: var(--color-border-tooltip-onselected, var(--fallback-color-border-tooltip-onselected)); } .cx_colorBorderTooltipOnselectedStrong--NwPwH { border-color: var(--color-border-tooltip-onselected-strong, var(--fallback-color-border-tooltip-onselected-strong)); } .cx_colorBorderTooltipSelected--uncdh { border-color: var(--color-border-tooltip-selected, var(--fallback-color-border-tooltip-selected)); } .cx_colorBorderTooltipSelectedStrong--24jnT { border-color: var(--color-border-tooltip-selected-strong, var(--fallback-color-border-tooltip-selected-strong)); } .cx_colorBorderTooltipStrong--yPXLx { border-color: var(--color-border-tooltip-strong, var(--fallback-color-border-tooltip-strong)); } .cx_colorBorderWarning--SaUhg { border-color: var(--color-border-warning, var(--fallback-color-border-warning)); } .cx_colorBorderWarningStrong--OqgYy { border-color: var(--color-border-warning-strong, var(--fallback-color-border-warning-strong)); } } /* "shared/css_builder/gen/css_builder_borderStyle.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bSolid--NsGWa { border-style: solid; } } /* "shared/css_builder/gen/css_builder_borderRadius.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bRadiusDefault--cSpIm { border-radius: 2px; } .cx_bRadiusFull--Q1sXB { border-radius: 100%; } .cx_bRadius1--oeeIW { border-radius: 1px; } .cx_bRadius2--63t-d { border-radius: 2px; } .cx_bRadius3--Y9NcU { border-radius: 3px; } .cx_bRadius4--yZ4-1 { border-radius: 4px; } .cx_bRadiusHalf--lIxq2 { border-radius: 50%; } .cx_bRadius5--JCLrp { border-radius: 5px; } .cx_bRadius6--R97Dz { border-radius: 6px; } .cx_bRadius7--4k4KF { border-radius: 7px; } .cx_bRadius8--rEIAh { border-radius: 8px; } .cx_radiusFull--xExEp { border-radius: var(--radius-full, 9999px); } .cx_radiusLarge--9n2MN { border-radius: var(--radius-large, 0.8125rem); } .cx_radiusMedium--x0Pta { border-radius: var(--radius-medium, 0.3125rem); } .cx_radiusSmall--V6U5- { border-radius: var(--radius-small, 0.125rem); } .cx_radiusNone--JtrD1 { border-radius: var(--radius-none, 0rem); } } /* "shared/css_builder/gen/css_builder_borderTopWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bt0--ZLakD { border-top-width: 0; } .cx_bt1--f68eR { border-top-width: 1px; } .cx_bt2--3S6Ql { border-top-width: 2px; } } /* "shared/css_builder/gen/css_builder_borderRightWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_br0--j-tZ1 { border-right-width: 0; } .cx_br1--47PNU { border-right-width: 1px; } .cx_br2--qA0Cr { border-right-width: 2px; } } /* "shared/css_builder/gen/css_builder_borderBottomWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bb0--dPfkI { border-bottom-width: 0; } .cx_bb1--Bzd11 { border-bottom-width: 1px; } .cx_bb2--KQiCk { border-bottom-width: 2px; } } /* "shared/css_builder/gen/css_builder_borderLeftWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_bl0--Dkwsw { border-left-width: 0; } .cx_bl1--OaW-u { border-left-width: 1px; } .cx_bl2--vgGHR { border-left-width: 2px; } } /* "shared/css_builder/gen/css_builder_fill.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_colorIcon--KQqHL { fill: var(--color-icon, var(--fallback-color-icon)); } .cx_colorIconAssistive--Kie6T { fill: var(--color-icon-assistive, var(--fallback-color-icon-assistive)); } .cx_colorIconAssistivePressed--dQRYw { fill: var(--color-icon-assistive-pressed, var(--fallback-color-icon-assistive-pressed)); } .cx_colorIconAssistiveSecondary--1zVID { fill: var(--color-icon-assistive-secondary, var(--fallback-color-icon-assistive-secondary)); } .cx_colorIconAssistiveTertiary--jYFTD { fill: var(--color-icon-assistive-tertiary, var(--fallback-color-icon-assistive-tertiary)); } .cx_colorIconBrand--cyJBh { fill: var(--color-icon-brand, var(--fallback-color-icon-brand)); } .cx_colorIconBrandPressed--sUKKc { fill: var(--color-icon-brand-pressed, var(--fallback-color-icon-brand-pressed)); } .cx_colorIconBrandSecondary--OsskO { fill: var(--color-icon-brand-secondary, var(--fallback-color-icon-brand-secondary)); } .cx_colorIconBrandTertiary--qPcSE { fill: var(--color-icon-brand-tertiary, var(--fallback-color-icon-brand-tertiary)); } .cx_colorIconComponent--XKaLj { fill: var(--color-icon-component, var(--fallback-color-icon-component)); } .cx_colorIconComponentPressed--nqwy9 { fill: var(--color-icon-component-pressed, var(--fallback-color-icon-component-pressed)); } .cx_colorIconComponentSecondary--aAQk8 { fill: var(--color-icon-component-secondary, var(--fallback-color-icon-component-secondary)); } .cx_colorIconComponentTertiary--P8d1J { fill: var(--color-icon-component-tertiary, var(--fallback-color-icon-component-tertiary)); } .cx_colorIconDanger--EcoKp { fill: var(--color-icon-danger, var(--fallback-color-icon-danger)); } .cx_colorIconDangerHover--SjUW- { fill: var(--color-icon-danger-hover, var(--fallback-color-icon-danger-hover)); } .cx_colorIconDangerPressed--2EZcP { fill: var(--color-icon-danger-pressed, var(--fallback-color-icon-danger-pressed)); } .cx_colorIconDangerSecondary--qa5Mu { fill: var(--color-icon-danger-secondary, var(--fallback-color-icon-danger-secondary)); } .cx_colorIconDangerSecondaryHover--sOXma { fill: var(--color-icon-danger-secondary-hover, var(--fallback-color-icon-danger-secondary-hover)); } .cx_colorIconDangerTertiary--AKEZ2 { fill: var(--color-icon-danger-tertiary, var(--fallback-color-icon-danger-tertiary)); } .cx_colorIconDesign--Ve7iK { fill: var(--color-icon-design, var(--fallback-color-icon-design)); } .cx_colorIconDesignPressed--1DBr- { fill: var(--color-icon-design-pressed, var(--fallback-color-icon-design-pressed)); } .cx_colorIconDesignSecondary--jpCwP { fill: var(--color-icon-design-secondary, var(--fallback-color-icon-design-secondary)); } .cx_colorIconDesignTertiary--ZGfGu { fill: var(--color-icon-design-tertiary, var(--fallback-color-icon-design-tertiary)); } .cx_colorIconDisabled--F7g6b { fill: var(--color-icon-disabled, var(--fallback-color-icon-disabled)); } .cx_colorIconFigjam--vqrG6 { fill: var(--color-icon-figjam, var(--fallback-color-icon-figjam)); } .cx_colorIconFigjamPressed--7Rizx { fill: var(--color-icon-figjam-pressed, var(--fallback-color-icon-figjam-pressed)); } .cx_colorIconFigjamSecondary--qLpX4 { fill: var(--color-icon-figjam-secondary, var(--fallback-color-icon-figjam-secondary)); } .cx_colorIconFigjamTertiary--X5cTP { fill: var(--color-icon-figjam-tertiary, var(--fallback-color-icon-figjam-tertiary)); } .cx_colorIconHover--5cHRH { fill: var(--color-icon-hover, var(--fallback-color-icon-hover)); } .cx_colorIconMenu--RaUFU { fill: var(--color-icon-menu, var(--fallback-color-icon-menu)); } .cx_colorIconMenuDanger--3oLyu { fill: var(--color-icon-menu-danger, var(--fallback-color-icon-menu-danger)); } .cx_colorIconMenuDisabled--uSgBS { fill: var(--color-icon-menu-disabled, var(--fallback-color-icon-menu-disabled)); } .cx_colorIconMenuHover--kaqfh { fill: var(--color-icon-menu-hover, var(--fallback-color-icon-menu-hover)); } .cx_colorIconMenuOndisabled--YzsnL { fill: var(--color-icon-menu-ondisabled, var(--fallback-color-icon-menu-ondisabled)); } .cx_colorIconMenuOnselected--DeZz4 { fill: var(--color-icon-menu-onselected, var(--fallback-color-icon-menu-onselected)); } .cx_colorIconMenuPressed--FF3E2 { fill: var(--color-icon-menu-pressed, var(--fallback-color-icon-menu-pressed)); } .cx_colorIconMenuSecondary--ny41m { fill: var(--color-icon-menu-secondary, var(--fallback-color-icon-menu-secondary)); } .cx_colorIconMenuSecondaryHover--vZDFh { fill: var(--color-icon-menu-secondary-hover, var(--fallback-color-icon-menu-secondary-hover)); } .cx_colorIconMenuSelected--TlaHO { fill: var(--color-icon-menu-selected, var(--fallback-color-icon-menu-selected)); } .cx_colorIconMenuSelectedSecondary--YyZPF { fill: var(--color-icon-menu-selected-secondary, var(--fallback-color-icon-menu-selected-secondary)); } .cx_colorIconMenuSelectedTertiary--zQx-C { fill: var(--color-icon-menu-selected-tertiary, var(--fallback-color-icon-menu-selected-tertiary)); } .cx_colorIconMenuTertiary--rm741 { fill: var(--color-icon-menu-tertiary, var(--fallback-color-icon-menu-tertiary)); } .cx_colorIconMenuTertiaryHover--N7jZZ { fill: var(--color-icon-menu-tertiary-hover, var(--fallback-color-icon-menu-tertiary-hover)); } .cx_colorIconMenuWarning--ZCTHx { fill: var(--color-icon-menu-warning, var(--fallback-color-icon-menu-warning)); } .cx_colorIconOnassistive--T3vwB { fill: var(--color-icon-onassistive, var(--fallback-color-icon-onassistive)); } .cx_colorIconOnassistiveSecondary--0FomF { fill: var(--color-icon-onassistive-secondary, var(--fallback-color-icon-onassistive-secondary)); } .cx_colorIconOnassistiveTertiary--qpl2o { fill: var(--color-icon-onassistive-tertiary, var(--fallback-color-icon-onassistive-tertiary)); } .cx_colorIconOnbrand--DVH9E { fill: var(--color-icon-onbrand, var(--fallback-color-icon-onbrand)); } .cx_colorIconOnbrandSecondary--ioNqj { fill: var(--color-icon-onbrand-secondary, var(--fallback-color-icon-onbrand-secondary)); } .cx_colorIconOnbrandTertiary---gRxq { fill: var(--color-icon-onbrand-tertiary, var(--fallback-color-icon-onbrand-tertiary)); } .cx_colorIconOncomponent--Jf0Cj { fill: var(--color-icon-oncomponent, var(--fallback-color-icon-oncomponent)); } .cx_colorIconOncomponentSecondary--9R2-C { fill: var(--color-icon-oncomponent-secondary, var(--fallback-color-icon-oncomponent-secondary)); } .cx_colorIconOncomponentTertiary--ZOa6N { fill: var(--color-icon-oncomponent-tertiary, var(--fallback-color-icon-oncomponent-tertiary)); } .cx_colorIconOndanger--CnzSV { fill: var(--color-icon-ondanger, var(--fallback-color-icon-ondanger)); } .cx_colorIconOndangerSecondary--elxvj { fill: var(--color-icon-ondanger-secondary, var(--fallback-color-icon-ondanger-secondary)); } .cx_colorIconOndangerTertiary---tDi8 { fill: var(--color-icon-ondanger-tertiary, var(--fallback-color-icon-ondanger-tertiary)); } .cx_colorIconOndesign--JJWNf { fill: var(--color-icon-ondesign, var(--fallback-color-icon-ondesign)); } .cx_colorIconOndesignSecondary--h9QuB { fill: var(--color-icon-ondesign-secondary, var(--fallback-color-icon-ondesign-secondary)); } .cx_colorIconOndesignTertiary--onawj { fill: var(--color-icon-ondesign-tertiary, var(--fallback-color-icon-ondesign-tertiary)); } .cx_colorIconOndisabled--IpBm- { fill: var(--color-icon-ondisabled, var(--fallback-color-icon-ondisabled)); } .cx_colorIconOnfigjam--bTjGq { fill: var(--color-icon-onfigjam, var(--fallback-color-icon-onfigjam)); } .cx_colorIconOnfigjamSecondary--XG-z- { fill: var(--color-icon-onfigjam-secondary, var(--fallback-color-icon-onfigjam-secondary)); } .cx_colorIconOnfigjamTertiary--XrcVU { fill: var(--color-icon-onfigjam-tertiary, var(--fallback-color-icon-onfigjam-tertiary)); } .cx_colorIconOninverse--PiehO { fill: var(--color-icon-oninverse, var(--fallback-color-icon-oninverse)); } .cx_colorIconOnselected--m3LpM { fill: var(--color-icon-onselected, var(--fallback-color-icon-onselected)); } .cx_colorIconOnselectedSecondary--QwDAr { fill: var(--color-icon-onselected-secondary, var(--fallback-color-icon-onselected-secondary)); } .cx_colorIconOnselectedStrong--YsEps { fill: var(--color-icon-onselected-strong, var(--fallback-color-icon-onselected-strong)); } .cx_colorIconOnselectedTertiary--Jgth- { fill: var(--color-icon-onselected-tertiary, var(--fallback-color-icon-onselected-tertiary)); } .cx_colorIconOnsuccess--D6JVB { fill: var(--color-icon-onsuccess, var(--fallback-color-icon-onsuccess)); } .cx_colorIconOnsuccessSecondary--vYMxI { fill: var(--color-icon-onsuccess-secondary, var(--fallback-color-icon-onsuccess-secondary)); } .cx_colorIconOnsuccessTertiary--vPm4b { fill: var(--color-icon-onsuccess-tertiary, var(--fallback-color-icon-onsuccess-tertiary)); } .cx_colorIconOnwarning--UegwU { fill: var(--color-icon-onwarning, var(--fallback-color-icon-onwarning)); } .cx_colorIconOnwarningSecondary--0-obd { fill: var(--color-icon-onwarning-secondary, var(--fallback-color-icon-onwarning-secondary)); } .cx_colorIconOnwarningTertiary--ohUFI { fill: var(--color-icon-onwarning-tertiary, var(--fallback-color-icon-onwarning-tertiary)); } .cx_colorIconPressed--9hOkG { fill: var(--color-icon-pressed, var(--fallback-color-icon-pressed)); } .cx_colorIconSecondary--o1trQ { fill: var(--color-icon-secondary, var(--fallback-color-icon-secondary)); } .cx_colorIconSecondaryHover--VrReQ { fill: var(--color-icon-secondary-hover, var(--fallback-color-icon-secondary-hover)); } .cx_colorIconSelected--7ERuO { fill: var(--color-icon-selected, var(--fallback-color-icon-selected)); } .cx_colorIconSelectedSecondary--SrWE- { fill: var(--color-icon-selected-secondary, var(--fallback-color-icon-selected-secondary)); } .cx_colorIconSelectedTertiary--ByfSD { fill: var(--color-icon-selected-tertiary, var(--fallback-color-icon-selected-tertiary)); } .cx_colorIconSuccess--uaIyC { fill: var(--color-icon-success, var(--fallback-color-icon-success)); } .cx_colorIconSuccessPressed--g5b0R { fill: var(--color-icon-success-pressed, var(--fallback-color-icon-success-pressed)); } .cx_colorIconSuccessSecondary--QuQvz { fill: var(--color-icon-success-secondary, var(--fallback-color-icon-success-secondary)); } .cx_colorIconSuccessTertiary--zA2uj { fill: var(--color-icon-success-tertiary, var(--fallback-color-icon-success-tertiary)); } .cx_colorIconTertiary---2Ftg { fill: var(--color-icon-tertiary, var(--fallback-color-icon-tertiary)); } .cx_colorIconTertiaryHover--Qvl-C { fill: var(--color-icon-tertiary-hover, var(--fallback-color-icon-tertiary-hover)); } .cx_colorIconToolbar--0y5-K { fill: var(--color-icon-toolbar, var(--fallback-color-icon-toolbar)); } .cx_colorIconToolbarDanger--WsL9K { fill: var(--color-icon-toolbar-danger, var(--fallback-color-icon-toolbar-danger)); } .cx_colorIconToolbarDisabled--LH45e { fill: var(--color-icon-toolbar-disabled, var(--fallback-color-icon-toolbar-disabled)); } .cx_colorIconToolbarHover--z-tFY { fill: var(--color-icon-toolbar-hover, var(--fallback-color-icon-toolbar-hover)); } .cx_colorIconToolbarOndisabled--bFdQz { fill: var(--color-icon-toolbar-ondisabled, var(--fallback-color-icon-toolbar-ondisabled)); } .cx_colorIconToolbarOnselected--m8LN8 { fill: var(--color-icon-toolbar-onselected, var(--fallback-color-icon-toolbar-onselected)); } .cx_colorIconToolbarPressed--A1u7- { fill: var(--color-icon-toolbar-pressed, var(--fallback-color-icon-toolbar-pressed)); } .cx_colorIconToolbarSecondary--Qxayv { fill: var(--color-icon-toolbar-secondary, var(--fallback-color-icon-toolbar-secondary)); } .cx_colorIconToolbarSecondaryHover--F5mc9 { fill: var(--color-icon-toolbar-secondary-hover, var(--fallback-color-icon-toolbar-secondary-hover)); } .cx_colorIconToolbarSelected--Yo5hU { fill: var(--color-icon-toolbar-selected, var(--fallback-color-icon-toolbar-selected)); } .cx_colorIconToolbarSelectedSecondary--TlDXh { fill: var(--color-icon-toolbar-selected-secondary,var(--fallback-color-icon-toolbar-selected-econdary)); } .cx_colorIconToolbarSelectedTertiary--7n7js { fill: var(--color-icon-toolbar-selected-tertiary, var(--fallback-color-icon-toolbar-selected-tertiary)); } .cx_colorIconToolbarTertiary--sjA4z { fill: var(--color-icon-toolbar-tertiary, var(--fallback-color-icon-toolbar-tertiary)); } .cx_colorIconToolbarTertiaryHover--B3-3R { fill: var(--color-icon-toolbar-tertiary-hover, var(--fallback-color-icon-toolbar-tertiary-hover)); } .cx_colorIconToolbarWarning--XHWie { fill: var(--color-icon-toolbar-warning, var(--fallback-color-icon-toolbar-warning)); } .cx_colorIconTooltip--ZPRin { fill: var(--color-icon-tooltip, var(--fallback-color-icon-tooltip)); } .cx_colorIconTooltipDanger--JfY1O { fill: var(--color-icon-tooltip-danger, var(--fallback-color-icon-tooltip-danger)); } .cx_colorIconTooltipDisabled--JvUQF { fill: var(--color-icon-tooltip-disabled, var(--fallback-color-icon-tooltip-disabled)); } .cx_colorIconTooltipHover--HNW86 { fill: var(--color-icon-tooltip-hover, var(--fallback-color-icon-tooltip-hover)); } .cx_colorIconTooltipOndisabled--si2Vp { fill: var(--color-icon-tooltip-ondisabled, var(--fallback-color-icon-tooltip-ondisabled)); } .cx_colorIconTooltipOnselected--VSqo9 { fill: var(--color-icon-tooltip-onselected, var(--fallback-color-icon-tooltip-onselected)); } .cx_colorIconTooltipPressed--y9Ay2 { fill: var(--color-icon-tooltip-pressed, var(--fallback-color-icon-tooltip-pressed)); } .cx_colorIconTooltipSecondary--Lv-ji { fill: var(--color-icon-tooltip-secondary, var(--fallback-color-icon-tooltip-secondary)); } .cx_colorIconTooltipSecondaryHover--hfAzi { fill: var(--color-icon-tooltip-secondary-hover, var(--fallback-color-icon-tooltip-secondary-hover)); } .cx_colorIconTooltipSelected--Md1ah { fill: var(--color-icon-tooltip-selected, var(--fallback-color-icon-tooltip-selected)); } .cx_colorIconTooltipSelectedSecondary--AoF0j { fill: var(--color-icon-tooltip-selected-secondary,var(--fallback-color-icon-tooltip-selected-econdary)); } .cx_colorIconTooltipSelectedTertiary--rr01b { fill: var(--color-icon-tooltip-selected-tertiary, var(--fallback-color-icon-tooltip-selected-tertiary)); } .cx_colorIconTooltipTertiary--5XYuQ { fill: var(--color-icon-tooltip-tertiary, var(--fallback-color-icon-tooltip-tertiary)); } .cx_colorIconTooltipTertiaryHover--QqtTZ { fill: var(--color-icon-tooltip-tertiary-hover, var(--fallback-color-icon-tooltip-tertiary-hover)); } .cx_colorIconTooltipWarning--UY7F9 { fill: var(--color-icon-tooltip-warning, var(--fallback-color-icon-tooltip-warning)); } .cx_colorIconWarning--HPCJ8 { fill: var(--color-icon-warning, var(--fallback-color-icon-warning)); } .cx_colorIconWarningPressed--bnkpS { fill: var(--color-icon-warning-pressed, var(--fallback-color-icon-warning-pressed)); } .cx_colorIconWarningSecondary--0P7w9 { fill: var(--color-icon-warning-secondary, var(--fallback-color-icon-warning-secondary)); } .cx_colorIconWarningTertiary--niJzj { fill: var(--color-icon-warning-tertiary, var(--fallback-color-icon-warning-tertiary)); } .cx_colorIcononvoting--Z-vY7 { fill: var(--color-icononvoting); } } /* "shared/css_builder/gen/css_builder_color.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_colorText--wsSSd { color: var(--color-text, var(--fallback-color-text)); } .cx_colorTextAssistive--cAAKt { color: var(--color-text-assistive, var(--fallback-color-text-assistive)); } .cx_colorTextAssistivePressed--2KDad { color: var(--color-text-assistive-pressed, var(--fallback-color-text-assistive-pressed)); } .cx_colorTextAssistiveSecondary--mIGWT { color: var(--color-text-assistive-secondary, var(--fallback-color-text-assistive-secondary)); } .cx_colorTextAssistiveTertiary--BK3M3 { color: var(--color-text-assistive-tertiary, var(--fallback-color-text-assistive-tertiary)); } .cx_colorTextBrand--MgoYT { color: var(--color-text-brand, var(--fallback-color-text-brand)); } .cx_colorTextBrandSecondary--1z1CL { color: var(--color-text-brand-secondary, var(--fallback-color-text-brand-secondary)); } .cx_colorTextBrandTertiary--Ds4bq { color: var(--color-text-brand-tertiary, var(--fallback-color-text-brand-tertiary)); } .cx_colorTextComponent--FYD-1 { color: var(--color-text-component, var(--fallback-color-text-component)); } .cx_colorTextComponentPressed--iIRtn { color: var(--color-text-component-pressed, var(--fallback-color-text-component-pressed)); } .cx_colorTextComponentSecondary--LML6Q { color: var(--color-text-component-secondary, var(--fallback-color-text-component-secondary)); } .cx_colorTextComponentTertiary--MU5vr { color: var(--color-text-component-tertiary, var(--fallback-color-text-component-tertiary)); } .cx_colorTextDanger--yVNUF { color: var(--color-text-danger, var(--fallback-color-text-danger)); } .cx_colorTextDangerSecondary--RNFcs { color: var(--color-text-danger-secondary, var(--fallback-color-text-danger-secondary)); } .cx_colorTextDangerTertiary--T0Kig { color: var(--color-text-danger-tertiary, var(--fallback-color-text-danger-tertiary)); } .cx_colorTextDesign--KSvxF { color: var(--color-text-design, var(--fallback-color-text-design)); } .cx_colorTextDesignPressed---ZLaZ { color: var(--color-text-design-pressed, var(--fallback-color-text-design-pressed)); } .cx_colorTextDesignSecondary--CGqAk { color: var(--color-text-design-secondary, var(--fallback-color-text-design-secondary)); } .cx_colorTextDesignTertiary--ONHx4 { color: var(--color-text-design-tertiary, var(--fallback-color-text-design-tertiary)); } .cx_colorTextDisabled--aj9N0 { color: var(--color-text-disabled, var(--fallback-color-text-disabled)); } .cx_colorTextFigjam--44zDW { color: var(--color-text-figjam, var(--fallback-color-text-figjam)); } .cx_colorTextFigjamPressed--OjglS { color: var(--color-text-figjam-pressed, var(--fallback-color-text-figjam-pressed)); } .cx_colorTextFigjamSecondary--BVOeJ { color: var(--color-text-figjam-secondary, var(--fallback-color-text-figjam-secondary)); } .cx_colorTextFigjamTertiary--edI-s { color: var(--color-text-figjam-tertiary, var(--fallback-color-text-figjam-tertiary)); } .cx_colorTextHover--9YF-w { color: var(--color-text-hover, var(--fallback-color-text-hover)); } .cx_colorTextMenu--0cowe { color: var(--color-text-menu, var(--fallback-color-text-menu)); } .cx_colorTextMenuDanger--JzpSR { color: var(--color-text-menu-danger, var(--fallback-color-text-menu-danger)); } .cx_colorTextMenuDisabled--Dgzmc { color: var(--color-text-menu-disabled, var(--fallback-color-text-menu-disabled)); } .cx_colorTextMenuHover--9bHRZ { color: var(--color-text-menu-hover, var(--fallback-color-text-menu-hover)); } .cx_colorTextMenuOndisabled--b3hGO { color: var(--color-text-menu-ondisabled, var(--fallback-color-text-menu-ondisabled)); } .cx_colorTextMenuOnselected--0aLWt { color: var(--color-text-menu-onselected, var(--fallback-color-text-menu-onselected)); } .cx_colorTextMenuSecondary--4V7Qh { color: var(--color-text-menu-secondary, var(--fallback-color-text-menu-secondary)); } .cx_colorTextMenuSecondaryHover--zFnb7 { color: var(--color-text-menu-secondary-hover, var(--fallback-color-text-menu-secondary-hover)); } .cx_colorTextMenuSelected--n-3cX { color: var(--color-text-menu-selected, var(--fallback-color-text-menu-selected)); } .cx_colorTextMenuSelectedSecondary--0BpKO { color: var(--color-text-menu-selected-secondary, var(--fallback-color-text-menu-selected-secondary)); } .cx_colorTextMenuSelectedTertiary--Tz2d8 { color: var(--color-text-menu-selected-tertiary, var(--fallback-color-text-menu-selected-tertiary)); } .cx_colorTextMenuTertiary--jpZFS { color: var(--color-text-menu-tertiary, var(--fallback-color-text-menu-tertiary)); } .cx_colorTextMenuTertiaryHover--DOl0b { color: var(--color-text-menu-tertiary-hover, var(--fallback-color-text-menu-tertiary-hover)); } .cx_colorTextMenuWarning--sHDLJ { color: var(--color-text-menu-warning, var(--fallback-color-text-menu-warning)); } .cx_colorTextOnassistive---wg5E { color: var(--color-text-onassistive, var(--fallback-color-text-onassistive)); } .cx_colorTextOnassistiveSecondary--HcR0p { color: var(--color-text-onassistive-secondary, var(--fallback-color-text-onassistive-secondary)); } .cx_colorTextOnassistiveTertiary--2f-QW { color: var(--color-text-onassistive-tertiary, var(--fallback-color-text-onassistive-tertiary)); } .cx_colorTextOnbrand--cdZ3F { color: var(--color-text-onbrand, var(--fallback-color-text-onbrand)); } .cx_colorTextOnbrandSecondary--9ij3k { color: var(--color-text-onbrand-secondary, var(--fallback-color-text-onbrand-secondary)); } .cx_colorTextOnbrandTertiary--H8MAX { color: var(--color-text-onbrand-tertiary, var(--fallback-color-text-onbrand-tertiary)); } .cx_colorTextOncomponent---zynI { color: var(--color-text-oncomponent, var(--fallback-color-text-oncomponent)); } .cx_colorTextOncomponentSecondary---vo-U { color: var(--color-text-oncomponent-secondary, var(--fallback-color-text-oncomponent-secondary)); } .cx_colorTextOncomponentTertiary--UJQBj { color: var(--color-text-oncomponent-tertiary, var(--fallback-color-text-oncomponent-tertiary)); } .cx_colorTextOndanger--L5iqv { color: var(--color-text-ondanger, var(--fallback-color-text-ondanger)); } .cx_colorTextOndangerSecondary--WoCQd { color: var(--color-text-ondanger-secondary, var(--fallback-color-text-ondanger-secondary)); } .cx_colorTextOndangerTertiary---x0Fi { color: var(--color-text-ondanger-tertiary, var(--fallback-color-text-ondanger-tertiary)); } .cx_colorTextOndesign--HPaxk { color: var(--color-text-ondesign, var(--fallback-color-text-ondesign)); } .cx_colorTextOndesignSecondary--x7Jnc { color: var(--color-text-ondesign-secondary, var(--fallback-color-text-ondesign-secondary)); } .cx_colorTextOndesignTertiary--rmmux { color: var(--color-text-ondesign-tertiary, var(--fallback-color-text-ondesign-tertiary)); } .cx_colorTextOndisabled--qYVKd { color: var(--color-text-ondisabled, var(--fallback-color-text-ondisabled)); } .cx_colorTextOnfigjam--8IrX5 { color: var(--color-text-onfigjam, var(--fallback-color-text-onfigjam)); } .cx_colorTextOnfigjamSecondary--kBeGA { color: var(--color-text-onfigjam-secondary, var(--fallback-color-text-onfigjam-secondary)); } .cx_colorTextOnfigjamTertiary--qjsK1 { color: var(--color-text-onfigjam-tertiary, var(--fallback-color-text-onfigjam-tertiary)); } .cx_colorTextOninverse--yLc-t { color: var(--color-text-oninverse, var(--fallback-color-text-oninverse)); } .cx_colorTextOnselected--AgUsA { color: var(--color-text-onselected, var(--fallback-color-text-onselected)); } .cx_colorTextOnselectedSecondary--i7xkY { color: var(--color-text-onselected-secondary, var(--fallback-color-text-onselected-secondary)); } .cx_colorTextOnselectedStrong--pqzOf { color: var(--color-text-onselected-strong, var(--fallback-color-text-onselected-strong)); } .cx_colorTextOnselectedTertiary---9oj4 { color: var(--color-text-onselected-tertiary, var(--fallback-color-text-onselected-tertiary)); } .cx_colorTextOnsuccess--UWCCn { color: var(--color-text-onsuccess, var(--fallback-color-text-onsuccess)); } .cx_colorTextOnsuccessSecondary--GDOEz { color: var(--color-text-onsuccess-secondary, var(--fallback-color-text-onsuccess-secondary)); } .cx_colorTextOnsuccessTertiary--hwwTO { color: var(--color-text-onsuccess-tertiary, var(--fallback-color-text-onsuccess-tertiary)); } .cx_colorTextOnwarning---TJhT { color: var(--color-text-onwarning, var(--fallback-color-text-onwarning)); } .cx_colorTextOnwarningSecondary--Tptpc { color: var(--color-text-onwarning-secondary, var(--fallback-color-text-onwarning-secondary)); } .cx_colorTextOnwarningTertiary--q3-Y6 { color: var(--color-text-onwarning-tertiary, var(--fallback-color-text-onwarning-tertiary)); } .cx_colorTextSecondary--BjNkK { color: var(--color-text-secondary, var(--fallback-color-text-secondary)); } .cx_colorTextSecondaryHover--WULHf { color: var(--color-text-secondary-hover, var(--fallback-color-text-secondary-hover)); } .cx_colorTextSelected--T1NgX { color: var(--color-text-selected, var(--fallback-color-text-selected)); } .cx_colorTextSelectedSecondary--z6V44 { color: var(--color-text-selected-secondary, var(--fallback-color-text-selected-secondary)); } .cx_colorTextSelectedTertiary--PFQ74 { color: var(--color-text-selected-tertiary, var(--fallback-color-text-selected-tertiary)); } .cx_colorTextSuccess--K-RtT { color: var(--color-text-success, var(--fallback-color-text-success)); } .cx_colorTextSuccessSecondary--BhQe3 { color: var(--color-text-success-secondary, var(--fallback-color-text-success-secondary)); } .cx_colorTextSuccessTertiary--fbEc- { color: var(--color-text-success-tertiary, var(--fallback-color-text-success-tertiary)); } .cx_colorTextTertiary--z9w5V { color: var(--color-text-tertiary, var(--fallback-color-text-tertiary)); } .cx_colorTextTertiaryHover--w1Pet { color: var(--color-text-tertiary-hover, var(--fallback-color-text-tertiary-hover)); } .cx_colorTextToolbar--DirqD { color: var(--color-text-toolbar, var(--fallback-color-text-toolbar)); } .cx_colorTextToolbarDanger--wtgjP { color: var(--color-text-toolbar-danger, var(--fallback-color-text-toolbar-danger)); } .cx_colorTextToolbarDisabled--aSEEx { color: var(--color-text-toolbar-disabled, var(--fallback-color-text-toolbar-disabled)); } .cx_colorTextToolbarHover--v92IJ { color: var(--color-text-toolbar-hover, var(--fallback-color-text-toolbar-hover)); } .cx_colorTextToolbarOndisabled--59eqp { color: var(--color-text-toolbar-ondisabled, var(--fallback-color-text-toolbar-ondisabled)); } .cx_colorTextToolbarOnselected--FC69c { color: var(--color-text-toolbar-onselected, var(--fallback-color-text-toolbar-onselected)); } .cx_colorTextToolbarSecondary--NgGyE { color: var(--color-text-toolbar-secondary, var(--fallback-color-text-toolbar-secondary)); } .cx_colorTextToolbarSecondaryHover--84zBK { color: var(--color-text-toolbar-secondary-hover, var(--fallback-color-text-toolbar-secondary-hover)); } .cx_colorTextToolbarSelected---66FI { color: var(--color-text-toolbar-selected, var(--fallback-color-text-toolbar-selected)); } .cx_colorTextToolbarSelectedSecondary--aWtdh { color: var(--color-text-toolbar-selected-secondary,var(--fallback-color-text-toolbar-selected-econdary)); } .cx_colorTextToolbarSelectedTertiary--otA8B { color: var(--color-text-toolbar-selected-tertiary, var(--fallback-color-text-toolbar-selected-tertiary)); } .cx_colorTextToolbarTertiary--s-ATo { color: var(--color-text-toolbar-tertiary, var(--fallback-color-text-toolbar-tertiary)); } .cx_colorTextToolbarTertiaryHover---ITrJ { color: var(--color-text-toolbar-tertiary-hover, var(--fallback-color-text-toolbar-tertiary-hover)); } .cx_colorTextToolbarWarning--sWPDV { color: var(--color-text-toolbar-warning, var(--fallback-color-text-toolbar-warning)); } .cx_colorTextTooltip--C0aUq { color: var(--color-text-tooltip, var(--fallback-color-text-tooltip)); } .cx_colorTextTooltipDanger--cRzy2 { color: var(--color-text-tooltip-danger, var(--fallback-color-text-tooltip-danger)); } .cx_colorTextTooltipDisabled--qA5uZ { color: var(--color-text-tooltip-disabled, var(--fallback-color-text-tooltip-disabled)); } .cx_colorTextTooltipHover--wvRW4 { color: var(--color-text-tooltip-hover, var(--fallback-color-text-tooltip-hover)); } .cx_colorTextTooltipOndisabled--ic6BA { color: var(--color-text-tooltip-ondisabled, var(--fallback-color-text-tooltip-ondisabled)); } .cx_colorTextTooltipOnselected--yIHiZ { color: var(--color-text-tooltip-onselected, var(--fallback-color-text-tooltip-onselected)); } .cx_colorTextTooltipSecondary--Wh5I5 { color: var(--color-text-tooltip-secondary, var(--fallback-color-text-tooltip-secondary)); } .cx_colorTextTooltipSecondaryHover--nAMKR { color: var(--color-text-tooltip-secondary-hover, var(--fallback-color-text-tooltip-secondary-hover)); } .cx_colorTextTooltipSelected--lUOd8 { color: var(--color-text-tooltip-selected, var(--fallback-color-text-tooltip-selected)); } .cx_colorTextTooltipSelectedSecondary--uOq2O { color: var(--color-text-tooltip-selected-secondary,var(--fallback-color-text-tooltip-selected-econdary)); } .cx_colorTextTooltipSelectedTertiary--tkSPk { color: var(--color-text-tooltip-selected-tertiary, var(--fallback-color-text-tooltip-selected-tertiary)); } .cx_colorTextTooltipTertiary--vDz-p { color: var(--color-text-tooltip-tertiary, var(--fallback-color-text-tooltip-tertiary)); } .cx_colorTextTooltipTertiaryHover--WuGwW { color: var(--color-text-tooltip-tertiary-hover, var(--fallback-color-text-tooltip-tertiary-hover)); } .cx_colorTextTooltipWarning--AeFc9 { color: var(--color-text-tooltip-warning, var(--fallback-color-text-tooltip-warning)); } .cx_colorTextWarning--RKg2D { color: var(--color-text-warning, var(--fallback-color-text-warning)); } .cx_colorTextWarningSecondary--tgvUY { color: var(--color-text-warning-secondary, var(--fallback-color-text-warning-secondary)); } .cx_colorTextWarningTertiary--CRehF { color: var(--color-text-warning-tertiary, var(--fallback-color-text-warning-tertiary)); } .cx_colorTextonvoting--e-5-2 { color: var(--color-textonvoting); } .cx_textInherit--JviGy { color: inherit; } } /* "shared/css_builder/gen/css_builder_fontFamily.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_fontInter--DbZZ9 { font-family: var(--font-family-default); } .cx_fontUi--BHaiN { font-family: var(--font-family-default); } .cx_fontWhyte--dzCGr { font-family: var(--font-family-display); } .cx_fpl__textDisplayFontFamily--8rTl9 { font-family: var(--text-display-font-family); } .cx_fpl__textHeadingLargeFontFamily--V5yH1 { font-family: var(--text-heading-large-font-family); } .cx_fpl__textHeadingMediumFontFamily--fh2PE { font-family: var(--text-heading-medium-font-family); } .cx_fpl__textHeadingSmallFontFamily--8NAnk { font-family: var(--text-heading-small-font-family); } .cx_fpl__textBodyLargeFontFamily--VAkQS { font-family: var(--text-body-large-font-family); } .cx_fpl__textBodyLargeStrongFontFamily--vXoLk { font-family: var(--text-body-large-strong-font-family); } .cx_fpl__textBodyMediumFontFamily--aA9a2 { font-family: var(--text-body-medium-font-family); } .cx_fpl__textBodyMediumStrongFontFamily--FWPJY { font-family: var(--text-body-medium-strong-font-family); } .cx_fpl__textBodySmallFontFamily--wgVXH { font-family: var(--text-body-small-font-family); } .cx_fpl__textBodySmallStrongFontFamily--2w7tX { font-family: var(--text-body-small-strong-font-family); } } /* "shared/css_builder/gen/css_builder_fontSize.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_font11--gANmO { font-size: 11px; } .cx_font12--vGb7s { font-size: 12px; } .cx_font13--89EtG { font-size: 13px; } .cx_font14--TnRM7 { font-size: 14px; } .cx_font15--nCjzs { font-size: 15px; } .cx_font16--0Ckoi { font-size: 16px; } .cx_font18--e3K09 { font-size: 18px; } .cx_font20--ovClw { font-size: 20px; } .cx_font22---zcgH { font-size: 22px; } .cx_font24--eXMAo { font-size: 24px; } .cx_font32--R3k9F { font-size: 32px; } .cx_fpl__textDisplayFontSize--2cWZ5 { font-size: var(--text-display-font-size); } .cx_fpl__textHeadingLargeFontSize--NCXNr { font-size: var(--text-heading-large-font-size); } .cx_fpl__textHeadingMediumFontSize--EnQxq { font-size: var(--text-heading-medium-font-size); } .cx_fpl__textHeadingSmallFontSize--zYwcv { font-size: var(--text-heading-small-font-size); } .cx_fpl__textBodyLargeFontSize--zsl49 { font-size: var(--text-body-large-font-size); } .cx_fpl__textBodyLargeStrongFontSize--225gl { font-size: var(--text-body-large-strong-font-size); } .cx_fpl__textBodyMediumFontSize--w-15b { font-size: var(--text-body-medium-font-size); } .cx_fpl__textBodyMediumStrongFontSize--L-WNC { font-size: var(--text-body-medium-strong-font-size); } .cx_fpl__textBodySmallFontSize--JrTVV { font-size: var(--text-body-small-font-size); } .cx_fpl__textBodySmallStrongFontSize--aoYBh { font-size: var(--text-body-small-strong-font-size); } } /* "shared/css_builder/gen/css_builder_fontStyle.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_italic--rt9ZQ { font-style: italic; } .cx_normal--tm9pu { font-style: normal; } } /* "shared/css_builder/gen/css_builder_fontWeight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_fontMedium--Wd6nB { font-weight: 500; } .cx_fontSemiBold--yrKUT { font-weight: 600; } .cx_fontBold---R-98 { font-weight: 700; } .cx_fontNormal--kaWAW { font-weight: 400; } .cx_fpl__textDisplayFontWeight--ZOCEh { font-weight: var(--text-display-font-weight); } .cx_fpl__textHeadingLargeFontWeight--AlKH6 { font-weight: var(--text-heading-large-font-weight); } .cx_fpl__textHeadingMediumFontWeight--Wi77L { font-weight: var(--text-heading-medium-font-weight); } .cx_fpl__textHeadingSmallFontWeight--V6CNP { font-weight: var(--text-heading-small-font-weight); } .cx_fpl__textBodyLargeFontWeight--2Y1Nh { font-weight: var(--text-body-large-font-weight); } .cx_fpl__textBodyLargeStrongFontWeight--fr4aK { font-weight: var(--text-body-large-strong-font-weight); } .cx_fpl__textBodyMediumFontWeight--Lbk2x { font-weight: var(--text-body-medium-font-weight); } .cx_fpl__textBodyMediumStrongFontWeight--NNYqO { font-weight: var(--text-body-medium-strong-font-weight); } .cx_fpl__textBodySmallFontWeight--0YPqZ { font-weight: var(--text-body-small-font-weight); } .cx_fpl__textBodySmallStrongFontWeight--xIeMR { font-weight: var(--text-body-small-strong-font-weight); } } /* "shared/css_builder/gen/css_builder_letterSpacing.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_fpl__textDisplayLetterSpacing--BgKdB { letter-spacing: var(--text-display-letter-spacing); } .cx_fpl__textHeadingLargeLetterSpacing--gVoc- { letter-spacing: var(--text-heading-large-letter-spacing); } .cx_fpl__textHeadingMediumLetterSpacing--6V-Bl { letter-spacing: var(--text-heading-medium-letter-spacing); } .cx_fpl__textHeadingSmallLetterSpacing--no7ke { letter-spacing: var(--text-heading-small-letter-spacing); } .cx_fpl__textBodyLargeLetterSpacing--99JeR { letter-spacing: var(--text-body-large-letter-spacing); } .cx_fpl__textBodyLargeStrongLetterSpacing--xF4dh { letter-spacing: var(--text-body-large-strong-letter-spacing); } .cx_fpl__textBodyMediumLetterSpacing--d6S9G { letter-spacing: var(--text-body-medium-letter-spacing); } .cx_fpl__textBodyMediumStrongLetterSpacing--URpPK { letter-spacing: var(--text-body-medium-strong-letter-spacing); } .cx_fpl__textBodySmallLetterSpacing--WHVEj { letter-spacing: var(--text-body-small-letter-spacing); } .cx_fpl__textBodySmallStrongLetterSpacing--pPXex { letter-spacing: var(--text-body-small-strong-letter-spacing); } .cx_spacingCompact--6X5Vz { letter-spacing: -0.01em; } .cx_spacingWide--AkpED { letter-spacing: 0.005em; } } /* "shared/css_builder/gen/css_builder_lineHeight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_fpl__textDisplayLineHeight--xpLJ4 { line-height: var(--text-display-line-height); } .cx_fpl__textHeadingLargeLineHeight--g06IY { line-height: var(--text-heading-large-line-height); } .cx_fpl__textHeadingMediumLineHeight--ht7hN { line-height: var(--text-heading-medium-line-height); } .cx_fpl__textHeadingSmallLineHeight--NnpWK { line-height: var(--text-heading-small-line-height); } .cx_fpl__textBodyLargeLineHeight--Yt2Pq { line-height: var(--text-body-large-line-height); } .cx_fpl__textBodyLargeStrongLineHeight--zGrqI { line-height: var(--text-body-large-strong-line-height); } .cx_fpl__textBodyMediumLineHeight--5UUiZ { line-height: var(--text-body-medium-line-height); } .cx_fpl__textBodyMediumStrongLineHeight--f7AEd { line-height: var(--text-body-medium-strong-line-height); } .cx_fpl__textBodySmallLineHeight--Cj1kL { line-height: var(--text-body-small-line-height); } .cx_fpl__textBodySmallStrongLineHeight--vXPeT { line-height: var(--text-body-small-strong-line-height); } .cx_lh1_5Lines--hS9He { line-height: 1.5; } .cx_lhNormal--fQ-eB { line-height: normal; } .cx_lh0--PZdol { line-height: 0px; } .cx_lh1--BMn-5 { line-height: 1px; } .cx_lh2--aG2pS { line-height: 2px; } .cx_lh4--MVc57 { line-height: 4px; } .cx_lh6--ktD7b { line-height: 6px; } .cx_lh8--WIsIN { line-height: 8px; } .cx_lh10--0VMrP { line-height: 10px; } .cx_lh12--MdBsw { line-height: 12px; } .cx_lh14--hs98K { line-height: 14px; } .cx_lh16--8uyIV { line-height: 16px; } .cx_lh18--JoxWf { line-height: 18px; } .cx_lh20--53Yez { line-height: 20px; } .cx_lh24--JUmf9 { line-height: 24px; } .cx_lh28--rKD8m { line-height: 28px; } .cx_lh32--klb88 { line-height: 32px; } .cx_lh36---I9tf { line-height: 36px; } } /* "shared/css_builder/gen/css_builder_textAlign.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_alignLeft--ubEe0 { text-align: left; } .cx_alignCenter--1v4xl { text-align: center; } .cx_alignRight--8m-9h { text-align: right; } } /* "shared/css_builder/gen/css_builder_textDecoration.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_noUnderline--tq1Tt { -webkit-text-decoration: none; text-decoration: none; } .cx_underline--x77-9 { -webkit-text-decoration: underline; text-decoration: underline; } } /* "shared/css_builder/gen/css_builder_whiteSpace.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_noWrap--4e95L { white-space: nowrap; } .cx_preWrap--5qggr { white-space: pre-wrap; } .cx_pre--uk-VD { white-space: pre; } } /* "shared/css_builder/gen/css_builder_wordBreak.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_breakWord--vNn6D { word-break: break-word; } } /* "shared/css_builder/gen/css_builder_zIndex.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_zIndexMinus1--xkLUa { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: -1; } .cx_zIndexModal--9biM5 { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 10; } .cx_zIndexSecondaryModal--i-30h { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 9; } .cx_zIndexTertiaryModal--j3qA0 { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 7; } .cx_zIndexTopBar--3sqXv { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 3; } .cx_zIndexTemplateModalTeamName--8FCKh { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 2; } .cx_zIndex0--SqMPi { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 0; } .cx_zIndex1--wYeNl { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 1; } } /* "shared/css_builder/gen/css_builder_appearance.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_appearanceNone--RpM7N { appearance: none; } } /* "shared/css_builder/gen/css_builder_boxShadow.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_elevation100--dtj0S { box-shadow: var(--elevation-100); } .cx_elevation200--LB8HU { box-shadow: var(--elevation-200); } .cx_elevation300--wyKhe { box-shadow: var(--elevation-300); } .cx_elevation400--dYRKO { box-shadow: var(--elevation-400); } .cx_elevation500--VQZ6E { box-shadow: var(--elevation-500); } .cx_shadowNone--RgmZV { box-shadow: none; } } /* "shared/css_builder/gen/css_builder_boxSizing.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_borderBox--RXv0H { box-sizing: border-box; } } /* "shared/css_builder/gen/css_builder_cursor.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_cursorDefault--4pgok { cursor: default; } .cx_cursorPointer--ZhxYZ { cursor: pointer; } .cx_cursorText--b99aA { cursor: text; } } /* "shared/css_builder/gen/css_builder_float.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_floatLeft--7Zg88 { float: left; } .cx_floatRight--vw8Uo { float: right; } } /* "shared/css_builder/gen/css_builder_pointerEvents.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_eventsAll---CT-m { pointer-events: all; } .cx_eventsAuto--Bo7Jm { pointer-events: auto; } .cx_eventsNone--zQGH- { pointer-events: none; } } /* "shared/css_builder/gen/css_builder_resize.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_resizeNone--UiKmv { resize: none; } } /* "shared/css_builder/gen/css_builder_userSelect.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_selectNone--xo3F7 { -webkit-user-select: none; user-select: none; } } /* "shared/css_builder/gen/css_builder_verticalAlign.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_alignMiddle--Lp5Km { vertical-align: middle; } .cx_alignTop--HM22Z { vertical-align: top; } } /* "shared/css_builder/gen/css_builder_visibility.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_invisible--efRkD { visibility: hidden; } .cx_visible--3DS-o { visibility: visible; } } /* "shared/css_builder/gen/css_builder_height.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_hToolbar--NZTzP { height: var(--toolbar-height); } .cx_hAuto--IV9Aj { height: auto; } .cx_hFull--CpzNn { height: 100%; } .cx_hInherit--ZyTLs { height: inherit; } .cx_hFitContent--bCUfY { height: fit-content; } .cx_h0--pG9KJ { height: 0px; } .cx_h1--UhNl5 { height: 1px; } .cx_h2--GKAy1 { height: 2px; } .cx_h4--VsLeQ { height: 4px; } .cx_h6--tBonb { height: 6px; } .cx_h8--jrZwZ { height: 8px; } .cx_h10--2WSeH { height: 10px; } .cx_h12--k85a5 { height: 12px; } .cx_h14--cJO-p { height: 14px; } .cx_h16---ApqV { height: 16px; } .cx_h18---MPvx { height: 18px; } .cx_h20--3Emjt { height: 20px; } .cx_h24--kj7jI { height: 24px; } .cx_h28--2nR-B { height: 28px; } .cx_h32--YndFH { height: 32px; } .cx_h36--UoxU2 { height: 36px; } .cx_h40--MT7g9 { height: 40px; } .cx_h44---bLaV { height: 44px; } .cx_h48--pAX2I { height: 48px; } .cx_h64--B9wP0 { height: 64px; } .cx_h100--hc7mb { height: 100px; } .cx_h150--7-Drk { height: 150px; } .cx_h200--3DiGr { height: 200px; } .cx_h250--FUWde { height: 250px; } .cx_h300--io-yn { height: 300px; } .cx_h350--05OAV { height: 350px; } .cx_h400--EFoG8 { height: 400px; } } /* "shared/css_builder/gen/css_builder_width.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_wHalf--U-7Bc { width: 50%; } .cx_wAuto--SOfJ0 { width: auto; } .cx_wFull--V-FvF { width: 100%; } .cx_wFitContent--78a7a { width: fit-content; } .cx_w0---N9p- { width: 0px; } .cx_w1--xji3o { width: 1px; } .cx_w2--iCg2K { width: 2px; } .cx_w4--xCmhc { width: 4px; } .cx_w6--UeONp { width: 6px; } .cx_w8--v8AH7 { width: 8px; } .cx_w10--RBXeN { width: 10px; } .cx_w12--Ri0DZ { width: 12px; } .cx_w14--MR73S { width: 14px; } .cx_w16--7pyM- { width: 16px; } .cx_w18--R-Qw1 { width: 18px; } .cx_w20--iFZ86 { width: 20px; } .cx_w24--CECeO { width: 24px; } .cx_w28--qrAWu { width: 28px; } .cx_w32--CO97f { width: 32px; } .cx_w36--HRHA9 { width: 36px; } .cx_w40--b-q7K { width: 40px; } .cx_w44--j6Rqf { width: 44px; } .cx_w48--7F6dP { width: 48px; } .cx_w64--3L-30 { width: 64px; } .cx_w100--JkWcY { width: 100px; } .cx_w150--Y8-gA { width: 150px; } .cx_w200---Y2LU { width: 200px; } .cx_w250--WnSlL { width: 250px; } .cx_w300----ysL { width: 300px; } .cx_w350--V0tiM { width: 350px; } .cx_w400--YuPoE { width: 400px; } } /* "shared/css_builder/gen/css_builder_maxWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_maxWFull--XJX42 { max-width: 100%; } .cx_maxWUnset--Xdob4 { max-width: unset; } .cx_maxW0--JWpWF { max-width: 0px; } .cx_maxW1--vlUjE { max-width: 1px; } .cx_maxW2--HGA-T { max-width: 2px; } .cx_maxW4---va9R { max-width: 4px; } .cx_maxW6--q2nsa { max-width: 6px; } .cx_maxW8--Gn0Qp { max-width: 8px; } .cx_maxW10--MTCwE { max-width: 10px; } .cx_maxW12--T4A1K { max-width: 12px; } .cx_maxW14--Eq1Ag { max-width: 14px; } .cx_maxW16--Ceizg { max-width: 16px; } .cx_maxW18--ZXyOs { max-width: 18px; } .cx_maxW20--Pm8o- { max-width: 20px; } .cx_maxW24--5hDMD { max-width: 24px; } .cx_maxW28--CjaxA { max-width: 28px; } .cx_maxW32--JZk6A { max-width: 32px; } .cx_maxW36--zU0xA { max-width: 36px; } .cx_maxW40--T8asE { max-width: 40px; } .cx_maxW44--1ksu- { max-width: 44px; } .cx_maxW48--Fk8vt { max-width: 48px; } .cx_maxW64--yf05E { max-width: 64px; } .cx_maxW100---0nz9 { max-width: 100px; } .cx_maxW150--q0bvS { max-width: 150px; } .cx_maxW200--e1d5o { max-width: 200px; } .cx_maxW250--yUfK8 { max-width: 250px; } .cx_maxW300--q7nWa { max-width: 300px; } .cx_maxW350--uWIQl { max-width: 350px; } .cx_maxW400--ZujiE { max-width: 400px; } } /* "shared/css_builder/gen/css_builder_marginTop.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_mtAuto--8L3-R { margin-top: auto; } .cx_mt0--M1zEE { margin-top: 0px; } .cx_mt1--vdwFQ { margin-top: 1px; } .cx_mt2--CI1Jq { margin-top: 2px; } .cx_mt4--b1Hir { margin-top: 4px; } .cx_mt6--ghEsw { margin-top: 6px; } .cx_mt8--LshMv { margin-top: 8px; } .cx_mt10--xoz5d { margin-top: 10px; } .cx_mt12--yQBR1 { margin-top: 12px; } .cx_mt14--9hsPC { margin-top: 14px; } .cx_mt16--6ksK- { margin-top: 16px; } .cx_mt18--px7TW { margin-top: 18px; } .cx_mt20--rh8YU { margin-top: 20px; } .cx_mt24--5wYgv { margin-top: 24px; } .cx_mt28--OU7D- { margin-top: 28px; } .cx_mt32--uF8f6 { margin-top: 32px; } .cx_mt36--DgLRZ { margin-top: 36px; } } /* "shared/css_builder/gen/css_builder_marginRight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_mrAuto--ciJDU { margin-right: auto; } .cx_mr0--848j0 { margin-right: 0px; } .cx_mr1--ujkhx { margin-right: 1px; } .cx_mr2--qDXK- { margin-right: 2px; } .cx_mr4--thvDg { margin-right: 4px; } .cx_mr6--V-2hw { margin-right: 6px; } .cx_mr8--aRua- { margin-right: 8px; } .cx_mr10--SQiIc { margin-right: 10px; } .cx_mr12--pCmZk { margin-right: 12px; } .cx_mr14--3qMHx { margin-right: 14px; } .cx_mr16--303AL { margin-right: 16px; } .cx_mr18--tyA8l { margin-right: 18px; } .cx_mr20--dnv4I { margin-right: 20px; } .cx_mr24--X0yTQ { margin-right: 24px; } .cx_mr28--VLUE5 { margin-right: 28px; } .cx_mr32--tx3eM { margin-right: 32px; } .cx_mr36--WkQJK { margin-right: 36px; } } /* "shared/css_builder/gen/css_builder_marginBottom.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_mbAuto--uRJ-b { margin-bottom: auto; } .cx_mb0--hfDbG { margin-bottom: 0px; } .cx_mb1--LgIN0 { margin-bottom: 1px; } .cx_mb2--PZ4Ek { margin-bottom: 2px; } .cx_mb4--0BIDZ { margin-bottom: 4px; } .cx_mb6--ZA8tX { margin-bottom: 6px; } .cx_mb8--9iGKy { margin-bottom: 8px; } .cx_mb10--D909d { margin-bottom: 10px; } .cx_mb12--AZs4E { margin-bottom: 12px; } .cx_mb14--0-mOz { margin-bottom: 14px; } .cx_mb16--48pPy { margin-bottom: 16px; } .cx_mb18--9-R5v { margin-bottom: 18px; } .cx_mb20--1pb4f { margin-bottom: 20px; } .cx_mb24--5iKkb { margin-bottom: 24px; } .cx_mb28--wq5ZE { margin-bottom: 28px; } .cx_mb32--P4sXJ { margin-bottom: 32px; } .cx_mb36--ePEjB { margin-bottom: 36px; } } /* "shared/css_builder/gen/css_builder_marginLeft.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_mlAuto--S8K56 { margin-left: auto; } .cx_ml0--o5UD- { margin-left: 0px; } .cx_ml1--O0uGm { margin-left: 1px; } .cx_ml2--c6uIo { margin-left: 2px; } .cx_ml4--vfGLh { margin-left: 4px; } .cx_ml6--G33q5 { margin-left: 6px; } .cx_ml8--SwsTN { margin-left: 8px; } .cx_ml10--chirQ { margin-left: 10px; } .cx_ml12--mAIcD { margin-left: 12px; } .cx_ml14--J-Qw4 { margin-left: 14px; } .cx_ml16--07K0O { margin-left: 16px; } .cx_ml18--aBBeM { margin-left: 18px; } .cx_ml20--s57EV { margin-left: 20px; } .cx_ml24--kvDIE { margin-left: 24px; } .cx_ml28--M25Sq { margin-left: 28px; } .cx_ml32--wXVJb { margin-left: 32px; } .cx_ml36--i5gCP { margin-left: 36px; } } /* "shared/css_builder/gen/css_builder_minHeight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_minHFull--8wzTm { min-height: 100%; } .cx_minH0--HG8w- { min-height: 0px; } .cx_minH1--0qo0I { min-height: 1px; } .cx_minH2--5lgA6 { min-height: 2px; } .cx_minH4--sqs2s { min-height: 4px; } .cx_minH6--sdCHZ { min-height: 6px; } .cx_minH8---7KZN { min-height: 8px; } .cx_minH10--qeO4j { min-height: 10px; } .cx_minH12--IKQvD { min-height: 12px; } .cx_minH14--N5Taf { min-height: 14px; } .cx_minH16--yhpw8 { min-height: 16px; } .cx_minH18--JE7KI { min-height: 18px; } .cx_minH20--4CzXR { min-height: 20px; } .cx_minH24--G8OE9 { min-height: 24px; } .cx_minH28--LnGbs { min-height: 28px; } .cx_minH32--Wyh2o { min-height: 32px; } .cx_minH36--POS7T { min-height: 36px; } .cx_minH40--tUC-M { min-height: 40px; } .cx_minH44--TSAek { min-height: 44px; } .cx_minH48--kGzXU { min-height: 48px; } .cx_minH64---hWCC { min-height: 64px; } .cx_minH100--eOKTn { min-height: 100px; } .cx_minH150--UCRDa { min-height: 150px; } .cx_minH200--JaCyO { min-height: 200px; } .cx_minH250--LoXHk { min-height: 250px; } .cx_minH300--LwCY9 { min-height: 300px; } .cx_minH350--EzBIo { min-height: 350px; } .cx_minH400--igtcZ { min-height: 400px; } } /* "shared/css_builder/gen/css_builder_maxHeight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_maxHFull--e-skP { max-height: 100%; } .cx_maxH0--p-VOc { max-height: 0px; } .cx_maxH1--FCyQj { max-height: 1px; } .cx_maxH2--s9VPz { max-height: 2px; } .cx_maxH4--l1UG9 { max-height: 4px; } .cx_maxH6--XTKuF { max-height: 6px; } .cx_maxH8--xhEwH { max-height: 8px; } .cx_maxH10--uIMUh { max-height: 10px; } .cx_maxH12--HMsmX { max-height: 12px; } .cx_maxH14--RDPTN { max-height: 14px; } .cx_maxH16--jVXOt { max-height: 16px; } .cx_maxH18--zq4uc { max-height: 18px; } .cx_maxH20--TA1AB { max-height: 20px; } .cx_maxH24--PIO0z { max-height: 24px; } .cx_maxH28--O8TKU { max-height: 28px; } .cx_maxH32--NRqDZ { max-height: 32px; } .cx_maxH36--vyHus { max-height: 36px; } .cx_maxH40---xy36 { max-height: 40px; } .cx_maxH44---EWa5 { max-height: 44px; } .cx_maxH48--PAM23 { max-height: 48px; } .cx_maxH64--zLjVg { max-height: 64px; } .cx_maxH100---Q-ok { max-height: 100px; } .cx_maxH150--7UOjl { max-height: 150px; } .cx_maxH200--uq6Xi { max-height: 200px; } .cx_maxH250--ySQeB { max-height: 250px; } .cx_maxH300--GE77U { max-height: 300px; } .cx_maxH350--gdYPw { max-height: 350px; } .cx_maxH400--WHL7c { max-height: 400px; } } /* "shared/css_builder/gen/css_builder_minWidth.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_minW0--n4DWW { min-width: 0px; } .cx_minW1--vPqvg { min-width: 1px; } .cx_minW2--bL3nF { min-width: 2px; } .cx_minW4--8RYX3 { min-width: 4px; } .cx_minW6--Bi7Yo { min-width: 6px; } .cx_minW8--ttceI { min-width: 8px; } .cx_minW10--IQOfQ { min-width: 10px; } .cx_minW12--x3Dao { min-width: 12px; } .cx_minW14--Z7-nH { min-width: 14px; } .cx_minW16--mHai2 { min-width: 16px; } .cx_minW18--PX7Mv { min-width: 18px; } .cx_minW20--6yjkY { min-width: 20px; } .cx_minW24--cxs6O { min-width: 24px; } .cx_minW28--5hyW2 { min-width: 28px; } .cx_minW32--AVuQC { min-width: 32px; } .cx_minW36--LJsTj { min-width: 36px; } .cx_minW40--OWx2p { min-width: 40px; } .cx_minW44--abZTs { min-width: 44px; } .cx_minW48--YRcAc { min-width: 48px; } .cx_minW64--lVVyy { min-width: 64px; } .cx_minW100--6P-yT { min-width: 100px; } .cx_minW150--ub5EL { min-width: 150px; } .cx_minW200--uPpuK { min-width: 200px; } .cx_minW250--MkI24 { min-width: 250px; } .cx_minW300--cjfyT { min-width: 300px; } .cx_minW350--BAnDp { min-width: 350px; } .cx_minW400--oOf14 { min-width: 400px; } } /* "shared/css_builder/gen/css_builder_gap.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gap0--hMCKF { gap: 0px; } .cx_gap1--ldPKB { gap: 1px; } .cx_gap2--v8uA- { gap: 2px; } .cx_gap4--j6xht { gap: 4px; } .cx_gap6--4pR7u { gap: 6px; } .cx_gap8--5c23O { gap: 8px; } .cx_gap10--OVCVx { gap: 10px; } .cx_gap12--6hNHe { gap: 12px; } .cx_gap14--1x-2u { gap: 14px; } .cx_gap16--XHd-Z { gap: 16px; } .cx_gap18--t6c7N { gap: 18px; } .cx_gap20--d5fYE { gap: 20px; } .cx_gap24--Owrge { gap: 24px; } .cx_gap28--kD3IB { gap: 28px; } .cx_gap32--F101T { gap: 32px; } .cx_gap36--d28MH { gap: 36px; } } /* "shared/css_builder/gen/css_builder_rowGap.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_rowGap0--fcfby { row-gap: 0px; } .cx_rowGap1--QE7Zd { row-gap: 1px; } .cx_rowGap2--ytDv- { row-gap: 2px; } .cx_rowGap4--pq6zR { row-gap: 4px; } .cx_rowGap6--3C6Cg { row-gap: 6px; } .cx_rowGap8--rMJAJ { row-gap: 8px; } .cx_rowGap10--UKIWi { row-gap: 10px; } .cx_rowGap12--aBYLE { row-gap: 12px; } .cx_rowGap14--063sL { row-gap: 14px; } .cx_rowGap16--nXriv { row-gap: 16px; } .cx_rowGap18--xrUrB { row-gap: 18px; } .cx_rowGap20--ZOrZp { row-gap: 20px; } .cx_rowGap24--mq91S { row-gap: 24px; } .cx_rowGap28--jlYkD { row-gap: 28px; } .cx_rowGap32--d8ZxY { row-gap: 32px; } .cx_rowGap36--Pet0s { row-gap: 36px; } } /* "shared/css_builder/gen/css_builder_columnGap.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_columnGap0--Px5wH { column-gap: 0px; } .cx_columnGap1--Zv73N { column-gap: 1px; } .cx_columnGap2--kMBhv { column-gap: 2px; } .cx_columnGap4--4Q-K7 { column-gap: 4px; } .cx_columnGap6--O5eFJ { column-gap: 6px; } .cx_columnGap8--z-Zvw { column-gap: 8px; } .cx_columnGap10--HlgIm { column-gap: 10px; } .cx_columnGap12--5wgcU { column-gap: 12px; } .cx_columnGap14--JDW1a { column-gap: 14px; } .cx_columnGap16--KPf1j { column-gap: 16px; } .cx_columnGap18--VDDKg { column-gap: 18px; } .cx_columnGap20---XKRZ { column-gap: 20px; } .cx_columnGap24--OAtj3 { column-gap: 24px; } .cx_columnGap28--gbXzy { column-gap: 28px; } .cx_columnGap32--eo54W { column-gap: 32px; } .cx_columnGap36--KUWHb { column-gap: 36px; } } /* "shared/css_builder/gen/css_builder_margin.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_m0--GJIje { margin: 0px; } .cx_m1--iN4vx { margin: 1px; } .cx_m2--y1sJ4 { margin: 2px; } .cx_m4--vnLFG { margin: 4px; } .cx_m6--pDFPo { margin: 6px; } .cx_m8--H7Rrb { margin: 8px; } .cx_m10--NDQul { margin: 10px; } .cx_m12--8JLQl { margin: 12px; } .cx_m14--mD6St { margin: 14px; } .cx_m16--Zf-Y5 { margin: 16px; } .cx_m18--Lovi- { margin: 18px; } .cx_m20--dugsq { margin: 20px; } .cx_m24--vUHfd { margin: 24px; } .cx_m28--Yjg1v { margin: 28px; } .cx_m32--nluY- { margin: 32px; } .cx_m36--O1GY2 { margin: 36px; } } /* "shared/css_builder/gen/css_builder_padding.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_p0--knSTD { padding: 0px; } .cx_p1--q6GZ3 { padding: 1px; } .cx_p2--X19cr { padding: 2px; } .cx_p4--Ckaol { padding: 4px; } .cx_p6--hOVL6 { padding: 6px; } .cx_p8--D-NBf { padding: 8px; } .cx_p10--uDvvw { padding: 10px; } .cx_p12--6Ku5G { padding: 12px; } .cx_p14--Ye8Vw { padding: 14px; } .cx_p16--uic9L { padding: 16px; } .cx_p18--6tS59 { padding: 18px; } .cx_p20--fVMzx { padding: 20px; } .cx_p24--8es48 { padding: 24px; } .cx_p28--yYuuD { padding: 28px; } .cx_p32--Bm7LY { padding: 32px; } .cx_p36--Fnu-2 { padding: 36px; } } /* "shared/css_builder/gen/css_builder_paddingTop.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_pt0--dS-ZQ { padding-top: 0px; } .cx_pt1--Qs4zI { padding-top: 1px; } .cx_pt2--LlMa1 { padding-top: 2px; } .cx_pt4--QxYE- { padding-top: 4px; } .cx_pt6--ezasv { padding-top: 6px; } .cx_pt8--vjLZI { padding-top: 8px; } .cx_pt10--MNM2v { padding-top: 10px; } .cx_pt12--PQMVu { padding-top: 12px; } .cx_pt14--1kIlC { padding-top: 14px; } .cx_pt16--yzu73 { padding-top: 16px; } .cx_pt18--iqG-I { padding-top: 18px; } .cx_pt20--CHHtI { padding-top: 20px; } .cx_pt24--ZNaOx { padding-top: 24px; } .cx_pt28--cW0w1 { padding-top: 28px; } .cx_pt32--vGgQY { padding-top: 32px; } .cx_pt36--4If-C { padding-top: 36px; } } /* "shared/css_builder/gen/css_builder_paddingRight.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_pr0--M9Yj5 { padding-right: 0px; } .cx_pr1--4WLGY { padding-right: 1px; } .cx_pr2--PQaHF { padding-right: 2px; } .cx_pr4--Af4Sh { padding-right: 4px; } .cx_pr6--cSQNQ { padding-right: 6px; } .cx_pr8--GQxcR { padding-right: 8px; } .cx_pr10--j7jin { padding-right: 10px; } .cx_pr12---F2og { padding-right: 12px; } .cx_pr14--R-B1o { padding-right: 14px; } .cx_pr16--wD75n { padding-right: 16px; } .cx_pr18--pPm0v { padding-right: 18px; } .cx_pr20--rukeT { padding-right: 20px; } .cx_pr24--QcOwW { padding-right: 24px; } .cx_pr28--LAajm { padding-right: 28px; } .cx_pr32--YRshR { padding-right: 32px; } .cx_pr36--LLqZy { padding-right: 36px; } } /* "shared/css_builder/gen/css_builder_paddingBottom.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_pb0--LWmYJ { padding-bottom: 0px; } .cx_pb1--IcBC- { padding-bottom: 1px; } .cx_pb2--gWCXi { padding-bottom: 2px; } .cx_pb4--VZ61U { padding-bottom: 4px; } .cx_pb6--ZGeHG { padding-bottom: 6px; } .cx_pb8--zni3j { padding-bottom: 8px; } .cx_pb10--sb3As { padding-bottom: 10px; } .cx_pb12--K-3Ne { padding-bottom: 12px; } .cx_pb14--JWWkN { padding-bottom: 14px; } .cx_pb16--9sS0Z { padding-bottom: 16px; } .cx_pb18---sN1E { padding-bottom: 18px; } .cx_pb20--pIAff { padding-bottom: 20px; } .cx_pb24--uJe0F { padding-bottom: 24px; } .cx_pb28---QXSJ { padding-bottom: 28px; } .cx_pb32--Ez-Sx { padding-bottom: 32px; } .cx_pb36--73-Zx { padding-bottom: 36px; } } /* "shared/css_builder/gen/css_builder_paddingLeft.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_pl0--OvaDI { padding-left: 0px; } .cx_pl1--gHNvy { padding-left: 1px; } .cx_pl2--ojyWa { padding-left: 2px; } .cx_pl4--pU87e { padding-left: 4px; } .cx_pl6--KG4o6 { padding-left: 6px; } .cx_pl8--UAe9C { padding-left: 8px; } .cx_pl10--4tbjf { padding-left: 10px; } .cx_pl12--WKO9l { padding-left: 12px; } .cx_pl14--v-V4T { padding-left: 14px; } .cx_pl16--Tcf1S { padding-left: 16px; } .cx_pl18--HqEGx { padding-left: 18px; } .cx_pl20--yAgVO { padding-left: 20px; } .cx_pl24--nJL2t { padding-left: 24px; } .cx_pl28--53UEZ { padding-left: 28px; } .cx_pl32--pJTUd { padding-left: 32px; } .cx_pl36--Y9SoG { padding-left: 36px; } } /* "shared/components/loading/loading_spinner.css" */ @layer css-modules { /* Note: To change the size, simply set width & height on a CSS class and assign it to the component via className. */ .loading_spinner--root--UQy-T { transform: translateZ(0); transform-origin: 50% 50%; display: inline-flex; align-content: center; justify-content: center; } .loading_spinner--root--UQy-T .svg { animation: loading_spinner--rotate--u5p2W 1s linear infinite; } .loading_spinner--root--UQy-T > img { animation: loading_spinner--rotate--u5p2W 1s linear infinite; } .loading_spinner--sizeSmall--whLmy { width: 16px; height: 16px; } .loading_spinner--sizeMedium--eIKvm { width: 20px; height: 20px; } .loading_spinner--sizeLarge--bR92Q { width: 30px; height: 30px; } .loading_spinner--cssBackedSizeSmall--72K5O::before { width: 16px; height: 16px; border-width: 1px; } .loading_spinner--cssBackedSizeMedium--p3PR4::before { width: 20px; height: 20px; border-width: 1.5px; } .loading_spinner--cssBackedSizeLarge--o-oAs::before { width: 30px; height: 30px; border-width: 2px; } .loading_spinner--svgContainer--hW08L { display: flex; justify-content: center; align-content: center; } .loading_spinner--centered--vksWI { flex: 1 1 auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .loading_spinner--absoluteCentered--QiiXa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; } @keyframes loading_spinner--rotate--u5p2W { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading_spinner--matchTextColor--VZVCX .svg { fill: currentColor; color: currentColor; } .loading_spinner--matchTextColor--VZVCX path { fill: currentColor; } .loading_spinner--grayColor--whRvR .svg { fill: #aaa; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ color: #aaa; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ } .loading_spinner--grayColor--whRvR path { fill: #aaa; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ } .loading_spinner--blueSpinner--pDLWB { display: flex; width: 30px; height: 30px; } .loading_spinner--blueSpinner--pDLWB .svg { fill: var(--color-text-brand); color: var(--color-text-brand); } .loading_spinner--cssBacked--wmR7q::before { content: ''; box-sizing: border-box; position: absolute; margin-left: -50%; border-radius: 100%; border-style: solid; /* size is controlled separately */ border-color: #aaa #aaa #aaa transparent; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ animation: loading_spinner--rotate--u5p2W 1000ms linear infinite; } } /* "shared/styles/mixins/figjam_modal.css" */ /* "figma_app/views/modal/modal.css" */ @layer css-modules { /* 12px grid */ /* Button Styles */ /* Typography */ /* Other */ /* Modal Buttons */ .modal--button--KJCIj { margin-left: 12px; } .modal--confirmButton--xxf9e { margin-left: 12px; } .modal--cancelLink--Z5JnK { } .modal--list--r0TQx { margin-top: 12px; } .modal--blueLink--BzAQJ { } /* use modalFooterButtonGroup with modalFooter to match spacing for fpl Modal.ActionStrip when a third action is available apart from the button group*/ .modal--modalFooterButtonGroup--VUfEE { display: flex; gap: 0.75rem; } .modal--modalFooter--IgGuN { display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; flex-wrap: wrap; } /* By default, right align its children. * Use .groupedButtonRow if you want to have left-aligned and right-aligned children. */ .modal--buttonRow--cvoAb { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 24px; } .modal--groupedButtonRow--cbWB1 { flex-wrap: nowrap; justify-content: space-between; } /* Links */ /* Modals */ .modal--modalShadow--Lx7eC { box-shadow: var(--elevation-500-modal-window); } .modal--modalBare--lHd21 { font: normal 400 11px/16px Inter, sans-serif; position: relative; max-height: 80%; width: 100%; min-width: 300px; padding: 24px; word-break: break-word; font-size: 11px; background-color: var(--color-bg); border-radius: 2px; box-sizing: border-box; overflow: hidden; -webkit-font-smoothing: antialiased; } .modal--modal---V9ch { } .modal--modalContent--2nixn { margin-top: 12px; font-size: 11px; color: var(--color-text-secondary); } .modal--important--lUfGu { font-weight: bold; } .modal--title--jfXLq { font: normal 400 14px/24px Inter, sans-serif; margin-bottom: 24px; font-size: 14px; line-height: 20px; /* In case the title overflows, this looks nice. */ color: var(--color-text); margin-top: -4px; /* Pulls it up so that the padding of the first line looks okay */ padding-right: 48px; /* So that when the title gets long or wraps, it doesn’t overlap the close box */ } .modal--textInput--X4lXZ { display: block; margin-top: 12px; padding: 0 6px; height: 30px; width: 100%; font-size: 11px; font-weight: normal; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 2px; outline: none; background: var(--color-bg); color: var(--color-text); } .modal--textInput--X4lXZ:focus { border: 2px solid var(--color-border-selected); padding: 0 5px; } .modal--error--8dqC7 { margin-top: 12px; color: var(--color-text-danger); } .modal--code--qd9YR { text-align: center; font-weight: bold; font-size: 14px; font-family: monospace; margin: 20px 0 10px 0; } .modal--codes--rn-fI { margin: 24px 0; display: flex; flex-wrap: wrap; justify-content: center; } .modal--codes--rn-fI div { width: 176px; } /* Container class for search inputs, e.g. those used by the members and shared fonts tables */ .modal--searchContainer--wEnQT { height: 48px; flex: 0 0 48px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; } .modal--container--FzbA5 { font-size: 12px; padding: 16px; } /* Memory warning overrides */ .modal--blockQuote--iAFUv { background-color: var(--color-bg-secondary); line-height: 16px; padding: 8px; margin: 16px 0px; } .modal--blockQuoteHeader--Ihf59 { display: block; font-weight: 700; } .modal--blockQuoteText--TLB05 { line-clamp: 6; display: block; font-style: italic; font-weight: 400; } } /* "shared/styles/mixins/plugin.css" */ @layer css-modules { /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ .plugin--pluginIconBase--uuaJT { /* At 48px, border-radius will be 12px; at 32px, border-radius will be 8px, etc */ border-radius: 25%; position: relative; -webkit-user-select: none; user-select: none; overflow: hidden; /* We use this pseudo-element to render our inset box-shadow because otherwise it will render under the image: https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */ } .plugin--pluginIconBase--uuaJT::after { content: ''; border-radius: 25%; /*box-shadow: $pluginIconBoxShadow;*/ /* remove this for now, while we support legacy plugin icons */ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .plugin--pluginIconBase--uuaJT img, .plugin--pluginIconBase--uuaJT svg { width: 100%; height: 100%; } } /* "figma_app/views/modal/header_modal/header_modal.css" */ @layer css-modules { .header_modal--modalBackground--8ixoz { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 10; background: var(--color-modalbackdrop, rgba(0, 0, 0, 0.3)); } .header_modal--transparentBackground--N7-JD { background: transparent; } .header_modal--modalContainer--r4YZ0 { display: flex; flex-direction: column; gap: 8px; grid-gap: 8px; } .header_modal--bottomSection--RWRih { background-color: var(--color-bg); border-radius: 2px; box-shadow: var( --elevation-500-modal-window, 0px 2px 14px rgba(0, 0, 0, 0.15), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.2) ); /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 2; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--bottomSection--RWRih, :where([data-fpl-ui3-override]) .header_modal--bottomSection--RWRih { border-radius: var(--radius-large); overflow: hidden; } .header_modal--modal--dmorK { width: 100%; max-height: 100%; position: relative; background-color: var(--color-bg); border-radius: 2px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--modal--dmorK, :where([data-fpl-ui3-override]) .header_modal--modal--dmorK { border-radius: var(--radius-large); } .header_modal--upperModal--ZKCsO { } .header_modal--modal__scroll--3g5Yj { overflow-y: auto; } .header_modal--header--q-bSO { font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding-left: 8px; padding-right: 4px; cursor: default; -webkit-user-select: none; user-select: none; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--header--q-bSO, :where([data-fpl-ui3-override]) .header_modal--header--q-bSO { padding-left: var(--spacer-3); padding-right: var(--spacer-1); font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .header_modal--headerWithBottomBorder--FKj9S { /* Add 1px to make up for the bottom border */ box-sizing: border-box; min-height: 41px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--color-border); } .header_modal--headerSmall--1VcNd { padding-top: 4px; padding-bottom: 4px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--headerSmall--1VcNd, :where([data-fpl-ui3-override]) .header_modal--headerSmall--1VcNd { min-height: 40px; box-sizing: border-box; } .header_modal--headerLarge---KC03 { padding-top: 8px; padding-bottom: 8px; } .header_modal--headerHidden--E3LSl { display: none; } .header_modal--headerIconImg--rKtKz { display: flex; align-items: center; justify-content: center; height: 16px; width: 16px; flex: 0 0 16px; line-height: 16px; margin-left: 4px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--headerIconImg--rKtKz, :where([data-fpl-ui3-override]) .header_modal--headerIconImg--rKtKz { margin-right: unset; } .header_modal--headerModalTitle--AiLjQ { padding-left: 8px; width: calc(100% - 40px); flex: 1; margin-right: 4px; word-break: break-word; white-space: break-spaces; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--headerModalTitle--AiLjQ, :where([data-fpl-ui3-override]) .header_modal--headerModalTitle--AiLjQ { padding-left: var(--spacer-2); align-self: center; } .header_modal--headerModalTitleWithoutOverflow--1UgiR { white-space: nowrap; } .header_modal--fixedTop--Kf-l8 { align-items: flex-start; padding-top: 15vh; } .header_modal--fixedTopDynamic--Iw3IL { align-items: flex-start; padding-top: 10vh; } .header_modal--fixedCenter--8KBaw { align-items: center; } .header_modal--confirmationBody--jdBsN { display: flex; flex-direction: column; line-height: 24px; padding: 16px; } .header_modal--confirmationText--QgYNA { font-weight: 400; padding-top: 4px; line-height: 16px; } .header_modal--confirmButtonBox--69yok { display: flex; justify-content: flex-end; margin-top: 24px; } .header_modal--confirmationButton--uImod { float: right; font-weight: 500; } .header_modal--cancelButton--5tGEk { margin-right: 8px; } .header_modal--rightButtonsClassName--Ep9L2 { display: flex; flex-direction: row; align-items: center; min-width: 0; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--rightButtonsClassName--Ep9L2, :where([data-fpl-ui3-override]) .header_modal--rightButtonsClassName--Ep9L2 { margin-right: var(--spacer-1); } .header_modal--modalBorderRadiusOverride--nMnlj { border-radius: 8px; } } /* "shared/styles/global/inter.css" */ @layer css-modules { @media screen and (min-resolution: 2dppx) { body[data-fpl-version='ui3'] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* Preload Inter font */ #font-ui-400-normal { font: normal 400 11px Inter, sans-serif; } #font-ui-500-normal { font: normal 500 11px Inter, sans-serif; } #font-ui-600-normal { font: normal 600 11px Inter, sans-serif; } #font-ui-400-italic { font: italic 400 11px Inter, sans-serif; } #font-ui-500-italic { font: italic 500 11px Inter, sans-serif; } #font-ui-600-italic { font: italic 600 11px Inter, sans-serif; } /** The classes above are used to preload our core fonts so they're ready by the time the UI needs render. See layout_react.erb for usage. The class below is an attempt to address a mysterious bug where sometimes white text in menus render after a delay, even though the font is obviously already loaded and rendering in other parts of the UI. These font-smoothing and feature settings properties are some of the only differences. Perhaps pre-rendering text with those properties will fix whatever this issue is?? This hypothesis is based on superstition, not science. */ #font-ui-400-normal-white { font: normal 400 11px Inter, sans-serif; color: #fff; /* stylelint-disable-line @figma/color-no-raw */ -webkit-font-smoothing: subpixel-antialiased; font-feature-settings: 'case' on, 'ss02' on, 'tnum' on, 'liga' on, 'calt' on; } @media screen and (min-resolution: 1.5dppx) { #font-ui-400-normal-white { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } } /* "shared/styles/global/base.css" */ /* "shared/components/error_boundary.css" */ @layer css-modules { /* stylelint-disable @figma/color-no-raw */ /* stylelint-enable @figma/color-no-raw */ .error_boundary--rootErrorBoundary--Otxqs { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 56px; display: flex; flex-direction: column; overflow: auto; background-color: var(--color-bg); font-family: Inter, sans-serif, sans-serif; font-feature-settings: none; font-variant-ligatures: none; -webkit-user-select: text; } .error_boundary--rootDebugErrorBoundary--EqEGn { background-color: #0900ff; /* stylelint-disable-next-line @figma/color-no-raw */ color: white; } .error_boundary--rootDebugErrorBoundaryCustomWASM--xUKXG { background-color: #3a6d2f; } .error_boundary--errorBoundaryCenterContent--VGmF4 { margin-top: auto; margin-bottom: auto; align-items: center; display: flex; flex-direction: column; } .error_boundary--errorBoundaryTitle--HsKKr { color: var(--color-text); font-weight: 600; text-align: center; } .error_boundary--errorBoundaryDescription--d1W-Y { color: var(--color-text); margin-top: 12px; max-width: 450px; text-align: center; } .error_boundary--errorBoundaryErrorId--MZ95x { color: var(--color-text-secondary, rgba(0, 0, 0, 0.3)); font-style: italic; margin-top: 50px; } .error_boundary--errorBoundaryButtonContainer---OiRg { margin-top: 16px; } .error_boundary--monospaceText--MDMnj { font-size: 24px; font-family: monospace; line-height: 42px; } .error_boundary--header--Xjbhv { align-self: center; } .error_boundary--subheader--UawaD { font-size: 16px; } .error_boundary--errorMessage---Pljc { margin-top: 24px; } .error_boundary--errorStackLine--pR-1U { } } /* "shared/styles/constants/auth_view.css" */ /* "shared/auth/views/auth_view/auth_form/arkose.css" */ @layer css-modules { .arkose--arkoseFrameContainer--u23hq { display: flex; align-items: center; justify-content: center; } .arkose--arkoseFrame--H0tap { display: block; margin: auto; min-width: 300px; } } /* "shared/styles/constants/auth_brand_tokens.css" */ @layer css-modules { /* stylelint-disable @figma/color-no-raw -- no semantic token */ :root { --auth-brand-update-orange: 255, 114, 55; --auth-brand-update-coral: 255, 118, 118; --auth-brand-update-yellow: 250, 253, 93; --auth-brand-update-kelly-green: 36, 203, 113; --auth-brand-update-cyan: 0, 182, 255; --auth-brand-update-light-cyan: 199, 248, 251; --auth-brand-update-teal: 199, 248, 251; --auth-brand-update-peach: 255, 201, 193; --auth-brand-update-tan: 255, 201, 193; --auth-brand-update-neon-green: 103, 255, 127; --auth-brand-update-lime: 228, 255, 151; --auth-brand-update-mint: 243, 255, 227; --auth-brand-update-sage: 149, 185, 172; --auth-brand-update-light-gray: 226, 226, 226; --auth-brand-update-periwinkle: 196, 186, 255; --auth-brand-update-dusty-violet: 203, 159, 210; --auth-brand-update-violet: 226, 140, 248; --auth-brand-update-maroon: 114, 28, 28; --auth-brand-update-dark-purple: 93, 68, 147; --auth-brand-update-purple: 135, 79, 255; --auth-brand-update-blue: 77, 73, 252; --auth-brand-update-navy: 4, 84, 129; --auth-brand-update-dark-green: 10, 92, 53; --auth-brand-update-black: 0, 0, 0; --auth-brand-update-white: 255, 255, 255; --auth-brand-update-canvas-gray: 245, 245, 245; --auth-brand-update-cool-gray: 105, 116, 133; --auth-brand-update-error-red: 151, 33, 33; --auth-brand-update-error-light-red: 255, 179, 179; --auth-color-text: rgba(var(--auth-brand-update-black), 1); --auth-color-text-primary: rgba(var(--auth-brand-update-black), 0.8); --auth-color-text-secondary: rgba(var(--auth-brand-update-black), 0.6); --auth-input-background: rgba(var(--auth-brand-update-black), 0.08); --auth-input-box-shadow: rgba(var(--auth-brand-update-black), 1); --auth-brand-error-background: rgba(var(--auth-brand-update-error-red), 1); --auth-brand-error-box-shadow: rgba(var(--auth-brand-update-error-red), 1); --auth-brand-error-text: rgba(var(--auth-brand-update-white), 1); --auth-error-text: rgba(var(--auth-brand-update-error-red), 1); --extra-info-checkbox-selected: rgba(var(--auth-brand-update-black), 0.8); --extra-info-checkbox-background: rgba(var(--auth-brand-update-white), 1); --extra-info-checkbox-background-hover: rgba(var(--auth-brand-update-black), 0.08); --extra-info-checkbox-svg: rgba(var(--auth-brand-update-white), 1); --auth-modal-background: rgba(var(--auth-brand-update-white), 1); --hollow-button-background: transparent; --standard-brand-button-content: rgba(var(--auth-brand-update-white), 1); --standard-brand-button: rgba(var(--auth-brand-update-black), 1); --standard-button-disabled: rgba(var(--auth-brand-update-black), 0.6); --standard-button-disabled-text: rgba(var(--auth-brand-update-white), 1); --auth-color-text-cool-gray: rgba(var(--auth-brand-update-cool-gray), 1); } [data-preferred-theme='dark'] { --auth-color-text: rgba(var(--auth-brand-update-white), 1); --auth-color-text-primary: rgba(var(--auth-brand-update-white), 1); --auth-color-text-secondary: rgba(var(--auth-brand-update-white), 0.6); --auth-input-background: rgba(var(--auth-brand-update-white), 0.08); --auth-input-box-shadow: rgba(var(--auth-brand-update-white), 1); --auth-brand-error-background: rgba(var(--auth-brand-update-error-light-red), 1); --auth-brand-error-box-shadow: rgba(var(--auth-brand-update-error-light-red), 1); --auth-brand-error-text: rgba(var(--auth-brand-update-black), 1); --auth-error-text: rgba(var(--auth-brand-update-error-light-red), 1); --extra-info-checkbox-background: rgba(var(--auth-brand-update-black), 1); --extra-info-checkbox-background-hover: rgba(var(--auth-brand-update-white), 0.16); --extra-info-checkbox-svg: rgba(var(--auth-brand-update-black), 1); --auth-modal-background: rgba(var(--auth-brand-update-black), 1); --standard-brand-button-content: rgba(var(--auth-brand-update-black), 1); --standard-brand-button: rgba(var(--auth-brand-update-white), 1); --standard-button-disabled: rgba(var(--auth-brand-update-white), 0.6); --standard-button-disabled-text: rgba(var(--auth-brand-update-black), 1); } } /* "shared/auth/views/auth_view/auth_brand.css" */ @layer css-modules { .auth_brand--figmaSans--Ba2vO { font-family: 'Figma Sans', sans-serif !important; font-variation-settings: 'wdth' 98; font-optical-sizing: auto; } .auth_brand--text--PLMEX { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .auth_brand--brandError--Nhzol { display: flex; padding: 2px 12px; align-items: flex-start; border-radius: 4px; margin-top: 6px; background: var(--auth-brand-error-background); color: var(--auth-brand-error-text); text-align: left; font-size: 14px; line-height: 24px; } .auth_brand--innerLink--DI000 a { font-size: 14px; font-weight: 500; -webkit-text-decoration: underline; text-decoration: underline; } } /* "shared/auth/views/auth_view/auth_form/auth_form.css" */ @layer css-modules { .auth_form--figmaSans--YxV24 { } /* interior width: 350px */ .auth_form--modal--DMc3h { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 422px; padding: 28px 20px; font-size: 16px; min-height: 120px; -webkit-font-smoothing: antialiased; margin-right: auto; margin-left: auto; align-items: center; } .auth_form--form--4fJYq { padding: 0 32px; align-items: center; } .auth_form--insert--DpCzV { padding: 0; align-items: center; } .auth_form--headerBase--dPZBh { color: var(--auth-color-text); font-style: normal; font-variation-settings: 'wdth' 96; font-weight: 500; letter-spacing: -0.32px; line-height: 130%; max-width: 100vw; text-align: center; -webkit-user-select: none; user-select: none; } .auth_form--longHeader--x4iUx { font-size: 26px; } @media (max-width: 500px) { .auth_form--longHeader--x4iUx { font-size: 24px; } } .auth_form--header--fr1Af { font-size: 32px; } @media (max-width: 500px) { .auth_form--header--fr1Af { font-size: 26px; } } .auth_form--subtitle--64ztL { font-size: 16px; text-align: center; margin: 8px 0px; -webkit-user-select: none; user-select: none; color: var(--auth-color-text-secondary); } .auth_form--hint--0iOTs { margin-bottom: 24px; font-size: 16px; color: var(--color-text); text-align: center; } .auth_form--error--Lec7T { margin-bottom: 16px; margin-top: 16px; color: var(--auth-error-text); font-size: 14px; text-align: center; } .auth_form--topMatter--s9BIN { padding-bottom: 32px; } } /* "shared/auth/views/auth_view/form_inputs/form_inputs.css" */ @layer css-modules { .form_inputs--input--U3ykm { color: var(--color-text); font-family: Whyte, sans-serif !important; display: block; width: 100%; box-sizing: border-box; -webkit-user-select: auto; user-select: auto; font-size: 16px; border: 2px solid var(--color-border-strong); border-radius: 6px; height: 50px; line-height: normal; padding: 0 6px 0px 12px; background-color: var(--color-bg, white); } .form_inputs--input--U3ykm::-webkit-input-placeholder { color: var(--color-text-tertiary); } .form_inputs--input--U3ykm:focus { border: 2px solid var(--color-border-selected-strong); padding-left: 12px; } .form_inputs--domainSuggestion--NjdBX { text-align: right; margin: 4px 0 0; font-size: 12px; color: var(--color-text-tertiary); } .form_inputs--link--awTw- { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; } .form_inputs--link--awTw-:hover { -webkit-text-decoration: underline; text-decoration: underline; } .form_inputs--link--awTw-:focus { outline: 2px solid transparent; } .form_inputs--link--awTw-:focus:focus-visible { outline: 2px solid var(--color-border-selected); outline-offset: -2px; } .form_inputs--link--awTw-:focus:focus { outline: 2px solid var(--color-border-selected); outline-offset: -2px; } .form_inputs--link--awTw-:focus:focus:not(:focus-visible) { outline: 2px solid transparent; } .form_inputs--invalidInput--3UQtm { appearance: none; display: block; width: 100%; height: 53px; box-sizing: border-box; -webkit-user-select: auto; user-select: auto; font-size: 18px; font-weight: 320; border-radius: 6px; line-height: 1.45; letter-spacing: -0.005625rem; box-shadow: inset 0 0 0 2px var(--auth-brand-error-box-shadow); padding: 1.5rem 0.75rem 0.375rem; } .form_inputs--invalidInput--3UQtm:focus, .form_inputs--invalidInput--3UQtm:active, .form_inputs--invalidInput--3UQtm:hover { box-shadow: inset 0 0 0 2px var(--auth-brand-error-box-shadow) !important; } } /* "shared/auth/views/auth_view/auth_view.css" */ @layer css-modules { .auth_view--fullWidth--KjWzg { width: 100%; } .auth_view--wideButton--zNJFc { box-sizing: border-box; margin-top: 12px; height: 60px; font-size: 16px; } .auth_view--primaryWideButton--swKV2 { background-color: var(--color-bg-brand); border-color: var(--color-border-brand); } .auth_view--primaryWideButton--swKV2:hover { background-color: var(--color-bg-brand-hover); } .auth_view--primaryWideButton--swKV2:focus { box-shadow: 0 0 0 1px var(--color-bg-brand-pressed); } .auth_view--brandButtonBase--EdORb { height: 48px; font-size: 18px; line-height: 24px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; font-weight: bold; border-radius: 8px; cursor: pointer; } .auth_view--brandButton--dD0L7 { background-color: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-oninverse); cursor: pointer; /* truncate text overflow */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .auth_view--brandButton--dD0L7:hover { background-color: var(--color-bg-inverse); } .auth_view--brandButton--dD0L7:focus { box-shadow: unset; } .auth_view--brandButton--dD0L7:disabled { background-color: var(--color-bg-disabled); cursor: default; } .auth_view--footer--VRWLr { width: 100%; } .auth_view--footerButtonRow--ERSkJ { display: flex; align-items: center; justify-content: center; } .auth_view--centerText--ryEZn { text-align: center; } .auth_view--footerText--SQ7gv { color: var(--color-text-secondary, rgba(0, 0, 0, 0.5)); font-size: 12px; } } /* "shared/components/forms/landing_form/landing_form.css" */ @layer css-modules { .landing_form--input--X2-EK { font-family: Apercu, sans-serif; height: 42px; border-radius: 0; } .landing_form--textInput--YONCB { border-bottom: 1px solid var(--color-border); } .landing_form--hollowButton--nl-CR { color: var(--color-text); border: 2px solid var(--color-border-strong); border-radius: 8px; background-color: var(--color-bg); font-size: 16px; } .landing_form--hollowButton--nl-CR:hover { box-shadow: unset; background-color: var(--color-bg); } .landing_form--hollowButton--nl-CR:focus { box-shadow: unset; } .landing_form--autoHeight--57O8U { height: auto; min-height: 48px; max-height: 100px; } .landing_form--loadingIconCentered--9D4BL { display: flex; align-items: center; justify-content: center; } /* truncate overflowing text with ellipses */ } /* "shared/auth/views/auth_view/authentication/sign_in_and_up/sign_in_and_up.css" */ @layer css-modules { .sign_in_and_up--primaryWideButton--6QBTr { margin-top: 0; } .sign_in_and_up--footer--FnFaQ { } .sign_in_and_up--signInWithPassword--cFO8i { font-size: 14px; font-weight: 500; } .sign_in_and_up--centerText--oSPBA { } .sign_in_and_up--figmaSans--Y60v1 { } .sign_in_and_up--footerRow--hqyuC { } .sign_in_and_up--switchFormText--hgjl- { color: var(--auth-color-text-cool-gray); } .sign_in_and_up--brandError--1blLl { } .sign_in_and_up--orBlock--vzasA { display: block; height: 56px; width: 100%; color: var(--auth-color-text); line-height: 56px; font-size: 14px; font-style: normal; font-weight: 320; letter-spacing: 0.14px; } } /* "shared/auth/views/auth_view/authentication/two_factor/two_factor.css" */ @layer css-modules { .two_factor--wideButton--ujglv { } .two_factor--center--txHZa { justify-items: center; } } /* "shared/auth/views/auth_view/join_org/join_org.css" */ @layer css-modules { .join_org--modalText--k8vAZ { text-align: left; line-height: 24px; font-size: 16px; } .join_org--modalFooter--UgRdl { text-align: center; line-height: 24px; font-size: 16px; color: var(--color-text-secondary); } .join_org--link--H1ulE { text-align: center; line-height: 24px; } } /* "shared/auth/views/auth_view/password_reset/password_reset.css" */ @layer css-modules { .password_reset--modal--wa6Kd { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; max-width: 400px; padding: 36px; font-size: 12px; min-height: 120px; -webkit-font-smoothing: antialiased; } .password_reset--form--1iqdK { padding: 0 32px; } .password_reset--figmaSans--CyM4l { } .password_reset--center--hcJM8 { font-size: 12px; -webkit-text-decoration: underline; text-decoration: underline; color: var(--color-text-brand); margin: 0px auto; } .password_reset--centeredLink--etoLq { } .password_reset--header--DGyQg { color: var(--auth-color-text, #2c2c2c); line-height: 1.5; margin-bottom: 12px; font-size: 16px; text-align: center; text-wrap: pretty; } .password_reset--email--eq3Ta { font-weight: 500; } } /* "figma_app/views/avatar/avatar.css" */ @layer css-modules { .avatar--avatar--lt4z6 { display: flex; width: 30px; height: 30px; line-height: 30px; font-size: 15px; overflow: hidden; color: var(--color-text, white); border-radius: 100%; text-transform: uppercase; align-items: center; justify-content: center; flex-shrink: 0; -webkit-user-select: none; user-select: none; /* By default, have images take the full width of the avatar container. */ } .avatar--avatar--lt4z6 img { width: 100%; } .avatar--circle--W49gy { overflow: hidden; border-radius: 100%; } .avatar--roundedSquare--3Kvoj { border-radius: 2px; } .avatar--square--on-AU { border-radius: 10%; } .avatar--dim--YoKQf { opacity: 0.5; } .avatar--avatarBellWrapper--7w893 { position: relative; } .avatar--bell--7IQs6 { border-radius: 50%; background-color: var(--color-bg-danger); border: 1px solid var(--color-border-strong); position: absolute; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 1; } .avatar--avatarWithHandle--duZiC { display: flex; justify-content: flex-start; align-items: center; width: 100%; box-sizing: border-box; } .avatar--avatarWithHandle--duZiC .avatar--info--BpWXZ { margin-left: 8px; position: relative; margin-top: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .avatar--avatarWithHandle--duZiC .avatar--info--BpWXZ.avatar--labelHeadingMedium--bfzRo { margin-left: 16px; } .avatar--avatarWithHandle--duZiC .avatar--handleRow--QfLCe { display: flex; align-items: center; } .avatar--avatarWithHandle--duZiC .avatar--handleRow--QfLCe > *:not(:first-child) { margin-left: 4px; margin-right: 0; } .avatar--avatarWithHandle--duZiC .avatar--handleRow--QfLCe.avatar--labelHeadingMedium--bfzRo { font-family: var(--text-heading-medium-font-family); font-size: var(--text-heading-medium-font-size); font-weight: var(--text-heading-medium-font-weight); letter-spacing: var(--text-heading-medium-letter-spacing); line-height: var(--text-heading-medium-line-height); transform: translateY(-0.0625rem); /* optical alignment */ } .avatar--avatarWithHandle--duZiC .avatar--handleRow--QfLCe.avatar--labelHeadingMedium--bfzRo > *:not(:first-child, .avatar--isMe--oVKDh) { margin-left: 0.5rem; margin-right: 0; } .avatar--avatarWithHandle--duZiC .avatar--handle--MMpBZ { color: var(--color-text); text-overflow: ellipsis; overflow: hidden; } .avatar--avatarWithHandle--duZiC .avatar--isMe--oVKDh { color: var(--color-text-secondary); margin-left: 4px; } .avatar--avatarWithHandle--duZiC .avatar--isMe--oVKDh.avatar--labelHeadingMedium--bfzRo { margin-left: 6px; } .avatar--avatarWithHandle--duZiC .avatar--email--k79kf { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; display: inline-block; max-width: 100%; } .avatar--avatarWithHandle--duZiC .avatar--emailHover--LUuFr { display: inline; } .avatar--avatarWithHandle--duZiC .avatar--emailHover--LUuFr:hover .avatar--email--k79kf { color: var(--color-text-secondary-hover); -webkit-text-decoration: underline; text-decoration: underline; max-width: calc(100% - 15px); } .avatar--avatarWithOutwardBorder--oFKYw { border: var(--radius-small) solid var(--color-bg); } /* We need a pseudo-element. Otherwise, if we put this directly on avatarWithInwardBorder, the shadow renders below the image. Stack overflow: https://tinyl.io/Ao2b */ .avatar--avatarWithInwardBorder--tL-b3::after { border-radius: 100%; box-shadow: inset 0 0 0 1px var(--color-bg); content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; } .avatar--avatarWithHandle--duZiC .avatar--handle--MMpBZ { -webkit-user-select: none; user-select: none; } .avatar--clickableAvatarWithHandle--wGY3e:hover .avatar--handle--MMpBZ, .avatar--clickableAvatarWithHandle--wGY3e:focus .avatar--handle--MMpBZ { -webkit-text-decoration: underline; text-decoration: underline; } .avatar--disabledDimAvatarWithHandle--9ktaW .avatar--handle--MMpBZ { color: var(--color-text-disabled); } .avatar--multiTeamAvatarContainer--oDneI { display: flex; /* By default HTML will lay later nodes on top of earlier ones. * For this slightly overlapping team avatars it would mean * that the rightmost team will be on top, stacking on top of * the one to the left, and so on. * * In our design we'd like to display another way around: * the leftmost team on top, stacking on top the one to the right, and so on. * Using reverse direction pushed the first HTML node to the right, * so that the next one will be left of it and alss above it in the stack. */ flex-direction: row-reverse; } .avatar--multiTeamAvatarContainer--oDneI > * { /* Some avatars have default 'static' position and others set 'relative', * which pushes them on top of others. As `MultiTeamAvatar` displays a nicely stacked * three (or less) tiles, those 'relative' ones really stand out. * * Normalizing all children to 'relative' position to keep z-ordering predictable. */ position: relative; margin: -2px -4px -2px -2px; /* offset the borders and pull right team avatar closer for overlap */ } .avatar--multiTeamAvatarContainer--oDneI > * { border: 2px solid var(--color-bg); } /* TODO: Migrate to "atomic" tokens, when they're available as CSS variables. */ .avatar--workspaceAvatarBlue--XvU26 > svg > path:nth-child(1) { fill: #bde3ff !important; } .avatar--workspaceAvatarBlue--XvU26 > svg > path:nth-child(2) { fill: #0d99ff !important; } .avatar--workspaceAvatarPurple--BxUIa > svg > path:nth-child(1) { fill: #e4ccff !important; } .avatar--workspaceAvatarPurple--BxUIa > svg > path:nth-child(2) { fill: #9747ff !important; } .avatar--workspaceAvatarGreen--bnci9 > svg > path:nth-child(1) { fill: #aff4c6 !important; } .avatar--workspaceAvatarGreen--bnci9 > svg > path:nth-child(2) { fill: #14ae5c !important; } .avatar--workspaceAvatarTeal--8SUhB > svg > path:nth-child(1) { fill: #b6ecf7 !important; } .avatar--workspaceAvatarTeal--8SUhB > svg > path:nth-child(2) { fill: #00a2c2 !important; } } /* "shared/auth/views/auth_view/authentication/app_auth/app_auth.css" */ @layer css-modules { .app_auth--modal--5DOGN { } .app_auth--header---oxqi { } .app_auth--form--Vevon { padding: 0 32px; } .app_auth--formWide--RlEFm { padding-bottom: 30vh; justify-content: center; } .app_auth--innerContainer--KbpHl { display: flex; flex-direction: column; align-items: center; margin: 0 16px; } .app_auth--message--hc--R { color: var(--color-text); font-size: 20px; font-weight: bold; line-height: 1.5; margin-top: 40px; margin-bottom: 17px; text-align: center; } .app_auth--subtitle--rGbnj { font-size: 16px; text-align: center; margin: 8px 0px; -webkit-user-select: none; user-select: none; color: var(--color-text-secondary); } .app_auth--error--PF-Lj { color: var(--color-text-danger); font-size: 11px; text-align: center; } .app_auth--redeemButton--o-wgM { width: 348px; } @media (max-width: 330px) { .app_auth--footerText--amzDZ { padding-left: 1rem; } } .app_auth--inlineLinkWithText--kXjaA { display: inline-flex; } .app_auth--signupLink--EfVrs { margin-left: 4px; } .app_auth--signupLink--EfVrs:hover { -webkit-text-decoration: underline; text-decoration: underline; } .app_auth--appAuthDesktopLink--kk3J5 { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; font-size: 13px; } .app_auth--appAuthDesktopLink--kk3J5:hover { -webkit-text-decoration: underline; text-decoration: underline; } } /* "shared/auth/views/auth_view/authentication/validate_code/validate_code.css" */ @layer css-modules { .validate_code--footerRow--2KxKb { display: flex; justify-content: center; font-size: 16px; } .validate_code--link--33Vay { display: inline; font-size: 16px !important; cursor: default; } .validate_code--link--33Vay:hover { -webkit-text-decoration: underline; text-decoration: underline; } .validate_code--error---IlX8 { margin-top: 5px; } .validate_code--header--TBI3y { } .validate_code--description--gAl5N { text-align: center; color: var(--color-text); line-height: 24px; font-weight: 400; font-size: 16px; } .validate_code--figmaSansHeader--MjyQw { font-variation-settings: 'wdth' 96; } } /* "shared/auth/views/auth_view/authentication/validate_email/validate_email.css" */ @layer css-modules { .validate_email--figmaSans--h1ADR { } .validate_email--link--TWwCm { color: var(--color-text-brand); display: inline; font-size: 16px !important; cursor: default; } .validate_email--link--TWwCm:hover { -webkit-text-decoration: underline; text-decoration: underline; } .validate_email--header--gauMY { } .validate_email--mobileHeader--g6FNQ { margin-bottom: 16px; } /* TODO: As part of the auth hardening project: make sure this is updated to actually load var(--color-text-secondary). This cannot be done today because we do not set a theme in the Auth entry point https://app.asana.com/0/1205156977068949/1205369692740697/f */ .validate_email--secondaryDescription--TSBY4 { color: var(--color-text-secondary, rgba(0, 0, 0, 0.5)); } .validate_email--emailSvgIllustration--qFQSp { width: 100%; } .validate_email--emailAddress--j8lcY { font-weight: 500; } .validate_email--clickTheLink--4uA3F { font-size: 16px; font-style: normal; font-weight: 320; line-height: 145%; letter-spacing: 0.16px; word-break: break-word; } .validate_email--resendEmailText--cmcCJ { font-weight: 320; -webkit-text-decoration: underline; text-decoration: underline; font-size: 16px; color: var(--color-text-brand); } .validate_email--validateEmailTextWithInnerLink--uv-Pu a { display: inline; } .validate_email--mobileValidateEmailTextWithInnerLink--CiXxK { font-size: 16px; } .validate_email--mobileValidateEmailTextWithInnerLink--CiXxK a { font-size: 16px; } } /* "shared/styles/global/reset.css" */ /* stylelint-disable selector-max-type -- This is a global reset stylesheet, so its expected that we're setting styles on plain HTML tags */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @layer reset { html { vertical-align: baseline; cursor: default; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select, button, textarea { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: inherit; outline: none; letter-spacing: inherit; -webkit-text-decoration: none; text-decoration: none; cursor: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } button { background-color: var(--color-bg); } /* * Make all svg elements `display: block` because when they're inline * they have an unexplained 4px padding on the bottom. */ svg { display: block; } .svg-container path:not([fill='none']) { fill: inherit; } .svg-container path:not([stroke='none']) { stroke: inherit; } .svg-container stop:not([stop-color='none']) { stop-color: var(--color-icon); } span.svg { display: block; vertical-align: top; text-transform: none !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } i18n-text { display: contents; } } /* "shared/components/simple_page/simple_page.css" */ @layer css-modules { /* Height of logo + margin-top */ .simple_page--page--DoR8b { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; min-height: 100%; font: normal 400 11px/16px Inter, sans-serif; color: #333333; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ background-color: #f0f0f0; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ } .simple_page--header--nwyZU { background-color: #000; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ color: white; /* stylelint-disable-line @figma/color-no-raw */ font-size: 15px; height: 42px; line-height: 42px; text-align: left; display: block; } } /* "shared/cookie_banners/base_cookie_banner.css" */ @layer css-modules { /** * NOTE: The design and copy of our cookie banners has been fixed and approved by our legal team. * Please reach out to one of our product counsels if you need to modify it in any way. */ .base_cookie_banner--container--ZyKjV { box-sizing: border-box; display: grid; grid-template-rows: 1fr min-content; grid-template-columns: 1fr min-content; grid-template-areas: 'cb-body cb-dismiss' 'cb-actions cb-actions'; cursor: default; -webkit-user-select: none; user-select: none; } .base_cookie_banner--body--h-A5d { align-self: center; grid-area: cb-body; margin-right: 8px; margin-bottom: 16px; } .base_cookie_banner--body--h-A5d b { font-weight: bold; } .base_cookie_banner--actions--q453t { grid-area: cb-actions; align-self: center; display: flex; flex-direction: row; } .base_cookie_banner--actions--q453t > * + * { /* This CSS declaration applies a left margin to every element within a container EXCEPT the first one. The end result is a layout component whose children will always have uniform spacing, no matter how many children there are */ margin-left: 8px; } .base_cookie_banner--dismiss--D7i9E { grid-area: cb-dismiss; align-self: start; line-height: 0; margin: -8px -8px 0 0; } @media (min-width: 700px) { .base_cookie_banner--container--ZyKjV { grid-template-rows: 1fr; grid-template-columns: 1fr min-content min-content; grid-template-areas: 'cb-body cb-actions cb-dismiss'; } .base_cookie_banner--body--h-A5d { grid-area: cb-body; margin-right: 16px; margin-bottom: unset; } .base_cookie_banner--actions--q453t { grid-area: cb-actions; align-self: center; margin: 0 8px 0 0; } .base_cookie_banner--dismiss--D7i9E { grid-area: cb-dismiss; align-self: center; margin: unset; } } .base_cookie_banner--container__community--d5kHh { position: fixed; width: 100vw; /* Sit underneath the viewer modal */ /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 3; } .base_cookie_banner--container__fileViewer--NBz1o { position: fixed; bottom: 0; width: 100vw; background: var(--color-bg); padding: 16px; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 30; } [data-editor-theme='design'] .base_cookie_banner--container__fileViewer--NBz1o { box-shadow: var(--elevation-200-canvas); } .base_cookie_banner--container__fileViewer--NBz1o a { /* This value is correct for both FJ/FD */ color: var(--color-text-brand); } .base_cookie_banner--container__fileViewer--NBz1o .base_cookie_banner--dismissIcon--6fgt2 { fill: var(--color-icon); } .base_cookie_banner--container__prototype--fqfcZ { background: var(--color-bg-toolbar, rgba(0, 0, 0, 0.75)); color: var(--color-textondarkcanvas); width: 100vw; padding: 16px; border-top: 1px solid var(--color-conditionalborder); } .base_cookie_banner--container__prototype--fqfcZ a { color: var(--color-text-design); } .base_cookie_banner--container__prototype--fqfcZ .base_cookie_banner--dismissIcon--6fgt2 { fill: var(--color-textondarkcanvas); } .base_cookie_banner--container__auth--IgACe { position: sticky; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 30; } .base_cookie_banner--container__authOrCommunity--A-r7w { background: var(--color-bg); bottom: 0; border-top: 2px solid var(--color-bg-inverse); padding: 14px 8px 16px 32px; /* Since we're using sticky positioning, adding a margin here will keep the cookie banner from covering any content underneath when the user has scrolled to the bototm of the viewport */ margin-top: 32px; } .base_cookie_banner--container__authOrCommunity--A-r7w .base_cookie_banner--body--h-A5d { font-size: 12px; font-family: Whyte; } .base_cookie_banner--container__authOrCommunity--A-r7w .base_cookie_banner--dismiss--D7i9E { margin: -8px 0 0 0; } .base_cookie_banner--container__authOrCommunity--A-r7w .base_cookie_banner--dismissIcon--6fgt2 { fill: var(--color-icon, black); color: var(--color-icon, black); } .base_cookie_banner--container__authOrCommunity--A-r7w .base_cookie_banner--brandButton__small--Gs2D1 { height: 32px; padding-left: 10px; padding-right: 10px; font-size: 12px !important; line-height: 18px !important; border-width: 2px !important; } @media (min-width: 700px) { .base_cookie_banner--container__authOrCommunity--A-r7w .base_cookie_banner--dismiss--D7i9E { margin: unset; } } /* Post-interaction persistent calls to action In some touchpoints, we display a persistent link to one of two pages that open in a new tab: - /opt-out/ (implicit consent regions, aka California) - /consent-preferences/ (explicit consent regions, aka EU) */ .base_cookie_banner--fileViewer__persistentMessage--sELpL { -webkit-user-select: none; user-select: none; position: fixed; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 30; bottom: 16px; left: calc(var(--left-panel-width, 0px) + var(--left-rail-width, 0px) + 12px); border-radius: 6px; background-color: var(--color-bg); } .base_cookie_banner--fileViewer__persistentMessage--sELpL > a { cursor: default; padding: 8px; line-height: 18px; display: block; } .base_cookie_banner--fileViewer__persistentMessage--sELpL > a:hover { -webkit-text-decoration: underline; text-decoration: underline; } [data-editor-theme='whiteboard'] .base_cookie_banner--fileViewer__persistentMessage--sELpL { bottom: calc(24px + var(--cookie-banner-persistent-message-bottom-margin)); } .base_cookie_banner--leftPanelCollapsed--LR4U7 { --left-panel-width: 0px; } .base_cookie_banner--fileViewer__persistentMessage_dark--TmQc- > a { color: var(--color-textondarkcanvassecondary); } .base_cookie_banner--fileViewer__persistentMessage_light--9d675 > a { color: var(--color-textonlightcanvassecondary); } .base_cookie_banner--community__persistentMessage--lq5pS { position: fixed; bottom: 16px; right: 16px; font-family: Whyte; /* Sit underneath the viewer modal */ /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 3; } .base_cookie_banner--community__persistentMessage__withHelpWidget--DYvRi { right: 72px; /* Position to the left of help widget (48px widget + 12px gap) */ } .base_cookie_banner--community__persistentMessage__link--BCap5 { display: block; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 32px; background: var(--color-bg-inverse); border: none; outline: none; } .base_cookie_banner--community__persistentMessage__link--BCap5 button { border: none !important; outline: none !important; } .base_cookie_banner--community__persistentMessage__link--BCap5:hover .base_cookie_banner--community__persistentMessage__tooltip--YRkgC { transform: translateY(0); opacity: 1; } .base_cookie_banner--community__persistentMessage__link--BCap5 path { fill: var(--color-text-oninverse, #fff) !important; } .base_cookie_banner--community__persistentMessage__tooltip--YRkgC { -webkit-user-select: none; user-select: none; position: absolute; right: 0px; bottom: calc(100% + 12px); padding: 10px 12px; display: block; background: var(--color-bg-tooltip); color: var(--color-text-tooltip); border-radius: var(--radius-medium); box-shadow: var(--elevation-300-tooltip); opacity: 0; transform: translateY(12px); transition: all 0.2s ease; width: max-content; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 14; } .base_cookie_banner--community__persistentMessage__tooltip--YRkgC::after { content: ''; width: 0; height: 0; position: absolute; top: calc(100% - 1px); right: 9.5px; border-color: transparent; border-top-color: var(--color-bg-tooltip); border-width: 6px; border-style: solid; } .base_cookie_banner--auth__persistentMessage--mq94v { position: sticky; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 30; padding: 24px 8px; display: flex; justify-content: center; align-items: center; } .base_cookie_banner--auth__persistentMessage--mq94v a { font-size: 12px; line-height: 18px; color: var(--color-text-secondary, rgba(0, 0, 0, 0.6)); } .base_cookie_banner--auth__persistentMessage--mq94v a:hover { -webkit-text-decoration: underline; text-decoration: underline; } } /* "shared/flash/flash_view.css" */ @layer css-modules { .flash_view--flashes---aD8I { margin-top: 24px; position: fixed; top: 0; left: 0; text-align: center; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 11; width: 100%; pointer-events: none; } .flash_view--flashPositioner--F05oq { margin-bottom: 24px; } } /* "shared/css_builder/gen/css_builder_gridColumnStart.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gridColumnStart1--CToP- { grid-column-start: 1; } .cx_gridColumnStart2--b7vzD { grid-column-start: 2; } .cx_gridColumnStart3--n4Ph4 { grid-column-start: 3; } .cx_gridColumnStart4--8NoUi { grid-column-start: 4; } .cx_gridColumnStart5--y-C-P { grid-column-start: 5; } .cx_gridColumnStart6--dPbm9 { grid-column-start: 6; } .cx_gridColumnStart7--2mP3E { grid-column-start: 7; } .cx_gridColumnStart8--KNkTp { grid-column-start: 8; } .cx_gridColumnStart9--AZ-W0 { grid-column-start: 9; } .cx_gridColumnStart10--xuD8q { grid-column-start: 10; } .cx_gridColumnStart11--8htI- { grid-column-start: 11; } .cx_gridColumnStart12--ubp6- { grid-column-start: 12; } .cx_gridColumnStart13--dT6vc { grid-column-start: 13; } .cx_gridColumnStart14--OKJeV { grid-column-start: 14; } .cx_gridColumnStart15--fT1Wk { grid-column-start: 15; } .cx_gridColumnStart16--lbtdQ { grid-column-start: 16; } .cx_gridColumnStart17--f3V0F { grid-column-start: 17; } .cx_gridColumnStart18--a1m14 { grid-column-start: 18; } .cx_gridColumnStart19--mHfCf { grid-column-start: 19; } .cx_gridColumnStart20--knHjS { grid-column-start: 20; } .cx_gridColumnStart21--zZVeB { grid-column-start: 21; } .cx_gridColumnStart22--6FmC- { grid-column-start: 22; } .cx_gridColumnStart23--U73tQ { grid-column-start: 23; } .cx_gridColumnStart24--lMs6Z { grid-column-start: 24; } .cx_gridColumnStart25--P5Uym { grid-column-start: 25; } .cx_gridColumnStart26--qXbsX { grid-column-start: 26; } .cx_gridColumnStart27--bwrrL { grid-column-start: 27; } .cx_gridColumnStart28--qFGYx { grid-column-start: 28; } .cx_gridColumnStart29--N21Mx { grid-column-start: 29; } .cx_gridColumnStart30--6HNtQ { grid-column-start: 30; } .cx_gridColumnStart31--Tl2xq { grid-column-start: 31; } .cx_gridColumnStart32--w8gN1 { grid-column-start: 32; } } /* "shared/css_builder/gen/css_builder_gridColumnEnd.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gridColumnEnd1--wCntx { grid-column-end: 1; } .cx_gridColumnEnd2--JoHT- { grid-column-end: 2; } .cx_gridColumnEnd3--6uR6e { grid-column-end: 3; } .cx_gridColumnEnd4--ldOOY { grid-column-end: 4; } .cx_gridColumnEnd5--GlJPe { grid-column-end: 5; } .cx_gridColumnEnd6--ESxnN { grid-column-end: 6; } .cx_gridColumnEnd7--a2Fi2 { grid-column-end: 7; } .cx_gridColumnEnd8--CSpNx { grid-column-end: 8; } .cx_gridColumnEnd9--hH0T3 { grid-column-end: 9; } .cx_gridColumnEnd10--RDJ5r { grid-column-end: 10; } .cx_gridColumnEnd11--zIZlz { grid-column-end: 11; } .cx_gridColumnEnd12--Ss6tk { grid-column-end: 12; } .cx_gridColumnEnd13--SCXjG { grid-column-end: 13; } .cx_gridColumnEnd14--A75Ij { grid-column-end: 14; } .cx_gridColumnEnd15--rmpZ1 { grid-column-end: 15; } .cx_gridColumnEnd16--g8-Ys { grid-column-end: 16; } .cx_gridColumnEnd17--ZHJwx { grid-column-end: 17; } .cx_gridColumnEnd18--2jnoi { grid-column-end: 18; } .cx_gridColumnEnd19--3Ge4c { grid-column-end: 19; } .cx_gridColumnEnd20---Bb46 { grid-column-end: 20; } .cx_gridColumnEnd21--AQrAh { grid-column-end: 21; } .cx_gridColumnEnd22--QeQL- { grid-column-end: 22; } .cx_gridColumnEnd23--4YNp4 { grid-column-end: 23; } .cx_gridColumnEnd24--p0WIu { grid-column-end: 24; } .cx_gridColumnEnd25--DpBol { grid-column-end: 25; } .cx_gridColumnEnd26--tAIzh { grid-column-end: 26; } .cx_gridColumnEnd27--qsN17 { grid-column-end: 27; } .cx_gridColumnEnd28--QmqO3 { grid-column-end: 28; } .cx_gridColumnEnd29--VOxO0 { grid-column-end: 29; } .cx_gridColumnEnd30--vCytj { grid-column-end: 30; } .cx_gridColumnEnd31--7ifKz { grid-column-end: 31; } .cx_gridColumnEnd32--zPqod { grid-column-end: 32; } .cx_gridColumnEndSpan1--PqwDE { grid-column-end: span 1; } .cx_gridColumnEndSpan2--hGl15 { grid-column-end: span 2; } .cx_gridColumnEndSpan3--fSYar { grid-column-end: span 3; } .cx_gridColumnEndSpan4--cvvLb { grid-column-end: span 4; } .cx_gridColumnEndSpan5--Ug9-P { grid-column-end: span 5; } .cx_gridColumnEndSpan6--Qm3Bl { grid-column-end: span 6; } .cx_gridColumnEndSpan7--FZx9y { grid-column-end: span 7; } .cx_gridColumnEndSpan8--1q7g8 { grid-column-end: span 8; } .cx_gridColumnEndSpan9--hLfKz { grid-column-end: span 9; } .cx_gridColumnEndSpan10--ZqWAJ { grid-column-end: span 10; } } /* "shared/css_builder/gen/css_builder_gridRowEnd.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gridRowEnd1--UHxcq { grid-row-end: 1; } .cx_gridRowEnd2--2mTIz { grid-row-end: 2; } } /* "shared/css_builder/gen/css_builder_gridTemplateColumns.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gridTemplateColumns1--Go0o2 { grid-template-columns: repeat(1, 1fr); } .cx_gridTemplateColumns2--cPFC7 { grid-template-columns: repeat(2, 1fr); } .cx_gridTemplateColumns3--Hluaf { grid-template-columns: repeat(3, 1fr); } .cx_gridTemplateColumns4--x20H0 { grid-template-columns: repeat(4, 1fr); } .cx_gridTemplateColumns5--wWdiV { grid-template-columns: repeat(5, 1fr); } } /* "shared/css_builder/gen/css_builder_gridTemplateRows.generated.css" */ @layer css-modules { /** * This file is autogenerated by generateCssBuilder.ts. Don't modify manually. */ .cx_gridTemplateRows1--al0px { grid-template-rows: repeat(1, 1fr); } .cx_gridTemplateRows2--H48im { grid-template-rows: repeat(2, 1fr); } .cx_gridTemplateRows3--aeYFH { grid-template-rows: repeat(3, 1fr); } .cx_gridTemplateRows4--GSuoX { grid-template-rows: repeat(4, 1fr); } .cx_gridTemplateRows5--bsMZR { grid-template-rows: repeat(5, 1fr); } } /* "shared/auth/views/auth_view/auth_form/verify_human_form.css" */ @layer css-modules { .verify_human_form--modalContainer--cY1AQ { padding: 48px 32px; border-radius: 13px; width: 350px; display: flex; flex-direction: column; gap: 24px; text-align: center; } .verify_human_form--modalContainer--cY1AQ * { font-size: 16px; line-height: 24px; } .verify_human_form--title--fMg8q { font-family: var(--figma-sans); font-size: 32px; font-weight: 400; line-height: 100%; } .verify_human_form--timeoutText--faQOi { display: inline; } } /* "shared/auth/views/auth_view/authentication/google_sso_redirect/google_sso_redirect.css" */ @layer css-modules { .google_sso_redirect--redirectOverlay--mM3GS { width: 100%; height: 100%; position: absolute; background-color: var(--color-bg, white); } } /* "shared/components/inline_banner/inline_banner.css" */ @layer css-modules { .inline_banner--banner---73dK { display: flex; flex-direction: row; margin: auto; padding: 12px; border-radius: 6px; justify-content: start; font-size: 11px; line-height: 1.5; } .inline_banner--infoIcon--e7YWT { margin-top: 2px; margin-right: 8px; min-width: 16px; color: currentColor; fill: currentColor; } .inline_banner--information--Z6v0p { background: var(--color-bg-selected); } .inline_banner--error--t6wa- { background: var(--color-bg-measure-tertiary); } .inline_banner--warning--x-Nid { background: var(--color-bg-warning-tertiary); } .inline_banner--figjam--D6RBE { background: var(--color-bg-figjam-tertiary); } .inline_banner--plain--nPtnu { background: var(--color-bg-secondary); } .inline_banner--fullWidth--GFGrP { width: 100%; } .inline_banner--closeWrapper--PrXU- { display: flex; margin-left: auto; } } /* "shared/components/brand/brand_buttons.css" */ @layer css-modules { .brand_buttons--figmaSans--NfBK2 { font-family: 'Figma Sans', sans-serif !important; font-variation-settings: 'wdth' 98; font-optical-sizing: auto; } .brand_buttons--fullWidth--1Wsh1 { width: 100%; } .brand_buttons--autoHeight--sEykG { height: auto; min-height: 48px; max-height: 100px; } .brand_buttons--brandButtonHoverIconEffects--WSiMK { transition: border-radius 160ms ease-out 0s; } .brand_buttons--brandButtonHoverIconEffects--WSiMK > span { transition: translate 160ms ease-out 0s; } .brand_buttons--brandButtonHoverIconEffects--WSiMK > span > span > svg { fill: var(--color-bg); transition: opacity 160ms ease-out 0s; opacity: 0; } .brand_buttons--brandButtonHoverIconEffects--WSiMK:hover, .brand_buttons--brandButtonHoverIconEffects--WSiMK:active, .brand_buttons--brandButtonHoverIconEffects--WSiMK:focus { border-radius: 0; } .brand_buttons--brandButtonHoverIconEffects--WSiMK:hover > span, .brand_buttons--brandButtonHoverIconEffects--WSiMK:active > span, .brand_buttons--brandButtonHoverIconEffects--WSiMK:focus > span { translate: 9px; } .brand_buttons--brandButtonHoverIconEffects--WSiMK:hover > span > span > svg, .brand_buttons--brandButtonHoverIconEffects--WSiMK:active > span > span > svg, .brand_buttons--brandButtonHoverIconEffects--WSiMK:focus > span > span > svg { opacity: 1; } @keyframes brand_buttons--loadingSpinner--FwOxl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .brand_buttons--brandButtonLoadingIconEffects---b657 { transition: border-radius 160ms ease-out 0s; border-radius: 0; } .brand_buttons--brandButtonLoadingIconEffects---b657 > span { transition: translate 160ms ease-out 0s; translate: 9px; } .brand_buttons--brandButtonLoadingIconEffects---b657 > span > span > svg { fill: var(--color-bg); animation: brand_buttons--loadingSpinner--FwOxl 2s infinite linear; } .brand_buttons--brandButton--Y6xZJ { display: flex; justify-content: center; align-items: center; background-color: var(--standard-brand-button); } .brand_buttons--brandButton--Y6xZJ:disabled { background-color: var(--standard-button-disabled, #000); } .brand_buttons--brandButton--Y6xZJ:hover:not(:disabled) { background-color: var(--standard-brand-button); } .brand_buttons--brandButton--Y6xZJ:focus { border-radius: 8px; outline: 2px solid var(--color-border-strong); outline-offset: 4px; outline-style: dashed; } .brand_buttons--brandButtonContent--ZFibF { font-size: 18px; font-weight: 480; line-height: 140%; letter-spacing: -0.09px; position: relative; display: block; } .brand_buttons--standardButtonContent--AmPFz { color: var(--standard-brand-button-content); } .brand_buttons--iconContainer--E863R { display: inline-block; position: absolute; inset: 50% auto auto -23px; translate: 0px -50%; pointer-events: none; } .brand_buttons--hollowButton--Re9rS { color: var(--auth-color-text, #000); border: 1px solid var(--color-border-strong); border-radius: 8px; background-color: var(--hollow-button-background); font-size: 16px; width: 100%; } .brand_buttons--hollowButton--Re9rS:hover:not(:disabled) { box-shadow: unset; background-color: var(--hollow-button-background); } .brand_buttons--hollowButton--Re9rS:focus { box-shadow: unset; outline: 2px solid var(--color-border-strong); outline-offset: 4px; outline-style: dashed; } .brand_buttons--googleText--8KC1c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-style: normal; font-weight: 480; line-height: 140%; letter-spacing: -0.09px; } .brand_buttons--googleButtonInner--Yekxf { display: flex; align-items: center; justify-content: center; } .brand_buttons--googleIcon--AH2lh { width: 18px; height: 18px; display: inline-block; margin-right: 12px; } } /* "ui2/avatar/user.css" */ @layer css-modules { .user--avatarContainer--tNIXj { display: flex; align-items: center; justify-content: center; position: relative; } /* we use ::before instead of editing opacity because the avatars will overlap on each other */ .user--greyedOut--QG5cw { font: 12px / 24px Inter, sans-serif; } .user--greyedOut--QG5cw::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-black-500-dark); border-radius: 50%; /* Match the circular shape */ pointer-events: none; } } /* "../../fpl/components/dist/fpl.css" */ .badge__badge__O61UB { border-radius: var(--radius-medium); align-items: center; display: inline-flex; position: relative; overflow: hidden; } .badge__badgeText__Iz2WE { white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; user-select: none; flex: auto; display: block; overflow: hidden; } .badge__mediumSize__loLd- { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); height: 1rem; padding: 0 var(--spacer-1); } .badge__mediumSize__loLd-.badge__hasIconPrefix__lq3F3 { padding-left: 0; } .badge__largeSize__AZT4z { font-family: var(--text-body-large-font-family); font-size: var(--text-body-large-font-size); font-weight: var(--text-body-large-font-weight); letter-spacing: var(--text-body-large-letter-spacing); line-height: var(--text-body-large-line-height); height: 1.25rem; padding: 0 .375rem; } .badge__largeSize__AZT4z.badge__hasIconPrefix__lq3F3 { padding-left: .125rem; } .badge__icon__YWyTU { --color-icon: var(--badge-icon); justify-content: center; align-items: center; display: inline-flex; } .badge__defaultFilled__3SDQV, .badge__inverseFilled__7J9TB, .badge__brandFilled__VJIp8, .badge__componentFilled__IFL-M, .badge__successFilled__we4n-, .badge__warningFilled__esIha, .badge__dangerFilled__pCK7W, .badge__inactiveFilled__7Upur, .badge__onFill__H-EKJ { color: var(--badge-color); background: var(--badge-background); } .badge__defaultOutline__VXf2n, .badge__brandOutline__NV09G, .badge__componentOutline__-TkI1, .badge__successOutline__rjO5n, .badge__warningOutline__wKdgI, .badge__dangerOutline__IOJ3q, .badge__inactiveOutline__q2Jiw { color: var(--badge-color); outline: var(--badge-border) solid .0625rem; outline-offset: -.0625rem; background: none; } .badge__defaultFilled__3SDQV { --badge-icon: var(--color-icon); --badge-color: var(--color-text); --badge-background: var(--color-bg-tertiary); } .badge__defaultOutline__VXf2n { --badge-icon: var(--color-icon); --badge-color: var(--color-text); --badge-border: var(--color-border); } .badge__inverseFilled__7J9TB { --badge-icon: var(--color-icon-oninverse); --badge-color: var(--color-text-oninverse); --badge-background: var(--color-bg-inverse); } .badge__brandFilled__VJIp8 { --badge-icon: var(--color-icon-onbrand); --badge-color: var(--color-text-onbrand); --badge-background: var(--color-bg-brand); } .badge__brandOutline__NV09G { --badge-icon: var(--color-icon-brand); --badge-color: var(--color-text-brand); --badge-border: var(--color-border-brand); } .badge__componentFilled__IFL-M { --badge-icon: var(--color-icon-oncomponent); --badge-color: var(--color-text-oncomponent); --badge-background: var(--color-bg-component); } .badge__componentOutline__-TkI1 { --badge-icon: var(--color-icon-component); --badge-color: var(--color-text-component); --badge-border: var(--color-border-component); } .badge__successFilled__we4n- { --badge-icon: var(--color-icon-onsuccess); --badge-color: var(--color-text-onsuccess); --badge-background: var(--color-bg-success); } .badge__successOutline__rjO5n { --badge-icon: var(--color-icon-success); --badge-color: var(--color-text-success); --badge-border: var(--color-border-success); } .badge__warningFilled__esIha { --badge-icon: var(--color-icon-onwarning); --badge-color: var(--color-text-onwarning); --badge-background: var(--color-bg-warning); } .badge__warningOutline__wKdgI { --badge-icon: var(--color-icon-warning); --badge-color: var(--color-text-warning); --badge-border: var(--color-border-warning); } .badge__dangerFilled__pCK7W { --badge-icon: var(--color-icon-ondanger); --badge-color: var(--color-text-ondanger); --badge-background: var(--color-bg-danger); } .badge__dangerOutline__IOJ3q { --badge-icon: var(--color-icon-danger); --badge-color: var(--color-text-danger); --badge-border: var(--color-border-danger); } .badge__inactiveFilled__7Upur { --badge-icon: var(--color-icon-secondary); --badge-color: var(--color-text-secondary); --badge-background: var(--color-bg-secondary); } .badge__inactiveOutline__q2Jiw { --badge-icon: var(--color-icon-secondary); --badge-color: var(--color-text-secondary); --badge-border: var(--color-border); } .badge__onFill__H-EKJ { --badge-icon: var(--color-icon-onbrand); --badge-color: var(--color-text-onbrand); --badge-background: var(--color-bghoveronlightcanvas); } .banner__root__inu1D { flex-basis: 100%; justify-content: space-between; display: flex; position: relative; } .banner__content__w-Bvk { display: flex; } .banner__message__5vNg- { color: var(--color-text); font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); flex-wrap: wrap; flex-grow: 1; display: flex; } .banner__messageTitle__05l4s, .banner__link__xTpa- { font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .banner__iconContainer__OJjv2 { display: flex; } .banner__link__xTpa- { margin: calc(var(--spacer-1)*-1) 0; padding: var(--spacer-1) 0; flex-shrink: 0; } .banner__link__xTpa-:active { background: unset !important; } .banner__fullWidthType__Z5YjP { padding-left: var(--spacer-2); } .banner__fullWidthType__Z5YjP .banner__content__w-Bvk { padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-1); justify-content: space-between; align-items: center; column-gap: var(--spacer-2); flex-flow: wrap; flex-grow: 1; } .banner__fullWidthType__Z5YjP .banner__iconContainer__OJjv2 { align-items: center; } .banner__fullWidthType__Z5YjP .banner__content__w-Bvk > .banner__link__xTpa- { margin-right: var(--spacer-1); } .banner__fullWidthType__Z5YjP .banner__message__5vNg- { padding: var(--spacer-1) 0; column-gap: var(--spacer-2); } .banner__fullWidthType__Z5YjP .banner__closeWrapper__LDSV6 { padding: var(--spacer-2); border-left: 1px solid var(--color-bordertranslucent); align-items: center; display: flex; } .banner__inlineType__5DSqf { padding: var(--spacer-2); border-radius: var(--radius-medium); flex-direction: column; align-items: flex-start; } .banner__inlineType__5DSqf .banner__content__w-Bvk { row-gap: var(--spacer-2); padding: var(--spacer-1) var(--spacer-1); flex-direction: column; align-items: flex-start; } .banner__inlineType__5DSqf .banner__message__5vNg- { flex-direction: column; } .banner__inlineType__5DSqf .banner__closeWrapper__LDSV6 { top: var(--spacer-2); right: var(--spacer-2); position: absolute; } .banner__informationalType__TRLt9 { padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-3); flex-direction: column; align-items: flex-start; } .banner__informationalType__TRLt9.banner__defaultVariant__j5VVa { box-shadow: 0 1px 0 0 var(--color-border) inset, 0 -1.5px 0 0 var(--color-border) inset; } .banner__informationalType__TRLt9.banner__brandVariant__bdDQa { box-shadow: 0 1px 0 0 var(--color-border-onselected) inset, 0 -1.5px 0 0 var(--color-border-onselected) inset; } .banner__informationalType__TRLt9 .banner__content__w-Bvk { row-gap: var(--spacer-2); padding: var(--spacer-1) var(--spacer-1) 0; flex-direction: column; align-items: flex-start; } .banner__informationalType__TRLt9 .banner__message__5vNg- { flex-direction: column; } .banner__informationalType__TRLt9 .banner__closeWrapper__LDSV6 { top: calc(var(--spacer-2) + var(--spacer-1)); right: var(--spacer-2); position: absolute; } .banner__insetModalType__iKAqf { padding: var(--spacer-2); column-gap: var(--spacer-2); border-radius: var(--radius-medium); } .banner__insetModalType__iKAqf .banner__content__w-Bvk { justify-content: space-between; align-items: center; column-gap: var(--spacer-2); flex-flow: wrap; flex-grow: 1; } .banner__insetModalType__iKAqf .banner__content__w-Bvk > .banner__link__xTpa- { margin-right: var(--spacer-1); } .banner__insetModalType__iKAqf .banner__message__5vNg- { flex-direction: column; } .banner__insetType__r9XLp { padding-left: var(--spacer-2); border-radius: var(--radius-medium); } .banner__insetType__r9XLp .banner__content__w-Bvk { min-width: 0; padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-1); justify-content: space-between; align-items: center; column-gap: var(--spacer-2); flex-flow: wrap; flex-grow: 1; } .banner__insetType__r9XLp .banner__iconContainer__OJjv2 { padding-top: var(--spacer-2); } .banner__insetType__r9XLp .banner__content__w-Bvk > .banner__link__xTpa- { margin-right: var(--spacer-1); } .banner__insetType__r9XLp .banner__message__5vNg- { padding: var(--spacer-1) 0; column-gap: var(--spacer-2); } .banner__insetType__r9XLp .banner__closeWrapper__LDSV6 { padding: var(--spacer-2); padding-left: 0; } .banner__defaultVariant__j5VVa { background-color: var(--color-bg-secondary); } .banner__defaultVariant__j5VVa .banner__link__xTpa- { color: var(--color-text-brand); } .banner__brandVariant__bdDQa { background-color: var(--color-bg-brand-tertiary); } .banner__brandVariant__bdDQa .banner__link__xTpa- { color: var(--color-text-brand); } .banner__dangerVariant__yECLr { background-color: var(--color-bg-danger-tertiary); } .banner__dangerVariant__yECLr .banner__link__xTpa- { color: var(--color-text-danger); } .banner__warnVariant__E2xQR { background-color: var(--color-bg-warning-tertiary); } .banner__warnVariant__E2xQR .banner__link__xTpa- { color: var(--color-text-warning); } .banner__successVariant__1VyPp { background-color: var(--color-bg-success-tertiary); } .banner__successVariant__1VyPp .banner__link__xTpa- { color: var(--color-text-success); } .button-group__buttonGroup__p1E0s { --fpl-radius-left: 0px; --fpl-radius-right: 0px; flex-direction: row; align-items: stretch; gap: 1px; display: inline-flex; } .button-group__buttonGroup__p1E0s > :first-child { --fpl-radius-left: initial; } .button-group__buttonGroup__p1E0s > :last-child { --fpl-radius-right: initial; } .button-group__buttonGroup__p1E0s.button-group__buttonGroupSecondary__H-NHy { gap: 0; } .button-group__buttonGroup__p1E0s.button-group__buttonGroupSecondary__H-NHy > button { margin-left: -.0625rem; margin-right: -.0625rem; padding-left: .0625rem; padding-right: .0625rem; } .button-group__buttonGroup__p1E0s.button-group__buttonGroupSecondary__H-NHy > button:first-of-type { margin-right: unset; } .button-group__buttonGroup__p1E0s.button-group__buttonGroupSecondary__H-NHy > button:last-of-type:not(:nth-child(2)) { margin-left: unset; } .button-group__buttonGroup__p1E0s > .button-group__triggerButton__bxStO { --icon-button-width: 1rem; } .button-group__buttonGroup__p1E0s > .button-group__triggerButton__bxStO.button-group__largeSize__tou-J { --icon-button-size: 2rem; } .button-group__triggerButtonIcon__UZhip { margin-left: calc((var(--icon-button-width, var(--icon-button-size)) - var(--icon-button-icon-size))/2); } .button-group__fill__G77-z { flex: 1; width: 100%; } .base-icon-button__baseIconButton__TXKzr { --icon-button-outline-offset: -.0625rem; --icon-button-outline-width: .0625rem; --icon-button-outline-color: transparent; --icon-button-icon: var(--color-icon); --icon-button-icon-secondary: var(--color-icon-secondary); --icon-button-icon-tertiary: var(--color-icon-tertiary); width: var(--icon-button-width, var(--icon-button-size)); height: var(--icon-button-height, var(--icon-button-size)); min-width: var(--icon-button-width, var(--icon-button-size)); border-radius: var(--fpl-radius-left, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-left, var(--icon-button-radius)); outline: var(--icon-button-outline-color) solid var(--icon-button-outline-width); outline-offset: var(--icon-button-outline-offset); background: none; padding: 0; } .base-icon-button__baseIconButton__TXKzr[aria-disabled="true"] { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } .base-icon-button__icon__FIIFq { --color-icon: var(--icon-button-icon); --color-icon-secondary: var(--icon-button-icon-secondary); --color-icon-tertiary: var(--icon-button-icon-tertiary); width: var(--icon-button-icon-size); height: var(--icon-button-icon-size); min-width: var(--icon-button-icon-size); border-radius: var(--fpl-radius-left, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-left, var(--icon-button-radius)); fill: var(--color-icon); pointer-events: none; justify-content: center; align-items: center; display: flex; } .dialog-trigger-button__ghost__OrMww[aria-expanded="false"]:not([aria-disabled="true"]):hover, :where([data-fpl-group]:hover) .dialog-trigger-button__ghost__OrMww[aria-expanded="false"]:not([aria-disabled="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) .dialog-trigger-button__ghost__OrMww[aria-expanded="false"]:not([aria-disabled="true"]):not(:focus-visible) { background: var(--color-bghovertransparent); } .dialog-trigger-button__ghost__OrMww[aria-expanded="false"]:not([aria-disabled="true"]):active { background: var(--color-bgtransparent-secondary-hover); } .dialog-trigger-button__secondary__w-GC7[aria-expanded="false"] { --icon-button-outline-color: var(--color-bordertranslucent); } .dialog-trigger-button__secondary__w-GC7[aria-expanded="true"] { --icon-button-outline-color: var(--color-border-onselected); } .dialog-trigger-button__secondary__w-GC7[aria-disabled="true"] { --icon-button-outline-color: var(--color-border-disabled); } .dialog-trigger-button__secondary__w-GC7[aria-expanded="false"]:not([aria-disabled="true"]):active { background-color: var(--color-bg-pressed); } .dialog-trigger-button__dialogTriggerButton__bjzvt { --icon-button-size: 1.5rem; --icon-button-icon-size: 1.5rem; --icon-button-radius: var(--radius-medium); display: grid; } .dialog-trigger-button__dialogTriggerButton__bjzvt.dialog-trigger-button__lg__yHNjf { --icon-button-size: 2rem; } .dialog-trigger-button__dialogTriggerButton__bjzvt[aria-expanded="true"]:not([aria-disabled="true"]) { --icon-button-icon: var(--color-icon-brand); --icon-button-icon-secondary: var(--color-icon-brand-secondary); --icon-button-icon-tertiary: var(--color-icon-brand-tertiary); background: var(--color-bg-selected); } .dialog-trigger-button__dialogTriggerButton__bjzvt[aria-expanded="true"]:not([aria-disabled="true"]):hover { background: var(--color-bg-selected-secondary); } .dialog-trigger-button__dialogTriggerButton__bjzvt[aria-expanded="true"]:not([aria-disabled="true"]):active { background: var(--color-bg-selected); } .dialog-trigger-button__dialogTriggerButton__bjzvt[aria-expanded="true"][aria-disabled="true"] { background: var(--color-bg-disabled); } .dialog-trigger-button__dialogTriggerButton__bjzvt[data-show-focus]:focus-visible { position: relative; } .dialog-trigger-button__dialogTriggerButton__bjzvt[data-show-focus]:focus-visible:before { content: ""; outline: var(--color-border-selected) solid 1px; outline-offset: 1px; border-radius: var(--icon-button-radius); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .button__button__-U-QJ { --btn-height: initial; --btn-padding: initial; --btn-icon-disabled: var(--color-icon-disabled); --btn-animation-ease-in-out: cubic-bezier(.65, 0, .35, 1); font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); height: var(--btn-height); text-align: center; border-radius: var(--fpl-radius-left, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-left, var(--radius-medium)); max-width: 100%; display: inline-flex; position: relative; } .button__button__-U-QJ[aria-disabled="true"]:not(.button__loading__4PMI0) .button__icon__OodK0 { --fpl-icon-color: var(--btn-icon-disabled); --fpl-icon-color-secondary: var(--btn-icon-disabled); --fpl-icon-color-tertiary: var(--btn-icon-disabled); } .button__button__-U-QJ:not([data-show-focus]) { outline-width: 0; } .button__buttonContainer__C6lTN { width: 100%; height: var(--btn-height); max-width: 100%; display: flex; } .button__buttonText__nvCyD { max-width: 100%; margin: var(--btn-padding); justify-content: center; align-items: center; display: flex; overflow: hidden; } .button__buttonContent__tVdQi { white-space: nowrap; text-overflow: ellipsis; overflow-wrap: break; display: block; overflow: hidden; } .button__shortcut__OKjxS { padding-left: var(--spacer-1, .25rem); } .button__icon__OodK0 { --fpl-icon-color: var(--btn-icon); --fpl-icon-color-secondary: var(--btn-icon-secondary); --fpl-icon-color-tertiary: var(--btn-icon-tertiary); height: var(--btn-height); align-items: center; display: flex; } .button__md__fgTCf { --btn-height: 1.5rem; --btn-padding: 0 var(--spacer-2); } .button__md__fgTCf .button__icon__OodK0 { margin-left: calc(var(--spacer-1)*-1); } .button__lg__oiEan { --btn-height: 2rem; --btn-padding: 0 var(--spacer-2-5); } .button__lg__oiEan .button__icon__OodK0 { margin-left: calc(var(--spacer-1)*-1); } .button__fill__teOYe { --btn-padding: 0; width: 100%; } .button__fill__teOYe .button__buttonText__nvCyD { width: 100%; padding: 0 var(--spacer-2); box-sizing: border-box; } .button__fill__teOYe .button__icon__OodK0 { margin-right: var(--spacer-1); margin-left: calc(var(--spacer-2)*-1); } .button__fill__teOYe.button__lg__oiEan .button__icon__OodK0 { margin-left: calc(var(--spacer-1)*-1); } .button__secondary__8YIhr, .button__destructiveSecondary__dJTw3 { color: var(--btn-text); outline: var(--btn-border-ui3) solid 1px; outline-offset: -.0625rem; background: none; } .button__secondary__8YIhr:hover:not([aria-disabled="true"]), .button__destructiveSecondary__dJTw3:hover:not([aria-disabled="true"]), .button__secondary__8YIhr[aria-expanded="true"], .button__destructiveSecondary__dJTw3[aria-expanded="true"] { background: var(--btn-background-hover); } .button__secondary__8YIhr:active:not([aria-disabled="true"]), .button__destructiveSecondary__dJTw3:active:not([aria-disabled="true"]) { background: var(--btn-background-pressed); } .button__secondary__8YIhr:not([data-show-focus]), .button__destructiveSecondary__dJTw3:not([data-show-focus]) { outline-width: 1px; } .button__secondary__8YIhr[data-show-focus]:focus-visible:before, .button__destructiveSecondary__dJTw3[data-show-focus]:focus-visible:before { content: ""; outline: var(--color-border-selected) solid 1px; outline-offset: 1px; border-radius: var(--fpl-radius-left, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-left, var(--radius-medium)); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .button__secondary__8YIhr[aria-disabled="true"]:not(.button__loading__4PMI0), .button__destructiveSecondary__dJTw3[aria-disabled="true"]:not(.button__loading__4PMI0) { color: var(--color-text-disabled); outline-width: 1px; outline-color: var(--color-border-disabled); } .button__secondary__8YIhr[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS, .button__destructiveSecondary__dJTw3[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS { color: var(--color-text-disabled); } .button__secondary__8YIhr .button__icon__OodK0, .button__destructiveSecondary__dJTw3 .button__icon__OodK0 { --fpl-icon-color: var(--btn-icon); --fpl-icon-color-secondary: var(--btn-icon-secondary); --fpl-icon-color-tertiary: var(--btn-icon-tertiary); } .button__secondary__8YIhr .button__shortcut__OKjxS, .button__destructiveSecondary__dJTw3 .button__shortcut__OKjxS { --fpl-icon-color: var(--btn-text-secondary); color: var(--btn-text-secondary); fill: var(--btn-text-secondary); } .button__primary__tP7NU, .button__destructive__EwVR5, .button__signup__O-43y, .button__inverse__Qvjq6 { --btn-icon-disabled: var(--color-icon-ondisabled); color: var(--btn-color); background: var(--btn-background); } .button__primary__tP7NU:hover:not([aria-disabled="true"]), .button__destructive__EwVR5:hover:not([aria-disabled="true"]), .button__signup__O-43y:hover:not([aria-disabled="true"]), .button__inverse__Qvjq6:hover:not([aria-disabled="true"]), .button__primary__tP7NU[aria-expanded="true"], .button__destructive__EwVR5[aria-expanded="true"], .button__signup__O-43y[aria-expanded="true"], .button__inverse__Qvjq6[aria-expanded="true"] { background: var(--btn-background-hover); } .button__primary__tP7NU:active:not([aria-disabled="true"]), .button__destructive__EwVR5:active:not([aria-disabled="true"]), .button__signup__O-43y:active:not([aria-disabled="true"]), .button__inverse__Qvjq6:active:not([aria-disabled="true"]) { --btn-icon: var(--btn-icon-secondary); color: var(--btn-color-secondary); background: var(--btn-background-pressed); } .button__primary__tP7NU[aria-disabled="true"]:not(.button__loading__4PMI0), .button__destructive__EwVR5[aria-disabled="true"]:not(.button__loading__4PMI0), .button__signup__O-43y[aria-disabled="true"]:not(.button__loading__4PMI0), .button__inverse__Qvjq6[aria-disabled="true"]:not(.button__loading__4PMI0) { color: var(--color-text-ondisabled); background: var(--color-bg-disabled); } .button__primary__tP7NU[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS, .button__destructive__EwVR5[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS, .button__signup__O-43y[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS, .button__inverse__Qvjq6[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS { color: var(--color-text-ondisabled); } .button__primary__tP7NU[data-show-focus]:focus-visible, .button__destructive__EwVR5[data-show-focus]:focus-visible, .button__signup__O-43y[data-show-focus]:focus-visible, .button__inverse__Qvjq6[data-show-focus]:focus-visible { outline: var(--color-border-selected) solid 1px; outline-offset: 1px; position: relative; } .button__primary__tP7NU[data-show-focus]:focus-visible .button__buttonText__nvCyD, .button__destructive__EwVR5[data-show-focus]:focus-visible .button__buttonText__nvCyD, .button__signup__O-43y[data-show-focus]:focus-visible .button__buttonText__nvCyD, .button__inverse__Qvjq6[data-show-focus]:focus-visible .button__buttonText__nvCyD { position: relative; } .button__primary__tP7NU .button__shortcut__OKjxS, .button__destructive__EwVR5 .button__shortcut__OKjxS, .button__signup__O-43y .button__shortcut__OKjxS, .button__inverse__Qvjq6 .button__shortcut__OKjxS { --fpl-icon-color: var(--btn-color-secondary); color: var(--btn-color-secondary); fill: var(--btn-color-secondary); } .button__primary__tP7NU { --btn-icon: var(--color-icon-onbrand); --btn-icon-secondary: var(--color-icon-onbrand-secondary); --btn-icon-tertiary: var(--color-icon-onbrand-tertiary); --btn-background: var(--color-bg-brand); --btn-color: var(--color-text-onbrand); --btn-color-secondary: var(--color-text-onbrand-secondary); --btn-background-hover: var(--color-bg-brand-hover); --btn-background-pressed: var(--color-bg-brand-pressed); } .button__secondary__8YIhr { --btn-icon: var(--color-icon); --btn-icon-secondary: var(--color-icon-secondary); --btn-icon-tertiary: var(--color-icon-tertiary); --btn-text: var(--color-text); --btn-text-secondary: var(--color-text-secondary); --btn-border-ui3: var(--color-bordertranslucent); --btn-background-hover: var(--color-bg-transparent-hover); --btn-background-pressed: var(--color-bg-transparent-pressed); } .button__destructive__EwVR5 { --btn-icon: var(--color-icon-ondanger); --btn-icon-secondary: var(--color-icon-ondanger-secondary); --btn-icon-tertiary: var(--color-icon-ondanger-tertiary); --btn-background: var(--color-bg-danger); --btn-color: var(--color-text-ondanger); --btn-color-secondary: var(--color-text-ondanger-secondary); --btn-background-hover: var(--color-bg-danger-hover); --btn-background-pressed: var(--color-bg-danger-pressed); } .button__destructiveSecondary__dJTw3 { --btn-icon: var(--color-icon-danger-secondary); --btn-icon-secondary: var(--color-icon-danger-secondary); --btn-icon-tertiary: var(--color-icon-danger-tertiary); --btn-text: var(--color-text-danger); --btn-text-secondary: var(--color-text-danger-secondary); --btn-border-ui3: var(--color-border-danger); --btn-background-hover: var(--color-bg-transparent-hover); --btn-background-pressed: var(--color-bg-transparent-pressed); } .button__signup__O-43y { --btn-icon: var(--color-icon-onsuccess); --btn-icon-secondary: var(--color-icon-onsuccess-secondary); --btn-icon-tertiary: var(--color-icon-onsuccess-tertiary); --btn-background: var(--color-bg-success); --btn-color: var(--color-text-onsuccess); --btn-color-secondary: var(--color-text-onsuccess-secondary); --btn-background-hover: var(--color-bg-success-hover); --btn-background-pressed: var(--color-bg-success-pressed); } .button__inverse__Qvjq6 { --btn-icon: var(--color-icon-oninverse); --btn-icon-secondary: var(--color-icon-oninverse); --btn-icon-tertiary: var(--color-icon-oninverse); --btn-background: var(--color-bg-inverse); --btn-color: var(--color-text-oninverse); --btn-color-secondary: var(--color-text-oninverse-secondary); --btn-background-hover: var(--color-bg-inverse-hover); --btn-background-pressed: var(--color-bg-inverse-pressed); } .button__ghost__0pJzW { --btn-icon: var(--color-icon); --btn-icon-secondary: var(--color-icon-secondary); --btn-icon-tertiary: var(--color-icon-tertiary); --btn-icon-disabled: var(--color-icon-disabled); --btn-background: transparent; --btn-color: var(--color-text); --btn-color-secondary: var(--color-text-secondary); --btn-background-hover: var(--color-bg-transparent-hover); --btn-background-pressed: var(--color-bg-transparent-pressed); color: var(--btn-color); background: var(--btn-background); } .button__ghost__0pJzW:not([aria-disabled="true"]):hover, :where([data-fpl-group]:hover) .button__ghost__0pJzW:not([aria-disabled="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) .button__ghost__0pJzW:not([aria-disabled="true"]):not(:focus-visible), .button__ghost__0pJzW:not([aria-disabled="true"]):hover, .button__ghost__0pJzW[aria-expanded="true"]:not([aria-disabled="true"]) { background: var(--btn-background-hover); } .button__ghost__0pJzW:not([aria-disabled="true"]):active { background: var(--color-bg-transparent-pressed); } .button__ghost__0pJzW[aria-disabled="true"]:not(.button__loading__4PMI0), .button__ghost__0pJzW[aria-disabled="true"]:not(.button__loading__4PMI0) .button__shortcut__OKjxS { color: var(--color-text-disabled); } .button__ghost__0pJzW[data-show-focus]:focus-visible { outline: var(--color-border-selected) solid 1px; outline-offset: 1px; position: relative; } .button__ghost__0pJzW[data-show-focus]:focus-visible .button__buttonText__nvCyD { position: relative; } .button__ghost__0pJzW .button__shortcut__OKjxS { --fpl-icon-color: var(--btn-color-secondary); color: var(--btn-color-secondary); fill: var(--btn-color-secondary); } .button__link__5iZjR, .button__destructiveLink__oQbdL { --btn-icon: var(--color-icon-brand); --btn-icon-secondary: var(--color-icon-brand); --btn-icon-tertiary: var(--color-icon-brand); --btn-color: var(--color-text-brand); --btn-color-secondary: var(--color-text-brand-secondary); --btn-background-pressed: var(--color-bg-brand-tertiary); --btn-focus-border: var(--color-border-selected); --btn-height: 1rem; --btn-padding: 0; color: var(--btn-color); isolation: isolate; background: none; outline: none; } .button__link__5iZjR:before, .button__destructiveLink__oQbdL:before { inset: calc(var(--spacer-1)*-1) calc(var(--spacer-2)*-1); content: ""; z-index: -1; background: var(--btn-background); border-radius: var(--fpl-radius-left, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-right, var(--radius-medium)) var(--fpl-radius-left, var(--radius-medium)); position: absolute; } .button__link__5iZjR:active:not([aria-disabled="true"]):before, .button__destructiveLink__oQbdL:active:not([aria-disabled="true"]):before { background: var(--btn-background-pressed); } .button__link__5iZjR[aria-disabled="true"]:not(.button__loading__4PMI0), .button__destructiveLink__oQbdL[aria-disabled="true"]:not(.button__loading__4PMI0) { --btn-color-secondary: var(--color-text-disabled); color: var(--color-text-disabled); } .button__link__5iZjR[data-show-focus]:focus-visible:before, .button__destructiveLink__oQbdL[data-show-focus]:focus-visible:before { outline: var(--color-border-selected) solid 1px; outline-offset: 1px; } .button__link__5iZjR .button__shortcut__OKjxS, .button__destructiveLink__oQbdL .button__shortcut__OKjxS { color: var(--btn-color-secondary); } .button__destructiveLink__oQbdL { --btn-icon: var(--color-icon-danger); --btn-icon-secondary: var(--color-icon-danger-secondary); --btn-icon-tertiary: var(--color-icon-danger-tertiary); --btn-color: var(--color-text-danger); --btn-color-secondary: var(--color-text-danger-secondary); --btn-background-pressed: var(--color-bg-danger-tertiary); --btn-focus-border: var(--color-border-danger); } [data-underline-links] .button__link__5iZjR, [data-underline-links] .button__destructiveLink__oQbdL, [data-underline-links] .button__ghost__0pJzW { text-decoration: underline; } @keyframes button__btn-text-fade-out__rdc3o { from { visibility: visible; opacity: 1; transform: translateY(0); } to { visibility: hidden; opacity: 0; transform: translateY(calc(var(--spacer-1)*-1)); } } @keyframes button__spinner-fade-in__ljUOf { from { visibility: hidden; opacity: 0; transform: translateY(calc((var(--btn-height) - var(--spacer-1))*-1)); } to { visibility: visible; opacity: 1; transform: translateY(calc(var(--btn-height)*-1)); } } .button__loading__4PMI0 { cursor: progress; flex-direction: column; } .button__loading__4PMI0 .button__buttonContainer__C6lTN { animation: button__btn-text-fade-out__rdc3o var(--duration-md) var(--btn-animation-ease-in-out) forwards; flex-shrink: 0; } .button__spinnerContainer__iQZMx { --fpl-icon-color: var(--btn-icon); top: var(--btn-height); height: var(--btn-height); opacity: 0; max-width: 100%; animation: button__spinner-fade-in__ljUOf var(--duration-md) var(--btn-animation-ease-in-out) forwards; animation-delay: var(--duration-sm); flex-shrink: 0; align-items: center; display: flex; position: absolute; } .button__spinnerContent__I8pXg { gap: var(--spacer-1); height: calc(var(--btn-height) - var(--spacer-2)); padding: var(--btn-padding); color: var(--btn-color); flex-wrap: wrap; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; } .button__secondary__8YIhr .button__spinnerContainer__iQZMx, .button__destructiveSecondary__dJTw3 .button__spinnerContainer__iQZMx { color: var(--btn-text); } .button__loadingText__UK1Xy { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); color: var(--btn-color); white-space: nowrap; text-overflow: ellipsis; overflow-wrap: break; display: block; overflow: hidden; } .button__loading__4PMI0:is(.button__wideSize__fyONU, .button__largeWideSize__-YVn9) { overflow: hidden; } .button__loading__4PMI0:is(.button__wideSize__fyONU, .button__largeWideSize__-YVn9) .button__spinnerContainer__iQZMx { padding: 0 var(--spacer-2, .5rem); position: relative; top: 0; } .button__loading__4PMI0:is(.button__wideSize__fyONU, .button__largeWideSize__-YVn9) .button__spinnerContent__I8pXg { flex-wrap: initial; } .icon-button__iconButton__CTj-- { --icon-button-size: 1.5rem; --icon-button-icon-size: 1.5rem; --icon-button-radius: var(--radius-medium); display: grid; } .icon-button__largeSize__jKNM1 { --icon-button-size: 2rem; padding: 0 var(--spacer-1, .25rem); } .icon-button__fullRadius__0i-4D { --icon-button-radius: var(--radius-full); } .icon-button__ghost__1ok6j[aria-disabled="true"] { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } .icon-button__ghost__1ok6j:not([aria-disabled="true"]):hover, :where([data-fpl-group]:hover) .icon-button__ghost__1ok6j:not([aria-disabled="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) .icon-button__ghost__1ok6j:not([aria-disabled="true"]):not(:focus-visible), .icon-button__ghost__1ok6j:not([aria-disabled="true"]):hover, .icon-button__ghost__1ok6j[aria-expanded="true"]:not([aria-disabled="true"]) { background: var(--color-bg-transparent-hover); } .icon-button__ghost__1ok6j:not([aria-disabled="true"]):active { background: var(--color-bg-transparent-pressed); } .icon-button__ghost__1ok6j[data-show-focus]:focus-visible { --icon-button-outline-offset: 1px; --icon-button-outline-color: var(--color-border-selected); } .icon-button__secondary__-jfOG { --icon-button-outline-color: var(--color-bordertranslucent); } .icon-button__secondary__-jfOG[aria-disabled="true"] { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); --icon-button-outline-color: var(--color-border-disabled); } .icon-button__secondary__-jfOG[data-show-focus]:focus-visible { position: relative; } .icon-button__secondary__-jfOG[data-show-focus]:focus-visible:before { content: ""; border-radius: var(--icon-button-radius); outline: var(--color-border-selected) solid 1px; outline-offset: 1px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .icon-button__secondary__-jfOG:not([aria-disabled="true"]):hover, .icon-button__secondary__-jfOG[aria-expanded="true"]:not([aria-disabled="true"]) { background: var(--color-bg-transparent-hover); } .icon-button__secondary__-jfOG:not([aria-disabled="true"]):active { background: var(--color-bg-transparent-pressed); } .icon-button__highlighted__KBgcS[aria-disabled="true"] { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } .icon-button__highlighted__KBgcS:not([aria-disabled="true"]) { --icon-button-icon: var(--color-icon-selected); --icon-button-icon-secondary: var(--color-icon-selected); --icon-button-icon-tertiary: var(--color-icon-selected); background: var(--color-bg-selected); } .icon-button__highlighted__KBgcS:not([aria-disabled="true"]):hover, .icon-button__highlighted__KBgcS[aria-expanded="true"]:not([aria-disabled="true"]) { background: var(--color-bg-selected-hover); } .icon-button__highlighted__KBgcS:not([aria-disabled="true"]):active { background: var(--color-bg-selected-pressed); } .icon-button__highlighted__KBgcS[data-show-focus]:focus-visible { --icon-button-outline-offset: 1px; --icon-button-outline-color: var(--color-border-selected); } .icon-button__primary__R4q5D { --icon-button-icon: var(--color-icon-onbrand); background-color: var(--color-bg-brand); } .icon-button__primary__R4q5D[aria-disabled="true"] { --icon-button-icon: var(--color-icon-ondisabled); --icon-button-icon-secondary: var(--color-icon-ondisabled); --icon-button-icon-tertiary: var(--color-icon-ondisabled); background: var(--color-bg-disabled); } .icon-button__primary__R4q5D[data-show-focus]:focus-visible { --icon-button-outline-offset: 1px; --icon-button-outline-color: var(--color-border-selected); } .icon-button__primary__R4q5D:not([aria-disabled="true"]):hover, :where([data-fpl-group]:hover) .icon-button__primary__R4q5D:not([aria-disabled="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) .icon-button__primary__R4q5D:not([aria-disabled="true"]):not(:focus-visible) { background: var(--color-bg-brand); } .icon-button__primary__R4q5D:not([aria-disabled="true"]):hover, .icon-button__primary__R4q5D[aria-expanded="true"]:not([aria-disabled="true"]) { background: var(--color-bg-brand-hover); } .icon-button__primary__R4q5D:not([aria-disabled="true"]):active { --icon-button-icon: var(--color-icon-onbrand-secondary); background: var(--color-bg-brand-pressed); } .toggle-button__input__NF3YA { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; } .toggle-button__input__NF3YA:focus-visible + .toggle-button__label__NRP2k { --icon-button-outline-color: var(--color-border-selected); outline: var(--icon-button-outline-color) solid var(--icon-button-outline-width); outline-offset: var(--icon-button-outline-offset); } .toggle-button__primary__M0VC3:not([aria-disabled="true"]):hover + .toggle-button__label__NRP2k { background-color: var(--color-bghovertransparent); } .toggle-button__primary__M0VC3:not([aria-disabled="true"]):active + .toggle-button__label__NRP2k { background: var(--color-bgtransparent-secondary-hover); } .toggle-button__primary__M0VC3:not([aria-disabled="true"]) + .toggle-button__label__NRP2k { background-color: #0000; } .toggle-button__primary__M0VC3[aria-disabled="true"] + .toggle-button__label__NRP2k { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } .toggle-button__highlighted__E7ou-:not([aria-disabled="true"]):hover + .toggle-button__label__NRP2k { background-color: var(--color-bghovertransparent); } .toggle-button__highlighted__E7ou-:not([aria-disabled="true"]):active + .toggle-button__label__NRP2k { background-color: var(--color-bgtransparent-secondary-hover); } .toggle-button__highlighted__E7ou-:not([aria-disabled="true"]):checked + .toggle-button__label__NRP2k { --icon-button-icon: var(--color-icon-brand); --icon-button-icon-secondary: var(--color-icon-brand-secondary); --icon-button-icon-tertiary: var(--color-icon-brand-tertiary); background: var(--color-bg-selected); } .toggle-button__highlighted__E7ou-:not([aria-disabled="true"]):checked:hover + .toggle-button__label__NRP2k { background-color: var(--color-bg-selected-secondary); } .toggle-button__highlighted__E7ou-:not([aria-disabled="true"]):checked:active + .toggle-button__label__NRP2k { background: var(--color-bg-selected); } .toggle-button__highlighted__E7ou-[aria-disabled="true"] + .toggle-button__label__NRP2k { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } .toggle-button__highlighted__E7ou-[aria-disabled="true"]:checked + .toggle-button__label__NRP2k { background-color: var(--color-bg-disabled); } .toggle-button__label__NRP2k { border-radius: var(--fpl-radius-left, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-left, var(--icon-button-radius)); pointer-events: none; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; inset: 0; } .toggle-button__toggleButton__opcx3 { --icon-button-size: 1.5rem; --icon-button-icon-size: 1.5rem; --icon-button-radius: var(--radius-medium); display: flex; position: relative; } .toggle-button__toggleButton__opcx3.toggle-button__sizeLg__-UK3Y { --icon-button-size: 2rem; } .callout__emphasized__Ub-OG { --color-bg: var(--color-bg-brand); --color-text: var(--color-text-onbrand); --color-text-secondary: var(--color-text-onbrand-secondary); --color-text-tertiary: var(--color-text-onbrand-tertiary); --color-icon: var(--color-icon-onbrand); --color-icon-secondary: var(--color-icon-onbrand-secondary); --color-icon-tertiary: var(--color-icon-onbrand-tertiary); --color-border: var(--color-border-onbrand); --color-border-strong: var(--color-border-onbrand-strong); --color-border-selected: var(--color-border-onbrand); } .callout__arrow__Am8gO { margin: -1px; } .callout__bottomArrow__4C0TR { z-index: -1; margin: -1px; } [data-preferred-theme="dark"] .callout__bottomArrow__4C0TR { filter: drop-shadow(0 3px 5px #00000059) drop-shadow(0 10px 24px #00000073); stroke: #ffffff26 !important; } [data-preferred-theme="light"] .callout__bottomArrow__4C0TR { filter: drop-shadow(0 2px 5px #00000026) drop-shadow(0 10px 24px #0000002e) drop-shadow(0 0 .5px #00000014); } .callout__footer__kpRZG { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); min-height: var(--spacer-6); color: var(--color-text-secondary); grid-area: footer; align-items: center; padding: 0 8px 0 16px; display: flex; } .callout__step__kWJvC { color: var(--color-text-secondary); } .manually-labeled-checkbox__root__Mo9F- { --fpl-checkbox-size: 1rem; width: var(--fpl-checkbox-size); height: var(--fpl-checkbox-size); margin: var(--spacer-1) 0; -webkit-user-select: none; user-select: none; flex-shrink: 0; display: inline-block; position: relative; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__visuals__Be3AE { --checkbox-first-inner-border-color: var(--color-border); --checkbox-second-inner-border-color: transparent; --checkbox-bg: var(--color-bg-secondary); box-sizing: border-box; border: 1px solid var(--checkbox-first-inner-border-color, transparent); border-radius: var(--radius-medium); background: var(--checkbox-bg); pointer-events: none; place-content: center; display: inline-grid; position: absolute; inset: 0; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__visuals__Be3AE:before { content: ""; box-sizing: border-box; border: 1px solid var(--checkbox-second-inner-border-color, transparent); border-radius: calc(var(--radius-medium) - 1px); background: none; position: absolute; inset: 0; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__visuals__Be3AE > * { position: relative; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ { opacity: 0; outline: none; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:focus-visible + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-first-inner-border-color: var(--color-border-selected-strong); --checkbox-second-inner-border-color: var(--color-bg); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:disabled + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-bg: transparent; --checkbox-first-inner-border-color: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-ondisabled); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:disabled:checked + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:disabled:indeterminate + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-first-inner-border-color: transparent; --checkbox-bg: var(--color-bg-disabled); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled) + .manually-labeled-checkbox__visuals__Be3AE { --fpl-icon-color: var(--color-icon-onbrand); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):checked + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):indeterminate + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-first-inner-border-color: var(--color-border-selected-strong); --checkbox-bg: var(--color-bg-brand); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__iconMixed__B-Yp4, .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__iconCheck__tUMFi { width: var(--fpl-checkbox-size); height: var(--fpl-checkbox-size); display: none; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:checked:not(:indeterminate) + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheck__tUMFi, .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:indeterminate + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixed__B-Yp4 { display: block; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__visuals__Be3AE { --checkbox-border-color: var(--color-bordertranslucent); --checkbox-focus-ring-color: transparent; --checkbox-bg: var(--color-bg-secondary); border: 1px solid var(--checkbox-border-color, transparent); border-radius: var(--radius-small); outline: 1px solid var(--checkbox-focus-ring-color, transparent); outline-offset: 1px; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__visuals__Be3AE:before { display: none; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:hover + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-border-color: var(--color-bordertranslucentstrong); --checkbox-bg: var(--color-bg-secondary); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:focus-visible + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-focus-ring-color: var(--color-border-selected); --checkbox-first-inner-border-color: var(--color-bordertranslucent); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:active + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-bg: var(--color-bg-secondary-hover); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:disabled + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-bg: transparent; --checkbox-border-color: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-ondisabled); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:disabled:checked + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:disabled:indeterminate + .manually-labeled-checkbox__visuals__Be3AE { --fpl-icon-color: var(--color-icon-disabled); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:disabled:not(.manually-labeled-checkbox__muted__kzSni):checked + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:disabled:not(.manually-labeled-checkbox__muted__kzSni):indeterminate + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-border-color: transparent; --checkbox-bg: var(--color-bg-disabled); --fpl-icon-color: var(--color-icon-ondisabled); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled) + .manually-labeled-checkbox__visuals__Be3AE { --fpl-icon-color: var(--color-icon-onbrand); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled) + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixedShadow__3k7XJ path, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled) + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheckShadow__LTTJt path { stroke: var(--color-controliconoutline); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):checked + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):indeterminate + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-border-color: var(--color-bordertranslucent); --checkbox-bg: var(--color-bg-brand); transition: background var(--duration-sm) cubic-bezier(.645, .045, .355, 1); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):checked:hover + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):indeterminate:hover + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-border-color: var(--color-bordertranslucentstrong); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):checked:active + .manually-labeled-checkbox__visuals__Be3AE, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ:not(.manually-labeled-checkbox__muted__kzSni, :disabled):indeterminate:active + .manually-labeled-checkbox__visuals__Be3AE { --checkbox-bg: var(--color-bg-brand-hover); } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixed__B-Yp4 path, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheck__tUMFi path { stroke-dasharray: 12; stroke-dashoffset: 0; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixedShadow__3k7XJ, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheckShadow__LTTJt { position: absolute; top: -1px; left: -1px; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixedShadow__3k7XJ path, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ .manually-labeled-checkbox__checkbox__qNblJ + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheckShadow__LTTJt path { stroke: #0000; stroke-width: 4px; paint-order: stroke; } .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ.manually-labeled-checkbox__changed__qn5dR .manually-labeled-checkbox__iconMixed__B-Yp4 path, .manually-labeled-checkbox__root__Mo9F-.manually-labeled-checkbox__newStyles__YToqJ.manually-labeled-checkbox__changed__qn5dR .manually-labeled-checkbox__iconCheck__tUMFi path { animation: manually-labeled-checkbox__stroke-animate-in__MOmVZ var(--duration-sm) cubic-bezier(.645, .045, .355, 1) forwards; } @keyframes manually-labeled-checkbox__stroke-animate-in__MOmVZ { from { stroke-dashoffset: 12px; } to { stroke-dashoffset: 0; } } .chip__chip__p9lFq { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); color: var(--chip-color-text); border-radius: var(--radius-medium); background: var(--chip-color-bg); box-shadow: inset 0 0 0 1px var(--chip-color-border); isolation: isolate; -webkit-user-select: none; user-select: none; flex: none; display: inline-flex; position: relative; overflow: hidden; } .chip__chip__p9lFq:has(:focus-visible) { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } .chip__chip__p9lFq.chip__sizeSm__lkIcs { --chip-padding: var(--spacer-1); --chip-height: 1.25rem; --chip-override-border-radius: calc(.1875rem + 2px); height: var(--chip-height); border-radius: .1875rem; } .chip__chip__p9lFq.chip__sizeSm__lkIcs .chip__leading__zJNEa { min-width: 1.25rem; } .chip__chip__p9lFq.chip__sizeMd__OpcZs { --chip-padding: var(--spacer-2); --chip-height: 1.5rem; --chip-override-border-radius: calc(var(--radius-medium) + 2px); height: var(--chip-height); } .chip__chip__p9lFq.chip__sizeMd__OpcZs .chip__leading__zJNEa { min-width: 1.5rem; } .chip__chip__p9lFq.chip__sizeFill__X3su6 { --chip-padding: var(--spacer-2); --chip-height: 1.5rem; width: 100%; height: var(--chip-height); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border); --chip-color-text: var(--color-text); --fpl-icon-color: var(--color-text-secondary); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-transparent-hover); --fpl-icon-color: var(--color-text); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-transparent-pressed); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy:has(:focus-visible) { --fpl-icon-color: var(--color-text); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy.chip__selected__j8L-p, .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy.chip__selected__j8L-p:hover { --chip-color-bg: var(--color-bg-selected); --chip-color-border: var(--color-border-selected); --chip-color-text: var(--color-text-selected); --fpl-icon-color: var(--color-text-selected); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy.chip__selected__j8L-p:active { --chip-color-bg: var(--color-bg-selected-pressed); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-component); --chip-color-text: var(--color-text-component); --fpl-icon-color: var(--color-text-component); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-component-tertiary); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-component-tertiary-pressed); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-component-tertiary); --chip-color-border: var(--color-border-component-strong); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__disabled__Cr-yT { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-component); --chip-color-text: var(--color-text-component-secondary); --fpl-icon-color: var(--color-text-component-secondary); } .chip__chip__p9lFq.chip__variantComponent__iYi9L.chip__disabled__Cr-yT.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-component-tertiary); --chip-color-border: var(--color-border-component); --chip-color-text: var(--color-text-component-secondary); --fpl-icon-color: var(--color-text-component-secondary); } .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-success); --chip-color-text: var(--color-text-success); --fpl-icon-color: var(--color-text-success); } .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-success-tertiary); } .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-success-tertiary-pressed); } .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-success-tertiary); --chip-color-border: var(--color-border-success-strong); } .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-warning); --chip-color-text: var(--color-text-warning); --fpl-icon-color: var(--color-text-warning); } .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-warning-tertiary); } .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-warning-tertiary-pressed); } .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-warning-tertiary); --chip-color-border: var(--color-border-warning-strong); } .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-danger); --chip-color-text: var(--color-text-danger); --fpl-icon-color: var(--color-text-danger); } .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-danger-tertiary); } .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-danger-tertiary-pressed); } .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-danger-tertiary); --chip-color-border: var(--color-border-danger-strong); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border); --chip-color-text: var(--color-text); --fpl-icon-color: var(--color-text-secondary); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-transparent-hover); --fpl-icon-color: var(--color-text); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy:has(:focus-visible) { --fpl-icon-color: var(--color-text); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy:has(:active) { --chip-color-bg: var(--color-bg-transparent-pressed); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-brand); --chip-color-border: transparent; --chip-color-text: var(--color-text-onbrand); --fpl-icon-color: var(--color-text-onbrand); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy.chip__selected__j8L-p:hover { --chip-color-bg: var(--color-bg-brand-hover); --fpl-icon-color: var(--color-text-onbrand); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy.chip__selected__j8L-p:has(:active) { --chip-color-bg: var(--color-bg-brand-pressed); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__disabled__Cr-yT { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-disabled); --chip-color-text: var(--color-text-disabled); --fpl-icon-color: var(--color-icon-disabled); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__disabled__Cr-yT.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-disabled); --chip-color-border: transparent; --chip-color-text: var(--color-text-ondisabled); --fpl-icon-color: var(--color-text-ondisabled); } .chip__chip__p9lFq.chip__variantOverride__f-rBL { width: fit-content; max-width: 100%; overflow: unset; } .chip__chip__p9lFq.chip__variantOverride__f-rBL:after { content: ""; border: 1px solid var(--chip-color-border); border-radius: var(--chip-override-border-radius); border-top: none; border-right: none; border-top-left-radius: 0; border-bottom-right-radius: 0; width: calc(100% - 4.5px); height: calc(100% - 4.5px); position: absolute; bottom: -2px; left: -2px; } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-brand); --chip-color-text: var(--color-text-brand); --fpl-icon-color: var(--color-icon-brand); } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy.chip__interactive__mYmLC:hover { --chip-color-bg: var(--color-bg-brand-tertiary); } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy.chip__interactive__mYmLC:active { --chip-color-bg: var(--color-bg-brand-tertiary-pressed); } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy:has(:focus-visible) { --chip-color-border: var(--color-border-selected); } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy:has(:focus-visible):after { display: none; } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy.chip__selected__j8L-p { --chip-color-border: var(--color-border-selected); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__disabled__Cr-yT, .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__disabled__Cr-yT, .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__disabled__Cr-yT, .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__disabled__Cr-yT, .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__disabled__Cr-yT { --chip-color-bg: var(--color-bg); --chip-color-border: var(--color-border-disabled); --chip-color-text: var(--color-text-disabled); --fpl-icon-color: var(--color-text-disabled); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__disabled__Cr-yT:has(:focus-visible):after, .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__disabled__Cr-yT:has(:focus-visible):after, .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__disabled__Cr-yT:has(:focus-visible):after, .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__disabled__Cr-yT:has(:focus-visible):after, .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__disabled__Cr-yT:has(:focus-visible):after { display: none; } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__disabled__Cr-yT.chip__selected__j8L-p, .chip__chip__p9lFq.chip__variantSuccess__NqX9S.chip__disabled__Cr-yT.chip__selected__j8L-p, .chip__chip__p9lFq.chip__variantDanger__3kLvy.chip__disabled__Cr-yT.chip__selected__j8L-p, .chip__chip__p9lFq.chip__variantWarning__tpuFm.chip__disabled__Cr-yT.chip__selected__j8L-p, .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__disabled__Cr-yT.chip__selected__j8L-p { --chip-color-bg: var(--color-bg-secondary); --chip-color-border: var(--color-border); } .chip__content__PFdMr { flex-direction: row; align-items: center; width: 100%; display: flex; position: relative; } .chip__title__pAoz6 { min-width: 0; padding: 0 var(--chip-padding); white-space: nowrap; text-overflow: ellipsis; flex: auto; overflow: hidden; } .chip__title__pAoz6:not(:first-child) { padding-left: 0; } .chip__title__pAoz6:not(:last-child) { padding-right: 0; } .chip__mainButton__8pK6D { outline: none; } .chip__leading__zJNEa, .chip__trailing__gFQmd { flex: none; justify-content: center; align-items: center; display: flex; } .chip__closeButtonWrapper__DJlYV { max-width: var(--chip-height); flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; } .chip__closeButton__qGt5t { width: var(--chip-height); height: var(--chip-height); outline: none; justify-content: center; align-items: center; display: flex; } .chip__closeButton__qGt5t:active { opacity: .5; } .chip__triggerChevron__s7ngi { margin-right: .125rem; } .chip__mainButton__8pK6D.chip__selectTrigger__7i1RF { z-index: 1; } .collapse__collapseRoot__nSZ1e { --chevron-color-icon: var(--color-icon-tertiary); --chevron-color-icon-hover: var(--color-text); --label: var(--color-text-secondary); } .collapse__collapseRoot__nSZ1e.collapse__fillHeight__BK9lI { flex-direction: column; height: 100%; display: flex; } .collapse__collapseRoot__nSZ1e.collapse__fillHeight__BK9lI .collapse__collapseContent__J6Fze { flex-grow: 1; min-height: 0; } .collapse__collapseHeader__PGUuS { flex-shrink: 0; place-items: center; display: inline-flex; } .collapse__collapseHeader__PGUuS:has(.collapse__collapseLabelButton__gN4Af:focus-visible) { border-radius: var(--radius-medium); outline: var(--color-border-selected) solid 1px; outline-offset: -1px; } .collapse__collapseHeader__PGUuS.collapse__fitWidth__bYhmE { width: fit-content; } .collapse__collapseHeader__PGUuS.collapse__fillWidth__9mtAx { width: 100%; } .collapse__collapseLabelButton__gN4Af { background-color: unset; width: 100%; height: 100%; } .collapse__collapseLabelButton__gN4Af:focus-visible { outline: none; } .collapse__collapseLabelButton__gN4Af.collapse__collapseLabelButtonTruncated__QmRzP { min-width: 0; } .collapse__collapseChevron__SnIUQ { place-items: center; display: flex; } .collapse__collapseLabel__cVIMx { color: var(--label); } .collapse__collapseLabelTruncated__CZ18H { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .collapse__collapseHeader__PGUuS.collapse__fitWidth__bYhmE .collapse__collapseTrail__nTP9O { padding-left: var(--spacer-1, .3rem); } .collapse__collapseTrail__nTP9O { padding-right: var(--spacer-2, .5rem); } .collapse__mediumSize__mVJVK { height: 2rem; } .collapse__largeSize__lDD-m { height: 2.5rem; } .collapse__mediumLabelSize__YZ57W { font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .collapse__largeLabelSize__8uCN0 { font-family: var(--text-body-large-strong-font-family); font-size: var(--text-body-large-strong-font-size); font-weight: var(--text-body-large-strong-font-weight); letter-spacing: var(--text-body-large-strong-letter-spacing); line-height: var(--text-body-large-strong-line-height); } .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af[aria-expanded="true"]:not(:hover) .collapse__collapseChevron__SnIUQ { visibility: hidden; } .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af[aria-expanded="true"]:hover .collapse__collapseChevron__SnIUQ, .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af[aria-expanded="true"]:focus-visible .collapse__collapseChevron__SnIUQ { visibility: visible; } .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af:hover .collapse__collapseChevron__SnIUQ, .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af:focus-visible .collapse__collapseChevron__SnIUQ { --color-icon: var(--chevron-color-icon); } .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af[aria-expanded="true"], .collapse__collapseHeader__PGUuS.collapse__leftPanelVariant__Q8P4s .collapse__collapseLabelButton__gN4Af[aria-expanded="false"] { --label: var(--color-text); } .collapse__collapseLabelButton__gN4Af[aria-expanded="false"] { --label: var(--color-text-secondary); } .collapse__collapseLabelButton__gN4Af[aria-expanded="false"]:hover, .collapse__collapseLabelButton__gN4Af[aria-expanded="true"] { --label: var(--color-text); } .collapse__collapseLabelButton__gN4Af:not(:hover) .collapse__collapseChevron__SnIUQ { --color-icon: var(--chevron-color-icon); } .collapse__collapseLabelButton__gN4Af:hover .collapse__collapseChevron__SnIUQ, .collapse__collapseLabelButton__gN4Af:focus-visible .collapse__collapseChevron__SnIUQ { --color-icon: var(--chevron-color-icon-hover); } .collapse__collapseGroup__dkOvu { flex-direction: column; display: flex; } .collapse__collapseGroup__dkOvu .collapse__collapseRoot__nSZ1e:not(:last-child) { border-bottom: 1px solid var(--color-border); } .search-input__icon__pkEK- { --color-icon: var(--color-icon-secondary); flex-shrink: 0; place-content: center; display: grid; } .search-input__root__BJAlh:is(:hover, :focus-within) .search-input__icon__pkEK- { --color-icon: unset; } .search-input__root__BJAlh[data-fpl-disabled] .search-input__icon__pkEK- { --color-icon: var(--color-icon-disabled); } .search-input__icon__pkEK-.search-input__lg__IYUK0 { width: var(--spacer-32px); height: var(--spacer-32px); } .search-input__clear__zR1gK { --color-icon: var(--color-icon-secondary); width: var(--spacer-24px); height: var(--spacer-24px); cursor: default; } .search-input__clear__zR1gK:hover { --color-icon: unset; } .search-input__clear__zR1gK.search-input__lg__IYUK0 { width: 1.75rem; height: var(--spacer-32px); } .search-input__search__rJMFk:placeholder-shown + .search-input__clear__zR1gK { display: none; } .search-input__borderless__shUUA.search-input__borderless__shUUA { height: var(--spacer-40px); background-color: #0000; border-radius: 0; } .search-input__borderless__shUUA.search-input__borderless__shUUA .search-input__icon__pkEK- { padding-left: var(--spacer-2); box-sizing: content-box; } .search-input__borderless__shUUA.search-input__borderless__shUUA:not(:focus-visible) { outline: none; } .menu__light__LPWu- { --menu-separator-style: .0625rem solid var(--color-border); background-color: var(--color-bg); box-shadow: var(--elevation-400); } .menu__light__LPWu-[data-fpl-menu-overlap] { box-shadow: var(--elevation-500); } .menu__dark__crKxV { --menu-separator-style: .0625rem solid var(--color-border-menu); background-color: var(--color-bg-menu); box-shadow: var(--elevation-400); } .menu__dark__crKxV[data-fpl-menu-overlap] { box-shadow: inset 0 .5px #ffffff14, 0 10px 16px #00000059, inset 0 0 .5px #ffffff59, 0 2px 5px #00000059; } .menu__container__ZmSkT { --menu-separator-gap: .4375rem; min-width: 80px; padding: var(--spacer-2, .5rem) 0; border-radius: var(--radius-large, .125rem); } .menu__container__ZmSkT:focus { outline: 0; } .menu__item__Tl2MO { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); padding: 0 var(--spacer-2); color: var(--color-text); -webkit-user-select: none; user-select: none; align-items: center; text-decoration: none; display: flex; } .menu__item__Tl2MO:focus { outline: 0; } .menu__item__Tl2MO:is(:focus, :hover) .menu__itemText__qcxtq, .menu__item__Tl2MO:is(:focus, :hover) .menu__subtrigger__bzQWF { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); } .menu__item__Tl2MO:is(:focus, :hover) .menu__subText__0OMd9 { color: var(--color-text-onbrand-secondary); } .menu__item__Tl2MO[data-fpl-selected="true"] .menu__subtrigger__bzQWF { background-color: var(--color-bg-transparent-hover); } .menu__item__Tl2MO[aria-disabled="true"] { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text-disabled); } .menu__item__Tl2MO[aria-disabled="true"] .menu__itemText__qcxtq, .menu__item__Tl2MO[aria-disabled="true"] .menu__subText__0OMd9 { color: var(--color-text-disabled); } .menu__item__Tl2MO[aria-disabled="true"][data-fpl-selected="true"]:is(.menu__itemText__qcxtq, .menu__subtrigger__bzQWF) { background-color: var(--color-bg-brand); } .menu__itemText__qcxtq { --fpl-icon-color: currentcolor; width: 100%; min-height: 1.5rem; padding: var(--spacer-1, .1rem) var(--spacer-2, 1rem); box-sizing: border-box; color: var(--color-text); white-space: nowrap; border-radius: var(--radius-medium); align-items: center; display: flex; } .menu__subtrigger__bzQWF { gap: var(--spacer-2, .5rem); grid-template-columns: 1fr 1.5rem; padding-right: 0; display: grid; } .menu__subTriggerText__j8Zgp { align-items: center; display: flex; } .menu__iconContainer__aYOvR { width: 100%; margin: calc(var(--spacer-1, .25rem)*-1) 0; display: flex; position: relative; } .menu__title__qibGG { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); height: 1.5rem; padding: 0 var(--spacer-3, 1rem); color: var(--color-text-secondary); -webkit-user-select: none; user-select: none; justify-content: space-between; align-items: center; display: flex; } .menu__subtriggerItem__iLXtd:focus .menu__subtrigger__bzQWF { background-color: var(--color-bg-brand); } .menu__subtriggerItem__iLXtd:where([data-fpl-nested-selection]) { padding-left: var(--spacer-1); } .menu__subTriggerDot__D21MC { margin: calc(var(--spacer-1)*-1) 0; margin-right: var(--spacer-1); position: relative; } .menu__subtriggerItem__iLXtd[data-fpl-nested-selection="false"] .menu__subTriggerDot__D21MC { opacity: 0; } .menu__group__KwU4I { margin: 0; padding: 0; list-style-type: none; } @supports not selector(:has(+ *)) { .menu__group__KwU4I + :not([data-fpl-select-direction="down"]) { margin-top: var(--menu-separator-gap); padding-top: var(--menu-separator-gap); border-top: var(--menu-separator-style); } } .menu__group__KwU4I:has( + :not([data-fpl-select-direction="down"])), .menu__separator__asdZB { margin-bottom: var(--menu-separator-gap); padding-bottom: var(--menu-separator-gap); border-bottom: var(--menu-separator-style); } .menu__trail__fEaqN { padding-left: var(--spacer-3, 1rem); margin-left: auto; } .menu__lead__EftIO { margin: calc(var(--spacer-1, .25rem)*-1) 0; margin-right: var(--spacer-1, .25rem); align-items: center; display: flex; position: relative; } .menu__selectItem__I9GzL { padding-left: var(--spacer-2); } .menu__selectItem__I9GzL[aria-checked="false"] .menu__selectIcon__zD-Q- { opacity: 0; } .menu__selectIcon__zD-Q- { margin: calc(var(--spacer-1, .25rem)*-1) 0; margin-right: var(--spacer-1); position: relative; } .menu__selectItemText__m9o3C { padding-left: var(--spacer-1, .75rem); } .menu__subText__0OMd9 { color: var(--color-text-secondary); } .menu__checkboxItem__htoq3[aria-checked="true"] .menu__checkboxIconContainer__KELDn { --fpl-icon-color: var(--color-icon-onbrand); border-color: var(--color-border-selected-strong); background-color: var(--color-bg-brand); } .menu__checkboxItem__htoq3[aria-checked="true"] .menu__checkboxIcon__FB0yg { display: block; } .menu__checkboxItem__htoq3[aria-disabled="true"][aria-checked="true"] .menu__checkboxIconContainer__KELDn { --fpl-icon-color: var(--color-icon-disabled); } .menu__checkboxText__HXE5X { align-items: center; width: 100%; display: flex; } .menu__checkboxIcon__FB0yg { display: none; } .menu__checkboxContainer__i0-bq { gap: var(--spacer-2, .25rem); grid-template-columns: 1fr 1rem; display: grid; } .menu__checkboxIconContainer__KELDn { width: 16px; height: 16px; margin: calc(var(--spacer-1, .25rem)*-1) 0; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background-color: var(--color-bg-secondary); justify-content: center; align-items: center; display: flex; position: relative; } .menu__scrollArrow__MLCVl { background-color: var(--color-bg); } .menu__scrollArrow__MLCVl:hover { background-color: var(--color-bg-hover); } .menu__scrollArrow__MLCVl[data-fpl-select-direction="down"] { bottom: calc(var(--spacer-2, .5rem)*-1); border-bottom-right-radius: var(--radius-large); border-bottom-left-radius: var(--radius-large); } .menu__scrollArrow__MLCVl[data-fpl-select-direction="up"] { top: calc(var(--spacer-2, .5rem)*-1); border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large); } .menu__allowsIndent__1tnRp.menu__container__ZmSkT:has(li.menu__selectItem__I9GzL) .menu__item__Tl2MO:not(.menu__selectItem__I9GzL, .menu__subtriggerItem__iLXtd) .menu__itemText__qcxtq, .menu__allowsIndent__1tnRp.menu__container__ZmSkT:has(li.menu__selectItem__I9GzL) .menu__subtriggerItem__iLXtd:not([data-fpl-nested-selection]) .menu__itemText__qcxtq { padding-left: var(--spacer-4); } .menu__allowsIndent__1tnRp.menu__container__ZmSkT:has(li.menu__selectItem__I9GzL) .menu__title__qibGG { padding-left: var(--spacer-5); } .slider__root__9tITq.slider__root__9tITq { --fpl-slider-thumb-bg: transparent; --fpl-slider-track-bg: var(--color-bg-secondary); --fpl-slider-primitive-hitbox: 24px; --fpl-slider-height: 1rem; --fpl-slider-thumb-width: var(--fpl-slider-height); height: var(--fpl-slider-height); max-height: var(--fpl-slider-height); flex: 1 0 auto; position: relative; } .slider__root__9tITq.slider__root__9tITq:before { inset: 0 calc(var(--fpl-slider-height)*-1/2); content: ""; border-radius: var(--radius-full); background: var(--fpl-slider-track-bg); outline: 1px solid var(--color-bordertranslucent); outline-offset: -1px; position: absolute; } .slider__root__9tITq.slider__root__9tITq[data-mixed]:focus-within:before { outline-color: var(--color-border-selected); } .slider__root__9tITq.slider__root__9tITq .slider__thumb__621tr { width: var(--fpl-slider-thumb-width); height: var(--fpl-slider-thumb-width); box-sizing: border-box; border-radius: var(--radius-full); background: var(--color-icon-onbrand); box-shadow: var(--elevation-200); position: absolute; top: 0; } .slider__root__9tITq.slider__root__9tITq[data-focus-visible] :focus-visible ~ .slider__thumb__621tr { outline: 1px solid var(--color-border-selected); outline-offset: -1px; } .slider__root__9tITq.slider__root__9tITq .slider__modified__7Bsu- { border: .25rem solid var(--color-icon-onbrand); background: var(--fpl-slider-thumb-bg); box-shadow: var(--elevation-200), inset 0 0 0 .5px var(--color-bordertranslucent); } .slider__root__9tITq.slider__root__9tITq [aria-disabled="true"] ~ .slider__thumb__621tr { background: var(--color-bg-disabled); box-shadow: none; border: none; } .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6 { height: 100%; position: absolute; } .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6:after { inset: 0 calc(var(--fpl-slider-height)*-1/2); content: ""; border-radius: var(--radius-full); background: var(--color-bg-brand); position: absolute; } .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO { border-radius: var(--radius-full); background: var(--color-icon-tertiary); width: .25rem; height: .25rem; position: absolute; top: 50%; transform: translate(-50%, -50%); } .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO.slider__main__Q2Z7m { background: var(--color-icon); } .slider__root__9tITq.slider__root__9tITq[data-mixed] .slider__thumb__621tr, .slider__root__9tITq.slider__root__9tITq[data-mixed] .slider__range__2uem6 { opacity: 0; } [data-enhanced-contrast] .slider__root__9tITq.slider__root__9tITq .slider__thumb__621tr { box-shadow: 0 0 0 1px var(--color-border), var(--elevation-200); } [data-enhanced-contrast] .slider__root__9tITq.slider__root__9tITq .slider__modified__7Bsu- { box-shadow: 0 0 0 1px var(--color-border), var(--elevation-200), inset 0 0 0 .5px var(--color-bordertranslucent); } .manually-labeled-switch__root__sp5fN { --fpl-switch-bg: var(--color-bgswitchoff); --fpl-switch-bg-inset: -1px; --fpl-switch-knob-bg: var(--color-icon-onbrand); --fpl-switch-knob-w: .875rem; --fpl-switch-knob-h: .875rem; --fpl-switch-knob-x: 0; --transition-duration: 80ms; flex-shrink: 0; width: 2rem; height: 1.5rem; display: inline-block; position: relative; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:focus-visible + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg-inset: .0625rem; border-color: var(--color-border-selected-strong); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:checked + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-brand); --fpl-switch-knob-x: 1rem; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:indeterminate + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-brand); --fpl-switch-knob-x: .6875rem; --fpl-switch-knob-w: .5rem; --fpl-switch-knob-h: .125rem; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:disabled + .manually-labeled-switch__visuals__g13eB, .manually-labeled-switch__root__sp5fN[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled) + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-disabled); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:disabled:checked + .manually-labeled-switch__visuals__g13eB, .manually-labeled-switch__root__sp5fN[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled):checked + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bgswitchoff); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:disabled:not(:indeterminate), .manually-labeled-switch__root__sp5fN[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled, :indeterminate) { --fpl-switch-knob-bg: var(--color-icon-ondisabled); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9 { --fpl-switch-input-inset: .25rem; inset: var(--fpl-switch-input-inset) 0; width: 100%; height: calc(100% - var(--fpl-switch-input-inset)*2); opacity: 0; outline: none; margin: 0; position: absolute; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB { box-sizing: border-box; border-radius: var(--radius-full); pointer-events: none; border: .0625rem solid #0000; align-items: center; display: flex; position: absolute; inset: .25rem 0; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB:before { inset: var(--fpl-switch-bg-inset); content: ""; border-radius: var(--radius-full); background: var(--fpl-switch-bg); transition: background var(--transition-duration) ease-out; display: block; position: absolute; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB:after { content: ""; width: var(--fpl-switch-knob-w); height: var(--fpl-switch-knob-h); border-radius: var(--radius-full); background: var(--fpl-switch-knob-bg); transform: translateX(var(--fpl-switch-knob-x)); transition: all var(--transition-duration) ease-out; display: block; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd { --fpl-switch-bg: var(--color-bg-secondary); --fpl-switch-border-color: var(--color-bordertranslucent); --fpl-switch-bg-inset: 0; --fpl-switch-knob-bg: var(--color-icon-onbrand); --fpl-switch-knob-w: .5rem; --fpl-switch-knob-h: .5rem; --fpl-switch-knob-x: .25rem; --transition-duration: var(--duration-sm); --transition-curve: cubic-bezier(.645, .045, .355, 1); --fpl-switch-knob-outline-color: var(--color-controlknoboffoutline); width: 1.5rem; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:focus-visible + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg-inset: 0; outline: 1px solid var(--color-border-selected-strong); outline-offset: 1px; border-color: #0000; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:hover + .manually-labeled-switch__visuals__g13eB { --fpl-switch-border-color: var(--color-bordertranslucentstrong); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:active + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-secondary-hover); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:checked + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-brand); --fpl-switch-knob-x: .75rem; --fpl-switch-knob-outline-color: var(--color-controliconoutline); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:indeterminate + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-brand); --fpl-switch-knob-x: .5rem; --fpl-switch-knob-w: .5rem; --fpl-switch-knob-h: .125rem; --fpl-switch-knob-outline-color: var(--color-controliconoutline); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:checked:active + .manually-labeled-switch__visuals__g13eB, .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:indeterminate:active + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-brand-hover); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:disabled + .manually-labeled-switch__visuals__g13eB, .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled) + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: transparent; --fpl-switch-border-color: var(--color-border-disabled); --fpl-switch-knob-bg: var(--color-icon-disabled); --fpl-switch-knob-outline-color: transparent; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:disabled:checked + .manually-labeled-switch__visuals__g13eB, .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled):checked + .manually-labeled-switch__visuals__g13eB { --fpl-switch-bg: var(--color-bg-disabled); --fpl-switch-knob-bg: var(--color-icon-ondisabled); --fpl-switch-border-color: transparent; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__checkbox__-pgR9:disabled:not(:indeterminate), .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd[data-disabled] .manually-labeled-switch__checkbox__-pgR9:not(:disabled, :indeterminate) { --fpl-switch-knob-bg: var(--color-icon-ondisabled); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__visuals__g13eB { border: none; overflow: hidden; } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__visuals__g13eB:before { border: .0625rem solid var(--fpl-switch-border-color); transition: background var(--transition-duration) var(--transition-curve); } .manually-labeled-switch__root__sp5fN.manually-labeled-switch__newStyles__2CWfd .manually-labeled-switch__visuals__g13eB:after { outline: 1px solid var(--fpl-switch-knob-outline-color); } .tabs__tabStrip__6GiU- { gap: var(--spacer-1); display: flex; } .tabs__tabStrip__6GiU-[aria-orientation="vertical"] { gap: var(--spacer-2); flex-direction: column; } .tabs__tabStrip__6GiU- .tabs__tabButton__UEhB4:only-child { background-color: #0000; } .tabs__tabButton__UEhB4 { height: 1.5rem; padding: 0 var(--spacer-2); color: var(--color-text-secondary); text-wrap: nowrap; border-radius: var(--radius-medium); background-color: var(--color-bg); -webkit-user-select: none; user-select: none; font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); border: none; outline: none; justify-content: center; align-items: center; display: grid; } .tabs__tabButton__UEhB4:hover { background-color: var(--color-bg-hover); } .tabs__tabButton__UEhB4 > .tabs__tabButtonStrong__Kgz2o { opacity: 0; font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .tabs__tabButton__UEhB4[aria-selected="true"] { color: var(--color-text); background-color: var(--color-bg-secondary); font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .tabs__tabButton__UEhB4[data-show-focus]:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } .tabs__tabButton__UEhB4 > span { word-break: keep-all; grid-area: 1 / 1; } [data-enhanced-contrast] .tabs__tabButton__UEhB4[aria-selected="true"]:not(:only-child) { box-shadow: inset 0 0 0 1px var(--color-border); } .tabs__tabPanel__-3APM:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } .tabs__tabPanelFillHeight__qwcK1 { height: 100%; } .tabs__tabPanelFillWidth__y4DE5 { width: 100%; } .textarea__textarea__-mOWC, .textarea__root__kusdD { --outline: transparent; --outline-color: var(--color-border); --outline-color-focus: var(--color-border-selected); height: var(--height); border-radius: var(--radius-medium); background: var(--color-bg-secondary); outline: 1px solid var(--outline); outline-offset: -1px; } :not(.textarea__root__kusdD) > .textarea__textarea__-mOWC:is(:focus, :focus-within, #textarea__specificity-hack__fWTQ-), :not(.textarea__root__kusdD) > .textarea__root__kusdD:is(:focus, :focus-within, #textarea__specificity-hack__fWTQ-) { --outline: var(--outline-color-focus); } .textarea__textarea__-mOWC { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); width: 100%; padding: var(--spacer-1) var(--spacer-2); box-sizing: border-box; color: var(--color-text); text-overflow: ellipsis; border-radius: var(--radius-medium); border: none; display: block; } .textarea__textarea__-mOWC:hover:where(:not([aria-disabled="true"], :read-only)) { --outline: var(--outline-color); } .textarea__textarea__-mOWC[aria-disabled="true"] { --outline: var(--outline-color); color: var(--color-text-disabled); background: var(--color-bg); } .textarea__textarea__-mOWC:read-only:where(:not([aria-disabled="true"])) { --outline: var(--outline-color); background: var(--color-bg); } .textarea__textarea__-mOWC.textarea__large__BJYMW { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); } .textarea__textarea__-mOWC::selection { background: var(--color-texthighlight); } .textarea__textarea__-mOWC::placeholder { color: var(--color-text-tertiary); } .textarea__root__kusdD .textarea__textarea__-mOWC { background: none; outline: none; flex: 1; min-width: 0; height: 100%; } .textarea__root__kusdD .textarea__textarea__-mOWC:not(:first-child) { padding-left: 0; } .textarea__root__kusdD .textarea__textarea__-mOWC:not(:last-child) { padding-right: 0; } .textarea__root__kusdD:hover:not([data-fpl-disabled]) { --outline: var(--outline-color); } .textarea__root__kusdD[data-fpl-disabled] { --outline: var(--outline-color); color: var(--color-text-disabled); background: var(--color-bg); } .textarea__root__kusdD[data-fpl-readonly] { --outline: var(--outline-color); background: var(--color-bg); } .textarea__textareaAlt__ZPNzF, .textarea__rootAlt__kS0Qk { --border: transparent; --border-color: var(--color-border); --outline: transparent; --outline-color-focus: var(--color-border-selected); height: var(--height); border-radius: var(--radius-medium); background: var(--color-bg-secondary); outline: 1px solid var(--outline); outline-offset: 1px; box-shadow: inset 0 0 0 1px var(--border); border: none; } :not(.textarea__rootAlt__kS0Qk) > .textarea__textareaAlt__ZPNzF:is(:focus, :focus-within, #textarea__specificity-hack__fWTQ-), :not(.textarea__rootAlt__kS0Qk) > .textarea__rootAlt__kS0Qk:is(:focus, :focus-within, #textarea__specificity-hack__fWTQ-) { --border: var(--border-color); --outline: var(--outline-color-focus); } .textarea__textareaAlt__ZPNzF { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); width: 100%; padding: var(--spacer-1) calc(var(--spacer-2) - 1px); box-sizing: border-box; color: var(--color-text); text-overflow: ellipsis; border-radius: var(--radius-medium); display: block; } .textarea__textareaAlt__ZPNzF:hover:where(:not([aria-disabled="true"], :read-only)) { --border: var(--border-color); cursor: var(--fpl-input-cursor, text); } .textarea__textareaAlt__ZPNzF[aria-disabled="true"] { --border: var(--border-color-disabled); color: var(--color-text-disabled); background: var(--color-bg); } .textarea__textareaAlt__ZPNzF:read-only:where(:not([aria-disabled="true"])) { --border: var(--border-color); background: var(--color-bg); } .textarea__textareaAlt__ZPNzF.textarea__large__BJYMW { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); } .textarea__textareaAlt__ZPNzF::selection { background: var(--color-texthighlight); } .textarea__textareaAlt__ZPNzF::placeholder { color: var(--color-text-tertiary); } .textarea__rootAlt__kS0Qk .textarea__textareaAlt__ZPNzF { min-width: 0; height: 100%; box-shadow: none; background: none; outline: none; flex: 1; } .textarea__rootAlt__kS0Qk .textarea__textareaAlt__ZPNzF:not(:first-child) { padding-left: 0; } .textarea__rootAlt__kS0Qk .textarea__textareaAlt__ZPNzF:not(:last-child) { padding-right: 0; } .textarea__rootAlt__kS0Qk:hover:not([data-fpl-disabled]) { --border: var(--border-color); } .textarea__rootAlt__kS0Qk[data-fpl-disabled] { --border: var(--border-color-disabled); color: var(--color-text-disabled); background: var(--color-bg); } .textarea__rootAlt__kS0Qk[data-fpl-readonly] { --border: var(--border-color); background: var(--color-bg); } .toast__root__nVszD { max-width: var(--toast-max-width, 600px); min-height: var(--spacer-6); padding: 0 var(--spacer-2); border-radius: var(--radius-large); background: var(--color-bg); box-shadow: var(--elevation-100); align-items: center; display: inline-flex; } .toast__root__nVszD > svg { flex-shrink: 0; } .toast__dangerRoot__CPXoI { --color-bg: var(--color-bg-danger); --color-bg-hover: var(--color-bg-danger-hover); --color-bg-pressed: var(--color-bg-danger-pressed); --color-border: var(--color-border-ondanger); --color-icon: var(--color-icon-ondanger); --color-text: var(--color-text-ondanger); } .toast__message__wf2fG, .toast__count__d7BNQ { padding: 0 var(--spacer-1); font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); letter-spacing: var(--text-body-medium-strong-letter-spacing); line-height: var(--text-body-medium-strong-line-height); } .toast__message__wf2fG:first-child, .toast__count__d7BNQ:first-child { padding-left: var(--spacer-2); } .toast__message__wf2fG:last-child, .toast__count__d7BNQ:last-child { padding-right: var(--spacer-2); } .toast__message__wf2fG { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); color: var(--color-text); } .toast__count__d7BNQ { color: var(--color-text-secondary); } .toast__buttonWrap__2TySl { padding: 0 var(--spacer-1); } .toast__dismissButton__SYFiF { align-self: stretch; align-items: center; display: inline-flex; } .toast__dismissButton__SYFiF:last-child:not(:first-child) { margin-left: var(--spacer-1); padding-right: var(--spacer-0); padding-left: var(--spacer-2); border-left: 1px solid var(--color-bordertranslucent); } .toast__message__wf2fG + .toast__dismissButton__SYFiF.toast__dismissButton__SYFiF { margin-left: calc(var(--spacer-3) - var(--spacer-1)); } .toast__message__wf2fG + .toast__buttonWrap__2TySl { padding-left: calc(var(--spacer-3) - var(--spacer-1)); } .toast__animate__oNP0u { animation: 1s linear infinite toast__loading-spinner-rotate__r9tqw; } @keyframes toast__loading-spinner-rotate__r9tqw { from { transform: rotate(0); } to { transform: rotate(1turn); } } .card-primitive__root__h5a39 { isolation: isolate; position: relative; } .card-primitive__root__h5a39 > * { pointer-events: none; } .card-primitive__main__7ho0a > * { pointer-events: auto; } .card-primitive__main__7ho0a > :first-child { position: static; } .card-primitive__main__7ho0a > :first-child:after { content: ""; z-index: -1; position: absolute; inset: 0; } .card-primitive__interactive__9-8aA { pointer-events: auto; position: relative; } .card-primitive__interactive__9-8aA > *, .card-primitive__root__h5a39[data-card-auto-interactive] :is(button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="menuitem"], [tabindex]:not([tabindex="-1"]), [title], [data-tooltip-type]):not([data-card-main-action], [data-card-noninteractive]) { pointer-events: auto; } .card-primitive__button__jv46G, .card-primitive__link__K4nzB { z-index: -1; pointer-events: auto; position: absolute; inset: 0; } .card-primitive__button__jv46G { background: none; } :where(.menu-primitive__container__5lt-5) { box-sizing: border-box; -webkit-user-select: none; user-select: none; overscroll-behavior: contain; scrollbar-width: none; outline: 0; margin: 0; padding: 0; overflow-y: auto; transform: translateZ(0); } [data-floating-ui-safe-polygon] :where(.menu-primitive__container__5lt-5) { pointer-events: none; } [data-is-positioned="false"]:where(.menu-primitive__container__5lt-5) { opacity: 0; } :where(.menu-primitive__list__i3VRn) { margin: 0; padding: 0; list-style-type: none; } :where(.menu-primitive__scrollArrow__Om355) { z-index: 1; cursor: default; -webkit-user-select: none; user-select: none; border-radius: 0; justify-content: center; align-items: center; width: 100%; display: none; position: sticky; } :where(.menu-primitive__scrollArrow__Om355):before { content: ""; z-index: -1; pointer-events: none; width: 100%; display: block; position: absolute; left: 0; } [data-fpl-select-visibility]:where(.menu-primitive__scrollArrow__Om355) { display: flex; } [data-fpl-select-direction="up"]:where(.menu-primitive__scrollArrow__Om355) { top: 0; } [data-fpl-select-direction="down"]:where(.menu-primitive__scrollArrow__Om355) { bottom: 0; } .select-primitive__overlay__GNxMT { z-index: var(--z-index-dropdown); } :where(.select-primitive__container__hpR3l) { box-sizing: border-box; -webkit-user-select: none; user-select: none; overscroll-behavior: contain; scrollbar-width: none; outline: 0; margin: 0; padding: 0; overflow-y: auto; } :where(.select-primitive__scrollArrow__-uP-4) { z-index: 1; visibility: hidden; cursor: default; -webkit-user-select: none; user-select: none; border-radius: 0; justify-content: center; align-items: center; width: 100%; display: flex; position: absolute; } :where(.select-primitive__scrollArrow__-uP-4):before { content: ""; z-index: -1; pointer-events: none; width: 100%; display: block; position: absolute; left: 0; } [data-fpl-select-visibility]:where(.select-primitive__scrollArrow__-uP-4) { visibility: visible; } [data-fpl-select-direction="up"]:where(.select-primitive__scrollArrow__-uP-4) { top: 0; } [data-fpl-select-direction="down"]:where(.select-primitive__scrollArrow__-uP-4) { bottom: 0; } .select-primitive__container__hpR3l[data-fpl-fallback="true"] { height: 100% !important; max-height: 100% !important; } .use-drag__base__YCEp1 { touch-action: none; } .use-drag__dragging__ZATZH { -webkit-user-select: none; user-select: none; pointer-events: auto; touch-action: none; } .use-drag__dragging__ZATZH :not([data-pointer-capture]) { pointer-events: none; } .use-drag__draggingBody__Nz68k { -webkit-user-select: none; user-select: none; pointer-events: none; touch-action: none; } [data-alt-scrub-target]:not([data-fpl-scrub-disabled]) { cursor: ew-resize; } [data-alt-scrub-target]:not([data-fpl-scrub-disabled]) * { pointer-events: none; } .use-scrub__scrubbing__3D3dS { cursor: ew-resize; } .use-scrub__cursor__MpGYj { z-index: var(--z-index-scrub-cursor); pointer-events: none; width: 100vw; height: 100dvh; position: fixed; top: 0; left: 0; } .use-scrub__cursor__MpGYj > div { width: 0; height: 0; display: grid; position: absolute; } .use-scrub__cursor__MpGYj > :first-child { top: 0; left: 0; } .use-scrub__cursor__MpGYj > :nth-child(2) { top: 0; right: 0; } .use-scrub__cursor__MpGYj > :nth-child(3) { bottom: 0; right: 0; } .use-scrub__cursor__MpGYj > :nth-child(4) { bottom: 0; left: 0; } .use-scrub__cursor__MpGYj > div > * { transform: translate(-50%, -50%); } .split-input__splitInputContainer__ebAeQ { --fpl-radius-right: 0; border-radius: var(--radius-medium, .3125rem); grid-template-columns: 1fr min-content; align-self: stretch; align-items: center; gap: 1px; display: grid; } .split-input__splitInputContainer__ebAeQ:has([aria-disabled="true"], [aria-readonly="true"]) { gap: 0; } .split-input__splitInputContainer__ebAeQ input { z-index: 1; isolation: isolate; } .split-input__splitInputContainer__ebAeQ { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); } .split-input__splitInputTrigger__8jaub { border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: var(--color-bg-secondary); align-self: stretch; } .split-input__splitInputTrigger__8jaub:focus-visible { outline: var(--color-border-selected) solid 1px; outline-offset: -1px; } .split-input__splitInputTrigger__8jaub[aria-disabled="true"] { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text-disabled); background: var(--color-bg); outline: var(--color-border-disabled) solid 1px; outline-offset: -1px; margin-left: -1px; } .split-input__splitInputTrigger__8jaub[aria-readonly="true"] { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text); background: var(--color-bg); outline: var(--color-border-disabled) solid 1px; outline-offset: -1px; margin-left: -1px; } .split-input__splitInputTrigger__8jaub:not([aria-disabled="true"], [aria-readonly="true"]):hover, :where([data-fpl-group]:hover) .split-input__splitInputTrigger__8jaub:not([aria-disabled="true"], [aria-readonly="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) .split-input__splitInputTrigger__8jaub:not([aria-disabled="true"], [aria-readonly="true"]):not(:focus-visible), .split-input__splitInputTrigger__8jaub:not([aria-disabled="true"], [aria-readonly="true"]):active { background: var(--color-bg-transparent-hover); } .form__row__EJ6Lu { flex-direction: column; display: flex; } .form__md__Yv6-d:not([data-fpl-inline="true"]) { gap: var(--spacer-1); margin-bottom: var(--spacer-2); } .form__lg__R2MmR:not([data-fpl-inline="true"]) { gap: var(--spacer-2); margin-bottom: var(--spacer-4); } .form__label__uv5Rj, .form__helper__U6b3z, .form__maxLength__UHqLw, .form__error__-0r7V { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); letter-spacing: var(--text-body-medium-letter-spacing); line-height: var(--text-body-medium-line-height); } .form__label__uv5Rj { height: 1rem; color: var(--color-text); align-items: center; display: flex; } .form__labelRow__saVtn { justify-content: space-between; display: flex; } .form__helper__U6b3z { gap: var(--spacer-1); color: var(--color-text-secondary); align-items: center; margin: 0; display: flex; } .form__helperSuccess__NzlT1 { --color-icon: var(--color-icon-success); color: var(--color-text-success); } .form__helperWarning__gu1SH { --color-icon: var(--color-icon-warning); color: var(--color-text-warning); } .form__maxLength__UHqLw { color: var(--color-text-secondary); } .form__maxLength__UHqLw[data-fpl-valid="invalid"] { color: var(--color-text-danger); } .form__maxLength__UHqLw[data-fpl-valid="warning"] { color: var(--color-text-warning); } .form__asterisk__HUduA { color: var(--color-text-danger); } .form__error__-0r7V { --color-icon: var(--color-icon-danger); gap: var(--spacer-1); color: var(--color-text-danger); align-items: center; margin: 0; display: flex; } @layer reset { ._1ejjwyb2 { isolation: isolate; position: relative; } ._1ejjwyb3 { width: 100%; height: 100%; display: block; } ._1ejjwyb4 { clip-path: polygon(0 0, var(--_1ejjwyb0) var(--_1ejjwyb1), 0 100%, 100% 100%, 100% 0); background-color: var(--color-bg); position: absolute; inset: 0; } ._5wtle30 { font-weight: unset; } .qw5m0k0:empty { width: .5rem; } ._19xx72g0 { box-sizing: border-box; text-align: inherit; user-select: none; letter-spacing: inherit; font: inherit; background: none; border: none; place-items: center; margin: 0; padding: 0; display: inline-flex; } ._19xx72g0 * { pointer-events: none; } .nwep030 { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); line-height: var(--text-body-medium-line-height); letter-spacing: var(--text-body-medium-letter-spacing); user-select: none; } [disabled] ~ .nwep030, [aria-disabled="true"] ~ .nwep030, [data-disabled] ~ .nwep030 { color: var(--color-text-disabled); } .nwep031 { color: var(--color-text); } .nwep032 { color: var(--color-text-secondary); } ._16btwim1 { position: relative; } ._37j6gj0 { cursor: default; resize: none; } ._1ymwlhzd { box-shadow: inset 0 -1px var(--color-border); padding-right: 2rem; } ._1ymwlhzb ._1ymwlhzd { padding-right: 0; } ._1kmy3qh0:focus-visible { outline: 1px solid var(--color-border-selected); border-radius: var(--radius-medium); } } ._11triv4b { --_11triv40: 18px; --_11triv41: 7px; --_11triv42: 4px; --_11triv43: 3.5px; --_11triv44: 17.5px; --_11triv45: 17.5px; --_11triv46: 5px; --_11triv47: radial-gradient(circle at var(--_11triv40) var(--_11triv41), transparent var(--_11triv43), black var(--_11triv43)); --_11triv48: radial-gradient(circle at var(--_11triv44) var(--_11triv45), transparent var(--_11triv46), black var(--_11triv46)); --_11triv49: radial-gradient(circle at var(--_11triv40) var(--_11triv41), transparent var(--_11triv43), black var(--_11triv43)), radial-gradient(circle at var(--_11triv44) var(--_11triv45), black var(--_11triv46), transparent var(--_11triv46)); width: fit-content; height: fit-content; position: relative; } ._11triv4b:has([data-fpl-icon-size="16"]) { --_11triv40: 13px; --_11triv41: 4px; } ._11triv4b:has([data-fpl-icon-size="24"]) { --_11triv40: 18px; --_11triv41: 7px; } ._11triv4b:has([data-fpl-icon-size="24L"]) { --_11triv40: 20px; --_11triv41: 6px; --_11triv42: 6px; --_11triv43: 4.5px; --_11triv44: 18.5px; --_11triv45: 18.5px; --_11triv46: 6px; } ._11triv4d { --_11triv4a: var(--_11triv47); } ._11triv4e { --_11triv4a: var(--_11triv48); } ._11triv4f { --_11triv4a: var(--_11triv49); } ._11triv4g { top: var(--_11triv41); left: var(--_11triv40); border-radius: var(--radius-full); background: var(--fpl-icon-badge-color, var(--color-icon-danger)); width: var(--_11triv42); height: var(--_11triv42); position: absolute; transform: translate(-50%, -50%); } ._11triv4h { top: var(--_11triv45); left: var(--_11triv44); display: none; position: absolute; transform: translate(-50%, -50%); } ._11triv4b:has([data-fpl-icon-size="24"]) ._11triv4i, ._11triv4b:has([data-fpl-icon-size="24L"]) ._11triv4j { display: block; } ._11triv4b > :first-child { mask-image: var(--_11triv4a); display: block; mask-composite: exclude; } @layer composable { ._14wijgr0 { clip-path: inset(50%); user-select: none; white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } ._14wijgr1 { display: contents; } ._14wijgr2 { position: absolute; } ._14wijgr3 { font-family: var(--text-display-font-family); font-size: var(--text-display-font-size); font-weight: var(--text-display-font-weight); line-height: var(--text-display-line-height); letter-spacing: var(--text-display-letter-spacing); } ._14wijgr4 { font-family: var(--text-heading-large-font-family); font-size: var(--text-heading-large-font-size); font-weight: var(--text-heading-large-font-weight); line-height: var(--text-heading-large-line-height); letter-spacing: var(--text-heading-large-letter-spacing); } ._14wijgr5 { font-family: var(--text-heading-medium-font-family); font-size: var(--text-heading-medium-font-size); font-weight: var(--text-heading-medium-font-weight); line-height: var(--text-heading-medium-line-height); letter-spacing: var(--text-heading-medium-letter-spacing); } ._14wijgr6 { font-family: var(--text-heading-small-font-family); font-size: var(--text-heading-small-font-size); font-weight: var(--text-heading-small-font-weight); line-height: var(--text-heading-small-line-height); letter-spacing: var(--text-heading-small-letter-spacing); } ._14wijgr7 { font-family: var(--text-body-large-font-family); font-size: var(--text-body-large-font-size); font-weight: var(--text-body-large-font-weight); line-height: var(--text-body-large-line-height); letter-spacing: var(--text-body-large-letter-spacing); } ._14wijgr8 { font-family: var(--text-body-large-strong-font-family); font-size: var(--text-body-large-strong-font-size); font-weight: var(--text-body-large-strong-font-weight); line-height: var(--text-body-large-strong-line-height); letter-spacing: var(--text-body-large-strong-letter-spacing); } ._14wijgr9 { font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); line-height: var(--text-body-medium-line-height); letter-spacing: var(--text-body-medium-letter-spacing); } ._14wijgra { font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); line-height: var(--text-body-medium-strong-line-height); letter-spacing: var(--text-body-medium-strong-letter-spacing); } ._14wijgrb { font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); font-weight: var(--text-body-small-font-weight); line-height: var(--text-body-small-line-height); letter-spacing: var(--text-body-small-letter-spacing); } ._14wijgrc { font-family: var(--text-body-small-strong-font-family); font-size: var(--text-body-small-strong-font-size); font-weight: var(--text-body-small-strong-font-weight); line-height: var(--text-body-small-strong-line-height); letter-spacing: var(--text-body-small-strong-letter-spacing); } ._11lesip0 { pointer-events: auto; } .ncq90n1 { --fpl-slider-primitive-hitbox: 44px; border: 0 solid #0000; border-width: 0 calc(var(--fpl-slider-thumb-width) / 2); position: relative; } .ncq90n2 { --ncq90n0: calc(-1 * var(--fpl-slider-primitive-hitbox) / 2); top: 50%; right: var(--ncq90n0); left: var(--ncq90n0); height: 100%; min-height: var(--fpl-slider-primitive-hitbox); outline: none; position: absolute; transform: translateY(-50%); } .ncq90n1 :not(.ncq90n2) { pointer-events: none; } .qsytre0 { display: none; } .vip1ck0 { user-select: none; position: relative; } .vip1ck1 { cursor: ns-resize; width: 100%; height: 8px; position: absolute; top: -6px; left: 0; } .vip1ck2 { cursor: ns-resize; width: 100%; height: 8px; position: absolute; bottom: -6px; left: 0; } .vip1ck3 { cursor: ew-resize; width: 8px; height: 100%; position: absolute; top: 0; left: -6px; } .vip1ck4 { cursor: ew-resize; width: 8px; height: 100%; position: absolute; top: 0; right: -6px; } .vip1ck5 { cursor: nwse-resize; width: 16px; height: 16px; position: absolute; top: -6px; left: -6px; } .vip1ck6 { cursor: nesw-resize; width: 16px; height: 16px; position: absolute; top: -6px; right: -6px; } .vip1ck7 { cursor: nwse-resize; width: 16px; height: 16px; position: absolute; bottom: -6px; right: -6px; } .vip1ck8 { cursor: nesw-resize; width: 16px; height: 16px; position: absolute; bottom: -6px; left: -6px; } } .hhiezw2 { padding-left: 0; } .hhiezw3 { z-index: var(--z-index-dropdown); position: fixed; inset: 0; } .hhiezw4 { box-sizing: content-box; margin: 0 0 0 var(--spacer-2); border: 1px solid var(--color-border); border-radius: var(--radius-medium); justify-content: center; align-items: center; width: 16px; height: 16px; display: flex; position: relative; } .hhiezw7[aria-checked="true"] .hhiezw4 { --fpl-icon-color: var(--color-icon-onbrand); border-color: var(--color-border-selected-strong); background-color: var(--color-bg-brand); } .hhiezw7[aria-disabled="true"][aria-checked="true"] .hhiezw4 { --fpl-icon-color: var(--color-icon-disabled); } .hhiezw5 { margin: var(--hhiezw1) 0 0; border-top: calc(1rem / 16) solid var(--color-border-menu); border-bottom: calc(1rem / 16) solid var(--color-border-menu); flex: auto; padding: 0; list-style: none; } .hhiezw5 + .hhiezw5, .hhiezw5:first-child { border-top: none; margin-top: 0; } .hhiezw5:last-child { border-bottom: none; margin-bottom: 0; } .hhiezw6 { display: contents; } .hhiezw7 { box-sizing: border-box; padding: 0 var(--hhiezw1); flex: 1 0 auto; min-width: 120px; max-width: 400px; text-decoration: none; display: flex; } .hhiezw7:focus-visible { outline: none; } .hhiezw5:not(:first-child) > .hhiezw6 .hhiezw7:first-child, .hhiezw5 + .hhiezw7 { margin-top: var(--hhiezw1); } .hhiezw5:not(:last-child) > .hhiezw6 > .hhiezw7:last-child { margin-bottom: var(--hhiezw1); } .hhiezw8 { color: var(--color-text-secondary); } .hhiezw7[aria-disabled="true"] .hhiezw8, .hhiezw7[aria-disabled="true"]:hover .hhiezw8 { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text-disabled); } .hhiezw9 { width: var(--spacer-2); flex: none; } .hhiezw2 .hhiezw7:has(.hhiezwa) .hhiezw9 { width: var(--spacer-1); } .hhiezw2:has(.hhiezwc) .hhiezw7 .hhiezw9, .hhiezw2:has(.hhiezwc) .hhiezwq .hhiezw9 { width: calc(16px + 2 * var(--spacer-1)); } .hhiezwa { margin-right: var(--spacer-1); font-variant-numeric: tabular-nums; justify-content: flex-start; align-items: center; display: flex; } .hhiezwa:empty { display: none; } .hhiezwb { box-sizing: border-box; padding: var(--spacer-1) 0; text-overflow: ellipsis; white-space: nowrap; flex: auto; height: 100%; min-height: 24px; display: inline-block; overflow: hidden; } .hhiezwc { box-sizing: content-box; opacity: 0; padding-left: var(--spacer-1); justify-content: flex-start; align-items: center; min-width: 16px; height: 100%; display: flex; } .hhiezw7[aria-checked="true"] .hhiezwc, .hhiezw7[data-fpl-checked="true"] .hhiezwc { opacity: 1; } .hhiezwd { padding-left: var(--spacer-2); font-variant-numeric: tabular-nums; justify-content: flex-end; align-items: center; display: flex; } .hhiezwe { box-sizing: border-box; border-radius: var(--radius-medium); padding: 0 var(--hhiezw1) 0 0; width: 100%; color: var(--color-text-menu); align-items: center; gap: 0; text-decoration: none; display: flex; } .hhiezw7[aria-expanded="true"] > .hhiezwe { --fpl-icon-color: var(--color-text-menu-hover); background-color: var(--color-bg-menu-hover); color: var(--color-text-menu-hover); } .hhiezw7:focus-within > .hhiezwe { --fpl-icon-color: var(--color-text-menu-onselected); background-color: var(--color-bg-menu-selected); color: var(--color-text-menu-onselected); } .hhiezw7[aria-disabled="true"] > .hhiezwe { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text-disabled); } .hhiezwf { --hhiezw0: .1s; --hhiezw1: var(--spacer-2); contain: content; z-index: var(--z-index-dropdown); isolation: isolate; border-radius: var(--radius-large); box-shadow: var(--elevation-400); cursor: default; user-select: none; margin: 0; padding: 0; list-style: none; display: flex; position: fixed; } .hhiezwf:is(:not([data-fpl-positioned]), [data-fpl-hidden]) { opacity: 0; pointer-events: none; } .hhiezwf:focus-visible { outline: none; } .hhiezwf[data-fpl-popup-overlap] { box-shadow: inset 0 .5px #ffffff14, 0 10px 16px #00000059, inset 0 0 .5px #ffffff59, 0 2px 5px #00000059; } .hhiezwg { --fpl-icon-color: var(--color-icon-menu); border-radius: var(--radius-large); background: var(--color-bg-menu); overflow: hidden; } .hhiezwh { background-color: var(--color-bg-menu); justify-content: center; align-items: center; height: 24px; display: flex; position: absolute; left: 0; right: 0; } .hhiezwh[data-fpl-arrow="up"] { top: 0; } .hhiezwh[data-fpl-arrow="down"] { bottom: 0; } .hhiezwf[data-fpl-scroll-y="none"] .hhiezwh, .hhiezwf[data-fpl-scroll-y="start"] .hhiezwh[data-fpl-arrow="up"], .hhiezwf[data-fpl-scroll-y="end"] .hhiezwh[data-fpl-arrow="down"] { display: none; } .hhiezwi { margin-top: var(--spacer-2); margin-right: 0; margin-bottom: var(--spacer-2); border-bottom-style: solid; border-bottom-width: .0625rem; border-bottom-color: var(--color-border-menu); height: 0; margin-left: 0; padding: 0; display: block; } .hhiezwj { box-sizing: border-box; color: var(--color-text-menu); flex-direction: column; margin: 0; padding: 0; list-style: none; display: flex; } .hhiezwk { --fpl-icon-color: var(--color-text-secondary); background: var(--color-bg-menu); scrollbar-width: none; width: 100%; height: 100%; color: var(--color-text); } .hhiezwk::-webkit-scrollbar { display: none; } .hhiezwl, .hhiezwm { overflow-y: auto; } .hhiezwn { box-shadow: none; font: inherit; background: none; border: none; padding: 0; display: inline; } .hhiezw7[aria-disabled="true"] .hhiezwn { color: var(--color-text-disabled); } .hhiezwo { margin-right: calc(-1 * var(--spacer-1)); margin-left: var(--spacer-1); display: flex; } .hhiezwq { box-sizing: content-box; font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); line-height: var(--text-body-medium-line-height); letter-spacing: var(--text-body-medium-letter-spacing); padding: 0 var(--hhiezw1); user-select: none; height: 24px; color: var(--color-text-secondary); align-items: center; margin: 0; display: flex; } .hhiezwj > .hhiezwq:first-child, .hhiezw5 > .hhiezw6 > .hhiezwq:first-child { margin-top: var(--hhiezw1); } .hhiezwj > .hhiezw7:first-child, .hhiezw5:first-child > .hhiezw6 > .hhiezw7:first-child { padding-top: var(--hhiezw1); } .hhiezwj > .hhiezw7:last-child, .hhiezw5:last-child > .hhiezw6 > .hhiezw7:last-child { padding-bottom: var(--hhiezw1); } @media (hover: hover) { .hhiezw7:not([aria-disabled="true"]):hover .hhiezw8 { color: var(--color-text-onbrand-secondary); } .hhiezwh:hover { background: var(--color-bg-hover); color: var(--color-text-onbrand); } } ._1rk7okh0 { overflow: visible; } ._1rk7okh1 { filter: drop-shadow(0 1.5px 1px #0009); } ._1rk7okh2 { cursor: ew-resize; } [data-fpl-scrub-disabled] ._1rk7okh2 { cursor: default; } ._1rk7okh2 > * { pointer-events: none; } ._1qq6l4j0 { --fpl-input-cursor: default; } .y0armh2 { flex-flow: var(--y0armh0, row) var(--y0armh1, nowrap); justify-content: start; display: flex; } .y0armh3 { display: none; } .y0armh4 { --y0armh0: row; align-items: center; } .y0armh4 .y0armh3 + * { margin-left: auto; } .y0armh5 { --y0armh0: column; align-items: stretch; } .y0armh5 .y0armh3 + * { margin-top: auto; } .y0armh6 { flex: auto; } .iu4cxs1 { --iu4cxs0: 2px; --fpl-icon-color: var(--color-icon-secondary); background: none; flex: 0 0 .75rem; min-height: 0; } .iu4cxs1:disabled, .iu4cxs1[aria-disabled="true"] { --fpl-icon-color: var(--color-icon-tertiary); } .iu4cxs1:not(:disabled):not([aria-disabled="true"]):hover { --fpl-icon-color: inherit; } .iu4cxs1:not(:disabled):not([aria-disabled="true"]):active { --iu4cxs0: 1px; } .iu4cxs2 { border-top-right-radius: var(--radius-medium); } .iu4cxs3 { border-bottom-right-radius: var(--radius-medium); } .iu4cxs2 > svg { transform: translateY(var(--iu4cxs0)); } .iu4cxs3 > svg { transform: translateY(calc(var(--iu4cxs0) * -1)); } .qw5m0k0 { place-content: center; height: 100%; display: grid; } .qw5m0k1 { --fpl-icon-color: var(--color-icon-secondary); color: var(--color-icon-secondary); } ._19j9mfx0 { grid-template-columns: max-content; display: grid; } ._19j9mfx0 > ._19j9mfx1 { padding-left: var(--spacer-2); grid-area: 2 / 2; } ._19j9mfx0 > label { padding-left: var(--spacer-2); grid-column: 2; margin-top: .25rem; } ._1rthyo83 { min-width: 0; min-height: 0; position: relative; } ._1rthyo84 { box-sizing: border-box; touch-action: initial; overscroll-behavior: none; width: 100%; height: 100%; position: relative; overflow: hidden; } ._1rthyo84:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: -1px; } ._1rthyo85 { overflow-x: auto; } ._1rthyo86 { overflow-y: auto; } ._1rthyo87 { overflow: auto; } ._1rthyo88 { width: 100%; height: 100%; } ._1rthyo89 { box-sizing: border-box; } ._1rthyo8a { z-index: 1; pointer-events: none; position: absolute; inset: 0; } ._1rthyo8c { --_1rthyo82: transparent; pointer-events: auto; overscroll-behavior: none; background: none; border-top: 1px solid #0000; border-left: 1px solid #0000; align-items: center; display: none; position: absolute; inset: 0; } ._1rthyo8c:hover { --_1rthyo82: var(--color-border); background: var(--color-scrollbartrackhover, #f5f5f580); } :is(._1rthyo8b, #specificity-hack) ._1rthyo8c { background: var(--color-scrollbartrackdrag, #ffffff80); } ._1rthyo8c[data-fpl-orientation="horizontal"] { top: initial; border-top: 1px solid var(--_1rthyo82); flex-direction: row; height: 10px; } ._1rthyo8c[data-fpl-orientation="vertical"] { left: initial; border-left: 1px solid var(--_1rthyo82); flex-direction: column; width: 10px; } ._1rthyo8c:after { content: ""; opacity: 0; border-radius: var(--radius-full); background: var(--color-scrollbar); width: 6px; height: 6px; position: absolute; } ._1rthyo8c[data-fpl-orientation="horizontal"]:after { left: var(--_1rthyo81); width: calc(var(--_1rthyo80) - 1px); } ._1rthyo8c[data-fpl-orientation="vertical"]:after { top: var(--_1rthyo81); height: calc(var(--_1rthyo80) - 1px); } ._1rthyo83:is(:hover, :has(._1rthyo84:focus-visible)) ._1rthyo8c:after { opacity: 1; } @media (pointer: fine) { ._1rthyo84 { scrollbar-width: none; } ._1rthyo84::-webkit-scrollbar { display: none; } ._1rthyo8c { display: flex; } } ._1f9yud11 { --color-bg: var(--color-bg-tooltip); border-radius: var(--radius-medium); box-shadow: var(--elevation-300); background: var(--color-bg); display: flex; } ._1f9yud12 { z-index: -1; } [data-preferred-theme="dark"] ._1f9yud12 { filter: drop-shadow(0 3px 5px #00000059) drop-shadow(0 10px 24px #00000073); stroke: #ffffff26; } [data-preferred-theme="light"] ._1f9yud12 { filter: drop-shadow(0 2px 5px #00000026) drop-shadow(0 10px 24px #0000002e) drop-shadow(0 0 .5px #00000014); } ._1f9yud14 { outline-color: var(--color-border-tooltip-selected); padding: var(--spacer-1) var(--spacer-2); overflow-wrap: break-word; align-items: center; display: flex; } ._1f9yud14._1f9yud13 { padding-left: var(--spacer-1); } ._1f9yud14:has(input) { padding: var(--spacer-1); width: 150px; } ._1f9yud15 { --color-icon: var(--color-icon-secondary); align-items: center; display: inline-flex; } ._1f9yud16 { --color-text: var(--color-text-tooltip); overflow-wrap: break-word; min-width: 0; color: var(--color-text); flex: 1; } ._1f9yud17 { --icon-button-icon: var(--color-icon-secondary); --icon-button-size: calc(24rem / 16); --icon-button-outline-offset: calc(-1rem / 16); --icon-button-outline-width: calc(1rem / 16); display: grid; } ._1f9yud17[aria-disabled="true"] { --icon-button-icon: var(--color-icon-disabled); --icon-button-icon-secondary: var(--color-icon-disabled); --icon-button-icon-tertiary: var(--color-icon-disabled); } ._1f9yud17:hover:not([aria-disabled="true"]), :where([data-fpl-group]:hover) ._1f9yud17:not([aria-disabled="true"]), [data-fpl-group]:has([data-show-focus]:focus-visible) ._1f9yud17:not([aria-disabled="true"]):not(:focus-visible) { --icon-button-icon: var(--color-icon); --_1f9yud10: var(--color-bg-transparent-hover); } ._1f9yud17:not([aria-disabled="true"]):active { --icon-button-icon: var(--color-icon); --_1f9yud10: var(--color-bg-transparent-pressed); } ._1f9yud17[data-show-focus]:focus-visible { outline: none; } ._1f9yud18 { --icon-button-radius: var(--radius-medium); --icon-button-icon-size: calc(16rem / 16); border-radius: var(--fpl-radius-left, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-right, var(--icon-button-radius)) var(--fpl-radius-left, var(--icon-button-radius)); background: var(--_1f9yud10); pointer-events: none; width: var(--icon-button-icon-size); min-width: var(--icon-button-icon-size); height: var(--icon-button-icon-size); fill: var(--color-icon); justify-content: center; align-items: center; display: flex; } ._1f9yud17[data-show-focus]:focus-visible ._1f9yud18 { --icon-button-outline-color: var(--color-border-selected); outline: var(--icon-button-outline-color) solid var(--icon-button-outline-width); outline-offset: var(--icon-button-outline-offset); } ._1f9yud19 { align-items: center; gap: var(--spacer-1); padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) 0; flex-direction: row; display: inline-flex; } ._1f9yud1a { padding-right: var(--spacer-1); overflow-wrap: break-word; min-width: 0; color: var(--color-text-secondary); flex: 1; } .xkjjsva { --xkjjsv6: calc(24rem / 16); } .xkjjsvb { --xkjjsv6: calc(32rem / 16); } .xkjjsvc { --xkjjsv2: transparent; --xkjjsv3: var(--xkjjsv5, var(--color-border)); --xkjjsv4: var(--xkjjsv5, var(--color-border-selected)); --xkjjsv7: var(--radius-medium); --xkjjsv8: var(--fpl-radius-left, var(--xkjjsv7)); --xkjjsv9: var(--fpl-radius-right, var(--xkjjsv7)); outline: 1px solid var(--xkjjsv2); outline-offset: -1px; border-radius: var(--xkjjsv8) var(--xkjjsv9) var(--xkjjsv9) var(--xkjjsv8); background: var(--color-bg-secondary); height: var(--xkjjsv6); } .xkjjsvd { grid-column: span var(--xkjjsv1, 1); flex: auto; align-items: center; width: 100%; min-width: 0; display: flex; } .xkjjsvd:hover { --xkjjsv2: var(--xkjjsv3); } .xkjjsvd[data-fpl-disabled] { --xkjjsv2: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-disabled); background: var(--color-bg); color: var(--color-text-disabled); } .xkjjsvd:has(input[aria-invalid="true"]) { --xkjjsv2: var(--color-border-danger-strong); } :not(.xkjjsvd) > .xkjjsvd:is(:focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus]), #specificity-hack) { --xkjjsv2: var(--xkjjsv4); } .xkjjsvd > * { flex-shrink: 0; } .xkjjsve { --fpl-padding-left: var(--spacer-2); --fpl-padding-right: var(--spacer-2); box-sizing: border-box; cursor: var(--fpl-input-cursor, text); padding: 0 var(--fpl-padding-right) 0 var(--fpl-padding-left); text-overflow: ellipsis; color: var(--color-text); border: none; display: block; } .xkjjsve:hover { --xkjjsv2: var(--xkjjsv3); } .xkjjsve:focus { cursor: text; } .xkjjsve:read-only { --xkjjsv2: var(--xkjjsv3); background: var(--color-bg); } .xkjjsve[aria-disabled="true"] { --xkjjsv2: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-disabled); background: var(--color-bg); color: var(--color-text-disabled); } .xkjjsve[aria-invalid="true"], .xkjjsve[aria-invalid="true"]:hover { --xkjjsv2: var(--color-border-danger-strong); } .xkjjsve::selection { background: var(--color-texthighlight); } .xkjjsve::placeholder { color: var(--color-text-tertiary); } .xkjjsvd > .xkjjsve { background: none; outline: none; flex: 1; min-width: 0; height: 100%; } .xkjjsvd > .xkjjsve:not(:first-child) { padding-left: 0; } .xkjjsvd > .xkjjsve:not(:last-child) { padding-right: 0; } :not(.xkjjsvd) > .xkjjsve { flex: auto; width: 100%; min-width: 0; } :not(.xkjjsvd) > .xkjjsve:is(:focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus])) { --xkjjsv2: var(--xkjjsv4); } .xkjjsvf { --xkjjsv2: transparent; --xkjjsv5: transparent; --fpl-radius-left: 0; --fpl-radius-right: 0; grid-template-rows: var(--xkjjsv6); grid-template-columns: var(--xkjjsv0, repeat(auto-fit, minmax(0, 1fr))); outline: 1px solid var(--xkjjsv2); outline-offset: -1px; border-radius: var(--radius-medium); gap: 1px; display: grid; } .xkjjsvf:hover { --xkjjsv2: var(--color-border); } .xkjjsvf:is(:focus-within, :has(input[data-faux-focus])) { --xkjjsv2: var(--color-border-selected); } .xkjjsvf > :first-child { --fpl-radius-left: initial; } .xkjjsvf > :last-child { --fpl-radius-right: initial; } .xkjjsvi { --xkjjsv2: transparent; --xkjjsv3: var(--xkjjsv5, var(--color-border)); --xkjjsvg: transparent; --xkjjsvh: var(--xkjjsv5, var(--color-border)); --xkjjsv4: var(--xkjjsv5, var(--color-border-selected)); --xkjjsv7: var(--radius-medium); --xkjjsv8: var(--fpl-radius-left, var(--xkjjsv7)); --xkjjsv9: var(--fpl-radius-right, var(--xkjjsv7)); outline: 1px solid var(--xkjjsv2); outline-offset: 1px; border-radius: var(--xkjjsv8) var(--xkjjsv9) var(--xkjjsv9) var(--xkjjsv8); box-shadow: inset 0 0 0 1px var(--xkjjsvg); background: var(--color-bg-secondary); height: var(--xkjjsv6); border: none; } .xkjjsvj { box-sizing: border-box; grid-column: span var(--xkjjsv1, 1); flex: auto; align-items: center; width: 100%; min-width: 0; display: flex; } .xkjjsvj:hover { --xkjjsvg: var(--xkjjsvh); } .xkjjsvj[data-fpl-disabled] { --xkjjsv2: transparent; --xkjjsvg: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-disabled); background: var(--color-bg); color: var(--color-text-disabled); } .xkjjsvj:has(input[aria-invalid="true"]) { --xkjjsvg: var(--color-border-danger-strong); } :not(.xkjjsvj) > .xkjjsvj:is(:focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus]), #specificity-hack) { --xkjjsv2: var(--xkjjsv4); --xkjjsvg: var(--xkjjsvh); } .xkjjsvk { --fpl-padding-left: var(--spacer-2); --fpl-padding-right: var(--spacer-2); box-sizing: border-box; cursor: var(--fpl-input-cursor, text); padding: 0 var(--fpl-padding-right) 0 var(--fpl-padding-left); text-overflow: ellipsis; color: var(--color-text); display: block; } .xkjjsvk:hover { --xkjjsvg: var(--xkjjsvh); } .xkjjsvk:focus { cursor: text; } .xkjjsvk:read-only { --xkjjsvg: var(--xkjjsvh); background: var(--color-bg); } .xkjjsvk[aria-disabled="true"] { --xkjjsvg: var(--color-border-disabled); --fpl-icon-color: var(--color-icon-disabled); background: var(--color-bg); color: var(--color-text-disabled); } .xkjjsvk[aria-invalid="true"], .xkjjsvk[aria-invalid="true"]:hover { --xkjjsvg: var(--color-border-danger-strong); } .xkjjsvk::selection { background: var(--color-texthighlight); } .xkjjsvk::placeholder { color: var(--color-text-tertiary); } .xkjjsvj > .xkjjsvk { --xkjjsv2: transparent; --xkjjsvg: transparent; background: none; outline: none; flex: 1; min-width: 0; height: 100%; } .xkjjsvj > .xkjjsvk:not(:first-child) { padding-left: 0; } .xkjjsvj > .xkjjsvk:not(:last-child) { padding-right: 0; } :not(.xkjjsvj) > .xkjjsvk { flex: auto; width: 100%; min-width: 0; } :not(.xkjjsvj) > .xkjjsvk:is(:focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus])) { --xkjjsv2: var(--xkjjsv4); } .xkjjsvl { --xkjjsv2: transparent; --xkjjsvg: transparent; --xkjjsv5: transparent; --fpl-radius-left: 0; --fpl-radius-right: 0; grid-template-rows: var(--xkjjsv6); grid-template-columns: var(--xkjjsv0, repeat(auto-fit, minmax(0, 1fr))); outline: 1px solid var(--xkjjsv2); outline-offset: 1px; border: 1px solid var(--xkjjsvg); border-radius: var(--radius-medium); gap: 1px; display: grid; } .xkjjsvl:hover { --xkjjsvg: var(--color-border); } .xkjjsvl:is(:focus-within, :has(input[data-faux-focus])) { --xkjjsv2: var(--color-border-selected); --xkjjsvg: var(--color-border); } .ublptt1 { z-index: -1; right: var(--spacer-2); left: var(--spacer-2); min-width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)); pointer-events: none; position: absolute; top: 0; bottom: 0; } .ublptt2 { background: var(--color-bordertranslucent); width: 1px; height: 100%; margin-left: auto; position: sticky; right: 22px; } .ublptt3 { height: calc(50% - 14px); } .ublptt4 { height: 50%; top: 50%; } .ublptt5 { width: fit-content; margin-top: 2px; margin-left: auto; position: sticky; right: 18px; } .ublptt6 { --ublptt0: var(--color-bg); box-sizing: border-box; padding-right: var(--spacer-2); padding-left: var(--spacer-2); width: 100%; } .ublptt6:focus, .ublptt6:focus-visible { outline: none; } .ublptt6:hover, .ublptt6[data-fpl-row-highlighted="true"] { --ublptt0: var(--color-bg-hover); } .ublptt6[data-fpl-selected="true"] { --ublptt0: var(--color-bg-selected-secondary); --fpl-icon-color: var(--color-icon-onselected); } .ublptt6[data-fpl-selected-root="true"], .ublptt6:hover[data-fpl-selected="true"] { --ublptt0: var(--color-bg-selected); } .ublptt7 { box-sizing: border-box; width: 100%; min-height: var(--fpl-tree-grid-row-height, 32px); user-select: none; align-items: center; display: flex; position: relative; } .ublptt8 { white-space: nowrap; align-items: center; width: 100%; min-width: 50px; display: flex; position: sticky; inset-inline-end: 0; } .ublptt9 { flex-shrink: 0; } .ublptta { z-index: -1; right: var(--spacer-2); left: var(--spacer-2); min-width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)); position: absolute; } .ublptt6[data-fpl-selected="true"] .ublptta { top: var(--spacer-1); bottom: var(--spacer-1); border-radius: var(--radius-medium); background: var(--color-bg-selected-secondary); } .ublptt6[data-fpl-selected="true"]:has( + .ublptt6[data-fpl-selected="true"]) .ublptta { border-bottom-right-radius: 0; border-bottom-left-radius: 0; bottom: 0; } .ublptt6[data-fpl-selected="true"]:has( + .ublptt6[data-fpl-selected="true"]) + .ublptt6 .ublptta { border-top-left-radius: 0; border-top-right-radius: 0; top: 0; } .ublpttb { z-index: -1; right: var(--spacer-2); left: var(--spacer-2); min-width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)); top: var(--spacer-1); bottom: var(--spacer-1); border-radius: var(--radius-medium); background: var(--ublptt0); position: absolute; } .ublptt6[data-fpl-selected-root="true"]:has( + .ublptt6[data-fpl-selected="true"]) .ublpttb { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ublptt6[data-fpl-selected-root="true"]:has( + .ublptt6[data-fpl-selected-root="true"]) .ublpttb { bottom: 0; } .ublptt6[data-fpl-selected-root="true"]:has( + .ublptt6[data-fpl-selected-root="true"]) + .ublptt6 .ublpttb { border-top-left-radius: 0; border-top-right-radius: 0; top: 0; } .ublpttc { z-index: 1; right: var(--spacer-2); left: var(--spacer-2); min-width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)); top: var(--spacer-1); bottom: var(--spacer-1); border-radius: var(--radius-medium); pointer-events: none; border: 1px solid #0000; position: absolute; } .ublptt6:focus-visible .ublpttc { border-color: var(--color-border-selected); } .ublpttd { align-items: center; min-height: 24px; display: flex; } .ublpttd:focus { outline: none; } .ublpttd:focus-visible { outline: 1px solid; outline-color: var(--color-border-selected); } .ublptte { --fpl-icon-color: var(--color-icon-tertiary); padding: 0 var(--spacer-1); align-items: center; height: 24px; display: flex; } .ublpttf { min-width: 24px; height: 24px; } .ublpttg { margin-left: calc(-1 * var(--spacer-1)); } .ublptth { background: var(--ublptt0); align-items: center; width: fit-content; display: flex; } .ublptti { gap: var(--spacer-1); padding-left: var(--spacer-1); display: flex; } .ublpttj { height: 24px; margin-left: -1px; } .ublpttk { visibility: hidden; pointer-events: none; padding-left: var(--spacer-3); display: grid; } .ublptt6:has(.ublpttj) .ublpttk { display: none; } .ublpttl { top: var(--spacer-1); right: var(--spacer-2); bottom: var(--spacer-1); left: var(--internal_only_do_not_use_fpl-indent-width); pointer-events: none; min-width: calc(calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)) - var(--internal_only_do_not_use_fpl-indent-width)); position: absolute; overflow-x: clip; } .ublptt6:has(.ublpttj) .ublpttl { display: none; } .ublpttm { width: fit-content; margin-left: auto; display: grid; position: sticky; inset-inline-end: var(--spacer-2); } .ublpttn { top: var(--spacer-1); right: var(--spacer-2); bottom: var(--spacer-1); left: var(--internal_only_do_not_use_fpl-indent-width); pointer-events: none; min-width: calc(calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)) - var(--internal_only_do_not_use_fpl-indent-width)); position: absolute; overflow-x: clip; } .ublpttn:after { content: ""; border-top-right-radius: var(--radius-medium); border-bottom-right-radius: var(--radius-medium); background: var(--ublptt0); width: var(--spacer-2); height: 100%; margin-left: auto; display: block; position: sticky; inset-inline-end: 0; } .ublptt6:has(.ublpttj) .ublpttn { display: none; } .ublptto { background: var(--ublptt0); background: linear-gradient(90deg, rgb(from var(--ublptt0) r g b / 0) 0, rgb(from var(--ublptt0) r g b / 1) 10px); border-top-right-radius: var(--radius-medium); border-bottom-right-radius: var(--radius-medium); pointer-events: all; grid-area: 1 / 1; padding-left: 10px; display: none; } .ublptt6:hover .ublptto, .ublpttk .ublptto { display: flex; } .ublpttp { pointer-events: all; background: var(--ublptt0); background: linear-gradient(90deg, rgb(from var(--ublptt0) r g b / 0) 0, rgb(from var(--ublptt0) r g b / 1) 10px); border-top-right-radius: var(--radius-medium); border-bottom-right-radius: var(--radius-medium); grid-area: 1 / 1; padding-left: 10px; display: flex; } .ublptt6:hover .ublpttp { display: none; } .ublptt6:hover .ublpttk .ublpttp { display: flex; } .ublpttp:not(:has(.ublpttd)) { display: none; } .ublpttq { pointer-events: none; } .ublpttr { z-index: 1; right: 0; left: calc(var(--do-not-use-fpl-treegrid-drop-indicator-indent) + 10px); background-color: var(--color-border-selected); pointer-events: none; width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--do-not-use-fpl-treegrid-drop-indicator-indent) - 10px); height: 2px; display: block; position: absolute; } .ublpttr:before { content: ""; box-sizing: border-box; border-style: solid; border-width: 2px; border-color: var(--color-border-selected); border-radius: 50%; width: 8px; height: 8px; display: block; position: absolute; top: -3px; left: -8px; } .ublptts { top: -1px; } .ublpttt { bottom: -1px; } .ublpttu { z-index: 1; right: var(--spacer-2); left: var(--spacer-2); min-width: calc(var(--internal_only_do_not_use_fpl-container-max-width) - var(--spacer-2)); top: var(--spacer-1); bottom: var(--spacer-1); border: 1px solid var(--color-border-selected); border-radius: var(--radius-medium); pointer-events: none; position: absolute; } .ublpttv [data-active-sticky] { box-shadow: 0 1px 0 0 var(--color-border); background: var(--color-bg); } .ublpttv [data-active-sticky][data-pushing-away] { box-shadow: none; } ._1693qtz0 { color: var(--color-text-secondary); padding: 0; } [disabled] ~ ._1693qtz0, [data-disabled] ~ ._1693qtz0 { color: var(--color-text-disabled); } @keyframes _24juip1 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } ._24juip2 { width: var(--_24juip0); height: var(--_24juip0); animation: 1s linear infinite _24juip1; } [data-prefers-reduced-motion] ._24juip2 { animation: 4s steps(4, end) infinite _24juip1; } ._24juip3 { --_24juip0: 1rem; } ._24juip4, ._24juip5 { --_24juip0: 1.5rem; } ._24juip6 { --color-icon: var(--color-icon-secondary); } @media (prefers-reduced-motion: reduce) { ._24juip2 { animation: 4s steps(4, end) infinite _24juip1; } } ._1kdzox90 { --fpl-modal-width: fit-content; --fpl-modal-sm: calc(240rem / 16); --fpl-modal-md: calc(320rem / 16); --fpl-modal-lg: calc(480rem / 16); --fpl-dialog-elevation: var(--elevation-500); z-index: 10; color: var(--color-text); flex-direction: column; justify-content: center; align-items: center; padding: 10dvh 0; display: flex; position: fixed; inset: 0; } ._1kdzox90:focus { outline: none; } ._1kdzox90[data-modal-fullscreen] { align-items: start; padding: 0; } ._1kdzox91 { padding: var(--spacer-5); } ._1kdzox92 { justify-content: flex-start; } ._1kdzox93 { --fpl-modal-width: var(--fpl-modal-sm); } ._1kdzox94 { --fpl-modal-width: var(--fpl-modal-md); } ._1kdzox95 { --fpl-modal-width: var(--fpl-modal-lg); } ._1kdzox96 { background: var(--color-modalbackdrop); position: absolute; inset: 0; } ._1kdzox97 { pointer-events: none; width: var(--fpl-modal-width); min-width: var(--fpl-modal-sm); max-width: calc(100% - (2 * var(--spacer-3))); max-height: 80dvh; position: relative; } [data-modal-fullscreen] ._1kdzox97 { --fpl-contents-max-height: 100vh; width: 100%; max-width: unset; height: 100dvh; max-height: unset; top: 0; } ._1kdzox91 ._1kdzox97 { --fpl-contents-height: calc(100vh - 2 * var(--spacer-5)); --fpl-contents-max-height: 100vh; width: 100%; max-width: unset; max-height: unset; } ._1kdzox98 { --fpl-contents-height: 80vh; } @supports (width: 1dvh) { [data-modal-fullscreen] ._1kdzox97 { --fpl-contents-max-height: 100dvh; } ._1kdzox91 ._1kdzox97 { --fpl-contents-height: calc(100dvh - 2 * var(--spacer-5)); --fpl-contents-max-height: 100dvh; } ._1kdzox98 { --fpl-contents-height: 80dvh; } } .vvqzc70[hidden] { display: none; } .qdqd5y0 { margin: -1px; } .qdqd5y1 { z-index: -1; margin: -1px; } [data-preferred-theme="dark"] .qdqd5y1 { filter: drop-shadow(0 3px 5px #00000059) drop-shadow(0 10px 24px #00000073); stroke: #ffffff26; } [data-preferred-theme="light"] .qdqd5y1 { filter: drop-shadow(0 2px 5px #00000026) drop-shadow(0 10px 24px #0000002e) drop-shadow(0 0 .5px #00000014); } @keyframes segjh1i { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .segjh14 { --segjh10: var(--spacer-3); --segjh11: initial; --segjh12: var(--color-icon); --segjh13: calc(1rem / 16); padding: var(--spacer-1) 0; align-items: flex-start; display: flex; } .segjh15 { opacity: 0; width: var(--segjh10); height: var(--segjh10); margin: 0; position: absolute; } .segjh15:focus:not(:focus-visible) { outline: none; } .segjh16 { width: var(--segjh10); height: var(--segjh10); } .segjh15:focus-visible + .segjh16 { --segjh12: var(--color-border-selected-strong); } .segjh15[aria-readonly="true"] + .segjh16 { --segjh12: var(--color-icon-disabled); } .segjh15[aria-readonly="true"]:checked + .segjh16 { --segjh11: var(--color-icon-disabled); } .segjh15:checked + .segjh16 { --segjh11: var(--color-icon); } .segjh17 { border: none; padding: 0; } .segjh18 { gap: var(--spacer-1); margin-top: var(--spacer-1); flex-direction: column; display: flex; } .segjh19 { grid-template-columns: max-content; align-items: center; display: grid; } .segjh19 > .segjh1a { padding-left: var(--spacer-2); grid-area: 2 / 2; } .segjh19 > label { padding-left: var(--spacer-2); grid-column: 2; } .segjh1j { --segjh1b: var(--spacer-3); --segjh1c: initial; --segjh1h: initial; --segjh1d: var(--color-bordertranslucent); --segjh1e: var(--color-border-selected); --segjh1f: calc(1rem / 16); --segjh1g: var(--color-bg-secondary); padding: var(--spacer-1) 0; align-items: flex-start; display: flex; position: relative; } .segjh1k { opacity: 0; width: var(--segjh1b); height: var(--segjh1b); margin: 0; position: absolute; } .segjh1k:focus:not(:focus-visible) { outline: none; } .segjh1l { border-radius: var(--radius-full); box-shadow: inset 0 0 0 var(--segjh1f) var(--segjh1d); background: var(--segjh1g); pointer-events: none; width: var(--segjh1b); height: var(--segjh1b); position: relative; overflow: hidden; } .segjh1l:before { content: ""; transform-origin: center; opacity: 1; outline: solid 1px var(--segjh1h); border-radius: var(--radius-full); background: var(--segjh1c); width: var(--spacer-2); height: var(--spacer-2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); } .segjh1k:hover:not([aria-readonly="true"]) + .segjh1l { --segjh1d: var(--color-bordertranslucentstrong); } .segjh1k:focus-visible + .segjh1l { outline: solid 1px var(--segjh1e); outline-offset: 1px; } .segjh1k:active:not([aria-readonly="true"], :checked) + .segjh1l { --segjh1g: var(--color-bg-secondary-hover); } .segjh1k:active:checked:not([aria-readonly="true"]) + .segjh1l { --segjh1g: var(--color-bg-brand-hover); } .segjh1k[aria-readonly="true"] + .segjh1l { --segjh1d: var(--color-border-disabled); --segjh1g: transparent; } .segjh1k[aria-readonly="true"]:checked + .segjh1l { --segjh1c: var(--color-icon-ondisabled); --segjh1g: var(--color-bg-disabled); --segjh1d: transparent; } .segjh1k:checked + .segjh1l { --segjh1c: var(--color-icon-onbrand); --segjh1g: var(--color-bg-brand); transition: background var(--duration-sm) cubic-bezier(.645, .045, .355, 1); } .segjh1k:checked:not([aria-readonly="true"]) + .segjh1l:before { --segjh1h: var(--color-controliconoutline); --segjh1c: var(--color-icon-onbrand); } .segjh1j[data-changed] .segjh1k:checked:not([aria-readonly="true"]) + .segjh1l:before { animation: segjh1i var(--duration-sm) cubic-bezier(.25, .46, .45, .94) forwards; } .segjh1m { border: none; padding: 0; } .segjh1n { gap: var(--spacer-1); margin-top: var(--spacer-1); flex-direction: column; display: flex; } .segjh1o { align-items: center; column-gap: var(--spacer-2); grid-template-columns: max-content; display: grid; } .segjh1o > .segjh1p { grid-area: 2 / 2; } .segjh1o > label { grid-column: 2; } .ri3hjr0 { backface-visibility: hidden; outline: none; justify-content: center; align-items: center; display: flex; position: absolute; } .ri3hjr0:before { border-radius: var(--radius-full); background: var(--color-border-selected); position: absolute; } .ri3hjr0[aria-orientation="vertical"] { cursor: ns-resize; height: 8px; } .ri3hjr0[aria-orientation="vertical"]:before { width: 50%; height: 4px; } .ri3hjr0[aria-orientation="horizontal"] { cursor: ew-resize; width: 8px; } .ri3hjr0[aria-orientation="horizontal"]:before { width: 4px; height: 50%; } .ri3hjr0[data-fpl-side="top"] { width: 100%; top: -6px; left: 0; } .ri3hjr0[data-fpl-side="top"]:before { transform: translateY(2px); } .ri3hjr0[data-fpl-side="bottom"] { width: 100%; bottom: -6px; left: 0; } .ri3hjr0[data-fpl-side="bottom"]:before { transform: translateY(-2px); } .ri3hjr0[data-fpl-side="left"] { height: 100%; top: 0; left: -6px; } .ri3hjr0[data-fpl-side="left"]:before { transform: translateX(2px); } .ri3hjr0[data-fpl-side="right"] { height: 100%; top: 0; right: -6px; } .ri3hjr0[data-fpl-side="right"]:before { transform: translateX(-2px); } .ri3hjr0:focus-visible:before { content: ""; } .ri3hjr0[data-fpl-side="top"][data-fpl-extrema="max"] { cursor: s-resize; } .ri3hjr0[data-fpl-side="top"][data-fpl-extrema="min"], .ri3hjr0[data-fpl-side="bottom"][data-fpl-extrema="max"] { cursor: n-resize; } .ri3hjr0[data-fpl-side="bottom"][data-fpl-extrema="min"] { cursor: s-resize; } .ri3hjr0[data-fpl-side="left"][data-fpl-extrema="max"] { cursor: e-resize; } .ri3hjr0[data-fpl-side="left"][data-fpl-extrema="min"], .ri3hjr0[data-fpl-side="right"][data-fpl-extrema="max"] { cursor: w-resize; } .ri3hjr0[data-fpl-side="right"][data-fpl-extrema="min"] { cursor: e-resize; } ._16btwim0 { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; } ._12v7fda4 { --_12v7fda0: calc(24rem / 16); border: none; min-width: 0; margin: 0; padding: 0; line-height: 0; display: flex; } ._12v7fda4 legend { margin-bottom: var(--spacer-1); } ._12v7fda4 [data-radio-options-root] { border-radius: var(--radius-medium); background: var(--color-bg-secondary); padding: var(--spacer-0); width: 100%; display: inline-flex; } ._12v7fda6 { flex: 1; display: inline-block; position: relative; } ._12v7fda5._12v7fda6 { min-width: 0; } ._12v7fda7 { border-radius: var(--radius-medium); padding: var(--spacer-0); min-width: var(--_12v7fda0); height: var(--_12v7fda1); background: none; justify-content: center; align-items: center; display: flex; } input:checked + ._12v7fda7 { box-shadow: inset 0 0 0 .0625rem var(--color-border); background: var(--color-bg); } input:not(:checked) + ._12v7fda7 { --fpl-icon-color: var(--color-icon-secondary); --fpl-icon-color-2: var(--color-icon-secondary); } input[aria-readonly="true"] + ._12v7fda7 { --fpl-icon-color: var(--color-icon-disabled); --fpl-icon-color-2: var(--color-icon-disabled); --fpl-icon-color-3: var(--color-icon-disabled); } input[aria-disabled="true"]:checked + ._12v7fda7 { box-shadow: inset 0 0 0 .0625rem var(--color-border-disabled); } input:focus-visible + ._12v7fda7 { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } ._12v7fda7 svg { width: var(--_12v7fda0); height: var(--_12v7fda0); } ._12v7fda8 { border-radius: var(--radius-medium); padding: 0 var(--spacer-2); min-width: var(--_12v7fda0); height: var(--_12v7fda2); text-wrap: nowrap; color: var(--color-text-secondary); background: none; justify-content: center; align-items: center; display: flex; } input:checked + ._12v7fda8 { box-shadow: inset 0 0 0 .0625rem var(--color-border); background: var(--color-bg); color: var(--color-text); } input[aria-readonly="true"] + ._12v7fda8 { color: var(--color-text-disabled); } input[aria-disabled="true"]:checked + ._12v7fda8 { box-shadow: inset 0 0 0 .0625rem var(--color-border-disabled); } input:focus-visible + ._12v7fda8 { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } ._12v7fda5 ._12v7fda8 { text-wrap: initial; } ._12v7fda8 svg { margin-right: var(--_12v7fda3); } ._12v7fda9 { display: contents; } ._12v7fda5 ._12v7fda9 { text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: inline-block; overflow: hidden; } ._12v7fdaa { --_12v7fda1: var(--spacer-24px); --_12v7fda2: var(--_12v7fda0); --_12v7fda3: 0; } ._12v7fdab { --_12v7fda1: var(--spacer-5); --_12v7fda2: var(--spacer-5); --_12v7fda3: var(--spacer-1); } html[data-prevent-html-scroll] { touch-action: none; overscroll-behavior: none; -webkit-overflow-scrolling: auto; overflow: hidden; } html[data-prevent-html-scroll][data-html-scrolls] { scrollbar-gutter: stable; } ._15y6gsq4 { box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-bg); padding: 0 0 0 var(--spacer-2); user-select: none; color: var(--color-text); align-items: center; display: flex; } ._15y6gsq4:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: -1px; } ._15y6gsq4:disabled, ._15y6gsq4[aria-disabled="true"] { --fpl-icon-color: var(--color-icon-disabled); color: var(--color-text-disabled); } ._15y6gsq5 { align-items: center; height: 1.5rem; display: flex; } ._15y6gsq4 ._15y6gsq5 { margin-left: calc(-1 * var(--spacer-2)); } ._15y6gsq6 { text-align: left; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; } ._15y6gsq7 { grid-template-columns: 1fr 1.5rem; align-items: center; width: 100%; margin-top: -1px; display: grid; } ._15y6gsq8 { --_15y6gsq0: var(--color-bg-menu); background-color: var(--_15y6gsq0); } ._15y6gsq9 { --_15y6gsq0: var(--color-bg); background-color: var(--_15y6gsq0); } ._15y6gsqa { --_15y6gsq1: auto; border-radius: var(--radius-large); box-shadow: var(--elevation-400); padding: var(--spacer-2) 0; list-style-type: none; } ._15y6gsqa:not(:has(._15y6gsqg)):has(._15y6gsqc > ._15y6gsq5) { --_15y6gsq1: calc(24rem / 16); } ._15y6gsqb { --_15y6gsq2: calc(7rem / 16); margin-top: var(--_15y6gsq2); border-top: 1px solid var(--color-border); padding-top: var(--_15y6gsq2); } ._15y6gsqc { box-sizing: border-box; isolation: isolate; grid-template: "check lead text" 1fr / 1rem var(--_15y6gsq1) 1fr; padding: 0 var(--spacer-32px) 0 var(--spacer-12px); width: 100%; min-height: 1.5rem; color: var(--color-text); align-items: center; display: grid; position: relative; } ._15y6gsqc:before { content: ""; z-index: -1; inset: 0 var(--spacer-8px); border-radius: var(--radius-medium); background: var(--_15y6gsq3, transparent); position: absolute; } ._15y6gsqc:focus { outline: 0; } ._15y6gsqc[data-fpl-selected="true"], ._15y6gsqc[data-fpl-selected="false"]:hover:not([aria-disabled="true"]) { --fpl-icon-color: var(--color-icon-onbrand); --_15y6gsq3: var(--color-bg-brand); color: var(--color-text-onbrand); } ._15y6gsqc[aria-disabled="true"], ._15y6gsqc[aria-disabled="true"][data-fpl-selected] { color: var(--color-text-disabled); } ._15y6gsqc[aria-disabled="true"]:not([data-fpl-selected]) { background: none; } ._15y6gsqd { grid-area: check; } ._15y6gsqc[aria-selected="false"] ._15y6gsqd { opacity: 0; } ._15y6gsqc[aria-selected="true"] ._15y6gsqd { opacity: 1; } ._15y6gsqe { margin-left: var(--spacer-1); text-overflow: ellipsis; white-space: nowrap; grid-area: text; overflow: hidden; } ._15y6gsqf { gap: var(--spacer-1); flex-direction: column; display: flex; } ._15y6gsqg { margin: 0; padding: 0; list-style-type: none; } ._15y6gsqg:not(:first-child) { border-top: 1px solid var(--color-border); } ._15y6gsqa ._15y6gsqg:not(:first-child) { margin-top: var(--spacer-2); padding-top: var(--spacer-2); } ._15y6gsqg:has( > ._15y6gsqc > ._15y6gsq5:not(:empty)) { --_15y6gsq1: calc(24rem / 16); } ._15y6gsqh { padding: 0 var(--spacer-3); height: 1.5rem; color: var(--color-text-tertiary); align-items: center; display: flex; } ._15y6gsqi { background-color: var(--_15y6gsq0); } ._15y6gsqi:hover { background-color: var(--color-bg-hover); } ._15y6gsqi[data-fpl-select-direction="down"] { border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); } ._15y6gsqi[data-fpl-select-direction="up"] { border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large); } ._15y6gsqj { text-align: left; width: 100%; } ._15y6gsqk { width: fit-content; } ._15y6gsql { height: 1.5rem; } ._15y6gsqm { height: 2rem; } ._15y6gsqn { box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-bg); padding: 0 0 0 var(--spacer-2); user-select: none; color: var(--color-text); align-items: center; display: flex; } ._15y6gsqn:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 1px; } ._15y6gsqn:disabled, ._15y6gsqn[aria-disabled="true"] { --fpl-icon-color: var(--color-icon-disabled); border-color: var(--color-border-disabled); color: var(--color-text-disabled); } .qvliwo0[data-fpl-selected="false"]:hover, .qvliwo0[data-fpl-selected="focus"]:focus-within, .qvliwo1[data-fpl-selected="true"], .qvliwo1[data-fpl-selected="focus"]:focus-within { background: var(--color-bg-selected); } ._1axj60h0 { color: var(--color-text-secondary); margin: 0; } .oz5nys0 { grid-template-columns: max-content; display: grid; } .oz5nys0 > .oz5nys1 { padding-left: var(--spacer-2); grid-area: 2 / 2; } .oz5nys0 > label { padding-left: var(--spacer-2); grid-column: 2; margin-top: .25rem; } .iwoi4u0 { cursor: pointer; text-align: center; user-select: none; text-decoration: none; } ._14d74zf0 { outline-offset: 0; border-radius: var(--radius-small); cursor: pointer; user-select: auto; color: var(--color-text-brand); outline: none; text-decoration: none; display: inline; } ._14d74zf0:focus-visible { outline: 1px solid var(--color-border-selected); } ._14d74zf0:active { background: var(--color-bg-selected); } [data-underline-links] ._14d74zf0 { text-decoration: underline; } @property --_1ymwlhz0 { syntax: ""; inherits: false; initial-value: #0000; } @property --_1ymwlhz1 { syntax: ""; inherits: false; initial-value: #0000; } ._1ymwlhz2 { border-radius: var(--radius-large); box-shadow: var(--fpl-dialog-elevation, var(--elevation-500)); background: var(--color-bg); pointer-events: auto; height: var(--fpl-contents-height, auto); max-height: var(--fpl-contents-max-height, 80vh); color: var(--color-text); overflow: hidden; } [data-modal-fullscreen] ._1ymwlhz2 { box-shadow: none; border-radius: 0; width: 100%; height: 100%; } ._1ymwlhz3 { display: grid; } ._1ymwlhz4 { grid-template: "header header" "sidebar body" 1fr "sidebar footer" / auto 1fr; } ._1ymwlhz5 { grid-template: "header header" "sidebar body" 1fr "footer footer" / auto 1fr; } ._1ymwlhz3 > * { min-width: 0; } ._1ymwlhz6 { filter: drop-shadow(0 2px 5px #00000026) drop-shadow(0 10px 16px #0000001f) drop-shadow(0 0 .5px #0000001f); clip-path: polygon(-100% -100%, 200% -100%, 200% 100%, -100% 100%); pointer-events: none; stroke-width: .5px; position: absolute; } [data-preferred-theme="dark"] ._1ymwlhz6 { filter: drop-shadow(0 2px 5px #00000059) drop-shadow(0 10px 16px #00000059); } ._1ymwlhz7 { top: 0; transform: translate(-50%, -90%); } ._1ymwlhz8 { right: 0; transform: translate(8.5px, -3px) rotate(90deg); } ._1ymwlhz9 { bottom: 0; transform: translate(-50%, 95%) rotate(180deg); } ._1ymwlhza { left: 0; transform: translate(-8.5px, -3px) rotate(-90deg); } ._1ymwlhzc { grid-area: header; } ._1ymwlhze { box-sizing: border-box; box-shadow: inset 0 -1px var(--color-border); padding-right: 2rem; padding-left: var(--spacer-2); align-items: center; min-height: 2.5rem; display: flex; } ._1ymwlhzb ._1ymwlhze { padding-right: var(--spacer-2); } ._1ymwlhzf { margin: var(--spacer-12px) 0 var(--spacer-12px) var(--spacer-8px); user-select: none; } ._1ymwlhzf:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 4px; border-radius: var(--radius-medium); } ._1ymwlhzg { pointer-events: auto; justify-content: center; align-items: center; display: flex; position: absolute; top: .5rem; right: .5rem; } ._1ymwlhzi { --fpl-icon-color: var(--color-iconondarkcanvas); } ._1ymwlhzi:hover { background: var(--color-bghoverondarkcanvas); } ._1ymwlhzj { --fpl-icon-color: var(--color-icononlightcanvas); } ._1ymwlhzj:hover { background: var(--color-bghoveronlightcanvas); } ._1ymwlhzk { margin-left: calc(-1 * var(--spacer-2)); width: calc(100% + var(--spacer-2)); } ._1ymwlhzl { align-items: center; height: 100%; display: flex; } ._1ymwlhzm { padding-left: var(--spacer-2); } ._1ymwlhzn { transition: var(--_1ymwlhz0), var(--_1ymwlhz1); transition-timing-function: linear; transition-duration: var(--duration-sm); } ._1ymwlhzk:not([data-fpl-scroll-x="none"]) ._1ymwlhzn { mask-image: linear-gradient(to right, var(--_1ymwlhz0), black 32px, black calc(100% - 32px), var(--_1ymwlhz1)); } ._1ymwlhzk[data-fpl-scroll-x="start"] ._1ymwlhzn { --_1ymwlhz0: black; } ._1ymwlhzk[data-fpl-scroll-x="end"] ._1ymwlhzn { --_1ymwlhz1: black; } ._1ymwlhzo { transition: mask-size, mask-position; mask-position: center; mask-size: 100%; } ._1ymwlhzk:not([data-fpl-scroll-x="none"]) ._1ymwlhzo { mask-image: linear-gradient(to right, #0000, #000 32px calc(100% - 32px), #0000); } ._1ymwlhzk[data-fpl-scroll-x="start"] ._1ymwlhzo { mask-position: 100%; mask-size: calc(100% + 32px); } ._1ymwlhzk[data-fpl-scroll-x="end"] ._1ymwlhzo { mask-position: 0; mask-size: calc(100% + 32px); } ._1ymwlhzp { touch-action: none; padding: var(--spacer-2) var(--spacer-3); grid-area: body; overflow-y: auto; } ._1ymwlhzp._1ymwlhzq { overflow-y: hidden; } ._1ymwlhzr { grid-area: body; } ._1ymwlhzs { padding: var(--spacer-2) var(--spacer-3); } ._1ymwlhzt { box-shadow: inset 0 1px var(--color-border); grid-area: footer; } ._1ymwlhzu { min-height: var(--spacer-6); align-items: center; padding: 0 8px 0 16px; display: flex; } ._1ymwlhzv { justify-content: flex-end; align-self: start; align-items: center; gap: var(--spacer-2); min-height: 2.5rem; margin-left: auto; display: flex; } .ociw1i0:focus { outline: none; } [data-modal-fullscreen] .ociw1i0 { width: 100%; height: 100%; } .ociw1i0:not([data-top-page]) { opacity: 0; pointer-events: none; position: absolute; } ._18294ol1 { box-sizing: border-box; border-right: 1px solid var(--color-border); width: calc(var(--width, 15rem) + 1px); grid-area: sidebar; position: relative; } ._18294ol2:not(:last-child) { border-bottom: 1px solid var(--color-border); } ._18294ol3 { padding: var(--spacer-2); flex-direction: column; display: flex; } ._18294ol4 { min-height: 1.5rem; color: var(--color-text-secondary); align-items: center; padding-left: .75rem; display: flex; } ._18294ol5 { flex-direction: column; display: flex; } ._18294ol6 { padding: var(--spacer-1) 0; flex-direction: column; display: flex; } ._18294ol7 { --_18294ol0: transparent; isolation: isolate; align-items: center; gap: var(--spacer-1); background-color: var(--color-bg); padding: 0 var(--spacer-3); text-align: left; text-wrap: nowrap; user-select: none; min-height: 2rem; color: var(--color-text); border: none; outline: none; display: flex; position: relative; } ._18294ol7:after { z-index: -1; inset: var(--spacer-1) var(--spacer-2); outline: 1px solid var(--_18294ol0); outline-offset: -1px; border-radius: var(--radius-medium); background: var(--color-bg-hover); position: absolute; } ._18294ol7:hover:after { content: ""; background-color: var(--color-bg-hover); } ._18294ol7[aria-selected="true"]:after { content: ""; background: var(--color-bg-secondary); } ._18294ol7:has( > svg:first-child) { padding-left: var(--spacer-2); } ._18294ol7[aria-selected="true"] { font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); font-weight: var(--text-body-medium-strong-font-weight); line-height: var(--text-body-medium-strong-line-height); letter-spacing: var(--text-body-medium-strong-letter-spacing); color: var(--color-text); } ._18294ol7[data-show-focus]:focus-visible { --_18294ol0: var(--color-border-selected); } ._1pz8ves0 { z-index: var(--z-index-window); isolation: isolate; pointer-events: none; position: fixed; inset: 0; } ._1pz8ves0 > * { pointer-events: auto; } ._1sm4cu20 { --fpl-dialog-elevation: var(--elevation-400); --fpl-contents-max-height: 80vh; width: fit-content; position: fixed; } ._1sm4cu20:focus { outline: none; } ._1sm4cu21 { --fpl-contents-max-height: 100vh; } @supports (width: 100dvh) { ._1sm4cu20 { --fpl-contents-max-height: 80dvh; } ._1sm4cu21 { --fpl-contents-max-height: 100dvh; } }