@layer reset, css-modules; @layer priority1, priority2, priority3, priority4, priority5, priority6; @layer priority1{ .xe5c7bq{--color-icon:var(--color-icon-tertiary)} } @layer priority2{ .xuzi1b7{inset:.5rem .75rem auto} .x35dh9f{margin:var(--spacer-2) auto} .x19x4vm6{margin:var(--spacer-4) auto} .xqhu3d4{padding:1.5rem .75rem .375rem} } @layer priority3{ .x9r1u3d{border-color:transparent} .x1kogg8i{border-radius:6px} .xng3xce{border-style:none} .xc342km{border-width:0} .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} .xfoe8qy{padding-inline:11px} .x1hr3lfm{padding-inline:16px} .x4l9tsp{padding-inline:24px} .xdqyycr{padding-inline:8px} .x1bvjpef{text-decoration:underline} .xri4lhc:focus-visible{outline:2px solid var(--color-border-selected)} } @layer priority4{ .x6s0dn4{align-items:center} .xjyslct{appearance:none} .xjbqb8w{background-color:transparent} .xbwv0bw{background-color:var(--auth-input-background)} .x1gnnqk1{box-shadow:none} .x9f619{box-sizing:border-box} .x14qv3re{color:var(--auth-color-text)} .x1akne3o{color:var(--color-text)} .x8p8a2l{color:var(--color-text-design-pressed)} .x1quhyk7{color:var(--color-text-brand)} .x1n0bwc9{color:var(--color-text-secondary)} .xt0e3qv{cursor:default} .x1ypdohk{cursor:pointer} .x1lliihq{display:block} .x78zum5{display:flex} .x1ja3g5x{fill:var(--color-icon)} .xdt5ytf{flex-direction:column} .x1iyjqo2{flex-grow:1} .x563n8i{font-family:'Figma Mono',monospace} .xm3xvbb{font-family:'Figma Sans',sans-serif} .x122x9cr{font-family:Inter} .x1j6dyjg{font-size:11px} .xfifm61{font-size:12px} .x4z9k3i{font-size:13px} .xosj86m{font-size:18px} .xwsyq91{font-size:20px} .xc8nv1x{font-weight:320} .xo1l8bm{font-weight:400} .xk50ysn{font-weight:500} .xl56j7k{justify-content:center} .x13a6bvl{justify-content:flex-end} .x1pga9m1{letter-spacing:-0.005625rem} .xgwajed{letter-spacing:.55px} .x11vz743{line-height:125%} .x1d3mw78{line-height:16px} .x1o2sk6j{line-height:24px} .x101yacv{line-height:25px} .xcgk4ki{line-height:32px} .xv54qhq{padding-inline-end:16px} .xmzvs34{padding-inline-start:8px} .x10l6tqk{position:absolute} .x1n2onr6{position:relative} .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} .x17410jd:is([type="password"]){letter-spacing:3.6px} .xv2f06h:hover{background-color:var(--color-bg-hover)} .xugdvvj:hover{box-shadow:inset 0 0 0 1px var(--auth-input-box-shadow)} .x1ptam9a:focus{background-color:var(--color-bg-hover)} .xcwqlvo:focus{box-shadow:inset 0 0 0 2px var(--auth-input-box-shadow)} .xpdc0an:active{box-shadow:inset 0 0 0 1px var(--auth-input-box-shadow)} } @layer priority5{ .xertd99{border-bottom-color:var(--color-border)} .x1q0q8m5{border-bottom-style:solid} .xso031l{border-bottom-width:1px} .x16ufvko{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} .x16q51m2{max-width:150px} .x256u9z{max-width:250px} .x1j9u4d2{max-width:400px} .x18ip3f8{min-width:344px} .x18d9i69{padding-bottom:0} .xwxc41k{padding-bottom:24px} .x1vamu9a{padding-bottom:var(--spacer-3)} .xnm25rq{padding-left:16px} .x1tudf5h{padding-left:32px} .x1gcgh60{padding-left:var(--spacer-3)} .x1p5oq8j{padding-top:24px} .xh8yej3{width:100%} .x1dz1jew{width:280px} .xi55695{width:328px} .x1td3qas{width:32px} .x168biu4{width:344px} } @layer priority6{ .xxqzaim::placeholder{color:transparent} .x1robv96::-webkit-input-placeholder{color:transparent} .x1cluluk::-moz-placeholder{color:transparent} } @layer fpl; /* "shared/components/svg/svg.css" */ @layer css-modules { .svg--autoscale--bb7pC > svg { width: 100%; height: 100%; } } /* "shared/components/lazy_input/lazy_input.css" */ @layer css-modules { .lazy_input--lazyInput--Ltb6r { cursor: auto; } .lazy_input--lazyInput--Ltb6r::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 */ /* e.g. after filename with menu */ /* 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 */ /* For Variables table virtualization */ /* 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 collage */ /* 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 */ /* not including header or search bar; remove with 'ce_fp_dynamic_height' */ /* 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 */ /* Drafts to move page */ /* 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 */ /* 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/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-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-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-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" */ /* "../../../../../home/ubuntu/.cache/bazel/_bazel_ubuntu/d2c52710e031f37347cde534e5ba90f7/execroot/_main/bazel-out/k8-fastbuild/bin/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-600); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-blue-200); --color-bg-component: var(--ramp-purple-500); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-600); --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-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-600); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --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-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-600); --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-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-600); --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-100); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-200); --color-bg-selected: var(--ramp-blue-200); --color-bg-selected-hover: var(--ramp-blue-300); --color-bg-selected-pressed: var(--ramp-blue-300); --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-600); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-600); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-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); --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); /* Use for hover states */ --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-600); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --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: #ffffff99; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #ffffff; --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-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-handoff: var(--ramp-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-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-pale-green-300); --color-border-success-strong: var(--ramp-green-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: #ffffff00; --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: #ffffff00; --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); /* Used for input backgrounds on canvas */ --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-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: #ffffff00; --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-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --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-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-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-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-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --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-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-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-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-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --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); --duration-lg: 400ms; /* A slower transition for elements that need to call attention */ --duration-md: 200ms; /* Default transition for most views that slide in or out */ --duration-none: 0ms; /* No motion */ --duration-sm: 100ms; /* Very fast, small animations reacting to user input */ --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: #00000033; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000000cc; --ramp-black-700: #000000d9; --ramp-black-800: #000000e6; --ramp-black-900: #000000f2; --ramp-black-1000: #000000; --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: #edfcf0; --ramp-green-200: #d5f7da; --ramp-green-300: #aff4c6; --ramp-green-400: #85e0a3; --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: #444444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111111; --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: #667799; --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: #ffffff33; --ramp-white-400: #ffffff66; --ramp-white-500: #ffffffb3; --ramp-white-600: #ffffffcc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe6; --ramp-white-900: #fffffff2; --ramp-white-1000: #ffffff; --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-letter-spacing: -0.002rem; --text-body-large-line-height: 1.375rem; --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-letter-spacing: -0.002rem; --text-body-large-strong-line-height: 1.375rem; --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-letter-spacing: 0.00344rem; --text-body-medium-line-height: 1rem; --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-letter-spacing: 0.00344rem; --text-body-medium-strong-line-height: 1rem; --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-letter-spacing: 0.00281rem; --text-body-small-line-height: 0.875rem; --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-letter-spacing: 0.016875rem; --text-body-small-strong-line-height: 0.875rem; --text-display-font-family: var(--font-family-display); --text-display-font-size: 3rem; --text-display-font-weight: 400; --text-display-letter-spacing: -0.09rem; --text-display-line-height: 3.5rem; --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-letter-spacing: -0.0255rem; --text-heading-large-line-height: 2rem; --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-letter-spacing: -0.00469rem; --text-heading-medium-line-height: 1.5625rem; --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-letter-spacing: -0.002rem; --text-heading-small-line-height: 1.375rem; --z-index-assistant: 11; /* Helper content that floats above the canvas like help/resources icon */ --z-index-canvas-base: 0; /* Canvas base content */ --z-index-canvas-modifiers: 1; /* Additional info on canvas elements like selection regions or measurement inspections */ --z-index-canvas-pin: 2; /* Elements that are pinned to the canvas but not yet interacted with */ --z-index-canvas-pin-active: 4; /* Elements that are pinned to the canvas like comments in a preview or hover state */ --z-index-context-editing: 9; /* Temporary UI based on a selection that is easily dismissed like emote sticker wheel */ --z-index-cursor-multiplayer: 3; /* Cursors in the same page that are not tied to the user specifically */ --z-index-cursor-multiplayer-emote: 5; /* Indicators tied to the mouse like cursor chat */ --z-index-cursor-user: 15; /* The user's cursor */ --z-index-cursor-user-emote: 14; /* The user's cursor with indicators tied like cursor chat */ --z-index-dropdown: 13; /* Things like menus or select dropdowns */ --z-index-modal: 12; --z-index-nav: 10; /* Bottom or top tooltip */ --z-index-scrub-cursor: 2147483647; /* The virtual cursor that appears when scrubbing an input. It should always be on top of everything else. */ --z-index-sidebar: 6; /* Sidebars on the left/right/bottom of the editor */ --z-index-toolbar-widgets: 8; /* Widgets that persist in the top right corner like timer or audio in FigJam */ --z-index-tooltip: 13; --z-index-visual-bell: 11; /* Alerts or banners */ --z-index-window: 9; /* Windows that appear out of a sidebar or on a selection */ } html[lang="ko-kr"] > body.index--feature_flag_fpl_korean_font_weight--OUibn { --font-weight-default: 400; --font-weight-strong: 500; } [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-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-800); --color-bg-brand: var(--ramp-blue-500); --color-bg-brand-hover: var(--ramp-blue-600); --color-bg-brand-pressed: var(--ramp-blue-600); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-pale-blue-800); --color-bg-component: var(--ramp-purple-500); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-600); --color-bg-component-secondary: var(--ramp-purple-700); --color-bg-component-tertiary: var(--ramp-pale-purple-800); --color-bg-component-tertiary-hover: var(--ramp-purple-700); --color-bg-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-600); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-pale-red-800); --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-pale-blue-800); --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-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-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-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-600); --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-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-600); --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-700); --color-bg-secondary: var(--ramp-grey-700); --color-bg-secondary-hover: var(--ramp-grey-600); --color-bg-secondary-pressed: var(--ramp-grey-600); --color-bg-selected: var(--ramp-pale-blue-700); --color-bg-selected-hover: var(--ramp-pale-blue-600); --color-bg-selected-pressed: var(--ramp-pale-blue-600); --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-strong-hover: var(--ramp-blue-600); --color-bg-strong-pressed: var(--ramp-blue-600); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-600); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-pale-green-900); --color-bg-tertiary: var(--ramp-grey-600); --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-white-100); --color-bg-transparent-hover: var(--ramp-white-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-white-200); /* Use for hover states */ --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-600); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-pale-yellow-800); --color-bghoverondarkcanvas: var(--ramp-white-300); --color-bghoveronlightcanvas: var(--ramp-black-300); --color-bghovertransparent: var(--ramp-white-100); --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: #00000099; --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-assistive: var(--ramp-pink-700); --color-border-assistive-strong: var(--ramp-pink-400); --color-border-brand: var(--ramp-blue-700); --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: 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-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-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-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-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-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-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: #ffffff00; --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-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); /* Used for input backgrounds on canvas */ --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-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-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: #ffffff00; --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-assistive: var(--ramp-pink-400); --color-icon-assistive-pressed: var(--ramp-pink-300); --color-icon-assistive-secondary: var(--color-icon-assistive); --color-icon-assistive-tertiary: var(--color-icon-assistive); --color-icon-brand: var(--ramp-blue-400); --color-icon-brand-pressed: var(--ramp-blue-500); --color-icon-brand-secondary: var(--ramp-blue-600); --color-icon-brand-tertiary: var(--ramp-pale-blue-800); --color-icon-component: var(--ramp-purple-400); --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-hover: var(--ramp-red-300); --color-icon-danger-pressed: var(--ramp-red-300); --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-400); --color-icon-design-pressed: var(--ramp-blue-300); --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-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: 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-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --color-icon-fs-tertiary: var(--color-icon-tertiary); --color-icon-handoff: var(--ramp-green-400); --color-icon-handoff-pressed: var(--ramp-green-300); --color-icon-handoff-secondary: var(--color-icon-handoff); --color-icon-handoff-tertiary: var(--color-icon-handoff); --color-icon-hover: var(--ramp-white-1000); --color-icon-measure: var(--ramp-red-500); --color-icon-measure-hover: var(--ramp-red-300); --color-icon-measure-pressed: var(--ramp-red-300); --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-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-onselected-strong: var(--ramp-white-1000); --color-icon-onselected-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-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-white-500); --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-pressed: var(--ramp-green-300); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-tertiary: var(--ramp-white-400); --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-pressed: var(--ramp-yellow-400); --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-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: #00000099; --color-tablenodehoveredprimary: var(--ramp-blue-500); --color-tablenodehoveredsecondary: var(--ramp-blue-300); --color-tablenodeselected: var(--color-tablenodehoveredprimary); --color-text: var(--ramp-white-1000); --color-text-assistive: var(--ramp-pink-400); --color-text-assistive-pressed: var(--ramp-pink-300); --color-text-assistive-secondary: var(--color-text-assistive); --color-text-assistive-tertiary: var(--color-text-assistive); --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-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-pressed: var(--ramp-blue-300); --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-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: 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-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --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-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-onselected-strong: var(--ramp-white-1000); --color-text-onselected-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-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-white-500); --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-tertiary: var(--ramp-white-400); --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-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --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 #00000066, 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: #00000033; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000000cc; --ramp-black-700: #000000d9; --ramp-black-800: #000000e6; --ramp-black-900: #000000f2; --ramp-black-1000: #000000; --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: #ddfde2; --ramp-green-200: #beefc2; --ramp-green-300: #a1e8b9; --ramp-green-400: #79d297; --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: #444444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111111; --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: #667799; --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: #ffffff33; --ramp-white-400: #ffffff66; --ramp-white-500: #ffffffb3; --ramp-white-600: #ffffffcc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe6; --ramp-white-900: #fffffff2; --ramp-white-1000: #ffffff; --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-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-600); --color-bg-brand-secondary: var(--ramp-blue-700); --color-bg-brand-tertiary: var(--ramp-blue-200); --color-bg-component: var(--ramp-purple-500); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-600); --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-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-600); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --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-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-600); --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-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-600); --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-100); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-200); --color-bg-selected: var(--ramp-blue-200); --color-bg-selected-hover: var(--ramp-blue-300); --color-bg-selected-pressed: var(--ramp-blue-300); --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-600); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-600); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-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); --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); /* Use for hover states */ --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-600); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --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: #ffffff99; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #ffffff; --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-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-handoff: var(--ramp-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-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-pale-green-300); --color-border-success-strong: var(--ramp-green-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: #ffffff00; --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: #ffffff00; --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); /* Used for input backgrounds on canvas */ --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-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: #ffffff00; --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-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --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-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-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-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-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --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-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-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-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-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --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: #00000033; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000000cc; --ramp-black-700: #000000d9; --ramp-black-800: #000000e6; --ramp-black-900: #000000f2; --ramp-black-1000: #000000; --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: #edfcf0; --ramp-green-200: #d5f7da; --ramp-green-300: #aff4c6; --ramp-green-400: #85e0a3; --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: #444444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111111; --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: #667799; --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: #ffffff33; --ramp-white-400: #ffffff66; --ramp-white-500: #ffffffb3; --ramp-white-600: #ffffffcc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe6; --ramp-white-900: #fffffff2; --ramp-white-1000: #ffffff; --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-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-purple-500); --color-bg-brand-hover: var(--ramp-purple-600); --color-bg-brand-pressed: var(--ramp-purple-600); --color-bg-brand-secondary: var(--ramp-purple-700); --color-bg-brand-tertiary: var(--ramp-purple-200); --color-bg-component: var(--ramp-purple-500); --color-bg-component-hover: var(--ramp-purple-600); --color-bg-component-pressed: var(--ramp-purple-600); --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-danger: var(--ramp-red-500); --color-bg-danger-hover: var(--ramp-red-600); --color-bg-danger-pressed: var(--ramp-red-600); --color-bg-danger-secondary: var(--ramp-red-700); --color-bg-danger-tertiary: var(--ramp-red-200); --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-figjam); --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-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-600); --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-measure: var(--ramp-red-500); --color-bg-measure-hover: var(--ramp-red-600); --color-bg-measure-pressed: var(--ramp-red-600); --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-100); --color-bg-secondary: var(--ramp-grey-100); --color-bg-secondary-hover: var(--ramp-grey-200); --color-bg-secondary-pressed: var(--ramp-grey-200); --color-bg-selected: var(--ramp-purple-200); --color-bg-selected-hover: var(--ramp-purple-300); --color-bg-selected-pressed: var(--ramp-purple-300); --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-strong-hover: var(--ramp-purple-600); --color-bg-strong-pressed: var(--ramp-purple-600); --color-bg-success: var(--ramp-green-500); --color-bg-success-hover: var(--ramp-green-600); --color-bg-success-pressed: var(--ramp-green-600); --color-bg-success-secondary: var(--ramp-green-700); --color-bg-success-tertiary: var(--ramp-green-200); --color-bg-tertiary: var(--ramp-grey-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-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-selected-tertiary: var(--color-bg-toolbar-selected); --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); --color-bg-transparent-hover: var(--ramp-black-100); /* Use for hover states */ --color-bg-transparent-pressed: var(--ramp-black-200); /* Use for hover states */ --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-600); --color-bg-warning-secondary: var(--ramp-yellow-700); --color-bg-warning-tertiary: var(--ramp-yellow-200); --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: #974aff33; --color-bgswitchoff: var(--ramp-grey-200); --color-bgtoolbarmodeswitcher: var(--ramp-grey-100); --color-bgtoolbarmodeswitcher-hover: var(--ramp-grey-200); --color-bgtransparent: #ffffff99; --color-bgtransparent-secondary-hover: var(--ramp-black-200); --color-bgtransparent-secondary-pressed: #00000026; --color-bgtransparentsecondary: #ffffff; --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-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: 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(--ramp-red-500); --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-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-handoff: var(--ramp-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-selected: var(--ramp-purple-500); --color-border-menu-selected-strong: var(--ramp-purple-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-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-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-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-pale-green-300); --color-border-success-strong: var(--ramp-green-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: #ffffff00; --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: #ffffff00; --color-fillplacecrosshair: var(--ramp-black-1000); --color-fsAutoFillHighlight: #0d99ff33; --color-fsBgHeaderOnDarkCanvas: var(--ramp-white-100); --color-fsBgHeaderOnLightCanvas: var(--ramp-white-400); --color-fsBgInputOnLightCanvas: var(--ramp-white-1000); /* Used for input backgrounds on canvas */ --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-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-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: #ffffff00; --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-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-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-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-secondary: var(--color-icon-secondary); --color-icon-fs-selected: var(--color-icon-selected); --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-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-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-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: var(--ramp-black-500); --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-pressed: var(--ramp-green-700); --color-icon-success-secondary: var(--color-icon-success); --color-icon-success-tertiary: var(--color-icon-success); --color-icon-tertiary: var(--ramp-black-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-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-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-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-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-secondary: var(--color-text-secondary); --color-text-fs-selected: var(--color-text-selected); --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-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-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-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-tertiary: var(--ramp-black-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-textondarkcanvas: var(--ramp-white-800); --color-textondarkcanvassecondary: var(--ramp-white-500); --color-textoninspectpadding: var(--ramp-white-1000); --color-textoninspectspacing: var(--ramp-white-1000); --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: #00000033; --ramp-black-400: #0000004d; --ramp-black-500: #00000080; --ramp-black-600: #000000cc; --ramp-black-700: #000000d9; --ramp-black-800: #000000e6; --ramp-black-900: #000000f2; --ramp-black-1000: #000000; --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: #edfcf0; --ramp-green-200: #d5f7da; --ramp-green-300: #aff4c6; --ramp-green-400: #85e0a3; --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: #444444; --ramp-grey-700: #383838; --ramp-grey-800: #2c2c2c; --ramp-grey-900: #1e1e1e; --ramp-grey-1000: #111111; --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: #667799; --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: #ffffff33; --ramp-white-400: #ffffff66; --ramp-white-500: #ffffffb3; --ramp-white-600: #ffffffcc; --ramp-white-700: #ffffffd9; --ramp-white-800: #ffffffe6; --ramp-white-900: #fffffff2; --ramp-white-1000: #ffffff; --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-600); --color-bg-brand-secondary: var(--ramp-purple-700); --color-bg-brand-tertiary: var(--ramp-pale-purple-800); --color-bg-fs-measure: var(--color-bg-figjam); --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-600); --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-600); --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-purple-700); --color-border-brand-strong: var(--ramp-purple-400); --color-border-fs-measure-strong: var(--ramp-red-500); --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-600); --color-bg-brand-secondary: var(--ramp-green-700); --color-bg-brand-tertiary: var(--ramp-pale-green-800); --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-600); --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-600); --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-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-600); --color-bg-brand-secondary: var(--ramp-green-700); --color-bg-brand-tertiary: var(--ramp-green-200); --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-pale-green-200); --color-bg-selected-hover: var(--ramp-pale-green-300); --color-bg-selected-pressed: var(--ramp-pale-green-300); --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-600); --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-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-green-400); --color-icon-brand-tertiary: var(--ramp-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-600); --color-bg-brand-secondary: var(--ramp-persimmon-700); --color-bg-brand-tertiary: var(--ramp-pale-persimmon-800); --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-600); --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-600); --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-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-600); --color-bg-brand-secondary: var(--ramp-persimmon-700); --color-bg-brand-tertiary: var(--ramp-persimmon-200); --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-300); --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-600); --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-600); --color-bg-brand-secondary: var(--ramp-violet-700); --color-bg-brand-tertiary: var(--ramp-violet-200); --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-300); --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-600); --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-600); --color-bg-brand-secondary: var(--ramp-violet-700); --color-bg-brand-tertiary: var(--ramp-pale-violet-800); --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-600); --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-600); --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-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-600); --color-bg-brand-secondary: var(--ramp-pink-700); --color-bg-brand-tertiary: var(--ramp-pink-200); --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-300); --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-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-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-600); --color-bg-brand-secondary: var(--ramp-pink-700); --color-bg-brand-tertiary: var(--ramp-pale-pink-800); --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-600); --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-600); --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-600); --color-bg-brand-secondary: var(--ramp-teal-700); --color-bg-brand-tertiary: var(--ramp-teal-200); --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-300); --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-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-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-600); --color-bg-brand-secondary: var(--ramp-teal-700); --color-bg-brand-tertiary: var(--ramp-pale-teal-800); --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-600); --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-600); --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-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-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="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-300); --color-bg-brand-secondary: var(--ramp-blue-400); --color-bg-brand-tertiary: var(--ramp-pale-blue-700); --color-bg-component: var(--ramp-purple-200); --color-bg-component-hover: var(--ramp-purple-300); --color-bg-component-pressed: var(--ramp-purple-300); --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-300); --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-300); --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-bg-measure-hover: var(--ramp-red-300); --color-bg-measure-pressed: var(--ramp-red-300); --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-success: var(--ramp-green-400); --color-bg-success-hover: var(--ramp-green-300); --color-bg-success-pressed: var(--ramp-green-300); --color-bg-success-secondary: var(--ramp-pale-green-400); --color-bg-success-tertiary: var(--ramp-green-800); --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-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-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-200); --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-assistive-strong: var(--color-border-assistive-strong); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-fs-measure-strong: var(--color-border-measure-strong); --color-border-handoff: var(--ramp-green-400); --color-border-handoff-strong: var(--ramp-green-300); --color-border-measure: var(--ramp-red-200); --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-onsuccess: var(--ramp-green-900); --color-border-onsuccess-strong: var(--ramp-green-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-300); --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-conditionalborder: var(--ramp-grey-500); --color-fsBgHeaderOnDarkCanvas: #2c2c2ce6; --color-fsBgHeaderOnLightCanvas: #e6e6e6e6; --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-600); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-600); --color-fsBorderSelectedImmutableNode: var(--color-bg-fs-component); --color-fsBorderSelectedImmutableNodeSecondary: var(--color-bg-fs-component); --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-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-danger: var(--ramp-red-200); --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-ondisabled: var(--ramp-grey-500); --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-onsuccess: var(--ramp-grey-800); --color-icon-onsuccess-secondary: var(--ramp-grey-800); --color-icon-onsuccess-tertiary: 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-tertiary: var(--ramp-white-500); --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-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-danger: var(--ramp-red-200); --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-onselected-tertiary: var(--ramp-white-1000); --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-onwarning-secondary: var(--ramp-black-800); --color-text-onwarning-tertiary: var(--ramp-black-800); --color-text-secondary: var(--ramp-white-1000); --color-text-tertiary: var(--ramp-white-600); --color-text-tooltip-disabled: var(--ramp-grey-400); --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-900); --color-bg-brand-secondary: var(--ramp-blue-1000); --color-bg-component: var(--ramp-purple-800); --color-bg-component-hover: var(--ramp-purple-1000); --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-900); --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-bg-measure-hover: var(--ramp-red-900); --color-bg-measure-pressed: var(--ramp-red-900); --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-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-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-1000); --color-bg-warning-pressed: var(--ramp-pale-yellow-1000); --color-bg-warning-secondary: var(--ramp-pale-yellow-900); --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-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-assistive-strong: var(--color-border-assistive-strong); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-fs-measure-strong: var(--color-border-measure-strong); --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-onsuccess: var(--ramp-green-500); --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-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-white-300); --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-fsBgHeaderOnDarkCanvas: #2c2c2ce6; --color-fsBgHeaderOnLightCanvas: #e6e6e6e6; --color-fsBorderHeaderOnDarkCanvas: var(--ramp-white-600); --color-fsBorderHeaderOnLightCanvas: var(--ramp-black-600); --color-fsBorderSelectedImmutableNode: var(--color-bg-fs-component); --color-fsBorderSelectedImmutableNodeSecondary: var(--color-bg-fs-component); --color-fsCodeNodeBorder: var(--ramp-green-900); --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-onselected-tertiary: var(--ramp-black-1000); --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-secondary: var(--ramp-black-600); --color-icon-selected: var(--ramp-blue-800); --color-icon-success: var(--ramp-green-900); --color-icon-success-pressed: var(--ramp-green-1000); --color-icon-tertiary: var(--ramp-black-600); --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-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-onselected-tertiary: var(--ramp-black-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-secondary: var(--ramp-black-600); --color-text-selected: var(--ramp-blue-800); --color-text-success: var(--ramp-green-900); --color-text-tertiary: var(--ramp-grey-600); --color-text-warning: var(--ramp-pale-yellow-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-900); --color-bg-brand-secondary: var(--ramp-purple-1000); --color-bg-brand-tertiary: var(--ramp-purple-200); --color-bg-component: var(--ramp-purple-800); --color-bg-component-hover: var(--ramp-purple-1000); --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-900); --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-fs-measure: var(--color-bg-figjam); --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-900); --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-300); --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-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-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-1000); --color-bg-warning-pressed: var(--ramp-pale-yellow-1000); --color-bg-warning-secondary: var(--ramp-pale-yellow-900); --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-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-assistive-strong: var(--color-border-assistive-strong); --color-border-fs-design: var(--ramp-pale-blue-500); --color-border-fs-measure-strong: var(--color-border-measure-strong); --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-300); --color-border-onsuccess: var(--ramp-green-500); --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-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-white-300); --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-fsBgHeaderOnDarkCanvas: #2c2c2ce6; --color-fsBgHeaderOnLightCanvas: #e6e6e6e6; --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-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-onselected-tertiary: var(--ramp-black-1000); --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-secondary: var(--ramp-black-600); --color-icon-selected: var(--ramp-purple-800); --color-icon-success: var(--ramp-green-900); --color-icon-success-pressed: var(--ramp-green-1000); --color-icon-tertiary: var(--ramp-black-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-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-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-onselected-tertiary: var(--ramp-black-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-secondary: var(--ramp-black-600); --color-text-selected: var(--ramp-purple-800); --color-text-success: var(--ramp-green-900); --color-text-tertiary: var(--ramp-grey-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-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-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-300); --color-bg-brand-secondary: var(--ramp-purple-300); --color-bg-brand-tertiary: var(--ramp-purple-800); --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-purple-800); --color-bg-selected-hover: var(--ramp-purple-700); --color-bg-selected-pressed: var(--ramp-purple-700); --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-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-500); --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-300); --color-bg-brand-secondary: var(--ramp-green-300); --color-bg-brand-tertiary: var(--ramp-green-800); --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-green-800); --color-bg-selected-hover: var(--ramp-green-700); --color-bg-selected-pressed: var(--ramp-green-700); --color-bg-selected-secondary: var(--ramp-green-900); --color-bg-selected-strong: var(--ramp-green-400); --color-bg-selected-tertiary: var(--ramp-green-900); --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-500); --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-900); --color-bg-brand-hover: var(--ramp-green-1000); --color-bg-brand-pressed: var(--ramp-green-1000); --color-bg-brand-secondary: var(--ramp-green-1000); --color-bg-brand-tertiary: var(--ramp-pale-green-200); --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-300); --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-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-green-300); --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-300); --color-bg-brand-secondary: var(--ramp-persimmon-300); --color-bg-brand-tertiary: var(--ramp-pale-persimmon-800); --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-700); --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-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-500); --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-900); --color-bg-brand-hover: var(--ramp-persimmon-1000); --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-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-300); --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-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-300); --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-800); --color-bg-brand-secondary: var(--ramp-violet-900); --color-bg-brand-tertiary: var(--ramp-violet-200); --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-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-300); --color-bg-brand-secondary: var(--ramp-violet-300); --color-bg-brand-tertiary: var(--ramp-pale-violet-700); --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-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-selected: var(--ramp-violet-400); --color-text-tertiary: var(--ramp-white-500); --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-900); --color-bg-brand-secondary: var(--ramp-pink-1000); --color-bg-brand-tertiary: var(--ramp-pink-200); --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-300); --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-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-300); --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-300); --color-bg-brand-secondary: var(--ramp-pink-300); --color-bg-brand-tertiary: var(--ramp-pale-pink-700); --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-600); --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-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-500); --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-selected: var(--ramp-pink-400); --color-text-tertiary: var(--ramp-white-500); --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-900); --color-bg-brand-secondary: var(--ramp-teal-1000); --color-bg-brand-tertiary: var(--ramp-teal-200); --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-300); --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-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-300); --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-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-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-300); --color-bg-brand-secondary: var(--ramp-teal-300); --color-bg-brand-tertiary: var(--ramp-teal-700); --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-teal-800); --color-bg-selected-hover: var(--ramp-teal-600); --color-bg-selected-pressed: var(--ramp-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-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-500); --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-onbrand-secondary: var(--ramp-white-600); --color-text-onbrand-tertiary: var(--ramp-white-400); --color-text-onselected-tertiary: var(--ramp-white-400); --color-text-selected: var(--ramp-teal-400); --color-text-tertiary: var(--ramp-white-500); --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-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-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-selected: var(--ramp-violet-400); --color-text-tertiary: var(--ramp-white-500); --color-text-toolbar-selected: var(--ramp-violet-400); --color-text-tooltip-selected: var(--ramp-violet-400); --color-texthighlight: #4d49fc66; } /* "../../../../../home/ubuntu/.cache/bazel/_bazel_ubuntu/d2c52710e031f37347cde534e5ba90f7/execroot/_main/bazel-out/k8-fastbuild/bin/fpl/tokens/dist/utilities.css" */ .utilities--textDisplay--b8EOD { font-family: var(--text-display-font-family); font-size: var(--text-display-font-size); font-weight: var(--text-display-font-weight); letter-spacing: var(--text-display-letter-spacing); line-height: var(--text-display-line-height); } .utilities--headingLarge--H5MbZ { font-family: var(--text-heading-large-font-family); font-size: var(--text-heading-large-font-size); font-weight: var(--text-heading-large-font-weight); letter-spacing: var(--text-heading-large-letter-spacing); line-height: var(--text-heading-large-line-height); } .utilities--headingMedium--LjH-0 { 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); } .utilities--headingSmall--uJIxD { font-family: var(--text-heading-small-font-family); font-size: var(--text-heading-small-font-size); font-weight: var(--text-heading-small-font-weight); letter-spacing: var(--text-heading-small-letter-spacing); line-height: var(--text-heading-small-line-height); } .utilities--bodyLarge--JxrEt { 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); } .utilities--bodyLargeStrong--Ir4q3 { 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); } .utilities--bodyMedium--1M5LV { 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); } .utilities--bodyMediumStrong--Z9Crt { 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); } .utilities--bodySmall--B9YvG { font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); font-weight: var(--text-body-small-font-weight); letter-spacing: var(--text-body-small-letter-spacing); line-height: var(--text-body-small-line-height); } .utilities--bodySmallStrong--CYB7P { 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); letter-spacing: var(--text-body-small-strong-letter-spacing); line-height: var(--text-body-small-strong-line-height); } /* 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. */ } /* "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--70pHK { 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--5f-ox { 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--akrXP { -webkit-line-clamp: 2; } .ellipsis--ellipsisAfter3Lines--eBD0M { -webkit-line-clamp: 3; } .ellipsis--ellipsisAfter6Lines--9-7DS { -webkit-line-clamp: 6; } .ellipsis--ellipsisAfter8Lines--2JTeB { -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--7Cnf0 { /* 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--VaHfk { /* Please do not use this style directly. Use one of the rules below */ font-family: Inter, sans-serif; } .text--_fontBaseWhyteInktrap--iT8V6 { font-family: WhyteInktrap, sans-serif; } .text--_fontBaseWhyte--z-Ypd { font-family: Whyte, sans-serif; } /* Use these for black text on white background */ .text--fontPos9--SO7cN { font-size: 9px; line-height: 16px; letter-spacing: calc(0.016px + var(--text-tracking-pos, 0)*9px); } .text--fontPos10--uqCNV { font-size: 10px; line-height: 16px; letter-spacing: calc(0.01px + var(--text-tracking-pos, 0)*10px); } .text--fontPos11--rO47d { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontPos12--oWc5z { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontPos13--5OfL8 { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontPos14--QJNQC { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontPos15--OITPE { font-size: 15px; line-height: 24px; letter-spacing: calc(-0.009px + var(--text-tracking-pos, 0)*15px); } .text--fontPos16--TWa2I { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontPos18--FkHj- { font-size: 18px; line-height: 24px; letter-spacing: calc(-0.014px + var(--text-tracking-pos, 0)*18px); } .text--fontPos20--WslT3 { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontPos22--csuEx { font-size: 22px; line-height: 32px; letter-spacing: calc(-0.018px + var(--text-tracking-pos, 0)*22px); } .text--fontPos24--VFCur { font-size: 24px; line-height: 32px; letter-spacing: calc(-0.019px + var(--text-tracking-pos, 0)*24px); } .text--fontPos30--WRviK { font-size: 30px; line-height: 40px; letter-spacing: calc(-0.021px + var(--text-tracking-pos, 0)*30px); } .text--fontPos48--a3CiX { font-size: 48px; line-height: 64px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*48px); } .text--fontPos11Whyte--Y-Fpc { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontPos12Whyte--dR9EX { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontPos13Whyte--OEkDW { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontPos14Whyte--3uLh- { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontPos16Whyte--Lh0-Y { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontPos18Whyte--tieVU { font-size: 18px; line-height: 24px; letter-spacing: calc(-0.014px + var(--text-tracking-pos, 0)*18px); } .text--fontPos20Whyte--vbugh { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontPos22Whyte---NgeY { font-size: 22px; line-height: 32px; letter-spacing: calc(-0.018px + var(--text-tracking-pos, 0)*22px); } .text--fontPos24Whyte--w-GNs { font-size: 24px; line-height: 32px; letter-spacing: calc(-0.019px + var(--text-tracking-pos, 0)*24px); } .text--fontPos32Whyte--VJ5Ia { font-size: 32px; line-height: 48px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*32px); } .text--fontPos32WhyteInktrap--Nwaku { 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--bghdh { font-size: 11px; line-height: 16px; letter-spacing: calc(0.005px + var(--text-tracking-pos, 0)*11px); } .text--fontNeg12--HBXnm { font-size: 12px; line-height: 16px; letter-spacing: calc(var(--text-tracking-pos, 0)*12px); } .text--fontNeg13--NfHlH { font-size: 13px; line-height: 24px; letter-spacing: calc(-0.003px + var(--text-tracking-pos, 0)*13px); } .text--fontNeg14--TmjQA { font-size: 14px; line-height: 24px; letter-spacing: calc(-0.006px + var(--text-tracking-pos, 0)*14px); } .text--fontNeg16--tWSFk { font-size: 16px; line-height: 24px; letter-spacing: calc(-0.011px + var(--text-tracking-pos, 0)*16px); } .text--fontNeg20--M6YDQ { font-size: 20px; line-height: 32px; letter-spacing: calc(-0.017px + var(--text-tracking-pos, 0)*20px); } .text--fontNeg40--3Uj2z { font-size: 40px; line-height: 56px; letter-spacing: calc(-0.022px + var(--text-tracking-pos, 0)*40px); } .text--fontNeg16Whyte--6k7bO { 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--4ER8T { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; } .blue_link--blueLinkDefaultPointer--I3X1p { cursor: default; } .blue_link--blueLinkWithFocus--nLIVS:focus-visible { outline: 1px solid var(--color-text-brand); } } /* "shared/components/forms/basic_form/basic_form.css" */ @layer css-modules { .basic_form--input--OZaHD { 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--OZaHD, :where([data-fpl-ui3-override]) .basic_form--input--OZaHD { height: var(--spacer-4); } .basic_form--bigInput--NJpUL { height: 42px; font-size: 14px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--bigInput--NJpUL, :where([data-fpl-ui3-override]) .basic_form--bigInput--NJpUL { height: var(--spacer-5); } .basic_form--textInput--yi6hu { 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--yi6hu:focus { border: 2px solid var(--color-border-selected); padding: 0 5px; } .basic_form--textInput--yi6hu::placeholder { color: var(--color-text-tertiary); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--textInput--yi6hu, :where([data-fpl-ui3-override]) .basic_form--textInput--yi6hu { 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--yi6hu:focus, :where([data-fpl-ui3-override]) .basic_form--textInput--yi6hu:focus { border: 1px solid var(--color-border-selected); padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2) - 1px); } .basic_form--labeledInputGroup--ruFib { 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--ruFib input, .basic_form--labeledInputGroup--ruFib select { color: var(--color-text); background: var(--color-bg, white); height: 22px; padding: 0 16px; letter-spacing: -0.006em; } .basic_form--labeledInputGroup--ruFib input::placeholder, .basic_form--labeledInputGroup--ruFib 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--ruFib input:-webkit-autofill, .basic_form--labeledInputGroup--ruFib select:-webkit-autofill { -webkit-text-fill-color: var(--color-text); } .basic_form--labeledInputGroup--ruFib select.basic_form--selectPlaceholder--7N72z { color: var(--color-text-secondary); } .basic_form--labeledInputGroup--ruFib 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--ruFib label { padding: 2px 0 0 16px; } .basic_form--labeledInputGroup--ruFib label:not(.basic_form--hoverLabel__hasValue--o4MD3) { display: none; } .basic_form--labeledInputGroup--ruFib:focus-within { box-shadow: 0 0 0 1px var(--color-border-selected); border: 1px solid var(--color-border-selected); } .basic_form--labeledInputGroup--ruFib:focus-within label { display: block; } .basic_form--labeledInputGroupDisabled--ELt0v { background-color: var(--color-bg, #fafafa) !important; } .basic_form--labeledInputGroupDisabled--ELt0v input { color: var(--color-text-secondary); background-color: var(--color-bg); } .basic_form--hoverLabel--oZFcf { font-size: 9px; line-height: 11px; color: var(--color-text-secondary); -webkit-user-select: none; user-select: none; } .basic_form--bigTextInput--JBssQ { padding: 0 12px; } .basic_form--bigTextInput--JBssQ:focus { padding: 0 11px; } .basic_form--bigTextInput--JBssQ::placeholder { color: var(--color-text-tertiary); } .basic_form--checkboxContainer--0sLMQ { -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--m3kFP { appearance: none; width: 14px; height: 14px; display: inline-flex; /* Prevent invisible checkbox from affecting layout */ } .basic_form--checkbox--m3kFP::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--m3kFP:disabled::after { border: 1px solid var(--color-icon-disabled); } .basic_form--checkbox--m3kFP:checked::after { border: 1px solid var(--color-bg-brand); background-color: var(--color-bg-brand); } .basic_form--checkbox--m3kFP: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--m3kFP: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--m3kFP, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP { width: var(--spacer-3); height: var(--spacer-3); } [data-fpl-version='ui3'] .basic_form--checkbox--m3kFP::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP::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--m3kFP:disabled::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP:disabled::after { border-color: var(--color-border-disabled); } [data-fpl-version='ui3'] .basic_form--checkbox--m3kFP:disabled:checked::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP:disabled:checked::after { border-color: var(--color-bg-disabled); background-color: var(--color-bg-disabled); } .basic_form--checkboxSvg---ik7P { 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---ik7P, :where([data-fpl-ui3-override]) .basic_form--checkboxSvg---ik7P { --color-icon: var(--color-icon-onbrand); } /* The where clause allows us to make changes without changing specificity */ [data-fpl-version='ui3'] .basic_form--checkbox--m3kFP:disabled + .basic_form--checkboxSvg---ik7P, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP:disabled + .basic_form--checkboxSvg---ik7P { --color-icon: var(--color-icon-ondisabled); } .basic_form--checkboxShowFocus--s-DT5:focus::after, .basic_form--checkboxShowFocus--s-DT5:active::after, .basic_form--checkbox--m3kFP: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--s-DT5:focus::after, [data-fpl-version='ui3'] .basic_form--checkboxShowFocus--s-DT5:active::after, [data-fpl-version='ui3'] .basic_form--checkbox--m3kFP:focus::after, :where([data-fpl-ui3-override]) .basic_form--checkboxShowFocus--s-DT5:focus::after, :where([data-fpl-ui3-override]) .basic_form--checkboxShowFocus--s-DT5:active::after, :where([data-fpl-ui3-override]) .basic_form--checkbox--m3kFP:focus::after { box-shadow: 0 0 0 1px var(--color-border-selected-strong); border: none; } .basic_form--label--UOWwX { font-size: 11px; -webkit-user-select: none; user-select: none; cursor: default; color: var(--color-text); } .basic_form--buttonGroup--3HeVU { display: flex; flex-direction: row; } .basic_form--buttonGroup_reversed--MDNs0 { 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--t7Y67 { 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--t7Y67, :where([data-fpl-ui3-override]) .basic_form--btn--t7Y67 { 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--t7Y67: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 */ } body:not([data-fpl-version='ui3']) .basic_form--btn--t7Y67:focus:not(:disabled):where(:not([data-fpl-ui3-override] *)) { outline-width: 2px; outline-offset: -2px; } .basic_form--btn--t7Y67: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--t7Y67:active:not(:disabled) { background-color: var(--color-bg-pressed); } .basic_form--btnSecondaryMenu--w9J-g { 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--w9J-g:focus:not(:disabled), .basic_form--btnSecondaryMenu--w9J-g:active:not(:disabled) { background-color: var(--color-bg-menu-pressed); } .basic_form--btnBig--Ikqmc { /* 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--Ikqmc, :where([data-fpl-ui3-override]) .basic_form--btnBig--Ikqmc { 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--Ikqmc: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 */ } body:not([data-fpl-version='ui3']) .basic_form--btnBig--Ikqmc:focus:not(:disabled):where(:not([data-fpl-ui3-override] *)) { outline-width: 2px; outline-offset: -2px; } .basic_form--btnBig--Ikqmc:disabled { background-color: transparent; color: var(--color-text-disabled); outline: var(--color-icon-disabled); } .basic_form--fullWidth--DkyVp { max-width: unset; width: 100%; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .basic_form--fullWidth--DkyVp, :where([data-fpl-ui3-override]) .basic_form--fullWidth--DkyVp { /* 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--t7Y67::-moz-focus-inner { border: 0; outline: 0; } .basic_form--primaryBtn--jDHWr { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--primaryBtn--jDHWr:focus:not(:disabled), .basic_form--primaryBtn--jDHWr:active:not(:disabled) { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); outline-color: var(--color-border-selected-strong); } .basic_form--primaryBtn--jDHWr:disabled { color: var(--color-text-ondisabled); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--primaryBtn--jDHWr: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--jDHWr, :where([data-fpl-ui3-override]) .basic_form--primaryBtn--jDHWr { /* 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--jDHWr:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--primaryBtn--jDHWr:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--primaryBtnBig--rky1J { } .basic_form--negativeBtn--YJG-- { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--negativeBtn--YJG--:focus:not(:disabled), .basic_form--negativeBtn--YJG--:active:not(:disabled) { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); outline-color: var(--color-icon-danger-pressed); } .basic_form--negativeBtn--YJG--:disabled { color: var(--color-text-ondanger); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--negativeBtn--YJG--: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--YJG--, :where([data-fpl-ui3-override]) .basic_form--negativeBtn--YJG-- { /* 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--YJG--:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--negativeBtn--YJG--:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--secondaryNegativeBtn--5onOK { outline-color: var(--color-icon-danger); color: var(--color-text-danger); } .basic_form--negativeBtnBig--5byWO { } .basic_form--greenBtn--bxncU { color: var(--color-text-onsuccess); background-color: var(--color-bg-success); outline-color: transparent; background-clip: border-box; } .basic_form--greenBtn--bxncU:focus:not(:disabled), .basic_form--greenBtn--bxncU:active:not(:disabled) { outline-color: var(--color-icon-success-pressed); } .basic_form--greenBtn--bxncU: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--bxncU, :where([data-fpl-ui3-override]) .basic_form--greenBtn--bxncU { /* 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--bxncU:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--greenBtn--bxncU:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--greyBtn--sVLDk { 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--sVLDk:disabled { color: var(--color-text-tooltip-disabled); background-color: var(--color-bg-tooltip-disabled); outline-color: var(--color-border-tooltip-disabled); } .basic_form--whiteBtn--2ojFb { } .basic_form--whiteBtn--2ojFb:disabled { color: var(--color-text-disabled); outline-color: var(--color-icon-disabled); } .basic_form--inverseBtn--uO0k6 { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); outline-color: transparent; background-clip: border-box; font-weight: 500; } .basic_form--inverseBtn--uO0k6:focus:not(:disabled), .basic_form--inverseBtn--uO0k6:active:not(:disabled) { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); outline-color: transparent; } .basic_form--inverseBtn--uO0k6: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--uO0k6, :where([data-fpl-ui3-override]) .basic_form--inverseBtn--uO0k6 { /* 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--uO0k6:focus-visible:not(:disabled), :where([data-fpl-ui3-override]) .basic_form--inverseBtn--uO0k6:focus-visible:not(:disabled) { box-shadow: 0px 0px 0px 2px var(--color-border-onbrand-strong) inset; } .basic_form--inverseBtnBig--WA0IN { } /* 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--LDiR2 { color: var(--color-text-toolbar); background-color: var(--color-bg-toolbar); outline-color: transparent; background-clip: border-box; } .basic_form--blackBtn--LDiR2:focus:not(:disabled), .basic_form--blackBtn--LDiR2:active:not(:disabled) { outline-color: var(--color-bg-toolbar-pressed); } .basic_form--blackBtnBig--4c9D9 { } .basic_form--greenBtnBig--ytN5- { } .basic_form--greenBtnBigSolidWhenDisabled--7-x1M:disabled { color: var(--color-text-onsuccess); background-color: var(--color-bg-disabled); outline-color: transparent; } .basic_form--secondaryBtnBig--QE5oN { } .basic_form--link--CEgrw { display: flex; align-items: center; height: 32px; background-color: transparent; } .basic_form--inlineLink--aRePo:focus-visible { outline: 1px dashed var(--color-text-brand); outline-offset: 1px; } .basic_form--bigSelect--8-IWR { 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--exQkt { background-color: transparent; } .basic_form--buttonText--exQkt:disabled { color: var(--color-text-disabled); } .basic_form--infoIcon--OB83a { padding: 4px 8px; color: var(--color-text); fill: var(--color-icon); position: absolute; right: 0; } .basic_form--error--awGaP { color: var(--color-text-danger); } } /* "shared/components/badge/badge.css" */ @layer css-modules { .badge--badgeSmall--G-Op9 { box-sizing: border-box; border-radius: 3px; font-weight: 500; height: 16px; margin-right: 8px; -webkit-user-select: none; user-select: none; } .badge--badgeLarge--k54Yt { box-sizing: border-box; border-radius: 4px; font-weight: 500; -webkit-user-select: none; user-select: none; } .badge--badgeExtraLarge--vLECG { line-height: 20px; box-sizing: border-box; border-radius: 4px; font-weight: 500; -webkit-user-select: none; user-select: none; } .badge--badgeInlineBlock--nU0nL { display: inline-block; } .badge--badgeFlex--gckFu { display: flex; flex-direction: row; align-items: center; gap: 4px; } .badge--badgeSmallPadding--sqOIV { padding: 0 5px; } .badge--badgeLargePadding--VR5x1 { padding: 2px 8px; } .badge--badgeExtraLargePadding--pL9mV { padding: 2px 8px; } .badge--subtle--DWYEE { border-width: 1px; border-style: solid; line-height: 14px; } .badge--subtleInvert--Ij3th { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .badge--strongInvert--xzYIu { color: var(--color-text-oninverse); background-color: var(--color-bg-inverse); } .badge--subtleDefault--WMXzC { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .badge--strongTranslucentDefault--jsvzL { color: var(--color-text); background-color: var(--color-bgtransparent-secondary-hover); } .badge--strongTranslucentLight--UgP40 { color: var(--color-text-onbrand); /* stylelint-disable-next-line @fpl/color-semantic-token-spellcheck */ background-color: var(--ramp-white-200); } .badge--strongDefault--5fmGS { color: var(--color-text); background-color: var(--color-bg-secondary); } .badge--strongTertiary--3O0wt { color: var(--color-text); background-color: var(--color-bg-tertiary); } .badge--subtleSuccess--kIGpP { background: transparent; color: var(--color-text-success); border-color: var(--color-border-success); } .badge--strongSuccess--Njygn { color: var(--color-text-onsuccess); background-color: var(--color-bg-success); } .badge--subtleWarning--Vaa-d { background: transparent; color: var(--color-text-warning); border-color: var(--color-border-warning); } .badge--strongWarning--j-IO7 { color: var(--color-text-onwarning); background-color: var(--color-bg-warning); } .badge--subtleWarningTertiary--GGbiH { background: transparent; color: var(--color-text-warning); border-color: var(--color-border-warning); } .badge--strongWarningTertiary--VyqiN { color: var(--color-text); background-color: var(--color-bg-warning-tertiary); } .badge--subtleDanger--YgTRG { background: transparent; color: var(--color-text-danger); border-color: var(--color-border-danger); } .badge--strongDanger--eg8cU { color: var(--color-text-ondanger); background-color: var(--color-bg-danger); } .badge--subtleDesign--KAxJv { background: transparent; color: var(--color-text-design); border-color: var(--color-bg-design-secondary); } .badge--strongDesign--yoEnI { color: var(--color-text-ondesign); background-color: var(--color-bg-design); } .badge--subtleComponent--G4kmj { background: transparent; color: var(--color-text-component); border-color: var(--color-bg-component-secondary); } .badge--strongComponent--xeyHE { color: var(--color-text-oncomponent); background-color: var(--color-bg-component); } .badge--subtleFigjam--UMPyV { background: transparent; color: var(--color-text-figjam); border-color: var(--color-border-figjam); } .badge--strongFigjam--CXhNY { color: var(--color-text-oncomponent); background-color: var(--color-bg-component); } .badge--subtleBrand--XdJGv { 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--AuGjb { color: var(--color-text-onbrand); background-color: var(--color-bg-brand); } .badge--strongInformational--TKyE7 { color: var(--color-text-brand); background-color: var(--color-bg-selected-secondary); } .badge--strongInformational--TKyE7:hover { background-color: var(--color-bg-selected-hover); } .badge--subtleToolbar--FFILh { background: transparent; color: var(--color-text-toolbar); border-color: var(--color-border-toolbar); } .badge--strongToolbar--eJQwg { color: var(--color-text-toolbar); background-color: var(--color-bg-toolbar); } .badge--strongDisabled--w2MoR { color: var(--color-text-secondary); background-color: var(--color-bg-secondary); } .badge--strongLight--cght4 { 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--EzoaC { 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--Brarn svg { display: inline; margin-left: 15px; cursor: pointer; } .badge--toolbarSelected--67mFS { /* 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--8Ti-H:focus-visible { outline: 1px solid var(--color-border-selected); } } /* "shared/components/close_button/close_button.css" */ @layer css-modules { .close_button--closeX--cA6xw { 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--cA6xw:hover { background-color: var(--color-bg-hover); border-radius: 3px; } .close_button--closeX--cA6xw { border: 1px solid transparent; outline: none; } .close_button--closeX--cA6xw:focus-visible { border: 1px solid var(--color-border-selected); outline: 1px solid var(--color-border-selected); outline-offset: -2px; } .close_button--closeX--cA6xw:focus { border: 1px solid var(--color-border-selected); outline: 1px solid var(--color-border-selected); outline-offset: -2px; } .close_button--closeX--cA6xw: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--cA6xw, :where([data-fpl-ui3-override]) .close_button--closeX--cA6xw { 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--cA6xw:focus-visible, :where([data-fpl-ui3-override]) .close_button--closeX--cA6xw:focus-visible { outline-color: var(--color-border-selected); } .close_button--modalUpperRightCorner--yA7zL { position: absolute; right: 15px; top: 14px; } .close_button--smallModal--ClVXp { 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--t0-Zq { display: block; } .cx_flex--uQqQ4 { display: flex; } .cx_grid--WNpsF { display: grid; } .cx_hidden--UzTfh { display: none; } .cx_inline--uCyjj { display: inline; } .cx_inlineBlock--78OOs { display: inline-block; } .cx_inlineFlex--ME9Zo { 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--mBS4Y { 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--JdiCE { align-items: baseline; } .cx_itemsCenter--q5Zbc { align-items: center; } .cx_itemsEnd--WSL2I { align-items: flex-end; } .cx_itemsStart---5j0A { align-items: flex-start; } .cx_itemsStretch--nPffq { 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--RzR0A { align-self: stretch; } .cx_itemSelfCenter--Vca-u { align-self: center; } .cx_itemSelfStart--O0iDz { 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--Z8QAB { 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--8nP9s { justify-content: center; } .cx_justifyEnd--bBAFc { justify-content: flex-end; } .cx_justifyBetween---nfXi { justify-content: space-between; } .cx_justifyStart--G9wpY { 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--t73d9 { flex-direction: column; } .cx_flexColumnReverse---vtP3 { flex-direction: column-reverse; } .cx_flexRow--MkU5a { flex-direction: row; } .cx_flexRowReverse--Gxpo9 { 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--CAiI7 { 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--V4kn5 { flex-grow: 0; } .cx_flexGrow1--tkv-J { 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--KT-92 { flex-shrink: 0; } .cx_flexShrink1--kKX6Z { 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--b420A { flex-wrap: nowrap; } .cx_flexWrap--h1Zjt { 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--iLWvc { flex-basis: 0; } .cx_flexBasisAuto--cLgBp { 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--VK5-P { overflow: auto; } .cx_overflowHidden--cin3y { 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--GvUfk { overflow-wrap: break-word; } .cx_overflowWrapAnywhere--dqNxH { 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--DygL- { 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--nx0fu { 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--r0C3i { 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--jhDwt { opacity: 0; } .cx_opacity0_3--C708r { opacity: 0.3; } .cx_opacity0_5--41Frd { opacity: 0.5; } .cx_opacity1---aobF { 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--c8Br6 { position: absolute; } .cx_fixed--TfRai { position: fixed; } .cx_relative--zQwMt { position: relative; } .cx_sticky--D3Kxc { 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--mRUQ5 { top: 50%; } .cx_topToolbarHeight--TaCfK { top: var(--toolbar-height); } .cx_top0--FQt4c { 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--tosop { 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--EAVel { 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--MTTBW { left: 0; } .cx_leftHalf--QBXa3 { 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--BCAK9 { background-size: contain; } .cx_bgCover---Sv1- { 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--XH3DV { 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--lHmS1 { 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--ps7A4 { 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--UsZvl { background-color: transparent; } .cx_bgNone--1820i { background-color: initial; } .cx_colorBg--qJagP { background-color: var(--color-bg, var(--fallback-color-bg)); } .cx_colorBgAssistive--id3bx { background-color: var(--color-bg-assistive, var(--fallback-color-bg-assistive)); } .cx_colorBgAssistiveHover--TFELW { background-color: var(--color-bg-assistive-hover, var(--fallback-color-bg-assistive-hover)); } .cx_colorBgAssistivePressed--8GTQR { background-color: var(--color-bg-assistive-pressed, var(--fallback-color-bg-assistive-pressed)); } .cx_colorBgAssistiveSecondary--y5eFd { background-color: var(--color-bg-assistive-secondary, var(--fallback-color-bg-assistive-secondary)); } .cx_colorBgAssistiveTertiary--lA6-p { background-color: var(--color-bg-assistive-tertiary, var(--fallback-color-bg-assistive-tertiary)); } .cx_colorBgBrand--7qSjW { background-color: var(--color-bg-brand, var(--fallback-color-bg-brand)); } .cx_colorBgBrandHover--e19pJ { background-color: var(--color-bg-brand-hover, var(--fallback-color-bg-brand-hover)); } .cx_colorBgBrandPressed--vyTAQ { background-color: var(--color-bg-brand-pressed, var(--fallback-color-bg-brand-pressed)); } .cx_colorBgBrandSecondary--cMwN- { background-color: var(--color-bg-brand-secondary, var(--fallback-color-bg-brand-secondary)); } .cx_colorBgBrandTertiary--bUpVD { background-color: var(--color-bg-brand-tertiary, var(--fallback-color-bg-brand-tertiary)); } .cx_colorBgComponent--NAjk- { background-color: var(--color-bg-component, var(--fallback-color-bg-component)); } .cx_colorBgComponentHover--LO9P7 { background-color: var(--color-bg-component-hover, var(--fallback-color-bg-component-hover)); } .cx_colorBgComponentPressed---BsHv { background-color: var(--color-bg-component-pressed, var(--fallback-color-bg-component-pressed)); } .cx_colorBgComponentSecondary--T-9Wk { background-color: var(--color-bg-component-secondary, var(--fallback-color-bg-component-secondary)); } .cx_colorBgComponentTertiary--9-vzA { background-color: var(--color-bg-component-tertiary, var(--fallback-color-bg-component-tertiary)); } .cx_colorBgDanger--Bg8QS { background-color: var(--color-bg-danger, var(--fallback-color-bg-danger)); } .cx_colorBgDangerHover--quuXa { background-color: var(--color-bg-danger-hover, var(--fallback-color-bg-danger-hover)); } .cx_colorBgDangerPressed--NDnZz { background-color: var(--color-bg-danger-pressed, var(--fallback-color-bg-danger-pressed)); } .cx_colorBgDangerSecondary--7jq2e { background-color: var(--color-bg-danger-secondary, var(--fallback-color-bg-danger-secondary)); } .cx_colorBgDangerTertiary--vm5SU { background-color: var(--color-bg-danger-tertiary, var(--fallback-color-bg-danger-tertiary)); } .cx_colorBgDesign--bPiIF { background-color: var(--color-bg-design, var(--fallback-color-bg-design)); } .cx_colorBgDesignHover--sbpoB { background-color: var(--color-bg-design-hover, var(--fallback-color-bg-design-hover)); } .cx_colorBgDesignPressed--5H6M1 { background-color: var(--color-bg-design-pressed, var(--fallback-color-bg-design-pressed)); } .cx_colorBgDesignSecondary--34uDY { background-color: var(--color-bg-design-secondary, var(--fallback-color-bg-design-secondary)); } .cx_colorBgDesignTertiary--k2VqI { background-color: var(--color-bg-design-tertiary, var(--fallback-color-bg-design-tertiary)); } .cx_colorBgDisabled--8CIlr { background-color: var(--color-bg-disabled, var(--fallback-color-bg-disabled)); } .cx_colorBgDisabledSecondary--bgsow { background-color: var(--color-bg-disabled-secondary, var(--fallback-color-bg-disabled-secondary)); } .cx_colorBgFigjam--hTcm1 { background-color: var(--color-bg-figjam, var(--fallback-color-bg-figjam)); } .cx_colorBgFigjamHover--lz1w- { background-color: var(--color-bg-figjam-hover, var(--fallback-color-bg-figjam-hover)); } .cx_colorBgFigjamPressed--yETwG { background-color: var(--color-bg-figjam-pressed, var(--fallback-color-bg-figjam-pressed)); } .cx_colorBgFigjamSecondary--qEOyG { background-color: var(--color-bg-figjam-secondary, var(--fallback-color-bg-figjam-secondary)); } .cx_colorBgFigjamTertiary--eCner { background-color: var(--color-bg-figjam-tertiary, var(--fallback-color-bg-figjam-tertiary)); } .cx_colorBgHover--q2hV5 { background-color: var(--color-bg-hover, var(--fallback-color-bg-hover)); } .cx_colorBgInfo--ecQOp { background-color: var(--color-bg-info, var(--fallback-color-bg-info)); } .cx_colorBgInverse--ygEWs { background-color: var(--color-bg-inverse, var(--fallback-color-bg-inverse)); } .cx_colorBgMenu--zx-Eq { background-color: var(--color-bg-menu, var(--fallback-color-bg-menu)); } .cx_colorBgMenuDisabled--Qe-Kz { background-color: var(--color-bg-menu-disabled, var(--fallback-color-bg-menu-disabled)); } .cx_colorBgMenuHover--r8fVj { background-color: var(--color-bg-menu-hover, var(--fallback-color-bg-menu-hover)); } .cx_colorBgMenuPressed--g1CYl { background-color: var(--color-bg-menu-pressed, var(--fallback-color-bg-menu-pressed)); } .cx_colorBgMenuSecondary--rsFJ4 { background-color: var(--color-bg-menu-secondary, var(--fallback-color-bg-menu-secondary)); } .cx_colorBgMenuSelected--UPGF0 { background-color: var(--color-bg-menu-selected, var(--fallback-color-bg-menu-selected)); } .cx_colorBgMenuSelectedHover--l4nXu { background-color: var(--color-bg-menu-selected-hover, var(--fallback-color-bg-menu-selected-hover)); } .cx_colorBgMenuSelectedPressed--X58Sp { background-color: var(--color-bg-menu-selected-pressed, var(--fallback-color-bg-menu-selected-pressed)); } .cx_colorBgMenuSelectedSecondary--uUbnR { background-color: var(--color-bg-menu-selected-secondary, var(--fallback-color-bg-menu-selected-secondary)); } .cx_colorBgMenuSelectedTertiary--1eK2L { background-color: var(--color-bg-menu-selected-tertiary, var(--fallback-color-bg-menu-selected-tertiary)); } .cx_colorBgMenuTertiary--xi1AS { background-color: var(--color-bg-menu-tertiary, var(--fallback-color-bg-menu-tertiary)); } .cx_colorBgOnselected--m1-t6 { background-color: var(--color-bg-onselected, var(--fallback-color-bg-onselected)); } .cx_colorBgOnselectedHover--T5qub { background-color: var(--color-bg-onselected-hover, var(--fallback-color-bg-onselected-hover)); } .cx_colorBgOnselectedPressed--KkgNI { background-color: var(--color-bg-onselected-pressed, var(--fallback-color-bg-onselected-pressed)); } .cx_colorBgPressed--b3v0S { background-color: var(--color-bg-pressed, var(--fallback-color-bg-pressed)); } .cx_colorBgSecondary--F65iC { background-color: var(--color-bg-secondary, var(--fallback-color-bg-secondary)); } .cx_colorBgSelected--HC4Kg { background-color: var(--color-bg-selected, var(--fallback-color-bg-selected)); } .cx_colorBgSelectedHover--naUWc { background-color: var(--color-bg-selected-hover, var(--fallback-color-bg-selected-hover)); } .cx_colorBgSelectedPressed--v9P8- { background-color: var(--color-bg-selected-pressed, var(--fallback-color-bg-selected-pressed)); } .cx_colorBgSelectedSecondary--wJx-1 { background-color: var(--color-bg-selected-secondary, var(--fallback-color-bg-selected-secondary)); } .cx_colorBgSelectedStrong--xQ44V { background-color: var(--color-bg-selected-strong, var(--fallback-color-bg-selected-strong)); } .cx_colorBgSelectedTertiary--efEzY { background-color: var(--color-bg-selected-tertiary, var(--fallback-color-bg-selected-tertiary)); } .cx_colorBgSuccess--3K4H4 { background-color: var(--color-bg-success, var(--fallback-color-bg-success)); } .cx_colorBgSuccessHover--M2Wfr { background-color: var(--color-bg-success-hover, var(--fallback-color-bg-success-hover)); } .cx_colorBgSuccessPressed--OL18M { background-color: var(--color-bg-success-pressed, var(--fallback-color-bg-success-pressed)); } .cx_colorBgSuccessSecondary--Gd7-q { background-color: var(--color-bg-success-secondary, var(--fallback-color-bg-success-secondary)); } .cx_colorBgSuccessTertiary--cgoCb { background-color: var(--color-bg-success-tertiary, var(--fallback-color-bg-success-tertiary)); } .cx_colorBgTertiary--TZLqq { background-color: var(--color-bg-tertiary, var(--fallback-color-bg-tertiary)); } .cx_colorBgToolbar--RbTPE { background-color: var(--color-bg-toolbar, var(--fallback-color-bg-toolbar)); } .cx_colorBgToolbarDisabled--EtZX0 { background-color: var(--color-bg-toolbar-disabled, var(--fallback-color-bg-toolbar-disabled)); } .cx_colorBgToolbarHover--Awpuu { background-color: var(--color-bg-toolbar-hover, var(--fallback-color-bg-toolbar-hover)); } .cx_colorBgToolbarPressed--A0ROl { background-color: var(--color-bg-toolbar-pressed, var(--fallback-color-bg-toolbar-pressed)); } .cx_colorBgToolbarSecondary--0owD1 { background-color: var(--color-bg-toolbar-secondary, var(--fallback-color-bg-toolbar-secondary)); } .cx_colorBgToolbarSelected--vWLvT { background-color: var(--color-bg-toolbar-selected, var(--fallback-color-bg-toolbar-selected)); } .cx_colorBgToolbarSelectedHover--bb7ys { background-color: var(--color-bg-toolbar-selected-hover, var(--fallback-color-bg-toolbar-selected-hover)); } .cx_colorBgToolbarSelectedPressed--uhp-6 { background-color: var(--color-bg-toolbar-selected-pressed, var(--fallback-color-bg-toolbar-selected-pressed)); } .cx_colorBgToolbarSelectedSecondary--pPTKF { background-color: var(--color-bg-toolbar-selected-secondary, var(--fallback-color-bg-toolbar-selected-secondary)); } .cx_colorBgToolbarSelectedTertiary--74wlh { background-color: var(--color-bg-toolbar-selected-tertiary, var(--fallback-color-bg-toolbar-selected-tertiary)); } .cx_colorBgToolbarTertiary--ACoGr { background-color: var(--color-bg-toolbar-tertiary, var(--fallback-color-bg-toolbar-tertiary)); } .cx_colorBgTooltip--V4smc { background-color: var(--color-bg-tooltip, var(--fallback-color-bg-tooltip)); } .cx_colorBgTooltipDisabled--3DuSB { background-color: var(--color-bg-tooltip-disabled, var(--fallback-color-bg-tooltip-disabled)); } .cx_colorBgTooltipHover--6IVfm { background-color: var(--color-bg-tooltip-hover, var(--fallback-color-bg-tooltip-hover)); } .cx_colorBgTooltipPressed--5Y7ru { background-color: var(--color-bg-tooltip-pressed, var(--fallback-color-bg-tooltip-pressed)); } .cx_colorBgTooltipSecondary--necJY { background-color: var(--color-bg-tooltip-secondary, var(--fallback-color-bg-tooltip-secondary)); } .cx_colorBgTooltipSelected--JN3AN { background-color: var(--color-bg-tooltip-selected, var(--fallback-color-bg-tooltip-selected)); } .cx_colorBgTooltipSelectedHover--Wg0ry { background-color: var(--color-bg-tooltip-selected-hover, var(--fallback-color-bg-tooltip-selected-hover)); } .cx_colorBgTooltipSelectedPressed--ivEpV { background-color: var(--color-bg-tooltip-selected-pressed, var(--fallback-color-bg-tooltip-selected-pressed)); } .cx_colorBgTooltipSelectedSecondary--NPI25 { background-color: var(--color-bg-tooltip-selected-secondary, var(--fallback-color-bg-tooltip-selected-secondary)); } .cx_colorBgTooltipSelectedTertiary--cE9n2 { background-color: var(--color-bg-tooltip-selected-tertiary, var(--fallback-color-bg-tooltip-selected-tertiary)); } .cx_colorBgTooltipTertiary--y5AQa { background-color: var(--color-bg-tooltip-tertiary, var(--fallback-color-bg-tooltip-tertiary)); } .cx_colorBgWarning--Te5oR { background-color: var(--color-bg-warning, var(--fallback-color-bg-warning)); } .cx_colorBgWarningHover---ohY7 { background-color: var(--color-bg-warning-hover, var(--fallback-color-bg-warning-hover)); } .cx_colorBgWarningPressed--JYFk- { background-color: var(--color-bg-warning-pressed, var(--fallback-color-bg-warning-pressed)); } .cx_colorBgWarningSecondary--xcZxC { background-color: var(--color-bg-warning-secondary, var(--fallback-color-bg-warning-secondary)); } .cx_colorBgWarningTertiary--cVXmm { background-color: var(--color-bg-warning-tertiary, var(--fallback-color-bg-warning-tertiary)); } .cx_colorBgvoting--Dpb9o { background-color: var(--color-bgvoting); } .cx_colorBgvotingsecondary--2i-4j { background-color: var(--color-bgvotingsecondary); } .cx_colorBgvotingtertiary--LELMa { background-color: var(--color-bgvotingtertiary); } .cx_colorBgvotingwheelhover--tpMaL { background-color: var(--color-bgvotingwheelhover); } .cx_colorBgvotingwheeldial--sV--w { 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--vB66g { border-color: var(--color-border, var(--fallback-color-border)); } .cx_colorBorderAssistive--GL48G { border-color: var(--color-border-assistive, var(--fallback-color-border-assistive)); } .cx_colorBorderAssistiveStrong--BKmcE { border-color: var(--color-border-assistive-strong, var(--fallback-color-border-assistive-strong)); } .cx_colorBorderBg--2dqAE { border-color: var(--color-bg, var(--fallback-color-bg)); } .cx_colorBorderBrand--J-dx- { border-color: var(--color-border-brand, var(--fallback-color-border-brand)); } .cx_colorBorderBrandStrong--c-58S { border-color: var(--color-border-brand-strong, var(--fallback-color-border-brand-strong)); } .cx_colorBorderComponent--HpPA0 { border-color: var(--color-border-component, var(--fallback-color-border-component)); } .cx_colorBorderComponentStrong--M92k6 { border-color: var(--color-border-component-strong, var(--fallback-color-border-component-strong)); } .cx_colorBorderComponentHover--vX-wV { border-color: var(--color-border-component-hover, var(--fallback-color-border-component-hover)); } .cx_colorBorderDanger--JoEmg { border-color: var(--color-border-danger, var(--fallback-color-border-danger)); } .cx_colorBorderDangerStrong--MdbP6 { border-color: var(--color-border-danger-strong, var(--fallback-color-border-danger-strong)); } .cx_colorBorderDesign--bKMqt { border-color: var(--color-border-design, var(--fallback-color-border-design)); } .cx_colorBorderDesignStrong--GvqYG { border-color: var(--color-border-design-strong, var(--fallback-color-border-design-strong)); } .cx_colorBorderDisabled--AS7r1 { border-color: var(--color-border-disabled, var(--fallback-color-border-disabled)); } .cx_colorBorderDisabledStrong--0LRcj { border-color: var(--color-border-disabled-strong, var(--fallback-color-border-disabled-strong)); } .cx_colorBorderFigjam--S148c { border-color: var(--color-border-figjam, var(--fallback-color-border-figjam)); } .cx_colorBorderFigjamStrong--FuEfX { border-color: var(--color-border-figjam-strong, var(--fallback-color-border-figjam-strong)); } .cx_colorBorderMenu--cbIZ4 { border-color: var(--color-border-menu, var(--fallback-color-border-menu)); } .cx_colorBorderMenuDisabled--K42p7 { border-color: var(--color-border-menu-disabled, var(--fallback-color-border-menu-disabled)); } .cx_colorBorderMenuDisabledStrong--lC6VQ { border-color: var(--color-border-menu-disabled-strong, var(--fallback-color-border-menu-disabled-strong)); } .cx_colorBorderMenuOnselected--uLbem { border-color: var(--color-border-menu-onselected, var(--fallback-color-border-menu-onselected)); } .cx_colorBorderMenuOnselectedStrong--SzKpU { border-color: var(--color-border-menu-onselected-strong, var(--fallback-color-border-menu-onselected-strong)); } .cx_colorBorderMenuSelected--XjBHh { border-color: var(--color-border-menu-selected, var(--fallback-color-border-menu-selected)); } .cx_colorBorderMenuSelectedStrong--MqWd8 { border-color: var(--color-border-menu-selected-strong, var(--fallback-color-border-menu-selected-strong)); } .cx_colorBorderMenuStrong--8x6kb { border-color: var(--color-border-menu-strong, var(--fallback-color-border-menu-strong)); } .cx_colorBorderOnassistive--aGW8- { border-color: var(--color-border-onassistive, var(--fallback-color-border-onassistive)); } .cx_colorBorderOnassistiveStrong--PLTbc { border-color: var(--color-border-onassistive-strong, var(--fallback-color-border-onassistive-strong)); } .cx_colorBorderOnbrand--WfECn { border-color: var(--color-border-onbrand, var(--fallback-color-border-onbrand)); } .cx_colorBorderOnbrandStrong--8B7VR { border-color: var(--color-border-onbrand-strong, var(--fallback-color-border-onbrand-strong)); } .cx_colorBorderOncomponent--xClAb { border-color: var(--color-border-oncomponent, var(--fallback-color-border-oncomponent)); } .cx_colorBorderOncomponentStrong--ECngg { border-color: var(--color-border-oncomponent-strong, var(--fallback-color-border-oncomponent-strong)); } .cx_colorBorderOndanger--LAoTx { border-color: var(--color-border-ondanger, var(--fallback-color-border-ondanger)); } .cx_colorBorderOndangerStrong--EFXdS { border-color: var(--color-border-ondanger-strong, var(--fallback-color-border-ondanger-strong)); } .cx_colorBorderOndesign--dAjth { border-color: var(--color-border-ondesign, var(--fallback-color-border-ondesign)); } .cx_colorBorderOndesignStrong--PMfCK { border-color: var(--color-border-ondesign-strong, var(--fallback-color-border-ondesign-strong)); } .cx_colorBorderOnfigjam--lJ3QM { border-color: var(--color-border-onfigjam, var(--fallback-color-border-onfigjam)); } .cx_colorBorderOnfigjamStrong--sQ8Mm { border-color: var(--color-border-onfigjam-strong, var(--fallback-color-border-onfigjam-strong)); } .cx_colorBorderOnselected--0kvLC { border-color: var(--color-border-onselected, var(--fallback-color-border-onselected)); } .cx_colorBorderOnselectedStrong--HvOTT { border-color: var(--color-border-onselected-strong, var(--fallback-color-border-onselected-strong)); } .cx_colorBorderOnsuccess--pVSu3 { border-color: var(--color-border-onsuccess, var(--fallback-color-border-onsuccess)); } .cx_colorBorderOnsuccessStrong--Da-CP { border-color: var(--color-border-onsuccess-strong, var(--fallback-color-border-onsuccess-strong)); } .cx_colorBorderOnwarning--2FqWl { border-color: var(--color-border-onwarning, var(--fallback-color-border-onwarning)); } .cx_colorBorderOnwarningStrong--LoI1E { border-color: var(--color-border-onwarning-strong, var(--fallback-color-border-onwarning-strong)); } .cx_colorBorderSelected--W80IY { border-color: var(--color-border-selected, var(--fallback-color-border-selected)); } .cx_colorBorderSelectedStrong--SqBvy { border-color: var(--color-border-selected-strong, var(--fallback-color-border-selected-strong)); } .cx_colorBorderStrong--7YPMZ { border-color: var(--color-border-strong, var(--fallback-color-border-strong)); } .cx_colorBorderSuccess--trIm2 { border-color: var(--color-border-success, var(--fallback-color-border-success)); } .cx_colorBorderSuccessStrong--yHINA { border-color: var(--color-border-success-strong, var(--fallback-color-border-success-strong)); } .cx_colorBorderToolbar--wdiGW { border-color: var(--color-border-toolbar, var(--fallback-color-border-toolbar)); } .cx_colorBorderToolbarDisabled--x2EVb { border-color: var(--color-border-toolbar-disabled, var(--fallback-color-border-toolbar-disabled)); } .cx_colorBorderToolbarOnselected--3MVkf { border-color: var(--color-border-toolbar-onselected, var(--fallback-color-border-toolbar-onselected)); } .cx_colorBorderToolbarSelected--Oav4d { border-color: var(--color-border-toolbar-selected, var(--fallback-color-border-toolbar-selected)); } .cx_colorBorderToolbarSelectedStrong---KUCm { border-color: var(--color-border-toolbar-selected-strong, var(--fallback-color-border-toolbar-selected-strong)); } .cx_colorBorderToolbarStrong--FhTAD { border-color: var(--color-border-toolbar-strong, var(--fallback-color-border-toolbar-strong)); } .cx_colorBorderTooltip--TWUIP { border-color: var(--color-border-tooltip, var(--fallback-color-border-tooltip)); } .cx_colorBorderTooltipDisabled--ScWf5 { border-color: var(--color-border-tooltip-disabled, var(--fallback-color-border-tooltip-disabled)); } .cx_colorBorderTooltipDisabledStrong--fXTMG { border-color: var(--color-border-tooltip-disabled-strong, var(--fallback-color-border-tooltip-disabled-strong)); } .cx_colorBorderTooltipOnselected--UqVOQ { border-color: var(--color-border-tooltip-onselected, var(--fallback-color-border-tooltip-onselected)); } .cx_colorBorderTooltipOnselectedStrong--m-klU { border-color: var(--color-border-tooltip-onselected-strong, var(--fallback-color-border-tooltip-onselected-strong)); } .cx_colorBorderTooltipSelected--kj2rF { border-color: var(--color-border-tooltip-selected, var(--fallback-color-border-tooltip-selected)); } .cx_colorBorderTooltipSelectedStrong--pewrV { border-color: var(--color-border-tooltip-selected-strong, var(--fallback-color-border-tooltip-selected-strong)); } .cx_colorBorderTooltipStrong--RLGLV { border-color: var(--color-border-tooltip-strong, var(--fallback-color-border-tooltip-strong)); } .cx_colorBorderWarning--R6Ewj { border-color: var(--color-border-warning, var(--fallback-color-border-warning)); } .cx_colorBorderWarningStrong--11-bn { 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--e8a2- { 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--Wwtnz { border-radius: 2px; } .cx_bRadiusFull--EH7Gb { border-radius: 100%; } .cx_bRadius1--XM4WO { border-radius: 1px; } .cx_bRadius2--ekmrI { border-radius: 2px; } .cx_bRadius3--xyDK0 { border-radius: 3px; } .cx_bRadius4--4Dddd { border-radius: 4px; } .cx_bRadiusHalf--rQ5Uy { border-radius: 50%; } .cx_bRadius5--TjaOW { border-radius: 5px; } .cx_bRadius6--RBwae { border-radius: 6px; } .cx_bRadius7--tp1jY { border-radius: 7px; } .cx_bRadius8--ZRbIo { border-radius: 8px; } .cx_radiusFull--DWXrB { border-radius: var(--radius-full, 9999px); } .cx_radiusLarge--M72CS { border-radius: var(--radius-large, 0.8125rem); } .cx_radiusMedium--B5TtC { border-radius: var(--radius-medium, 0.3125rem); } .cx_radiusSmall--C2Pa- { border-radius: var(--radius-small, 0.125rem); } .cx_radiusNone--qLqrW { 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--XPHEi { border-top-width: 0; } .cx_bt1--oF0a6 { border-top-width: 1px; } .cx_bt2--9Tz-g { 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--I9F9t { border-right-width: 0; } .cx_br1--uzw9B { border-right-width: 1px; } .cx_br2--WItsQ { 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--Yi35q { border-bottom-width: 0; } .cx_bb1--wLmz2 { border-bottom-width: 1px; } .cx_bb2--zdnFC { 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--HTzg- { border-left-width: 0; } .cx_bl1--DBbCD { border-left-width: 1px; } .cx_bl2--tQk74 { 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--HcNu0 { fill: var(--color-icon, var(--fallback-color-icon)); } .cx_colorIconAssistive--Ok7MC { fill: var(--color-icon-assistive, var(--fallback-color-icon-assistive)); } .cx_colorIconAssistivePressed--KjV5c { fill: var(--color-icon-assistive-pressed, var(--fallback-color-icon-assistive-pressed)); } .cx_colorIconAssistiveSecondary--mM2ee { fill: var(--color-icon-assistive-secondary, var(--fallback-color-icon-assistive-secondary)); } .cx_colorIconAssistiveTertiary--EIAEs { fill: var(--color-icon-assistive-tertiary, var(--fallback-color-icon-assistive-tertiary)); } .cx_colorIconBrand--FeV2q { fill: var(--color-icon-brand, var(--fallback-color-icon-brand)); } .cx_colorIconBrandPressed--PDW8b { fill: var(--color-icon-brand-pressed, var(--fallback-color-icon-brand-pressed)); } .cx_colorIconBrandSecondary--E-S8x { fill: var(--color-icon-brand-secondary, var(--fallback-color-icon-brand-secondary)); } .cx_colorIconBrandTertiary--qTD3r { fill: var(--color-icon-brand-tertiary, var(--fallback-color-icon-brand-tertiary)); } .cx_colorIconComponent--cDjPg { fill: var(--color-icon-component, var(--fallback-color-icon-component)); } .cx_colorIconComponentPressed--4pQG- { fill: var(--color-icon-component-pressed, var(--fallback-color-icon-component-pressed)); } .cx_colorIconComponentSecondary--DWWPQ { fill: var(--color-icon-component-secondary, var(--fallback-color-icon-component-secondary)); } .cx_colorIconComponentTertiary--fvlCL { fill: var(--color-icon-component-tertiary, var(--fallback-color-icon-component-tertiary)); } .cx_colorIconDanger--9bH5e { fill: var(--color-icon-danger, var(--fallback-color-icon-danger)); } .cx_colorIconDangerHover--sSzdW { fill: var(--color-icon-danger-hover, var(--fallback-color-icon-danger-hover)); } .cx_colorIconDangerPressed--fozBh { fill: var(--color-icon-danger-pressed, var(--fallback-color-icon-danger-pressed)); } .cx_colorIconDangerSecondary--TD7FY { fill: var(--color-icon-danger-secondary, var(--fallback-color-icon-danger-secondary)); } .cx_colorIconDangerSecondaryHover--BwvWO { fill: var(--color-icon-danger-secondary-hover, var(--fallback-color-icon-danger-secondary-hover)); } .cx_colorIconDangerTertiary--oXm3v { fill: var(--color-icon-danger-tertiary, var(--fallback-color-icon-danger-tertiary)); } .cx_colorIconDesign--1vzxP { fill: var(--color-icon-design, var(--fallback-color-icon-design)); } .cx_colorIconDesignPressed--adswo { fill: var(--color-icon-design-pressed, var(--fallback-color-icon-design-pressed)); } .cx_colorIconDesignSecondary--g0ovZ { fill: var(--color-icon-design-secondary, var(--fallback-color-icon-design-secondary)); } .cx_colorIconDesignTertiary--2lTnz { fill: var(--color-icon-design-tertiary, var(--fallback-color-icon-design-tertiary)); } .cx_colorIconDisabled--smnqn { fill: var(--color-icon-disabled, var(--fallback-color-icon-disabled)); } .cx_colorIconFigjam--PuwcU { fill: var(--color-icon-figjam, var(--fallback-color-icon-figjam)); } .cx_colorIconFigjamPressed--540Co { fill: var(--color-icon-figjam-pressed, var(--fallback-color-icon-figjam-pressed)); } .cx_colorIconFigjamSecondary--cfEjL { fill: var(--color-icon-figjam-secondary, var(--fallback-color-icon-figjam-secondary)); } .cx_colorIconFigjamTertiary--wOSmv { fill: var(--color-icon-figjam-tertiary, var(--fallback-color-icon-figjam-tertiary)); } .cx_colorIconHover--1qkst { fill: var(--color-icon-hover, var(--fallback-color-icon-hover)); } .cx_colorIconMenu--wEB2B { fill: var(--color-icon-menu, var(--fallback-color-icon-menu)); } .cx_colorIconMenuDanger--nqeM0 { fill: var(--color-icon-menu-danger, var(--fallback-color-icon-menu-danger)); } .cx_colorIconMenuDisabled--aY2YL { fill: var(--color-icon-menu-disabled, var(--fallback-color-icon-menu-disabled)); } .cx_colorIconMenuHover--I9o9b { fill: var(--color-icon-menu-hover, var(--fallback-color-icon-menu-hover)); } .cx_colorIconMenuOndisabled--ShFfY { fill: var(--color-icon-menu-ondisabled, var(--fallback-color-icon-menu-ondisabled)); } .cx_colorIconMenuOnselected--FTj1j { fill: var(--color-icon-menu-onselected, var(--fallback-color-icon-menu-onselected)); } .cx_colorIconMenuPressed--K3XkZ { fill: var(--color-icon-menu-pressed, var(--fallback-color-icon-menu-pressed)); } .cx_colorIconMenuSecondary--n1O9V { fill: var(--color-icon-menu-secondary, var(--fallback-color-icon-menu-secondary)); } .cx_colorIconMenuSecondaryHover--rm9-o { fill: var(--color-icon-menu-secondary-hover, var(--fallback-color-icon-menu-secondary-hover)); } .cx_colorIconMenuSelected--Hfa4n { fill: var(--color-icon-menu-selected, var(--fallback-color-icon-menu-selected)); } .cx_colorIconMenuSelectedSecondary--T2B-J { fill: var(--color-icon-menu-selected-secondary, var(--fallback-color-icon-menu-selected-secondary)); } .cx_colorIconMenuSelectedTertiary--3XoyU { fill: var(--color-icon-menu-selected-tertiary, var(--fallback-color-icon-menu-selected-tertiary)); } .cx_colorIconMenuTertiary---WKoh { fill: var(--color-icon-menu-tertiary, var(--fallback-color-icon-menu-tertiary)); } .cx_colorIconMenuTertiaryHover--wg0OL { fill: var(--color-icon-menu-tertiary-hover, var(--fallback-color-icon-menu-tertiary-hover)); } .cx_colorIconMenuWarning--maRB8 { fill: var(--color-icon-menu-warning, var(--fallback-color-icon-menu-warning)); } .cx_colorIconOnassistive--Az1Hw { fill: var(--color-icon-onassistive, var(--fallback-color-icon-onassistive)); } .cx_colorIconOnassistiveSecondary--1pLMn { fill: var(--color-icon-onassistive-secondary, var(--fallback-color-icon-onassistive-secondary)); } .cx_colorIconOnassistiveTertiary--UnpnD { fill: var(--color-icon-onassistive-tertiary, var(--fallback-color-icon-onassistive-tertiary)); } .cx_colorIconOnbrand--Wr0zN { fill: var(--color-icon-onbrand, var(--fallback-color-icon-onbrand)); } .cx_colorIconOnbrandSecondary--fyRib { fill: var(--color-icon-onbrand-secondary, var(--fallback-color-icon-onbrand-secondary)); } .cx_colorIconOnbrandTertiary--MZTUe { fill: var(--color-icon-onbrand-tertiary, var(--fallback-color-icon-onbrand-tertiary)); } .cx_colorIconOncomponent--Srixm { fill: var(--color-icon-oncomponent, var(--fallback-color-icon-oncomponent)); } .cx_colorIconOncomponentSecondary--bleYl { fill: var(--color-icon-oncomponent-secondary, var(--fallback-color-icon-oncomponent-secondary)); } .cx_colorIconOncomponentTertiary--w8XCJ { fill: var(--color-icon-oncomponent-tertiary, var(--fallback-color-icon-oncomponent-tertiary)); } .cx_colorIconOndanger--zfuLJ { fill: var(--color-icon-ondanger, var(--fallback-color-icon-ondanger)); } .cx_colorIconOndangerSecondary--1sFLb { fill: var(--color-icon-ondanger-secondary, var(--fallback-color-icon-ondanger-secondary)); } .cx_colorIconOndangerTertiary--WmaqR { fill: var(--color-icon-ondanger-tertiary, var(--fallback-color-icon-ondanger-tertiary)); } .cx_colorIconOndesign--621M5 { fill: var(--color-icon-ondesign, var(--fallback-color-icon-ondesign)); } .cx_colorIconOndesignSecondary--DjkRj { fill: var(--color-icon-ondesign-secondary, var(--fallback-color-icon-ondesign-secondary)); } .cx_colorIconOndesignTertiary--CK0ZL { fill: var(--color-icon-ondesign-tertiary, var(--fallback-color-icon-ondesign-tertiary)); } .cx_colorIconOndisabled--iOXhn { fill: var(--color-icon-ondisabled, var(--fallback-color-icon-ondisabled)); } .cx_colorIconOnfigjam--OBdgJ { fill: var(--color-icon-onfigjam, var(--fallback-color-icon-onfigjam)); } .cx_colorIconOnfigjamSecondary--x--eW { fill: var(--color-icon-onfigjam-secondary, var(--fallback-color-icon-onfigjam-secondary)); } .cx_colorIconOnfigjamTertiary--sMgpb { fill: var(--color-icon-onfigjam-tertiary, var(--fallback-color-icon-onfigjam-tertiary)); } .cx_colorIconOninverse--KZDTy { fill: var(--color-icon-oninverse, var(--fallback-color-icon-oninverse)); } .cx_colorIconOnselected--8-8u4 { fill: var(--color-icon-onselected, var(--fallback-color-icon-onselected)); } .cx_colorIconOnselectedSecondary--WFHnm { fill: var(--color-icon-onselected-secondary, var(--fallback-color-icon-onselected-secondary)); } .cx_colorIconOnselectedStrong--NkLaQ { fill: var(--color-icon-onselected-strong, var(--fallback-color-icon-onselected-strong)); } .cx_colorIconOnselectedTertiary--re4D7 { fill: var(--color-icon-onselected-tertiary, var(--fallback-color-icon-onselected-tertiary)); } .cx_colorIconOnsuccess--4qrhg { fill: var(--color-icon-onsuccess, var(--fallback-color-icon-onsuccess)); } .cx_colorIconOnsuccessSecondary--eD79w { fill: var(--color-icon-onsuccess-secondary, var(--fallback-color-icon-onsuccess-secondary)); } .cx_colorIconOnsuccessTertiary--R9IPf { fill: var(--color-icon-onsuccess-tertiary, var(--fallback-color-icon-onsuccess-tertiary)); } .cx_colorIconOnwarning--owaMN { fill: var(--color-icon-onwarning, var(--fallback-color-icon-onwarning)); } .cx_colorIconOnwarningSecondary--UOrIu { fill: var(--color-icon-onwarning-secondary, var(--fallback-color-icon-onwarning-secondary)); } .cx_colorIconOnwarningTertiary--uXmVv { fill: var(--color-icon-onwarning-tertiary, var(--fallback-color-icon-onwarning-tertiary)); } .cx_colorIconPressed--O0ZlE { fill: var(--color-icon-pressed, var(--fallback-color-icon-pressed)); } .cx_colorIconSecondary--9nOXC { fill: var(--color-icon-secondary, var(--fallback-color-icon-secondary)); } .cx_colorIconSecondaryHover--d5rkW { fill: var(--color-icon-secondary-hover, var(--fallback-color-icon-secondary-hover)); } .cx_colorIconSelected--yoQyi { fill: var(--color-icon-selected, var(--fallback-color-icon-selected)); } .cx_colorIconSelectedSecondary--3llh2 { fill: var(--color-icon-selected-secondary, var(--fallback-color-icon-selected-secondary)); } .cx_colorIconSelectedTertiary--TNyqB { fill: var(--color-icon-selected-tertiary, var(--fallback-color-icon-selected-tertiary)); } .cx_colorIconSuccess--KDO66 { fill: var(--color-icon-success, var(--fallback-color-icon-success)); } .cx_colorIconSuccessPressed--UoPu6 { fill: var(--color-icon-success-pressed, var(--fallback-color-icon-success-pressed)); } .cx_colorIconSuccessSecondary--e7LjX { fill: var(--color-icon-success-secondary, var(--fallback-color-icon-success-secondary)); } .cx_colorIconSuccessTertiary--mhyQW { fill: var(--color-icon-success-tertiary, var(--fallback-color-icon-success-tertiary)); } .cx_colorIconTertiary--xOSTI { fill: var(--color-icon-tertiary, var(--fallback-color-icon-tertiary)); } .cx_colorIconTertiaryHover--G2Ba3 { fill: var(--color-icon-tertiary-hover, var(--fallback-color-icon-tertiary-hover)); } .cx_colorIconToolbar--SoPA6 { fill: var(--color-icon-toolbar, var(--fallback-color-icon-toolbar)); } .cx_colorIconToolbarDanger--cTYQ- { fill: var(--color-icon-toolbar-danger, var(--fallback-color-icon-toolbar-danger)); } .cx_colorIconToolbarDisabled--WZPJK { fill: var(--color-icon-toolbar-disabled, var(--fallback-color-icon-toolbar-disabled)); } .cx_colorIconToolbarHover--ZaGsc { fill: var(--color-icon-toolbar-hover, var(--fallback-color-icon-toolbar-hover)); } .cx_colorIconToolbarOndisabled--9zRrH { fill: var(--color-icon-toolbar-ondisabled, var(--fallback-color-icon-toolbar-ondisabled)); } .cx_colorIconToolbarOnselected--GwsmB { fill: var(--color-icon-toolbar-onselected, var(--fallback-color-icon-toolbar-onselected)); } .cx_colorIconToolbarPressed--h7WJ- { fill: var(--color-icon-toolbar-pressed, var(--fallback-color-icon-toolbar-pressed)); } .cx_colorIconToolbarSecondary--FgCAj { fill: var(--color-icon-toolbar-secondary, var(--fallback-color-icon-toolbar-secondary)); } .cx_colorIconToolbarSecondaryHover--YqeRn { fill: var(--color-icon-toolbar-secondary-hover, var(--fallback-color-icon-toolbar-secondary-hover)); } .cx_colorIconToolbarSelected--s-LiF { fill: var(--color-icon-toolbar-selected, var(--fallback-color-icon-toolbar-selected)); } .cx_colorIconToolbarSelectedSecondary--HRFKi { fill: var(--color-icon-toolbar-selected-secondary,var(--fallback-color-icon-toolbar-selected-econdary)); } .cx_colorIconToolbarSelectedTertiary--gsZpd { fill: var(--color-icon-toolbar-selected-tertiary, var(--fallback-color-icon-toolbar-selected-tertiary)); } .cx_colorIconToolbarTertiary--1V7m- { fill: var(--color-icon-toolbar-tertiary, var(--fallback-color-icon-toolbar-tertiary)); } .cx_colorIconToolbarTertiaryHover--fv-ym { fill: var(--color-icon-toolbar-tertiary-hover, var(--fallback-color-icon-toolbar-tertiary-hover)); } .cx_colorIconToolbarWarning--NbKqC { fill: var(--color-icon-toolbar-warning, var(--fallback-color-icon-toolbar-warning)); } .cx_colorIconTooltip--QPTgJ { fill: var(--color-icon-tooltip, var(--fallback-color-icon-tooltip)); } .cx_colorIconTooltipDanger--wf-VI { fill: var(--color-icon-tooltip-danger, var(--fallback-color-icon-tooltip-danger)); } .cx_colorIconTooltipDisabled---yae9 { fill: var(--color-icon-tooltip-disabled, var(--fallback-color-icon-tooltip-disabled)); } .cx_colorIconTooltipHover--60Rsp { fill: var(--color-icon-tooltip-hover, var(--fallback-color-icon-tooltip-hover)); } .cx_colorIconTooltipOndisabled--OGAr1 { fill: var(--color-icon-tooltip-ondisabled, var(--fallback-color-icon-tooltip-ondisabled)); } .cx_colorIconTooltipOnselected--IwZyJ { fill: var(--color-icon-tooltip-onselected, var(--fallback-color-icon-tooltip-onselected)); } .cx_colorIconTooltipPressed--ivQ0a { fill: var(--color-icon-tooltip-pressed, var(--fallback-color-icon-tooltip-pressed)); } .cx_colorIconTooltipSecondary--CG77g { fill: var(--color-icon-tooltip-secondary, var(--fallback-color-icon-tooltip-secondary)); } .cx_colorIconTooltipSecondaryHover--WslNE { fill: var(--color-icon-tooltip-secondary-hover, var(--fallback-color-icon-tooltip-secondary-hover)); } .cx_colorIconTooltipSelected--3Z7IV { fill: var(--color-icon-tooltip-selected, var(--fallback-color-icon-tooltip-selected)); } .cx_colorIconTooltipSelectedSecondary--WYFbk { fill: var(--color-icon-tooltip-selected-secondary,var(--fallback-color-icon-tooltip-selected-econdary)); } .cx_colorIconTooltipSelectedTertiary--wYUAS { fill: var(--color-icon-tooltip-selected-tertiary, var(--fallback-color-icon-tooltip-selected-tertiary)); } .cx_colorIconTooltipTertiary--iZlFy { fill: var(--color-icon-tooltip-tertiary, var(--fallback-color-icon-tooltip-tertiary)); } .cx_colorIconTooltipTertiaryHover--tqu7Q { fill: var(--color-icon-tooltip-tertiary-hover, var(--fallback-color-icon-tooltip-tertiary-hover)); } .cx_colorIconTooltipWarning--WSZw6 { fill: var(--color-icon-tooltip-warning, var(--fallback-color-icon-tooltip-warning)); } .cx_colorIconWarning--tfNQd { fill: var(--color-icon-warning, var(--fallback-color-icon-warning)); } .cx_colorIconWarningPressed--o9iwh { fill: var(--color-icon-warning-pressed, var(--fallback-color-icon-warning-pressed)); } .cx_colorIconWarningSecondary--CHw8i { fill: var(--color-icon-warning-secondary, var(--fallback-color-icon-warning-secondary)); } .cx_colorIconWarningTertiary--p7-pd { fill: var(--color-icon-warning-tertiary, var(--fallback-color-icon-warning-tertiary)); } .cx_colorIcononvoting--mvjZl { 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--Io2mX { color: var(--color-text, var(--fallback-color-text)); } .cx_colorTextAssistive---eePM { color: var(--color-text-assistive, var(--fallback-color-text-assistive)); } .cx_colorTextAssistivePressed--sS6Sq { color: var(--color-text-assistive-pressed, var(--fallback-color-text-assistive-pressed)); } .cx_colorTextAssistiveSecondary--c3hXH { color: var(--color-text-assistive-secondary, var(--fallback-color-text-assistive-secondary)); } .cx_colorTextAssistiveTertiary--yzmNa { color: var(--color-text-assistive-tertiary, var(--fallback-color-text-assistive-tertiary)); } .cx_colorTextBrand--egshc { color: var(--color-text-brand, var(--fallback-color-text-brand)); } .cx_colorTextBrandSecondary--PFS0F { color: var(--color-text-brand-secondary, var(--fallback-color-text-brand-secondary)); } .cx_colorTextBrandTertiary--Xj0pJ { color: var(--color-text-brand-tertiary, var(--fallback-color-text-brand-tertiary)); } .cx_colorTextComponent--P2S7u { color: var(--color-text-component, var(--fallback-color-text-component)); } .cx_colorTextComponentPressed--UpzjF { color: var(--color-text-component-pressed, var(--fallback-color-text-component-pressed)); } .cx_colorTextComponentSecondary--LpPWT { color: var(--color-text-component-secondary, var(--fallback-color-text-component-secondary)); } .cx_colorTextComponentTertiary--SPUnw { color: var(--color-text-component-tertiary, var(--fallback-color-text-component-tertiary)); } .cx_colorTextDanger--hmEC1 { color: var(--color-text-danger, var(--fallback-color-text-danger)); } .cx_colorTextDangerSecondary--GKXAk { color: var(--color-text-danger-secondary, var(--fallback-color-text-danger-secondary)); } .cx_colorTextDangerTertiary--2C6SX { color: var(--color-text-danger-tertiary, var(--fallback-color-text-danger-tertiary)); } .cx_colorTextDesign--BTZVT { color: var(--color-text-design, var(--fallback-color-text-design)); } .cx_colorTextDesignPressed--NrIR7 { color: var(--color-text-design-pressed, var(--fallback-color-text-design-pressed)); } .cx_colorTextDesignSecondary--fUA9Y { color: var(--color-text-design-secondary, var(--fallback-color-text-design-secondary)); } .cx_colorTextDesignTertiary--CwXV3 { color: var(--color-text-design-tertiary, var(--fallback-color-text-design-tertiary)); } .cx_colorTextDisabled--Eitsn { color: var(--color-text-disabled, var(--fallback-color-text-disabled)); } .cx_colorTextFigjam--GMEiz { color: var(--color-text-figjam, var(--fallback-color-text-figjam)); } .cx_colorTextFigjamPressed--Ysgoe { color: var(--color-text-figjam-pressed, var(--fallback-color-text-figjam-pressed)); } .cx_colorTextFigjamSecondary--Y5EB6 { color: var(--color-text-figjam-secondary, var(--fallback-color-text-figjam-secondary)); } .cx_colorTextFigjamTertiary--6v9QT { color: var(--color-text-figjam-tertiary, var(--fallback-color-text-figjam-tertiary)); } .cx_colorTextHover--81Piq { color: var(--color-text-hover, var(--fallback-color-text-hover)); } .cx_colorTextMenu--49yF3 { color: var(--color-text-menu, var(--fallback-color-text-menu)); } .cx_colorTextMenuDanger--yS2g- { color: var(--color-text-menu-danger, var(--fallback-color-text-menu-danger)); } .cx_colorTextMenuDisabled--tfPfL { color: var(--color-text-menu-disabled, var(--fallback-color-text-menu-disabled)); } .cx_colorTextMenuHover--Op5Mb { color: var(--color-text-menu-hover, var(--fallback-color-text-menu-hover)); } .cx_colorTextMenuOndisabled--y11f1 { color: var(--color-text-menu-ondisabled, var(--fallback-color-text-menu-ondisabled)); } .cx_colorTextMenuOnselected--uLt8p { color: var(--color-text-menu-onselected, var(--fallback-color-text-menu-onselected)); } .cx_colorTextMenuSecondary--7vMFS { color: var(--color-text-menu-secondary, var(--fallback-color-text-menu-secondary)); } .cx_colorTextMenuSecondaryHover--raWmP { color: var(--color-text-menu-secondary-hover, var(--fallback-color-text-menu-secondary-hover)); } .cx_colorTextMenuSelected--OTqSa { color: var(--color-text-menu-selected, var(--fallback-color-text-menu-selected)); } .cx_colorTextMenuSelectedSecondary--w1XRe { color: var(--color-text-menu-selected-secondary, var(--fallback-color-text-menu-selected-secondary)); } .cx_colorTextMenuSelectedTertiary--KgsL2 { color: var(--color-text-menu-selected-tertiary, var(--fallback-color-text-menu-selected-tertiary)); } .cx_colorTextMenuTertiary--FIgAN { color: var(--color-text-menu-tertiary, var(--fallback-color-text-menu-tertiary)); } .cx_colorTextMenuTertiaryHover--jbQbK { color: var(--color-text-menu-tertiary-hover, var(--fallback-color-text-menu-tertiary-hover)); } .cx_colorTextMenuWarning--60U8v { color: var(--color-text-menu-warning, var(--fallback-color-text-menu-warning)); } .cx_colorTextOnassistive--nmn03 { color: var(--color-text-onassistive, var(--fallback-color-text-onassistive)); } .cx_colorTextOnassistiveSecondary--BWRNi { color: var(--color-text-onassistive-secondary, var(--fallback-color-text-onassistive-secondary)); } .cx_colorTextOnassistiveTertiary--YBJJA { color: var(--color-text-onassistive-tertiary, var(--fallback-color-text-onassistive-tertiary)); } .cx_colorTextOnbrand--9yynN { color: var(--color-text-onbrand, var(--fallback-color-text-onbrand)); } .cx_colorTextOnbrandSecondary--mAaVe { color: var(--color-text-onbrand-secondary, var(--fallback-color-text-onbrand-secondary)); } .cx_colorTextOnbrandTertiary--NwrI8 { color: var(--color-text-onbrand-tertiary, var(--fallback-color-text-onbrand-tertiary)); } .cx_colorTextOncomponent--RMB5n { color: var(--color-text-oncomponent, var(--fallback-color-text-oncomponent)); } .cx_colorTextOncomponentSecondary--VqPKS { color: var(--color-text-oncomponent-secondary, var(--fallback-color-text-oncomponent-secondary)); } .cx_colorTextOncomponentTertiary--jyF7q { color: var(--color-text-oncomponent-tertiary, var(--fallback-color-text-oncomponent-tertiary)); } .cx_colorTextOndanger--cqE3v { color: var(--color-text-ondanger, var(--fallback-color-text-ondanger)); } .cx_colorTextOndangerSecondary--vUtcD { color: var(--color-text-ondanger-secondary, var(--fallback-color-text-ondanger-secondary)); } .cx_colorTextOndangerTertiary--GBycA { color: var(--color-text-ondanger-tertiary, var(--fallback-color-text-ondanger-tertiary)); } .cx_colorTextOndesign--S9r4s { color: var(--color-text-ondesign, var(--fallback-color-text-ondesign)); } .cx_colorTextOndesignSecondary--hroi2 { color: var(--color-text-ondesign-secondary, var(--fallback-color-text-ondesign-secondary)); } .cx_colorTextOndesignTertiary--8ON6J { color: var(--color-text-ondesign-tertiary, var(--fallback-color-text-ondesign-tertiary)); } .cx_colorTextOndisabled--8t-5z { color: var(--color-text-ondisabled, var(--fallback-color-text-ondisabled)); } .cx_colorTextOnfigjam--9aBkx { color: var(--color-text-onfigjam, var(--fallback-color-text-onfigjam)); } .cx_colorTextOnfigjamSecondary--iA2r2 { color: var(--color-text-onfigjam-secondary, var(--fallback-color-text-onfigjam-secondary)); } .cx_colorTextOnfigjamTertiary--SyJ0d { color: var(--color-text-onfigjam-tertiary, var(--fallback-color-text-onfigjam-tertiary)); } .cx_colorTextOninverse--rFYRk { color: var(--color-text-oninverse, var(--fallback-color-text-oninverse)); } .cx_colorTextOnselected--tMt3m { color: var(--color-text-onselected, var(--fallback-color-text-onselected)); } .cx_colorTextOnselectedSecondary--Ge7rJ { color: var(--color-text-onselected-secondary, var(--fallback-color-text-onselected-secondary)); } .cx_colorTextOnselectedStrong--7r--S { color: var(--color-text-onselected-strong, var(--fallback-color-text-onselected-strong)); } .cx_colorTextOnselectedTertiary--xq61N { color: var(--color-text-onselected-tertiary, var(--fallback-color-text-onselected-tertiary)); } .cx_colorTextOnsuccess--AfdNq { color: var(--color-text-onsuccess, var(--fallback-color-text-onsuccess)); } .cx_colorTextOnsuccessSecondary--SPPJT { color: var(--color-text-onsuccess-secondary, var(--fallback-color-text-onsuccess-secondary)); } .cx_colorTextOnsuccessTertiary--QqmMx { color: var(--color-text-onsuccess-tertiary, var(--fallback-color-text-onsuccess-tertiary)); } .cx_colorTextOnwarning---XtfR { color: var(--color-text-onwarning, var(--fallback-color-text-onwarning)); } .cx_colorTextOnwarningSecondary--QvO6l { color: var(--color-text-onwarning-secondary, var(--fallback-color-text-onwarning-secondary)); } .cx_colorTextOnwarningTertiary---IYHH { color: var(--color-text-onwarning-tertiary, var(--fallback-color-text-onwarning-tertiary)); } .cx_colorTextSecondary--vUiad { color: var(--color-text-secondary, var(--fallback-color-text-secondary)); } .cx_colorTextSecondaryHover--tsUnw { color: var(--color-text-secondary-hover, var(--fallback-color-text-secondary-hover)); } .cx_colorTextSelected--oCBhB { color: var(--color-text-selected, var(--fallback-color-text-selected)); } .cx_colorTextSelectedSecondary--eTtFL { color: var(--color-text-selected-secondary, var(--fallback-color-text-selected-secondary)); } .cx_colorTextSelectedTertiary--3-kFW { color: var(--color-text-selected-tertiary, var(--fallback-color-text-selected-tertiary)); } .cx_colorTextSuccess--zJZfl { color: var(--color-text-success, var(--fallback-color-text-success)); } .cx_colorTextSuccessSecondary--Q5F4a { color: var(--color-text-success-secondary, var(--fallback-color-text-success-secondary)); } .cx_colorTextSuccessTertiary--T-xIc { color: var(--color-text-success-tertiary, var(--fallback-color-text-success-tertiary)); } .cx_colorTextTertiary--PyT7a { color: var(--color-text-tertiary, var(--fallback-color-text-tertiary)); } .cx_colorTextTertiaryHover--I4v6p { color: var(--color-text-tertiary-hover, var(--fallback-color-text-tertiary-hover)); } .cx_colorTextToolbar--SC-gz { color: var(--color-text-toolbar, var(--fallback-color-text-toolbar)); } .cx_colorTextToolbarDanger--maSeS { color: var(--color-text-toolbar-danger, var(--fallback-color-text-toolbar-danger)); } .cx_colorTextToolbarDisabled--kliTC { color: var(--color-text-toolbar-disabled, var(--fallback-color-text-toolbar-disabled)); } .cx_colorTextToolbarHover--d7kyH { color: var(--color-text-toolbar-hover, var(--fallback-color-text-toolbar-hover)); } .cx_colorTextToolbarOndisabled--ux4Q6 { color: var(--color-text-toolbar-ondisabled, var(--fallback-color-text-toolbar-ondisabled)); } .cx_colorTextToolbarOnselected---bl-6 { color: var(--color-text-toolbar-onselected, var(--fallback-color-text-toolbar-onselected)); } .cx_colorTextToolbarSecondary--QB57N { color: var(--color-text-toolbar-secondary, var(--fallback-color-text-toolbar-secondary)); } .cx_colorTextToolbarSecondaryHover--See8i { color: var(--color-text-toolbar-secondary-hover, var(--fallback-color-text-toolbar-secondary-hover)); } .cx_colorTextToolbarSelected--PaXZC { color: var(--color-text-toolbar-selected, var(--fallback-color-text-toolbar-selected)); } .cx_colorTextToolbarSelectedSecondary--ylMCB { color: var(--color-text-toolbar-selected-secondary,var(--fallback-color-text-toolbar-selected-econdary)); } .cx_colorTextToolbarSelectedTertiary--BwkFU { color: var(--color-text-toolbar-selected-tertiary, var(--fallback-color-text-toolbar-selected-tertiary)); } .cx_colorTextToolbarTertiary--Y-2Ar { color: var(--color-text-toolbar-tertiary, var(--fallback-color-text-toolbar-tertiary)); } .cx_colorTextToolbarTertiaryHover--TtMUe { color: var(--color-text-toolbar-tertiary-hover, var(--fallback-color-text-toolbar-tertiary-hover)); } .cx_colorTextToolbarWarning--DxUPi { color: var(--color-text-toolbar-warning, var(--fallback-color-text-toolbar-warning)); } .cx_colorTextTooltip---rGcH { color: var(--color-text-tooltip, var(--fallback-color-text-tooltip)); } .cx_colorTextTooltipDanger--yFqHe { color: var(--color-text-tooltip-danger, var(--fallback-color-text-tooltip-danger)); } .cx_colorTextTooltipDisabled--rMTQW { color: var(--color-text-tooltip-disabled, var(--fallback-color-text-tooltip-disabled)); } .cx_colorTextTooltipHover---hqmL { color: var(--color-text-tooltip-hover, var(--fallback-color-text-tooltip-hover)); } .cx_colorTextTooltipOndisabled--NSNzZ { color: var(--color-text-tooltip-ondisabled, var(--fallback-color-text-tooltip-ondisabled)); } .cx_colorTextTooltipOnselected--vT-Xy { color: var(--color-text-tooltip-onselected, var(--fallback-color-text-tooltip-onselected)); } .cx_colorTextTooltipSecondary--ylzT3 { color: var(--color-text-tooltip-secondary, var(--fallback-color-text-tooltip-secondary)); } .cx_colorTextTooltipSecondaryHover--PlawX { color: var(--color-text-tooltip-secondary-hover, var(--fallback-color-text-tooltip-secondary-hover)); } .cx_colorTextTooltipSelected--pQA5W { color: var(--color-text-tooltip-selected, var(--fallback-color-text-tooltip-selected)); } .cx_colorTextTooltipSelectedSecondary--iBniu { color: var(--color-text-tooltip-selected-secondary,var(--fallback-color-text-tooltip-selected-econdary)); } .cx_colorTextTooltipSelectedTertiary--tHaa2 { color: var(--color-text-tooltip-selected-tertiary, var(--fallback-color-text-tooltip-selected-tertiary)); } .cx_colorTextTooltipTertiary--DhJn1 { color: var(--color-text-tooltip-tertiary, var(--fallback-color-text-tooltip-tertiary)); } .cx_colorTextTooltipTertiaryHover--JWpoH { color: var(--color-text-tooltip-tertiary-hover, var(--fallback-color-text-tooltip-tertiary-hover)); } .cx_colorTextTooltipWarning--d8zzc { color: var(--color-text-tooltip-warning, var(--fallback-color-text-tooltip-warning)); } .cx_colorTextWarning--FwtNG { color: var(--color-text-warning, var(--fallback-color-text-warning)); } .cx_colorTextWarningSecondary--uFUi8 { color: var(--color-text-warning-secondary, var(--fallback-color-text-warning-secondary)); } .cx_colorTextWarningTertiary--bATKC { color: var(--color-text-warning-tertiary, var(--fallback-color-text-warning-tertiary)); } .cx_colorTextonvoting--RTnd- { color: var(--color-textonvoting); } .cx_textInherit--hFVz7 { 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--u-h7m { font-family: var(--font-family-default); } .cx_fontUi--vhJCN { font-family: var(--font-family-default); } .cx_fontWhyte--6ynIh { font-family: var(--font-family-display); } .cx_fpl__textDisplayFontFamily--5xoMq { font-family: var(--text-display-font-family); } .cx_fpl__textHeadingLargeFontFamily--ANGyw { font-family: var(--text-heading-large-font-family); } .cx_fpl__textHeadingMediumFontFamily--mFBdb { font-family: var(--text-heading-medium-font-family); } .cx_fpl__textHeadingSmallFontFamily--BF2Pp { font-family: var(--text-heading-small-font-family); } .cx_fpl__textBodyLargeFontFamily--0-Wvs { font-family: var(--text-body-large-font-family); } .cx_fpl__textBodyLargeStrongFontFamily---oGx5 { font-family: var(--text-body-large-strong-font-family); } .cx_fpl__textBodyMediumFontFamily--XFRBH { font-family: var(--text-body-medium-font-family); } .cx_fpl__textBodyMediumStrongFontFamily--QzqPZ { font-family: var(--text-body-medium-strong-font-family); } .cx_fpl__textBodySmallFontFamily--NLcKN { font-family: var(--text-body-small-font-family); } .cx_fpl__textBodySmallStrongFontFamily--R8W-K { 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--xzrxr { font-size: 11px; } .cx_font12--qzyxF { font-size: 12px; } .cx_font13--W005d { font-size: 13px; } .cx_font14--JnlZz { font-size: 14px; } .cx_font15--wwmXi { font-size: 15px; } .cx_font16--IENBP { font-size: 16px; } .cx_font18--inl3w { font-size: 18px; } .cx_font20--3YMPM { font-size: 20px; } .cx_font22--M4VWI { font-size: 22px; } .cx_font24--XkvG8 { font-size: 24px; } .cx_font32--c4vN2 { font-size: 32px; } .cx_fpl__textDisplayFontSize--4eRBm { font-size: var(--text-display-font-size); } .cx_fpl__textHeadingLargeFontSize--4dIXh { font-size: var(--text-heading-large-font-size); } .cx_fpl__textHeadingMediumFontSize--VReRg { font-size: var(--text-heading-medium-font-size); } .cx_fpl__textHeadingSmallFontSize--xOhqZ { font-size: var(--text-heading-small-font-size); } .cx_fpl__textBodyLargeFontSize--jyyBR { font-size: var(--text-body-large-font-size); } .cx_fpl__textBodyLargeStrongFontSize--IY8mb { font-size: var(--text-body-large-strong-font-size); } .cx_fpl__textBodyMediumFontSize--FzSSO { font-size: var(--text-body-medium-font-size); } .cx_fpl__textBodyMediumStrongFontSize--UuwXr { font-size: var(--text-body-medium-strong-font-size); } .cx_fpl__textBodySmallFontSize--lJAkc { font-size: var(--text-body-small-font-size); } .cx_fpl__textBodySmallStrongFontSize--DWg-m { 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--yAdyM { font-style: italic; } .cx_normal--oLqDK { 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---LCUZ { font-weight: 500; } .cx_fontSemiBold--yntYr { font-weight: 600; } .cx_fontBold--2ryI1 { font-weight: 700; } .cx_fontNormal--5Y6AV { font-weight: 400; } .cx_fpl__textDisplayFontWeight--K80Xh { font-weight: var(--text-display-font-weight); } .cx_fpl__textHeadingLargeFontWeight--fRz0B { font-weight: var(--text-heading-large-font-weight); } .cx_fpl__textHeadingMediumFontWeight--o5OVi { font-weight: var(--text-heading-medium-font-weight); } .cx_fpl__textHeadingSmallFontWeight--CGWeY { font-weight: var(--text-heading-small-font-weight); } .cx_fpl__textBodyLargeFontWeight--6NDca { font-weight: var(--text-body-large-font-weight); } .cx_fpl__textBodyLargeStrongFontWeight--PMN-p { font-weight: var(--text-body-large-strong-font-weight); } .cx_fpl__textBodyMediumFontWeight--2W2ls { font-weight: var(--text-body-medium-font-weight); } .cx_fpl__textBodyMediumStrongFontWeight--5aEWw { font-weight: var(--text-body-medium-strong-font-weight); } .cx_fpl__textBodySmallFontWeight--w8Ikc { font-weight: var(--text-body-small-font-weight); } .cx_fpl__textBodySmallStrongFontWeight--jrqYO { 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--dORkM { letter-spacing: var(--text-display-letter-spacing); } .cx_fpl__textHeadingLargeLetterSpacing--SIi2j { letter-spacing: var(--text-heading-large-letter-spacing); } .cx_fpl__textHeadingMediumLetterSpacing--cTUMo { letter-spacing: var(--text-heading-medium-letter-spacing); } .cx_fpl__textHeadingSmallLetterSpacing--eymKL { letter-spacing: var(--text-heading-small-letter-spacing); } .cx_fpl__textBodyLargeLetterSpacing--1ZzXS { letter-spacing: var(--text-body-large-letter-spacing); } .cx_fpl__textBodyLargeStrongLetterSpacing--F1Ld7 { letter-spacing: var(--text-body-large-strong-letter-spacing); } .cx_fpl__textBodyMediumLetterSpacing---k5I8 { letter-spacing: var(--text-body-medium-letter-spacing); } .cx_fpl__textBodyMediumStrongLetterSpacing--NPk7N { letter-spacing: var(--text-body-medium-strong-letter-spacing); } .cx_fpl__textBodySmallLetterSpacing--BCXmK { letter-spacing: var(--text-body-small-letter-spacing); } .cx_fpl__textBodySmallStrongLetterSpacing--45s9B { letter-spacing: var(--text-body-small-strong-letter-spacing); } .cx_spacingCompact--Hf4pL { letter-spacing: -0.01em; } .cx_spacingWide--pK97b { 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--OnCNU { line-height: var(--text-display-line-height); } .cx_fpl__textHeadingLargeLineHeight--ah-qS { line-height: var(--text-heading-large-line-height); } .cx_fpl__textHeadingMediumLineHeight--lqY-d { line-height: var(--text-heading-medium-line-height); } .cx_fpl__textHeadingSmallLineHeight--O-7V- { line-height: var(--text-heading-small-line-height); } .cx_fpl__textBodyLargeLineHeight--ZSYJK { line-height: var(--text-body-large-line-height); } .cx_fpl__textBodyLargeStrongLineHeight---07M5 { line-height: var(--text-body-large-strong-line-height); } .cx_fpl__textBodyMediumLineHeight--I59cs { line-height: var(--text-body-medium-line-height); } .cx_fpl__textBodyMediumStrongLineHeight--n5NIN { line-height: var(--text-body-medium-strong-line-height); } .cx_fpl__textBodySmallLineHeight--evqlt { line-height: var(--text-body-small-line-height); } .cx_fpl__textBodySmallStrongLineHeight--0LuSg { line-height: var(--text-body-small-strong-line-height); } .cx_lh1_5Lines--AJsbl { line-height: 1.5; } .cx_lhNormal--3W6iG { line-height: normal; } .cx_lh0--5Jxko { line-height: 0px; } .cx_lh1--abgpr { line-height: 1px; } .cx_lh2--JOa-D { line-height: 2px; } .cx_lh4--B0cPQ { line-height: 4px; } .cx_lh6--Py5KC { line-height: 6px; } .cx_lh8--50JNo { line-height: 8px; } .cx_lh10--CNIYA { line-height: 10px; } .cx_lh12--WWcVO { line-height: 12px; } .cx_lh14--x1Vvq { line-height: 14px; } .cx_lh16--6psuG { line-height: 16px; } .cx_lh18--2uwOo { line-height: 18px; } .cx_lh20--U8ApM { line-height: 20px; } .cx_lh24--RRIQ9 { line-height: 24px; } .cx_lh28--b142J { line-height: 28px; } .cx_lh32--6yj08 { line-height: 32px; } .cx_lh36--i68Fx { 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--ms3Rt { text-align: left; } .cx_alignCenter--FRuGU { text-align: center; } .cx_alignRight--Gw-3F { 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--iGlvR { -webkit-text-decoration: none; text-decoration: none; } .cx_underline--pH2Jy { -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--Mg1fM { white-space: nowrap; } .cx_preWrap--2G41j { white-space: pre-wrap; } .cx_pre--NS45l { 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--26jw3 { 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--APem- { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: -1; } .cx_zIndexModal--pvaSb { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 10; } .cx_zIndexSecondaryModal--WO-GV { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 9; } .cx_zIndexTertiaryModal--ksqTf { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 7; } .cx_zIndexTopBar---PFTK { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 3; } .cx_zIndexTemplateModalTeamName--SHKLE { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 2; } .cx_zIndex0--66uTw { /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 0; } .cx_zIndex1--a808n { /* 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--nAZRs { 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--9kbL3 { box-shadow: var(--elevation-100); } .cx_elevation200--OXCss { box-shadow: var(--elevation-200); } .cx_elevation300--UTG1i { box-shadow: var(--elevation-300); } .cx_elevation400--JPTle { box-shadow: var(--elevation-400); } .cx_elevation500--DjQeE { box-shadow: var(--elevation-500); } .cx_shadowNone--5AvaA { 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--pW6l9 { 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--Smhdd { cursor: default; } .cx_cursorPointer--2ZmrW { cursor: pointer; } .cx_cursorText--fTFPE { 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--IZWZZ { float: left; } .cx_floatRight--nF2Gi { 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--eBRyy { pointer-events: all; } .cx_eventsAuto--r7vcc { pointer-events: auto; } .cx_eventsNone--iuF1s { 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--FnAc9 { 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--vJsrd { -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--7QQU9 { vertical-align: middle; } .cx_alignTop--6iDcq { 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--iymi0 { visibility: hidden; } .cx_visible--31McX { 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--KOm8t { height: var(--toolbar-height); } .cx_hAuto--KbK-2 { height: auto; } .cx_hFull--PdZbt { height: 100%; } .cx_hInherit--9EweW { height: inherit; } .cx_hFitContent--3MHxS { height: fit-content; } .cx_h0--yZ02k { height: 0px; } .cx_h1--4M6d9 { height: 1px; } .cx_h2--T-p3- { height: 2px; } .cx_h4--DPWnA { height: 4px; } .cx_h6--VbR1B { height: 6px; } .cx_h8--L-bCB { height: 8px; } .cx_h10--H-C6- { height: 10px; } .cx_h12--o3-nk { height: 12px; } .cx_h14--6lC43 { height: 14px; } .cx_h16--syyK- { height: 16px; } .cx_h18--Yvzs0 { height: 18px; } .cx_h20--4tcrH { height: 20px; } .cx_h24--ljuXe { height: 24px; } .cx_h28---tFbF { height: 28px; } .cx_h32--H-9Lt { height: 32px; } .cx_h36--tgXqn { height: 36px; } .cx_h40--LDfP- { height: 40px; } .cx_h44--lxPs7 { height: 44px; } .cx_h48--OGZ4O { height: 48px; } .cx_h64--pbRmH { height: 64px; } .cx_h100--5xlAf { height: 100px; } .cx_h150--54bu- { height: 150px; } .cx_h200--s7gkN { height: 200px; } .cx_h250--TLnpa { height: 250px; } .cx_h300--3ra6L { height: 300px; } .cx_h350--YhCIM { height: 350px; } .cx_h400--kvtDN { 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--WrIpe { width: 50%; } .cx_wAuto--hE9Px { width: auto; } .cx_wFull--QwHl9 { width: 100%; } .cx_wFitContent--plQER { width: fit-content; } .cx_w0--8D-l9 { width: 0px; } .cx_w1--62P0s { width: 1px; } .cx_w2--BUu-B { width: 2px; } .cx_w4--5uIgo { width: 4px; } .cx_w6--3SwNI { width: 6px; } .cx_w8--Ubty5 { width: 8px; } .cx_w10--vUUY8 { width: 10px; } .cx_w12--1e-94 { width: 12px; } .cx_w14--T6lfh { width: 14px; } .cx_w16--1xFJh { width: 16px; } .cx_w18--GZQ56 { width: 18px; } .cx_w20--1swuS { width: 20px; } .cx_w24--3OmoB { width: 24px; } .cx_w28--YGIDZ { width: 28px; } .cx_w32--JA2wk { width: 32px; } .cx_w36--6dXlz { width: 36px; } .cx_w40--QYupK { width: 40px; } .cx_w44--6ahdO { width: 44px; } .cx_w48--QWjKF { width: 48px; } .cx_w64--PAseh { width: 64px; } .cx_w100--xh36C { width: 100px; } .cx_w150--NvsET { width: 150px; } .cx_w200--48VQJ { width: 200px; } .cx_w250--mVkmS { width: 250px; } .cx_w300--M8ffA { width: 300px; } .cx_w350--3kVCR { width: 350px; } .cx_w400--yMY5x { 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--jupkn { max-width: 100%; } .cx_maxWUnset--UziMH { max-width: unset; } .cx_maxW0---8WrZ { max-width: 0px; } .cx_maxW1--9aaIX { max-width: 1px; } .cx_maxW2--jai3E { max-width: 2px; } .cx_maxW4--Q9SoC { max-width: 4px; } .cx_maxW6--o786F { max-width: 6px; } .cx_maxW8--iZlB6 { max-width: 8px; } .cx_maxW10--UiylW { max-width: 10px; } .cx_maxW12--qHOaj { max-width: 12px; } .cx_maxW14--XrX0d { max-width: 14px; } .cx_maxW16--ApeB2 { max-width: 16px; } .cx_maxW18--W9H5- { max-width: 18px; } .cx_maxW20--9USia { max-width: 20px; } .cx_maxW24--Rw4T1 { max-width: 24px; } .cx_maxW28--XmAWI { max-width: 28px; } .cx_maxW32--PgvSc { max-width: 32px; } .cx_maxW36---ZmC- { max-width: 36px; } .cx_maxW40--YVQCx { max-width: 40px; } .cx_maxW44--Xc5XX { max-width: 44px; } .cx_maxW48--CMjf4 { max-width: 48px; } .cx_maxW64--tT-3R { max-width: 64px; } .cx_maxW100--jDLHx { max-width: 100px; } .cx_maxW150--DeoHW { max-width: 150px; } .cx_maxW200--ILfbY { max-width: 200px; } .cx_maxW250--OxI8B { max-width: 250px; } .cx_maxW300--wpJeT { max-width: 300px; } .cx_maxW350--SZvTh { max-width: 350px; } .cx_maxW400--qFqgg { 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--ZhwtR { margin-top: auto; } .cx_mt0--8td3b { margin-top: 0px; } .cx_mt1--SZICR { margin-top: 1px; } .cx_mt2--uFDrL { margin-top: 2px; } .cx_mt4--hg3Z7 { margin-top: 4px; } .cx_mt6--UoGgI { margin-top: 6px; } .cx_mt8--lNR8o { margin-top: 8px; } .cx_mt10--seXDg { margin-top: 10px; } .cx_mt12--zjEOo { margin-top: 12px; } .cx_mt14--DUZTp { margin-top: 14px; } .cx_mt16--KsdbN { margin-top: 16px; } .cx_mt18--u35EB { margin-top: 18px; } .cx_mt20--4DEDV { margin-top: 20px; } .cx_mt24--GkeRY { margin-top: 24px; } .cx_mt28--EQEkz { margin-top: 28px; } .cx_mt32--sueMi { margin-top: 32px; } .cx_mt36--f-rVB { 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--782FI { margin-right: auto; } .cx_mr0--aDxf2 { margin-right: 0px; } .cx_mr1--aFNuD { margin-right: 1px; } .cx_mr2--TPOe3 { margin-right: 2px; } .cx_mr4--RBvoe { margin-right: 4px; } .cx_mr6--2dJM7 { margin-right: 6px; } .cx_mr8--8UCON { margin-right: 8px; } .cx_mr10--HJuOx { margin-right: 10px; } .cx_mr12--s77QZ { margin-right: 12px; } .cx_mr14--6yZih { margin-right: 14px; } .cx_mr16--aQ4Kb { margin-right: 16px; } .cx_mr18--dGK3h { margin-right: 18px; } .cx_mr20--yFUpO { margin-right: 20px; } .cx_mr24--fKa4- { margin-right: 24px; } .cx_mr28--H9j4N { margin-right: 28px; } .cx_mr32--dg1qT { margin-right: 32px; } .cx_mr36--Oly4T { 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--KJrg9 { margin-bottom: auto; } .cx_mb0--RCRLy { margin-bottom: 0px; } .cx_mb1--J2-y6 { margin-bottom: 1px; } .cx_mb2--dMmXK { margin-bottom: 2px; } .cx_mb4--pKqX9 { margin-bottom: 4px; } .cx_mb6--t9tAc { margin-bottom: 6px; } .cx_mb8--UZ-26 { margin-bottom: 8px; } .cx_mb10--otwiO { margin-bottom: 10px; } .cx_mb12--mPZhH { margin-bottom: 12px; } .cx_mb14--ePUc4 { margin-bottom: 14px; } .cx_mb16--iW5Vz { margin-bottom: 16px; } .cx_mb18--pplDu { margin-bottom: 18px; } .cx_mb20--mKtFc { margin-bottom: 20px; } .cx_mb24--1B7AJ { margin-bottom: 24px; } .cx_mb28--Y9iue { margin-bottom: 28px; } .cx_mb32--T8urn { margin-bottom: 32px; } .cx_mb36--4PeHJ { 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--dT6q3 { margin-left: auto; } .cx_ml0--WoacA { margin-left: 0px; } .cx_ml1--Ay0aG { margin-left: 1px; } .cx_ml2--nHWa3 { margin-left: 2px; } .cx_ml4--kgcBb { margin-left: 4px; } .cx_ml6--dG7Vn { margin-left: 6px; } .cx_ml8--GhVkN { margin-left: 8px; } .cx_ml10--6SqBX { margin-left: 10px; } .cx_ml12--ZQL9X { margin-left: 12px; } .cx_ml14--4vpI3 { margin-left: 14px; } .cx_ml16--m5R75 { margin-left: 16px; } .cx_ml18--A1IE6 { margin-left: 18px; } .cx_ml20--2kvdG { margin-left: 20px; } .cx_ml24--lHMAf { margin-left: 24px; } .cx_ml28--tSsE2 { margin-left: 28px; } .cx_ml32--S8fwD { margin-left: 32px; } .cx_ml36--XT8xf { 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--v722i { min-height: 100%; } .cx_minH0--3gJvK { min-height: 0px; } .cx_minH1--Xdc0C { min-height: 1px; } .cx_minH2--yQySH { min-height: 2px; } .cx_minH4--oqdlw { min-height: 4px; } .cx_minH6--SeTse { min-height: 6px; } .cx_minH8--23buu { min-height: 8px; } .cx_minH10--9sucm { min-height: 10px; } .cx_minH12--Fn0p2 { min-height: 12px; } .cx_minH14--4dBQL { min-height: 14px; } .cx_minH16--WTK-C { min-height: 16px; } .cx_minH18--ojMp9 { min-height: 18px; } .cx_minH20--Gnc44 { min-height: 20px; } .cx_minH24---E9Ih { min-height: 24px; } .cx_minH28--AcfST { min-height: 28px; } .cx_minH32--yXI9C { min-height: 32px; } .cx_minH36--treM0 { min-height: 36px; } .cx_minH40--tqIc2 { min-height: 40px; } .cx_minH44--xnand { min-height: 44px; } .cx_minH48--5xrnl { min-height: 48px; } .cx_minH64--dScCo { min-height: 64px; } .cx_minH100--frdQP { min-height: 100px; } .cx_minH150--Kfjc- { min-height: 150px; } .cx_minH200--QdjOw { min-height: 200px; } .cx_minH250--vuxy- { min-height: 250px; } .cx_minH300--DLB9k { min-height: 300px; } .cx_minH350--gPwaV { min-height: 350px; } .cx_minH400--k-dFw { 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--CHF7D { max-height: 100%; } .cx_maxH0--5wJB9 { max-height: 0px; } .cx_maxH1--zKtYP { max-height: 1px; } .cx_maxH2--FLXNT { max-height: 2px; } .cx_maxH4--KX6Na { max-height: 4px; } .cx_maxH6--btMCZ { max-height: 6px; } .cx_maxH8--tRsDx { max-height: 8px; } .cx_maxH10--KooMG { max-height: 10px; } .cx_maxH12--3c4CT { max-height: 12px; } .cx_maxH14--XLNl7 { max-height: 14px; } .cx_maxH16--W8wlk { max-height: 16px; } .cx_maxH18--5LnPA { max-height: 18px; } .cx_maxH20--GkH20 { max-height: 20px; } .cx_maxH24--JF8a0 { max-height: 24px; } .cx_maxH28--pQNz5 { max-height: 28px; } .cx_maxH32--PBq2i { max-height: 32px; } .cx_maxH36--CEdFf { max-height: 36px; } .cx_maxH40--GlIo8 { max-height: 40px; } .cx_maxH44--GiGtQ { max-height: 44px; } .cx_maxH48--XWLd7 { max-height: 48px; } .cx_maxH64--5RG3x { max-height: 64px; } .cx_maxH100--DVk5f { max-height: 100px; } .cx_maxH150--mcy59 { max-height: 150px; } .cx_maxH200--LuM-d { max-height: 200px; } .cx_maxH250--L4RYZ { max-height: 250px; } .cx_maxH300--XauES { max-height: 300px; } .cx_maxH350--Iy6JA { max-height: 350px; } .cx_maxH400--SVRyz { 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--RpXYr { min-width: 0px; } .cx_minW1--RkCd1 { min-width: 1px; } .cx_minW2--3klg4 { min-width: 2px; } .cx_minW4--cKmBf { min-width: 4px; } .cx_minW6--uflX0 { min-width: 6px; } .cx_minW8--6Kybx { min-width: 8px; } .cx_minW10--c6uH2 { min-width: 10px; } .cx_minW12--AgBiV { min-width: 12px; } .cx_minW14--UmVez { min-width: 14px; } .cx_minW16--WVgQz { min-width: 16px; } .cx_minW18--UTlrH { min-width: 18px; } .cx_minW20--RHHOC { min-width: 20px; } .cx_minW24--E8CIj { min-width: 24px; } .cx_minW28--j-lwg { min-width: 28px; } .cx_minW32--B4Fma { min-width: 32px; } .cx_minW36--MCDZW { min-width: 36px; } .cx_minW40--t0-NA { min-width: 40px; } .cx_minW44--oQKyd { min-width: 44px; } .cx_minW48--CYYqq { min-width: 48px; } .cx_minW64--z3yrb { min-width: 64px; } .cx_minW100--bb6ax { min-width: 100px; } .cx_minW150--S0qCw { min-width: 150px; } .cx_minW200--4y4Ea { min-width: 200px; } .cx_minW250--lSEUC { min-width: 250px; } .cx_minW300--OFkSH { min-width: 300px; } .cx_minW350--bZjsj { min-width: 350px; } .cx_minW400--9R3I- { 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--GzF-P { gap: 0px; } .cx_gap1--dEvZ6 { gap: 1px; } .cx_gap2--npWFs { gap: 2px; } .cx_gap4--aFadz { gap: 4px; } .cx_gap6--9Zqnz { gap: 6px; } .cx_gap8--C-Tsm { gap: 8px; } .cx_gap10--J-RPP { gap: 10px; } .cx_gap12--0Fs-t { gap: 12px; } .cx_gap14---HuRD { gap: 14px; } .cx_gap16--XB-Pi { gap: 16px; } .cx_gap18--lLRj2 { gap: 18px; } .cx_gap20--JqbpB { gap: 20px; } .cx_gap24--RoRer { gap: 24px; } .cx_gap28--3AF5g { gap: 28px; } .cx_gap32--fC5KL { gap: 32px; } .cx_gap36--iTUKI { 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--R6qhy { row-gap: 0px; } .cx_rowGap1--fb-mT { row-gap: 1px; } .cx_rowGap2--P3Pk8 { row-gap: 2px; } .cx_rowGap4--qeC4d { row-gap: 4px; } .cx_rowGap6---b5Qi { row-gap: 6px; } .cx_rowGap8--SjZeR { row-gap: 8px; } .cx_rowGap10--n-Km2 { row-gap: 10px; } .cx_rowGap12--d0HtC { row-gap: 12px; } .cx_rowGap14--RjCQ5 { row-gap: 14px; } .cx_rowGap16--4QP6z { row-gap: 16px; } .cx_rowGap18--YGt0L { row-gap: 18px; } .cx_rowGap20--DE65Z { row-gap: 20px; } .cx_rowGap24--OyoWa { row-gap: 24px; } .cx_rowGap28--HMjeN { row-gap: 28px; } .cx_rowGap32--dgR3r { row-gap: 32px; } .cx_rowGap36--xoQV5 { 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--JpP4e { column-gap: 0px; } .cx_columnGap1--aSSo- { column-gap: 1px; } .cx_columnGap2--WWSGW { column-gap: 2px; } .cx_columnGap4--qD-Wi { column-gap: 4px; } .cx_columnGap6--95UpG { column-gap: 6px; } .cx_columnGap8--TbC4Q { column-gap: 8px; } .cx_columnGap10--1EIUZ { column-gap: 10px; } .cx_columnGap12--XJDwZ { column-gap: 12px; } .cx_columnGap14--uy2wI { column-gap: 14px; } .cx_columnGap16--sJI-u { column-gap: 16px; } .cx_columnGap18--PfDcy { column-gap: 18px; } .cx_columnGap20--F1-ce { column-gap: 20px; } .cx_columnGap24--znAyY { column-gap: 24px; } .cx_columnGap28--mA4mL { column-gap: 28px; } .cx_columnGap32--Fid9S { column-gap: 32px; } .cx_columnGap36--BcD4N { 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--bK4cW { margin: 0px; } .cx_m1--iWrGc { margin: 1px; } .cx_m2--0uj5d { margin: 2px; } .cx_m4--HHjUh { margin: 4px; } .cx_m6--6-fvv { margin: 6px; } .cx_m8--TdQAQ { margin: 8px; } .cx_m10--4Fpgf { margin: 10px; } .cx_m12--q4sna { margin: 12px; } .cx_m14--BhMRb { margin: 14px; } .cx_m16--Lq9DJ { margin: 16px; } .cx_m18--39dfk { margin: 18px; } .cx_m20--uQf3B { margin: 20px; } .cx_m24--sdJwL { margin: 24px; } .cx_m28--B4o6E { margin: 28px; } .cx_m32---mZ4- { margin: 32px; } .cx_m36--Ow18- { 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--qeg0O { padding: 0px; } .cx_p1--Zh2Eh { padding: 1px; } .cx_p2--zHiFM { padding: 2px; } .cx_p4--dYGB5 { padding: 4px; } .cx_p6--BB41i { padding: 6px; } .cx_p8--ic8Iz { padding: 8px; } .cx_p10--OR-CD { padding: 10px; } .cx_p12--KIL-s { padding: 12px; } .cx_p14--hxtr8 { padding: 14px; } .cx_p16--W1Saz { padding: 16px; } .cx_p18--4435i { padding: 18px; } .cx_p20--qHx63 { padding: 20px; } .cx_p24--Eur0S { padding: 24px; } .cx_p28--pJG2X { padding: 28px; } .cx_p32--mohPA { padding: 32px; } .cx_p36--eQloA { 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--kNiN5 { padding-top: 0px; } .cx_pt1--f9L3Y { padding-top: 1px; } .cx_pt2--It1ZC { padding-top: 2px; } .cx_pt4--PAC3o { padding-top: 4px; } .cx_pt6---oO5J { padding-top: 6px; } .cx_pt8--ssx7T { padding-top: 8px; } .cx_pt10--ybnmn { padding-top: 10px; } .cx_pt12---crjd { padding-top: 12px; } .cx_pt14--qlP3l { padding-top: 14px; } .cx_pt16--1c9yk { padding-top: 16px; } .cx_pt18--0DeTc { padding-top: 18px; } .cx_pt20--X4gYh { padding-top: 20px; } .cx_pt24--Bs2ey { padding-top: 24px; } .cx_pt28--vi6ip { padding-top: 28px; } .cx_pt32--CHgL7 { padding-top: 32px; } .cx_pt36--5SnaG { 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--7ytkE { padding-right: 0px; } .cx_pr1---jFLv { padding-right: 1px; } .cx_pr2--NloEV { padding-right: 2px; } .cx_pr4--uvKcg { padding-right: 4px; } .cx_pr6--8AKWW { padding-right: 6px; } .cx_pr8--c-4zK { padding-right: 8px; } .cx_pr10--0Vd6f { padding-right: 10px; } .cx_pr12--ebn4k { padding-right: 12px; } .cx_pr14--TKoUa { padding-right: 14px; } .cx_pr16--qpAmp { padding-right: 16px; } .cx_pr18--w1ton { padding-right: 18px; } .cx_pr20--VeeNn { padding-right: 20px; } .cx_pr24--ymd2M { padding-right: 24px; } .cx_pr28--B2KvB { padding-right: 28px; } .cx_pr32--V69CJ { padding-right: 32px; } .cx_pr36--bhdXe { 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--vpsYF { padding-bottom: 0px; } .cx_pb1--g07-4 { padding-bottom: 1px; } .cx_pb2--buah- { padding-bottom: 2px; } .cx_pb4--Ydkur { padding-bottom: 4px; } .cx_pb6--pU09t { padding-bottom: 6px; } .cx_pb8--zzUmU { padding-bottom: 8px; } .cx_pb10--sCRSB { padding-bottom: 10px; } .cx_pb12--suO0N { padding-bottom: 12px; } .cx_pb14--i5OoN { padding-bottom: 14px; } .cx_pb16--zVXO1 { padding-bottom: 16px; } .cx_pb18--0sKYZ { padding-bottom: 18px; } .cx_pb20---SB5H { padding-bottom: 20px; } .cx_pb24--aPqK2 { padding-bottom: 24px; } .cx_pb28--xhWa3 { padding-bottom: 28px; } .cx_pb32--BH3rt { padding-bottom: 32px; } .cx_pb36--molEP { 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--S4JYB { padding-left: 0px; } .cx_pl1--TxwwR { padding-left: 1px; } .cx_pl2--H-goi { padding-left: 2px; } .cx_pl4--yBmnA { padding-left: 4px; } .cx_pl6--H10Av { padding-left: 6px; } .cx_pl8--FsMz2 { padding-left: 8px; } .cx_pl10--hscP4 { padding-left: 10px; } .cx_pl12--2iDJo { padding-left: 12px; } .cx_pl14--mgNms { padding-left: 14px; } .cx_pl16--cK7aa { padding-left: 16px; } .cx_pl18--YuCMq { padding-left: 18px; } .cx_pl20--s4bxg { padding-left: 20px; } .cx_pl24--PETrc { padding-left: 24px; } .cx_pl28--ZmM0l { padding-left: 28px; } .cx_pl32--3JK-o { padding-left: 32px; } .cx_pl36--4ZTDy { 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--C6z6e { transform: translateZ(0); transform-origin: 50% 50%; display: inline-flex; align-content: center; justify-content: center; } .loading_spinner--root--C6z6e .svg { animation: loading_spinner--rotate--dDk0g 1s linear infinite; } .loading_spinner--root--C6z6e > img { animation: loading_spinner--rotate--dDk0g 1s linear infinite; } .loading_spinner--sizeSmall--1rYFR { width: 16px; height: 16px; } .loading_spinner--sizeMedium--xm6mm { width: 20px; height: 20px; } .loading_spinner--sizeLarge--Pn1ox { width: 30px; height: 30px; } .loading_spinner--cssBackedSizeSmall--wrLyk:before { width: 16px; height: 16px; border-width: 1px; } .loading_spinner--cssBackedSizeMedium--Y-I-5:before { width: 20px; height: 20px; border-width: 1.5px; } .loading_spinner--cssBackedSizeLarge--7lAIq:before { width: 30px; height: 30px; border-width: 2px; } .loading_spinner--svgContainer--ms5qw { display: flex; justify-content: center; align-content: center; } .loading_spinner--centered--8oYHJ { flex: 1 1 auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .loading_spinner--absoluteCentered--UMi12 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; } @keyframes loading_spinner--rotate--dDk0g { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading_spinner--matchTextColor--diWB0 .svg { fill: currentColor; color: currentColor; } .loading_spinner--matchTextColor--diWB0 path { fill: currentColor; } .loading_spinner--grayColor--xImRr .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--xImRr path { fill: #aaa; /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ } .loading_spinner--blueSpinner--I-F4h { display: flex; width: 30px; height: 30px; } .loading_spinner--blueSpinner--I-F4h .svg { fill: var(--color-text-brand); color: var(--color-text-brand); } .loading_spinner--cssBacked--2azHn::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--dDk0g 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--vU2n1 { margin-left: 12px; } .modal--confirmButton--W8tHl { margin-left: 12px; } .modal--cancelLink--2-Uw1 { } .modal--list--r-sZC { margin-top: 12px; } .modal--blueLink--Mcac6 { } /* use modalFooterButtonGroup with modalFooter to match spacing for fpl Modal.ActionStrip when a third action is available apart from the button group*/ .modal--modalFooterButtonGroup--196Ao { display: flex; gap: 0.75rem; } .modal--modalFooter--o7POZ { 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--QZcDw { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 24px; } .modal--groupedButtonRow--BCDP- { flex-wrap: nowrap; justify-content: space-between; } /* Links */ /* Modals */ .modal--modalShadow--ucS5o { box-shadow: var(--elevation-500-modal-window); } .modal--modalBare--Kg4QV { 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--2VSSd { } .modal--modalContent--UymdX { margin-top: 12px; font-size: 11px; color: var(--color-text-secondary); } .modal--important--yt44N { font-weight: bold; } .modal--title--K3Qki { 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--YhHM- { 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--YhHM-:focus { border: 2px solid var(--color-border-selected); padding: 0 5px; } .modal--tfaQrCode--8DAvB { text-align: center; margin: 20px 0 10px 0; } .modal--error--UzXb4 { margin-top: 12px; color: var(--color-text-danger); } .modal--code--JEq-P { text-align: center; font-weight: bold; font-size: 14px; font-family: monospace; margin: 20px 0 10px 0; } .modal--codes--xSJGc { margin: 24px 0; display: flex; flex-wrap: wrap; justify-content: center; } .modal--codes--xSJGc div { width: 176px; } /* Container class for search inputs, e.g. those used by the members and shared fonts tables */ .modal--searchContainer--NKISf { height: 48px; flex: 0 0 48px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; } .modal--container--e3Nz3 { font-size: 12px; padding: 16px; } /* Memory warning overrides */ .modal--blockQuote--cZA76 { background-color: var(--color-bg-secondary); line-height: 16px; padding: 8px; margin: 16px 0px; } .modal--blockQuoteHeader--uMZP- { display: block; font-weight: 700; } .modal--blockQuoteText--Ppj63 { line-clamp: 6; display: block; font-style: italic; font-weight: 400; } .modal--loadingSpinnerContainer--du34M { display: flex; justify-content: center; align-items: center; } } /* "shared/styles/mixins/plugin.css" */ @layer css-modules { /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ .plugin--pluginIconBase--y3Ro5 { /* 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--y3Ro5::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--y3Ro5 img, .plugin--pluginIconBase--y3Ro5 svg { width: 100%; height: 100%; } } /* "figma_app/views/modal/header_modal/header_modal.css" */ @layer css-modules { .header_modal--modalBackground--yLlup { 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--btf1n { background: transparent; } .header_modal--modalContainer--BSE7u { display: flex; flex-direction: column; gap: 8px; grid-gap: 8px; } .header_modal--bottomSection--gtbZY { 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--gtbZY, :where([data-fpl-ui3-override]) .header_modal--bottomSection--gtbZY { border-radius: var(--radius-large); overflow: hidden; } .header_modal--modal--gn7tf { 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--gn7tf, :where([data-fpl-ui3-override]) .header_modal--modal--gn7tf { border-radius: var(--radius-large); } .header_modal--upperModal--L5YR4 { } .header_modal--modal__scroll--qFkrN { overflow-y: auto; } .header_modal--header--DUPmR { 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--DUPmR, :where([data-fpl-ui3-override]) .header_modal--header--DUPmR { padding-left: var(--spacer-2); 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--xRH3i { /* 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--UisYL { padding-top: 4px; padding-bottom: 4px; /* The where clause allows us to make changes without changing specificity */ } [data-fpl-version='ui3'] .header_modal--headerSmall--UisYL, :where([data-fpl-ui3-override]) .header_modal--headerSmall--UisYL { min-height: 40px; box-sizing: border-box; } .header_modal--headerLarge--OmDMV { padding-top: 8px; padding-bottom: 8px; } .header_modal--headerHidden--zrxNp { display: none; } .header_modal--headerIconImg--pWFwz { 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--pWFwz, :where([data-fpl-ui3-override]) .header_modal--headerIconImg--pWFwz { margin-right: unset; } .header_modal--headerIconSvg---B301 { /* component has extra built in padding. Use negative margins to correct */ /* the spacing between side of the modal and title of the modal. */ margin-right: -8px; margin-left: -4px; } .header_modal--headerModalTitle--5vfIk { 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--5vfIk, :where([data-fpl-ui3-override]) .header_modal--headerModalTitle--5vfIk { padding-left: var(--spacer-2); align-self: center; } .header_modal--headerModalTitleWithoutOverflow---jCBm { white-space: nowrap; } .header_modal--fixedTop--EwnPM { align-items: flex-start; padding-top: 15vh; } .header_modal--fixedTopDynamic--rNI5j { align-items: flex-start; padding-top: 10vh; } .header_modal--fixedCenter--2aybd { align-items: center; } .header_modal--confirmationBody--clJrR { display: flex; flex-direction: column; line-height: 24px; padding: 16px; } .header_modal--confirmationText--5HV-U { font-weight: 400; padding-top: 4px; line-height: 16px; } .header_modal--confirmButtonBox--6PUWn { display: flex; justify-content: flex-end; margin-top: 24px; } .header_modal--confirmationButton--aVGAt { float: right; font-weight: 500; } .header_modal--cancelButton--W-Cj7 { margin-right: 8px; } .header_modal--rightButtonsClassName--0epZ7 { 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--0epZ7, :where([data-fpl-ui3-override]) .header_modal--rightButtonsClassName--0epZ7 { margin-right: var(--spacer-1); } .header_modal--modalBorderRadiusOverride--cpXCo { border-radius: 8px; } } /* "shared/styles/global/inter.css" */ @layer css-modules { @media screen and (min-resolution: 2dppx) { body.feature_flag_fpl_body_selector_for_font_smoothing[data-fpl-version='ui3'] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:not(.feature_flag_fpl_body_selector_for_font_smoothing)[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--CLnSK { 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--lTfb5 { background-color: #0900ff; /* stylelint-disable-next-line @figma/color-no-raw */ color: white; } .error_boundary--rootDebugErrorBoundaryCustomWASM--oEF-v { background-color: #3a6d2f; } .error_boundary--errorBoundaryCenterContent--5WWo0 { margin-top: auto; margin-bottom: auto; align-items: center; display: flex; flex-direction: column; } .error_boundary--errorBoundaryTitle--Q04yA { color: var(--color-text); font-weight: 600; text-align: center; } .error_boundary--errorBoundaryDescription--rig9X { color: var(--color-text); margin-top: 12px; max-width: 450px; text-align: center; } .error_boundary--errorBoundaryErrorId--hrmDU { color: var(--color-text-secondary, rgba(0, 0, 0, 0.3)); font-style: italic; margin-top: 50px; } .error_boundary--errorBoundaryButtonContainer--KNDbc { margin-top: 16px; } .error_boundary--monospaceText--TISfZ { font-size: 24px; font-family: monospace; line-height: 42px; } .error_boundary--header--QZ-vX { align-self: center; } .error_boundary--subheader--Ptc-H { font-size: 16px; } .error_boundary--errorMessage--8y2p4 { margin-top: 24px; } .error_boundary--errorStackLine--D26-K { } } /* "shared/styles/constants/auth_view.css" */ /* "shared/auth/views/auth_view/auth_form/arkose.css" */ @layer css-modules { .arkose--arkoseFrameContainer--itd9r { display: flex; align-items: center; justify-content: center; } .arkose--arkoseFrame--sQFtj { 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--503qN { font-family: 'Figma Sans', sans-serif !important; font-variation-settings: 'wdth' 98; font-optical-sizing: auto; } .auth_brand--figmaMono--Koo8G { font-family: 'Figma Mono', monospace !important; font-optical-sizing: auto; } .auth_brand--text--dp9f7 { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .auth_brand--brandError--XHVZQ { 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--t-odp 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--OcW9Z { } /* interior width: 350px */ .auth_form--modal--0H4Cp { 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--JGV3n { padding: 0 32px; align-items: center; } .auth_form--insert--8kyhM { padding: 0; align-items: center; } .auth_form--headerBase--NaMvg { 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--0s9Fz { font-size: 26px; } @media (max-width: 500px) { .auth_form--longHeader--0s9Fz { font-size: 24px; } } .auth_form--header--j71jN { font-size: 32px; } @media (max-width: 500px) { .auth_form--header--j71jN { font-size: 26px; } } .auth_form--subtitle--bDCBv { 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--FigBM { margin-bottom: 24px; font-size: 16px; color: var(--color-text); text-align: center; } .auth_form--error--Ld3sn { margin-bottom: 16px; margin-top: 16px; color: var(--auth-error-text); font-size: 14px; text-align: center; } .auth_form--topMatter--n1OXo { padding-bottom: 32px; } } /* "shared/auth/views/auth_view/form_inputs/form_inputs.css" */ @layer css-modules { .form_inputs--input--aJLJl { 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--aJLJl::-webkit-input-placeholder { color: var(--color-text-tertiary); } .form_inputs--input--aJLJl:focus { border: 2px solid var(--color-border-selected-strong); padding-left: 12px; } .form_inputs--domainSuggestion--cEL03 { text-align: right; margin: 4px 0 0; font-size: 12px; color: var(--color-text-tertiary); } .form_inputs--link--N2twV { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; } .form_inputs--link--N2twV:hover { -webkit-text-decoration: underline; text-decoration: underline; } .form_inputs--link--N2twV:focus { outline: 2px solid transparent; } .form_inputs--link--N2twV:focus:focus-visible { outline: 2px solid var(--color-border-selected); outline-offset: -2px; } .form_inputs--link--N2twV:focus:focus { outline: 2px solid var(--color-border-selected); outline-offset: -2px; } .form_inputs--link--N2twV:focus:focus:not(:focus-visible) { outline: 2px solid transparent; } .form_inputs--invalidInput--n5zTI { 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--n5zTI:focus, .form_inputs--invalidInput--n5zTI:active, .form_inputs--invalidInput--n5zTI: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--HrOJA { width: 100%; } .auth_view--wideButton--1DF8U { box-sizing: border-box; margin-top: 12px; height: 60px; font-size: 16px; } .auth_view--primaryWideButton--mkt6R { background-color: var(--color-bg-brand); border-color: var(--color-border-brand); } .auth_view--primaryWideButton--mkt6R:hover { background-color: var(--color-bg-brand-hover); } .auth_view--primaryWideButton--mkt6R:focus { box-shadow: 0 0 0 1px var(--color-bg-brand-pressed); } .auth_view--brandButtonBase--yT1mh { 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--K2XZu { 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--K2XZu:hover { background-color: var(--color-bg-inverse); } .auth_view--brandButton--K2XZu:focus { box-shadow: unset; } .auth_view--brandButton--K2XZu:disabled { background-color: var(--color-bg-disabled); cursor: default; } .auth_view--footer--N6AOZ { width: 100%; } .auth_view--footerButtonRow--eayM0 { display: flex; align-items: center; justify-content: center; } .auth_view--centerText--x3Gm1 { text-align: center; } .auth_view--footerText--Sw8Jj { 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--oyO1K { font-family: Apercu, sans-serif; height: 42px; border-radius: 0; } .landing_form--textInput--7Wkry { border-bottom: 1px solid var(--color-border); } .landing_form--hollowButton--eRj-1 { 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--eRj-1:hover { box-shadow: unset; background-color: var(--color-bg); } .landing_form--hollowButton--eRj-1:focus { box-shadow: unset; } .landing_form--autoHeight--mWukb { height: auto; min-height: 48px; max-height: 100px; } .landing_form--loadingIconCentered--FuNgM { 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--Eh4W- { margin-top: 0; } .sign_in_and_up--footer--yqMh1 { } .sign_in_and_up--signInWithPassword--1xo-g { font-size: 14px; font-weight: 500; } .sign_in_and_up--centerText--XMP8- { } .sign_in_and_up--figmaSans--Wdi5M { } .sign_in_and_up--footerRow--gzwj7 { } .sign_in_and_up--switchFormText--c6YBI { color: var(--auth-color-text-cool-gray); } .sign_in_and_up--brandError--pUwhJ { } .sign_in_and_up--orBlock--BD8ed { 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--xqCoU { } .two_factor--center--HHFPc { justify-items: center; } } /* "shared/auth/views/auth_view/join_org/join_org.css" */ @layer css-modules { .join_org--modalText--LzCAr { text-align: left; line-height: 24px; font-size: 16px; } .join_org--modalFooter--YyAz7 { text-align: center; line-height: 24px; font-size: 16px; color: var(--color-text-secondary); } .join_org--link--EketH { text-align: center; line-height: 24px; } } /* "shared/auth/views/auth_view/password_reset/password_reset.css" */ @layer css-modules { .password_reset--modal--ay5FF { 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--6LRAm { padding: 0 32px; } .password_reset--figmaSans--SIa6f { } .password_reset--center--c99Co { font-size: 12px; -webkit-text-decoration: underline; text-decoration: underline; color: var(--color-text-brand); margin: 0px auto; } .password_reset--centeredLink--mGoGe { } .password_reset--header--xCD0t { 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--EwE1l { font-weight: 500; } } /* "figma_app/views/avatar/avatar.css" */ @layer css-modules { .avatar--avatar--gnJ3d { 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--gnJ3d img { width: 100%; } .avatar--circle--llyF0 { overflow: hidden; border-radius: 100%; } .avatar--roundedSquare--UFU9a { border-radius: 2px; } .avatar--square--plBj2 { border-radius: 10%; } .avatar--dim--cV0oL { opacity: 0.5; } .avatar--avatarBellWrapper--QgDn6 { position: relative; } .avatar--bell--4KhUj { 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--mppDJ { display: flex; justify-content: flex-start; align-items: center; width: 100%; box-sizing: border-box; } .avatar--avatarWithHandle--mppDJ .avatar--info--mxggI { margin-left: 8px; position: relative; margin-top: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .avatar--avatarWithHandle--mppDJ .avatar--info--mxggI.avatar--labelHeadingMedium--wwEoQ { margin-left: 16px; } .avatar--avatarWithHandle--mppDJ .avatar--handleRow--OLqbS { display: flex; align-items: center; } .avatar--avatarWithHandle--mppDJ .avatar--handleRow--OLqbS > *:not(:first-child) { margin-left: 4px; } .avatar--avatarWithHandle--mppDJ .avatar--handleRow--OLqbS.avatar--labelHeadingMedium--wwEoQ { 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--mppDJ .avatar--handleRow--OLqbS.avatar--labelHeadingMedium--wwEoQ > *:not(:first-child, .avatar--isMe--EWjoM) { margin-left: 0.5rem; margin-right: 0; } .avatar--avatarWithHandle--mppDJ .avatar--handle--yKUMr { color: var(--color-text); text-overflow: ellipsis; overflow: hidden; } .avatar--avatarWithHandle--mppDJ .avatar--isMe--EWjoM { color: var(--color-text-secondary); margin-left: 4px; } .avatar--avatarWithHandle--mppDJ .avatar--isMe--EWjoM.avatar--labelHeadingMedium--wwEoQ { margin-left: 6px; } .avatar--avatarWithHandle--mppDJ .avatar--email--V8HC6 { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; display: inline-block; max-width: 100%; } .avatar--avatarWithHandle--mppDJ .avatar--emailHover--93Eff { display: inline; } .avatar--avatarWithHandle--mppDJ .avatar--emailHover--93Eff:hover .avatar--email--V8HC6 { color: var(--color-text-secondary-hover); -webkit-text-decoration: underline; text-decoration: underline; max-width: calc(100% - 15px); } .avatar--avatarWithOutwardBorder--0sLBG { 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--6kei3::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--mppDJ .avatar--handle--yKUMr { -webkit-user-select: none; user-select: none; } .avatar--clickableAvatarWithHandle--trf4r:hover .avatar--handle--yKUMr, .avatar--clickableAvatarWithHandle--trf4r:focus .avatar--handle--yKUMr { -webkit-text-decoration: underline; text-decoration: underline; } .avatar--disabledDimAvatarWithHandle--E8-eF .avatar--handle--yKUMr { color: var(--color-text-disabled); } .avatar--multiTeamAvatarContainer--F1Beh { 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--F1Beh > * { /* 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--F1Beh > * { border: 2px solid var(--color-bg); } /* TODO: Migrate to "atomic" tokens, when they're available as CSS variables. */ .avatar--workspaceAvatarBlue--KxmeZ > svg > path:nth-child(1) { fill: #bde3ff !important; } .avatar--workspaceAvatarBlue--KxmeZ > svg > path:nth-child(2) { fill: #0d99ff !important; } .avatar--workspaceAvatarPurple--7bGfk > svg > path:nth-child(1) { fill: #e4ccff !important; } .avatar--workspaceAvatarPurple--7bGfk > svg > path:nth-child(2) { fill: #9747ff !important; } .avatar--workspaceAvatarGreen--B-jG4 > svg > path:nth-child(1) { fill: #aff4c6 !important; } .avatar--workspaceAvatarGreen--B-jG4 > svg > path:nth-child(2) { fill: #14ae5c !important; } .avatar--workspaceAvatarTeal--ssJOQ > svg > path:nth-child(1) { fill: #b6ecf7 !important; } .avatar--workspaceAvatarTeal--ssJOQ > 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--zvO0A { } .app_auth--header--3kKj- { } .app_auth--form--hH3bl { padding: 0 32px; } .app_auth--formWide--JdSf3 { padding-bottom: 30vh; justify-content: center; } .app_auth--innerContainer--JsJYv { display: flex; flex-direction: column; align-items: center; margin: 0 16px; } .app_auth--message--FYJKh { 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--vqW7r { font-size: 16px; text-align: center; margin: 8px 0px; -webkit-user-select: none; user-select: none; color: var(--color-text-secondary); } .app_auth--error--OUTpn { color: var(--color-text-danger); font-size: 11px; text-align: center; } .app_auth--redeemButton--g-3qe { width: 348px; } @media (max-width: 330px) { .app_auth--footerText--3Z3Ce { padding-left: 1rem; } } .app_auth--inlineLinkWithText--nSOQZ { display: inline-flex; } .app_auth--signupLink--iNGvn { margin-left: 4px; } .app_auth--signupLink--iNGvn:hover { -webkit-text-decoration: underline; text-decoration: underline; } .app_auth--appAuthDesktopLink--9Ldkw { color: var(--color-text-brand); cursor: pointer; -webkit-user-select: auto; user-select: auto; font-size: 13px; } .app_auth--appAuthDesktopLink--9Ldkw: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--7q-LG { display: flex; justify-content: center; font-size: 16px; } .validate_code--link--I87wU { display: inline; font-size: 16px !important; cursor: default; } .validate_code--link--I87wU:hover { -webkit-text-decoration: underline; text-decoration: underline; } .validate_code--error--Cq0wT { margin-top: 5px; } .validate_code--header--yXc1V { } .validate_code--description--TcgFC { text-align: center; color: var(--color-text); line-height: 24px; font-weight: 400; font-size: 16px; } .validate_code--figmaSansHeader--WyfOP { font-variation-settings: 'wdth' 96; } } /* "shared/auth/views/auth_view/authentication/validate_email/validate_email.css" */ @layer css-modules { .validate_email--figmaSans--cO5Q- { } .validate_email--link--8Bjhm { color: var(--color-text-brand); display: inline; font-size: 16px !important; cursor: default; } .validate_email--link--8Bjhm:hover { -webkit-text-decoration: underline; text-decoration: underline; } .validate_email--header--SdWf9 { } .validate_email--mobileHeader--adYXn { 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--nXFzg { color: var(--color-text-secondary, rgba(0, 0, 0, 0.5)); } .validate_email--emailSvgIllustration--9wvTV { width: 100%; } .validate_email--emailAddress--sptJW { font-weight: 500; } .validate_email--clickTheLink--Grd5e { font-size: 16px; font-style: normal; font-weight: 320; line-height: 145%; letter-spacing: 0.16px; } .validate_email--resendEmailText--GocfI { font-weight: 320; -webkit-text-decoration: underline; text-decoration: underline; font-size: 16px; color: var(--color-text-brand); } .validate_email--validateEmailTextWithInnerLink--h2fJz a { display: inline; } .validate_email--mobileValidateEmailTextWithInnerLink--GvSFu { font-size: 16px; } .validate_email--mobileValidateEmailTextWithInnerLink--GvSFu 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--g51bp { 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--LCzbw { 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--WkZ9s { 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--bCpFH { align-self: center; grid-area: cb-body; margin-right: 8px; margin-bottom: 16px; } .base_cookie_banner--body--bCpFH b { font-weight: bold; } .base_cookie_banner--actions--jDS-Y { grid-area: cb-actions; align-self: center; display: flex; flex-direction: row; } .base_cookie_banner--actions--jDS-Y > * + * { /* 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--sI5Uw { grid-area: cb-dismiss; align-self: start; line-height: 0; margin: -8px -8px 0 0; } @media (min-width: 700px) { .base_cookie_banner--container--WkZ9s { 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--bCpFH { grid-area: cb-body; margin-right: 16px; margin-bottom: unset; } .base_cookie_banner--actions--jDS-Y { grid-area: cb-actions; align-self: center; margin: 0 8px 0 0; } .base_cookie_banner--dismiss--sI5Uw { grid-area: cb-dismiss; align-self: center; margin: unset; } } .base_cookie_banner--container__community--Q-WK5 { 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--1VpUW { 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--1VpUW { box-shadow: var(--elevation-200-canvas); } .base_cookie_banner--container__fileViewer--1VpUW a { /* This value is correct for both FJ/FD */ color: var(--color-text-brand); } .base_cookie_banner--container__fileViewer--1VpUW .base_cookie_banner--dismissIcon--Cd-Me { fill: var(--color-icon); } .base_cookie_banner--container__prototype--4yDcQ { 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--4yDcQ a { color: var(--color-text-design); } .base_cookie_banner--container__prototype--4yDcQ .base_cookie_banner--dismissIcon--Cd-Me { fill: var(--color-textondarkcanvas); } .base_cookie_banner--container__auth--sdtq0 { position: sticky; /* stylelint-disable-next-line @fpl/no-manual-z-index */ z-index: 30; } .base_cookie_banner--container__authOrCommunity--XGGFD { 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--XGGFD .base_cookie_banner--body--bCpFH { font-size: 12px; font-family: Whyte; } .base_cookie_banner--container__authOrCommunity--XGGFD .base_cookie_banner--dismiss--sI5Uw { margin: -8px 0 0 0; } .base_cookie_banner--container__authOrCommunity--XGGFD .base_cookie_banner--dismissIcon--Cd-Me { fill: var(--color-icon, black); color: var(--color-icon, black); } .base_cookie_banner--container__authOrCommunity--XGGFD .base_cookie_banner--brandButton__small--NKP-b { 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--XGGFD .base_cookie_banner--dismiss--sI5Uw { 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---xrm1 { -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---xrm1 > a { cursor: default; padding: 8px; line-height: 18px; display: block; } .base_cookie_banner--fileViewer__persistentMessage---xrm1 > a:hover { -webkit-text-decoration: underline; text-decoration: underline; } [data-editor-theme='whiteboard'] .base_cookie_banner--fileViewer__persistentMessage---xrm1 { bottom: calc(24px + var(--cookie-banner-persistent-message-bottom-margin)); } .base_cookie_banner--leftPanelCollapsed--SchzW { --left-panel-width: 0px; } .base_cookie_banner--fileViewer__persistentMessage_dark--gdGuu > a { color: var(--color-textondarkcanvassecondary); } .base_cookie_banner--fileViewer__persistentMessage_light--nNfrP > a { color: var(--color-textonlightcanvassecondary); } .base_cookie_banner--community__persistentMessage--VYiM8 { 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--P-ai4 { right: 72px; /* Position to the left of help widget (48px widget + 12px gap) */ } .base_cookie_banner--community__persistentMessage__link--lvBtA { 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--lvBtA button { border: none !important; outline: none !important; } .base_cookie_banner--community__persistentMessage__link--lvBtA:hover .base_cookie_banner--community__persistentMessage__tooltip--FGlO1 { transform: translateY(0); opacity: 1; } .base_cookie_banner--community__persistentMessage__link--lvBtA path { fill: var(--color-text-oninverse, #fff) !important; } .base_cookie_banner--community__persistentMessage__tooltip--FGlO1 { -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--FGlO1: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--UvRku { 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--UvRku a { font-size: 12px; line-height: 18px; color: var(--color-text-secondary, rgba(0, 0, 0, 0.6)); } .base_cookie_banner--auth__persistentMessage--UvRku a:hover { -webkit-text-decoration: underline; text-decoration: underline; } } /* "shared/flash/flash_view.css" */ @layer css-modules { .flash_view--flashes--pcDZK { 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--JLLx- { margin-bottom: 24px; } .flash_view--flash--ibkwH { display: inline-block; min-width: 200; max-width: 500; margin-bottom: 24px; text-align: center; padding: 10px 18px; line-height: 1.5; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* stylelint-disable-line @figma/color-no-raw -- TODO: refactor with semantic token */ transition: top 0.1s ease; pointer-events: initial; font-size: 11px; border-radius: 3px; background-color: var(--color-bg-brand); font-family: Inter, sans-serif; } .flash_view--flash--ibkwH a { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; } .flash_view--flashError--0nafc { background-color: var(--color-bg-danger); } } /* "auth_app/views/auth_app_view.css" */ @layer css-modules { .auth_app_view--brand--RXyIK { background-color: var(--color-bg); } .auth_app_view--authView---vFX8.auth_app_view--brand--RXyIK { display: flex; flex-grow: 1; justify-content: center; padding-top: 15vh; margin: auto; width: 100%; } .auth_app_view--authView---vFX8.auth_app_view--brand--RXyIK.auth_app_view--fullscreen--NQiZv { padding-top: 0; align-items: center; margin-top: -72px; max-width: 422px; } /* Mobile */ @media screen and (max-width: 850px) { .auth_app_view--authView---vFX8.auth_app_view--brand--RXyIK.auth_app_view--fullscreen--NQiZv { padding-top: 24px; align-items: unset; margin-top: unset; } .auth_app_view--authView---vFX8.auth_app_view--brand--RXyIK { padding-top: 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--HIeez { grid-column-start: 1; } .cx_gridColumnStart2--zehau { grid-column-start: 2; } .cx_gridColumnStart3--uSqtE { grid-column-start: 3; } .cx_gridColumnStart4--jWbzA { grid-column-start: 4; } .cx_gridColumnStart5--P7yPp { grid-column-start: 5; } .cx_gridColumnStart6--P9Z76 { grid-column-start: 6; } .cx_gridColumnStart7--wKj3x { grid-column-start: 7; } .cx_gridColumnStart8--5XFRe { grid-column-start: 8; } .cx_gridColumnStart9--gkGl- { grid-column-start: 9; } .cx_gridColumnStart10--LQDG8 { grid-column-start: 10; } .cx_gridColumnStart11--LzLc3 { grid-column-start: 11; } .cx_gridColumnStart12--cRa4x { grid-column-start: 12; } .cx_gridColumnStart13--kV0Nc { grid-column-start: 13; } .cx_gridColumnStart14--Pin6d { grid-column-start: 14; } .cx_gridColumnStart15--Sayfu { grid-column-start: 15; } .cx_gridColumnStart16--SU3x5 { grid-column-start: 16; } .cx_gridColumnStart17--gUeCh { grid-column-start: 17; } .cx_gridColumnStart18---SmgN { grid-column-start: 18; } .cx_gridColumnStart19--FwRc9 { grid-column-start: 19; } .cx_gridColumnStart20--2gAht { grid-column-start: 20; } .cx_gridColumnStart21--PW3x6 { grid-column-start: 21; } .cx_gridColumnStart22--NK--1 { grid-column-start: 22; } .cx_gridColumnStart23--B-PHf { grid-column-start: 23; } .cx_gridColumnStart24--FFJEa { grid-column-start: 24; } .cx_gridColumnStart25--2vxL8 { grid-column-start: 25; } .cx_gridColumnStart26--tNwJS { grid-column-start: 26; } .cx_gridColumnStart27--vKh1a { grid-column-start: 27; } .cx_gridColumnStart28--XmREb { grid-column-start: 28; } .cx_gridColumnStart29--O12gJ { grid-column-start: 29; } .cx_gridColumnStart30--mmhrg { grid-column-start: 30; } .cx_gridColumnStart31--y3D2R { grid-column-start: 31; } .cx_gridColumnStart32--ZNzvS { 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--6Joxm { grid-column-end: 1; } .cx_gridColumnEnd2--nB15T { grid-column-end: 2; } .cx_gridColumnEnd3--wjp5v { grid-column-end: 3; } .cx_gridColumnEnd4--z6EcN { grid-column-end: 4; } .cx_gridColumnEnd5--i1rwI { grid-column-end: 5; } .cx_gridColumnEnd6--Ml5-0 { grid-column-end: 6; } .cx_gridColumnEnd7--FejJ0 { grid-column-end: 7; } .cx_gridColumnEnd8--Y3Qt- { grid-column-end: 8; } .cx_gridColumnEnd9--9RlBS { grid-column-end: 9; } .cx_gridColumnEnd10--w7fW7 { grid-column-end: 10; } .cx_gridColumnEnd11--8Sfuj { grid-column-end: 11; } .cx_gridColumnEnd12---lH-4 { grid-column-end: 12; } .cx_gridColumnEnd13--LTQC7 { grid-column-end: 13; } .cx_gridColumnEnd14--S0UvX { grid-column-end: 14; } .cx_gridColumnEnd15--8hCge { grid-column-end: 15; } .cx_gridColumnEnd16--jJWq9 { grid-column-end: 16; } .cx_gridColumnEnd17--JjHNu { grid-column-end: 17; } .cx_gridColumnEnd18--Iw259 { grid-column-end: 18; } .cx_gridColumnEnd19--nRfhf { grid-column-end: 19; } .cx_gridColumnEnd20--4E6Jk { grid-column-end: 20; } .cx_gridColumnEnd21--htwA4 { grid-column-end: 21; } .cx_gridColumnEnd22--rS93D { grid-column-end: 22; } .cx_gridColumnEnd23--UHDLg { grid-column-end: 23; } .cx_gridColumnEnd24--b2Hjw { grid-column-end: 24; } .cx_gridColumnEnd25--McGLn { grid-column-end: 25; } .cx_gridColumnEnd26--TkwGP { grid-column-end: 26; } .cx_gridColumnEnd27--DAHi8 { grid-column-end: 27; } .cx_gridColumnEnd28--OuIYk { grid-column-end: 28; } .cx_gridColumnEnd29--lNw-4 { grid-column-end: 29; } .cx_gridColumnEnd30--Xl2lW { grid-column-end: 30; } .cx_gridColumnEnd31--mGVna { grid-column-end: 31; } .cx_gridColumnEnd32--bWuar { grid-column-end: 32; } .cx_gridColumnEndSpan1--XKLNm { grid-column-end: span 1; } .cx_gridColumnEndSpan2--WFS9J { grid-column-end: span 2; } .cx_gridColumnEndSpan3--m0wnd { grid-column-end: span 3; } .cx_gridColumnEndSpan4--RDpPe { grid-column-end: span 4; } .cx_gridColumnEndSpan5--BMs8O { grid-column-end: span 5; } .cx_gridColumnEndSpan6--Ub5q0 { grid-column-end: span 6; } .cx_gridColumnEndSpan7--C8iUK { grid-column-end: span 7; } .cx_gridColumnEndSpan8--u9itN { grid-column-end: span 8; } .cx_gridColumnEndSpan9--rhmED { grid-column-end: span 9; } .cx_gridColumnEndSpan10--fI7K8 { 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--I1A8s { grid-row-end: 1; } .cx_gridRowEnd2--ZmAe- { 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--rAD9n { grid-template-columns: repeat(1, 1fr); } .cx_gridTemplateColumns2--yPdkl { grid-template-columns: repeat(2, 1fr); } .cx_gridTemplateColumns3--AK9U7 { grid-template-columns: repeat(3, 1fr); } .cx_gridTemplateColumns4--T4CLZ { grid-template-columns: repeat(4, 1fr); } .cx_gridTemplateColumns5--kkXGj { 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--jjd9g { grid-template-rows: repeat(1, 1fr); } .cx_gridTemplateRows2--8Wm1X { grid-template-rows: repeat(2, 1fr); } .cx_gridTemplateRows3--SodeV { grid-template-rows: repeat(3, 1fr); } .cx_gridTemplateRows4--lXf2j { grid-template-rows: repeat(4, 1fr); } .cx_gridTemplateRows5---pIqV { grid-template-rows: repeat(5, 1fr); } } /* "../../fpl/components/dist/fpl.css" */ .badge__badge__O61UB{ position:relative; display:inline-flex; align-items:center; border-radius:var(--radius-medium); overflow:hidden; } .badge__badgeText__Iz2WE{ display:block; flex:1 1 auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; -webkit-user-select:none; user-select:none; } .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 0.375rem; } .badge__largeSize__AZT4z.badge__hasIconPrefix__lq3F3{ padding-left:0.125rem; } .badge__icon__YWyTU{ --color-icon:var(--badge-icon); display:inline-flex; justify-content:center; align-items:center; } .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); background:transparent; outline:var(--badge-border) solid 0.0625rem; outline-offset:-0.0625rem; } .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); } :where(.badge-reset__badgeReset__ochuI){ font-weight:unset; } .button-group__buttonGroup__p1E0s{ --fpl-radius-left:0px; --fpl-radius-right:0px; display:inline-flex; flex-direction:row; gap:1px; align-items:stretch; } .button-group__buttonGroup__p1E0s > button:first-of-type, .button-group__buttonGroup__p1E0s > .button-group__triggerButton__bxStO:first-of-type{ --fpl-radius-left:initial; } .button-group__buttonGroup__p1E0s > button:last-of-type, .button-group__buttonGroup__p1E0s > .button-group__triggerButton__bxStO:last-of-type{ --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-right:-0.0625rem; margin-left:-0.0625rem; padding-right:0.0625rem; padding-left:0.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%; } .link__link__n7llU{ display:inline; color:var(--color-text-brand); text-decoration:none; border-radius:var(--radius-small); outline:none; outline-offset:0; cursor:pointer; -webkit-user-select:auto; user-select:auto; } .link__link__n7llU:focus-visible{ outline:1px solid var(--color-border-selected); } .link__link__n7llU:active{ background:var(--color-bg-selected); } [data-underline-links] .link__link__n7llU{ text-decoration:underline; } [data-enhanced-contrast]:where(body:not(.feature_flag_fpl_link_underline_preference)) .link__link__n7llU{ text-decoration:underline; } .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{ --icon-button-outline-color:var(--color-border-selected); } .base-icon-button__baseIconButton__TXKzr{ --icon-button-outline-offset:-0.0625rem; --icon-button-outline-width:0.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)); padding:0; 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:transparent; outline:var(--icon-button-outline-color) solid var(--icon-button-outline-width); outline-offset:var(--icon-button-outline-offset); } .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); display:flex; justify-content:center; align-items:center; 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; } .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__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); grid-area:footer; display:flex; align-items:center; min-height:var(--spacer-6); padding:0 8px 0 16px; color:var(--color-text-secondary); } .callout__step__kWJvC{ color:var(--color-text-secondary); } .checkbox__root__L-PwP{ display:grid; grid-template-columns:max-content; column-gap:var(--spacer-2); } .checkbox__root__L-PwP > .checkbox__description__kr0Zj{ grid-row:2; grid-column:2; } .checkbox__root__L-PwP > label{ grid-column:2; margin-top:0.25rem; } .manually-labeled-checkbox__root__Mo9F-{ --fpl-checkbox-size:1rem; position:relative; display:inline-block; flex-shrink:0; width:var(--fpl-checkbox-size); height:var(--fpl-checkbox-size); margin:var(--spacer-1) 0; -webkit-user-select:none; user-select:none; } .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); position:absolute; inset:0; display:inline-grid; place-content:center; 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; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__visuals__Be3AE::before{ position:absolute; inset:0; content:''; box-sizing:border-box; border:1px solid var(--checkbox-second-inner-border-color, transparent); border-radius:calc(var(--radius-medium) - 1px); background:transparent; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__visuals__Be3AE > *{ position:relative; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ{ position:absolute; inset:0; width:100%; height:100%; margin:0; outline:none; opacity: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); --color-icon: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{ --color-icon: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{ display:none; width:var(--fpl-checkbox-size); height:var(--fpl-checkbox-size); } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:checked:not(:indeterminate) + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconCheck__tUMFi{ display:block; } .manually-labeled-checkbox__root__Mo9F- .manually-labeled-checkbox__checkbox__qNblJ:indeterminate + .manually-labeled-checkbox__visuals__Be3AE .manually-labeled-checkbox__iconMixed__B-Yp4{ display:block; } .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); position:relative; display:inline-flex; flex:0 0 auto; color:var(--chip-color-text); border-radius:var(--radius-medium); background:var(--chip-color-bg); outline:1px solid var(--chip-color-border); outline-offset:-1px; overflow:hidden; -webkit-user-select:none; user-select:none; } .chip__chip__p9lFq:has(:focus-visible){ --chip-color-border:var(--color-border-selected); background:transparent; outline:1px solid var(--color-border-selected); } .chip__chip__p9lFq:has(:focus-visible)::before{ position:absolute; inset:0.125rem; content:''; border-radius:0.25rem; background:var(--chip-color-bg); } @media screen and (min-resolution: 2dppx){ .chip__chip__p9lFq:has(:focus-visible)::before{ border-radius:0.1875rem; } } .chip__chip__p9lFq.chip__sizeSm__lkIcs{ --chip-padding:var(--spacer-1); --chip-height:1.25rem; --chip-override-border-radius:calc(0.1875rem + 2px); height:var(--chip-height); border-radius:0.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); --color-icon: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); --color-icon:var(--color-text); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy:has(:focus-visible){ --color-icon:var(--color-text); } .chip__chip__p9lFq.chip__variantPrimary__cdoqy.chip__enabled__oqgSy:has(:active){ --chip-color-bg:var(--color-bg-transparent-pressed); } .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); --color-icon:var(--color-text-selected); } .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); --color-icon: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__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); --color-icon: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); --color-icon: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); --color-icon: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__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); --color-icon: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__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); --color-icon: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__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); --color-icon: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); --color-icon:var(--color-text); } .chip__chip__p9lFq.chip__variantToggle__dKATE.chip__enabled__oqgSy:has(:focus-visible){ --color-icon: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); --color-icon: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); --color-icon: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); --color-icon:var(--color-text-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); --color-icon:var(--color-text-ondisabled); } .chip__chip__p9lFq.chip__variantOverride__f-rBL{ overflow:unset; } .chip__chip__p9lFq.chip__variantOverride__f-rBL::after{ position:absolute; left:-2px; bottom:-2px; content:''; width:calc(100% - 4.5px); height:calc(100% - 4.5px); border:1px solid var(--chip-color-border); border-top:none; border-right:none; border-radius:var(--chip-override-border-radius); border-top-left-radius:0; border-bottom-right-radius:0; } .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); --color-icon: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:has(:focus-visible){ --chip-color-border:var(--color-border-selected); } .chip__chip__p9lFq.chip__variantOverride__f-rBL.chip__enabled__oqgSy.chip__selected__j8L-p{ --chip-color-bg:var(--color-bg-brand-tertiary); --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); --color-icon:var(--color-text-disabled); } .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{ position:relative; display:flex; flex-direction:row; align-items:center; width:100%; } .chip__title__pAoz6{ flex:1 0 auto; padding:0 var(--chip-padding); white-space:nowrap; } .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{ display:flex; flex:0 0 auto; justify-content:center; align-items:center; } .chip__closeButtonWrapper__DJlYV{ position:relative; display:flex; flex:0 0 auto; justify-content:center; align-items:center; max-width:var(--chip-height); overflow:hidden; } .chip__closeButton__qGt5t{ display:flex; justify-content:center; align-items:center; width:var(--chip-height); height:var(--chip-height); outline:none; } .chip__closeButton__qGt5t:active{ opacity:0.5; } .chip__triggerChevron__s7ngi{ margin-right:0.125rem; } .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{ display:flex; flex-direction:column; height:100%; } .collapse__collapseRoot__nSZ1e.collapse__fillHeight__BK9lI .collapse__collapseContent__J6Fze{ flex-grow:1; min-height:0; } .collapse__collapseHeader__PGUuS{ display:inline-flex; flex-shrink:0; place-items:center; } .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{ width:100%; height:100%; background-color:unset; } .collapse__collapseLabelButton__gN4Af:focus-visible{ outline:none; } .collapse__collapseChevron__SnIUQ{ display:flex; place-items:center; } .collapse__collapseLabel__cVIMx{ color:var(--label); } .collapse__collapseHeader__PGUuS.collapse__fitWidth__bYhmE .collapse__collapseTrail__nTP9O{ padding-left:var(--spacer-1, 0.3rem); } .collapse__collapseTrail__nTP9O{ padding-right:var(--spacer-2, 0.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{ display:flex; flex-direction:column; } .collapse__collapseGroup__dkOvu .collapse__collapseRoot__nSZ1e:not(:last-child){ border-bottom:1px solid var(--color-border); } .input__md__8Ieqg{ --height:1.5rem; } .input__lg__8bKGi{ --height:2rem; } .input__root__zuNvf, .input__input__fmfv0{ --radius:var(--radius-medium); --radius-left:var(--fpl-radius-left, var(--radius)); --radius-right:var(--fpl-radius-right, var(--radius)); --outline:transparent; --outline-color:var(--group-child-border, var(--color-border)); --outline-color-focus:var(--group-child-border, var(--color-border-selected)); height:var(--height); border-radius:var(--radius-left) var(--radius-right) var(--radius-right) var(--radius-left); background:var(--color-bg-secondary); outline:1px solid var(--outline); outline-offset:-1px; } :not(.input__root__zuNvf) > .input__root__zuNvf:is( :focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus]), #input__specificity-hack__mgE8y ), :not(.input__root__zuNvf) > .input__input__fmfv0:is( :focus, :focus-within, [data-faux-focus], :has(input[data-faux-focus]), #input__specificity-hack__mgE8y ){ --outline:var(--outline-color-focus); } .input__input__fmfv0{ 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); --fpl-padding-left:var(--spacer-2); --fpl-padding-right:var(--spacer-2); display:block; padding:0 var(--fpl-padding-right) 0 var(--fpl-padding-left); box-sizing:border-box; color:var(--color-text); text-overflow:ellipsis; border:none; cursor:var(--fpl-input-cursor, text); } .input__input__fmfv0:hover{ --outline:var(--outline-color); } .input__input__fmfv0:focus{ cursor:text; } .input__input__fmfv0:read-only{ --outline:var(--outline-color); background:var(--color-bg); } .input__input__fmfv0[aria-disabled='true']{ --outline:var(--outline-color); color:var(--color-text-disabled); background:var(--color-bg); } .input__input__fmfv0[aria-invalid='true'], .input__input__fmfv0[aria-invalid='true']:hover{ --outline:var(--color-border-danger-strong); } :not(.input__root__zuNvf) > .input__input__fmfv0{ flex:1 1 auto; width:100%; min-width:0; } .input__input__fmfv0::selection{ background:var(--color-texthighlight); } .input__input__fmfv0::placeholder{ color:var(--color-text-tertiary); } .input__root__zuNvf > .input__input__fmfv0{ flex:1; height:100%; min-width:0; background:transparent; outline:none; } .input__root__zuNvf > .input__input__fmfv0:not(:first-child){ padding-left:0; } .input__root__zuNvf > .input__input__fmfv0:not(:last-child){ padding-right:0; } .input__input__fmfv0{ 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); } .input__root__zuNvf{ grid-column:span var(--colspan, 1); display:flex; flex:1 1 auto; align-items:center; width:100%; min-width:0; } .input__root__zuNvf:hover{ --outline:var(--outline-color); } .input__root__zuNvf[data-fpl-disabled]{ --outline:var(--outline-color); color:var(--color-text-disabled); background:var(--color-bg); } .input__root__zuNvf > *{ flex-shrink:0; } .input__root__zuNvf:has(input[aria-invalid='true']){ --outline:var(--color-border-danger-strong); } .input__group__tnF8A{ --outline:transparent; --group-child-border:transparent; --fpl-radius-left:0; --fpl-radius-right:0; display:grid; grid-template-rows:var(--height); grid-template-columns:var(--columns, repeat(auto-fit, minmax(0, 1fr))); gap:1px; border-radius:var(--radius-medium); outline:1px solid var(--outline); outline-offset:-1px; } .input__group__tnF8A:hover{ --outline:var(--color-border); } .input__group__tnF8A:is(:focus-within, :has(input[data-faux-focus])){ --outline:var(--color-border-selected); } .input__group__tnF8A > :first-child{ --fpl-radius-left:initial; } .input__group__tnF8A > :last-child{ --fpl-radius-right:initial; } .scrubbable-input__trigger__WUr88{ display:grid; place-content:center; height:100%; } @layer reset{ .scrubbable-input__trigger__WUr88:empty{ width:0.5rem; } } .scrubbable-input__icon__Lg8pt{ --color-icon:var(--color-icon-secondary); color:var(--color-icon-secondary); } .search-input__icon__pkEK-{ --color-icon:var(--color-icon-secondary); display:grid; flex-shrink:0; place-content:center; } .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); border-radius:0; background-color:transparent; } .search-input__borderless__shUUA.search-input__borderless__shUUA .search-input__icon__pkEK-{ padding-inline-start:var(--spacer-2); box-sizing:content-box; } .search-input__borderless__shUUA.search-input__borderless__shUUA:not(:focus-visible){ outline:none; } @layer reset{ .label__label__kls2I{ 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); -webkit-user-select:none; user-select:none; } [disabled] ~ .label__label__kls2I, [aria-disabled='true'] ~ .label__label__kls2I, [data-disabled] ~ .label__label__kls2I{ color:var(--color-text-disabled); } .label__primary__DAarw{ color:var(--color-text); } .label__secondary__F8wve{ color:var(--color-text-secondary); } } .legend__legend__mYLy-{ 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); padding:0; color:var(--color-text-secondary); } [disabled] ~ .legend__legend__mYLy-, [data-disabled] ~ .legend__legend__mYLy-{ color:var(--color-text-disabled); } .button__button__-U-QJ{ --btn-height:initial; --btn-padding:initial; --btn-icon-disabled:var(--color-icon-disabled); 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); position:relative; display:inline-flex; height:var(--btn-height); max-width:100%; 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)); } .button__button__-U-QJ[aria-disabled='true'] .button__icon__OodK0{ --color-icon:var(--btn-icon-disabled); --color-icon-secondary:var(--btn-icon-disabled); --color-icon-tertiary:var(--btn-icon-disabled); } .button__button__-U-QJ:not([data-show-focus]){ outline-width:0; } .button__buttonText__nvCyD{ display:flex; align-items:center; max-width:100%; margin:var(--btn-padding); overflow:hidden; } .button__buttonContent__tVdQi{ display:block; flex:1 1 auto; white-space:nowrap; text-overflow:ellipsis; word-wrap:break; overflow:hidden; } .button__shortcut__OKjxS{ padding-left:var(--spacer-1, 0.25rem); } .button__icon__OodK0{ --color-icon:var(--btn-icon); --color-icon-secondary:var(--btn-icon-secondary); --color-icon-tertiary:var(--btn-icon-tertiary); display:flex; align-items:center; height:var(--btn-height); } .button__regularSize__a-pyp{ --btn-height:1.5rem; --btn-padding:0 var(--spacer-2); } .button__regularSize__a-pyp .button__icon__OodK0{ margin-left:calc(var(--spacer-1)*-1); } .button__largeSize__Xuk-e{ --btn-height:2rem; --btn-padding:0 0.75rem; } .button__largeSize__Xuk-e .button__icon__OodK0{ margin-left:calc(var(--spacer-1)*-1); } .button__wideSize__fyONU{ --btn-height:1.5rem; --btn-padding:0; width:100%; } .button__wideSize__fyONU .button__buttonText__nvCyD{ width:100%; padding:0 var(--spacer-2, 0.5rem); box-sizing:border-box; } .button__wideSize__fyONU .button__buttonText__nvCyD.button__hasIcon__Z33Hl::after{ content:''; flex:0 10 auto; width:calc(var(--btn-height) - var(--spacer-2) + var(--spacer-1)); } .button__wideSize__fyONU .button__icon__OodK0{ margin-right:var(--spacer-1, 0.25rem); margin-left:calc(var(--spacer-2, 0)*-1); } .button__largeWideSize__-YVn9{ --btn-height:2rem; --btn-padding:0; width:100%; } .button__largeWideSize__-YVn9 .button__icon__OodK0{ margin-right:var(--spacer-1); margin-left:calc(var(--spacer-1)*-1); } .button__largeWideSize__-YVn9 .button__buttonText__nvCyD{ width:100%; padding:0 var(--spacer-2); box-sizing:border-box; } .button__largeWideSize__-YVn9 .button__buttonText__nvCyD.button__hasIcon__Z33Hl::after{ content:''; flex:0 10 auto; width:calc(var(--btn-height) - var(--spacer-2)); } .button__secondary__8YIhr, .button__destructiveSecondary__dJTw3{ color:var(--btn-text); background:transparent; outline:var(--btn-border-ui3) solid 0.0625rem; outline-offset:-0.0625rem; } .button__secondary__8YIhr:active:not([aria-disabled='true']), .button__destructiveSecondary__dJTw3:active:not([aria-disabled='true']){ background:var(--color-bghovertransparent); } .button__secondary__8YIhr[data-show-focus]:focus-visible, .button__destructiveSecondary__dJTw3[data-show-focus]:focus-visible{ outline-color:var(--color-border-selected); } .button__secondary__8YIhr[aria-disabled='true'], .button__destructiveSecondary__dJTw3[aria-disabled='true']{ color:var(--color-text-disabled); outline-width:0.0625rem; outline-color:var(--color-border-disabled); } .button__secondary__8YIhr[aria-disabled='true'] .button__shortcut__OKjxS, .button__destructiveSecondary__dJTw3[aria-disabled='true'] .button__shortcut__OKjxS{ color:var(--color-text-disabled); } .button__secondary__8YIhr:not([data-show-focus]), .button__destructiveSecondary__dJTw3:not([data-show-focus]){ outline-width:0.0625rem; } .button__secondary__8YIhr .button__icon__OodK0, .button__destructiveSecondary__dJTw3 .button__icon__OodK0{ --color-icon:var(--btn-icon); --color-icon-secondary:var(--btn-icon-secondary); --color-icon-tertiary:var(--btn-icon-tertiary); } .button__secondary__8YIhr .button__shortcut__OKjxS, .button__destructiveSecondary__dJTw3 .button__shortcut__OKjxS{ --color-icon:var(--btn-text-secondary); color:var(--btn-text-secondary); fill:var(--btn-text-secondary); } [data-enhanced-contrast] .button__secondary__8YIhr[data-show-focus]:focus-visible, [data-enhanced-contrast] .button__destructiveSecondary__dJTw3[data-show-focus]:focus-visible{ outline-width:0.125rem; outline-offset:-0.125rem; } .button__primary__tP7NU, .button__destructive__EwVR5, .button__signup__O-43y, .button__ghost__0pJzW{ --btn-icon-disabled:var(--color-icon-ondisabled); color:var(--btn-color); background:var(--btn-background); } .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__ghost__0pJzW:active:not([aria-disabled='true']){ background:var(--btn-background-pressed); } .button__primary__tP7NU[aria-disabled='true'], .button__destructive__EwVR5[aria-disabled='true'], .button__signup__O-43y[aria-disabled='true'], .button__ghost__0pJzW[aria-disabled='true']{ color:var(--color-text-ondisabled); background:var(--color-bg-disabled); } .button__primary__tP7NU[aria-disabled='true'] .button__shortcut__OKjxS, .button__destructive__EwVR5[aria-disabled='true'] .button__shortcut__OKjxS, .button__signup__O-43y[aria-disabled='true'] .button__shortcut__OKjxS, .button__ghost__0pJzW[aria-disabled='true'] .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__ghost__0pJzW[data-show-focus]:focus-visible{ position:relative; background:transparent; outline:var(--color-border-selected) solid 0.0625rem; outline-offset:-0.0625rem; } .button__primary__tP7NU[data-show-focus]:focus-visible::before, .button__destructive__EwVR5[data-show-focus]:focus-visible::before, .button__signup__O-43y[data-show-focus]:focus-visible::before, .button__ghost__0pJzW[data-show-focus]:focus-visible::before{ position:absolute; inset:0.125rem; content:''; background:var(--btn-background); border-radius:var(--fpl-radius-left, 0.25rem) var(--fpl-radius-right, 0.25rem) var(--fpl-radius-right, 0.25rem) var(--fpl-radius-left, 0.25rem); } @media screen and (min-resolution: 2dppx){ .button__primary__tP7NU[data-show-focus]:focus-visible::before, .button__destructive__EwVR5[data-show-focus]:focus-visible::before, .button__signup__O-43y[data-show-focus]:focus-visible::before, .button__ghost__0pJzW[data-show-focus]:focus-visible::before{ border-radius:var(--fpl-radius-left, 0.1875rem) var(--fpl-radius-right, 0.1875rem) var(--fpl-radius-right, 0.1875rem) var(--fpl-radius-left, 0.1875rem); } } .button__primary__tP7NU[data-show-focus]:focus-visible:active:not([aria-disabled='true'])::before, .button__destructive__EwVR5[data-show-focus]:focus-visible:active:not([aria-disabled='true'])::before, .button__signup__O-43y[data-show-focus]:focus-visible:active:not([aria-disabled='true'])::before, .button__ghost__0pJzW[data-show-focus]:focus-visible:active:not([aria-disabled='true'])::before{ background:var(--btn-background-pressed); } .button__primary__tP7NU[data-show-focus][aria-disabled='true']:focus-visible, .button__destructive__EwVR5[data-show-focus][aria-disabled='true']:focus-visible, .button__signup__O-43y[data-show-focus][aria-disabled='true']:focus-visible, .button__ghost__0pJzW[data-show-focus][aria-disabled='true']:focus-visible{ outline-color:var(--color-bg-disabled); } .button__primary__tP7NU[data-show-focus][aria-disabled='true']:focus-visible::before, .button__destructive__EwVR5[data-show-focus][aria-disabled='true']:focus-visible::before, .button__signup__O-43y[data-show-focus][aria-disabled='true']:focus-visible::before, .button__ghost__0pJzW[data-show-focus][aria-disabled='true']:focus-visible::before{ background:var(--color-bg-disabled); } .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__ghost__0pJzW[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__ghost__0pJzW .button__shortcut__OKjxS{ --color-icon: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-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); } .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-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); } .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-pressed:var(--color-bg-success-pressed); } .button__ghost__0pJzW{ --btn-icon:var(--color-icon); --btn-icon-secondary:var(--color-icon-secondary); --btn-icon-tertiary:var(--color-icon-tertiary); --btn-background:transparent; --btn-color:var(--color-text); --btn-color-secondary:var(--color-text-secondary); --btn-background-pressed:var(--color-bgtransparent-secondary-hover); } .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){ background:var(--color-bghovertransparent); } .button__ghost__0pJzW:not([aria-disabled='true']):active{ background:var(--color-bgtransparent-secondary-hover); } .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); background:transparent; outline:none; isolation:isolate; } .button__link__5iZjR::before, .button__destructiveLink__oQbdL::before{ position:absolute; 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)); } .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'], .button__destructiveLink__oQbdL[aria-disabled='true']{ --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:0.0625rem solid var(--btn-focus-border); outline-offset:-0.0625rem; } .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; } [data-enhanced-contrast]:where(body:not(.feature_flag_fpl_link_underline_preference)) .button__link__5iZjR, [data-enhanced-contrast]:where(body:not(.feature_flag_fpl_link_underline_preference)) .button__destructiveLink__oQbdL, [data-enhanced-contrast]:where(body:not(.feature_flag_fpl_link_underline_preference)) .button__ghost__0pJzW{ text-decoration:underline; } .loading-spinner__sm__zIhMd{ --loading-size:1rem; } .loading-spinner__md__Es0gp{ --loading-size:1.5rem; } .loading-spinner__lg__0eM5K{ --loading-size:1.5rem; } .loading-spinner__root__r3CAO{ width:var(--loading-size); height:var(--loading-size); animation:loading-spinner__rotate__fG7El 1s linear infinite; } @keyframes loading-spinner__rotate__fG7El{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } .loading-spinner__spinner__-BOPO{ --color-icon:var(--color-icon-secondary); } @media (prefers-reduced-motion: reduce){ .loading-spinner__root__r3CAO{ animation:loading-spinner__rotate__fG7El 4s steps(4) infinite; } } [data-prefers-reduced-motion] .loading-spinner__root__r3CAO{ animation:loading-spinner__rotate__fG7El 4s steps(4) infinite; } .modal__root__37yc9{ --fpl-modal-width:fit-content; --fpl-modal-sm:15rem; --fpl-modal-md:20rem; --fpl-modal-lg:30rem; --fpl-dialog-elevation:var(--elevation-500); position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:10vh 0; padding:10dvh 0; color:var(--color-text); } .modal__root__37yc9.modal__borderedFullscreen__3m9q3{ padding:var(--spacer-5); } .modal__root__37yc9[data-modal-fullscreen]{ align-items:start; padding:0; } .modal__root__37yc9.modal__topAligned__Gtw5q{ justify-content:flex-start; } .modal__root__37yc9.modal__sm__izkk-{ --fpl-modal-width:var(--fpl-modal-sm); } .modal__root__37yc9.modal__md__rrfZR{ --fpl-modal-width:var(--fpl-modal-md); } .modal__root__37yc9.modal__lg__wd2Q-{ --fpl-modal-width:var(--fpl-modal-lg); } .modal__backdrop__PcWm1{ position:absolute; inset:0; background:var(--color-modalbackdrop); } .modal__contents__sJsR3{ position:relative; width:var(--fpl-modal-width); min-width:var(--fpl-modal-sm); max-width:calc(100% - var(--spacer-3)*2); max-height:80vh; max-height:80dvh; pointer-events:none; } [data-modal-fullscreen] .modal__contents__sJsR3{ --fpl-contents-max-height:100vh; top:0; width:100%; height:100dvh; max-width:unset; max-height:unset; } @supports (width: 1dvh){ [data-modal-fullscreen] .modal__contents__sJsR3{ --fpl-contents-max-height:100dvh; } } .modal__borderedFullscreen__3m9q3 .modal__contents__sJsR3{ --fpl-contents-height:calc(100vh - var(--spacer-5)*2); --fpl-contents-max-height:100vh; width:100%; max-width:unset; max-height:unset; } @supports (width: 1dvh){ .modal__borderedFullscreen__3m9q3 .modal__contents__sJsR3{ --fpl-contents-height:calc(100vh - var(--spacer-5)*2); --fpl-contents-max-height:100dvh; } } .modal__full__KNiPx{ --fpl-contents-height:80vh; } @supports (width: 1dvh){ .modal__full__KNiPx{ --fpl-contents-height:80dvh; } } .radio__radioIcon__yuECz{ width:var(--radio-dimensions); height:var(--radio-dimensions); } .radio__inputGroup__zjgW1{ --radio-dimensions:var(--spacer-4); --radio-fill:initial; --radio-stroke-color:var(--color-icon); --radio-stroke-width:0.0625rem; display:flex; align-items:flex-start; } .radio__radioOption__XotT5{ position:absolute; width:var(--radio-dimensions); height:var(--radio-dimensions); margin:0; opacity:0; } .radio__radioOption__XotT5:focus-visible + .radio__radioIcon__yuECz{ --radio-stroke-color:var(--color-border-selected-strong); } .radio__radioOption__XotT5:focus:not(:focus-visible){ outline:none; } .radio__radioOption__XotT5[aria-readonly='true'] + .radio__radioIcon__yuECz{ --radio-stroke-color:var(--color-icon-disabled); } .radio__radioOption__XotT5[aria-readonly='true']:checked + .radio__radioIcon__yuECz{ --radio-fill:var(--color-icon-disabled); } .radio__radioOption__XotT5:checked + .radio__radioIcon__yuECz{ --radio-fill:var(--color-icon); } .radio__fieldsetReset__Eh3a4{ padding:0; border:none; } .radio__optionList__vKHUD{ display:flex; flex-direction:column; gap:var(--spacer-1); margin-top:var(--spacer-1); margin-left:calc(var(--spacer-1)*-1); } .radio__root__buc24{ display:grid; grid-template-columns:max-content; align-items:center; column-gap:var(--spacer-2); } .radio__root__buc24 > .radio__description__6Y3ci{ grid-row:2; grid-column:2; } .radio__root__buc24 > label{ grid-column:2; } .scrubbable__cursor__xabHz{ overflow:visible; } .scrubbable__shadow__d13e1{ filter:drop-shadow(0 1.5px 1px rgb(0 0 0 / 60%)); } .scrubbable__trigger__mjHCD{ cursor:ew-resize; } [data-fpl-scrub-disabled] .scrubbable__trigger__mjHCD{ cursor:default; } .scrubbable__trigger__mjHCD > *{ pointer-events:none; } .segmented-control__fieldset__TFf7m{ min-width:0; margin:0; padding:0; line-height:0; border:none; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m{ display:flex; border:none; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m legend, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m legend{ margin-bottom:var(--spacer-1); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m:where(:not([data-fpl-ui3-override] *)) legend{ margin-bottom:0.25rem; } .segmented-control__fieldset__TFf7m [data-radio-options-root]{ --radio-icon-size:1.5rem; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)){ display:inline-flex; margin:0 1px; padding:0; line-height:0; border:none; border-radius:2px; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)):hover{ box-shadow:inset 0 0 0 1px var(--color-border); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__optionRoot__tnGcv{ position:relative; display:inline-block; flex:0; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__icon__Vs5-f{ display:flex; justify-content:center; align-items:center; width:var(--radio-icon-size); height:var(--radio-icon-size); min-width:var(--radio-icon-size); padding:0; border-radius:0.125rem; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__icon__Vs5-f svg{ fill:var(--color-icon); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input:checked + .segmented-control__icon__Vs5-f{ background-color:var(--color-bg-tertiary); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input[aria-readonly='true'] + .segmented-control__icon__Vs5-f{ --color-icon:var(--color-icon-disabled); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input:focus-visible + .segmented-control__icon__Vs5-f{ outline:1px solid var(--color-border-selected); outline-offset:-1px; box-shadow:none; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__text__KfpLV{ display:flex; justify-content:center; align-items:center; height:var(--radio-icon-size); min-width:var(--radio-icon-size); padding:0 8px; color:var(--color-text-secondary); text-wrap:nowrap; border-radius:0.125rem; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input:checked + .segmented-control__text__KfpLV{ color:var(--color-text); background-color:var(--color-bg-tertiary); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input[aria-readonly='true'] + .segmented-control__text__KfpLV{ color:var(--color-text-disabled); } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) input:focus-visible + .segmented-control__text__KfpLV{ outline:1px solid var(--color-border-selected); outline-offset:-1px; box-shadow:none; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5{ flex:1; min-width:0; } body:not([data-fpl-version='ui3']) .segmented-control__fieldset__TFf7m [data-radio-options-root]:where(:not([data-fpl-ui3-override] *)) .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5 .segmented-control__textContent__YZQa-{ display:inline-block; min-width:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root], :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root]{ display:inline-flex; width:100%; padding:var(--spacer-0); border-radius:var(--radius-medium); background-color:var(--color-bg-secondary); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv{ position:relative; display:inline-block; flex:1; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__icon__Vs5-f{ display:flex; justify-content:center; align-items:center; min-width:var(--radio-icon-size); padding:var(--spacer-0); border-radius:var(--radius-medium); background-color:transparent; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__icon__Vs5-f svg, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__icon__Vs5-f svg{ width:var(--radio-icon-size); height:var(--radio-icon-size); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input:checked + .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input:checked + .segmented-control__icon__Vs5-f{ background-color:var(--color-bg); box-shadow:inset 0 0 0 0.0625rem var(--color-border); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input:not(:checked) + .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input:not(:checked) + .segmented-control__icon__Vs5-f{ --color-icon:var(--color-icon-secondary); --color-icon-tertiary:var(--color-icon-secondary); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input[aria-readonly='true'] + .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input[aria-readonly='true'] + .segmented-control__icon__Vs5-f{ --color-icon:var(--color-icon-disabled); --color-icon-secondary:var(--color-icon-disabled); --color-icon-tertiary:var(--color-icon-disabled); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input:focus-visible + .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input:focus-visible + .segmented-control__icon__Vs5-f{ outline:1px solid var(--color-border-selected); outline-offset:-1px; box-shadow:none; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__text__KfpLV{ display:flex; justify-content:center; align-items:center; height:var(--radio-icon-size); min-width:var(--radio-icon-size); padding:0 var(--spacer-2); color:var(--color-text-secondary); text-wrap:nowrap; border-radius:var(--radius-medium); background-color:transparent; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input:checked + .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input:checked + .segmented-control__text__KfpLV{ color:var(--color-text); background-color:var(--color-bg); box-shadow:inset 0 0 0 0.0625rem var(--color-border); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input[aria-readonly='true'] + .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input[aria-readonly='true'] + .segmented-control__text__KfpLV{ color:var(--color-text-disabled); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] input:focus-visible + .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] input:focus-visible + .segmented-control__text__KfpLV{ outline:1px solid var(--color-border-selected); outline-offset:-1px; box-shadow:none; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5{ min-width:0; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5 .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5 .segmented-control__text__KfpLV{ text-wrap:initial; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5 .segmented-control__textContent__YZQa-, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m [data-radio-options-root] .segmented-control__optionRoot__tnGcv.segmented-control__optionRootTruncated__KsES5 .segmented-control__textContent__YZQa-{ display:inline-block; min-width:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .segmented-control__textContent__YZQa-{ display:contents; } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__icon__Vs5-f, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__icon__Vs5-f{ height:var(--spacer-5); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__text__KfpLV, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__text__KfpLV{ height:var(--spacer-5); } [data-fpl-version='ui3'] .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__text__KfpLV svg, :where([data-fpl-ui3-override]) .segmented-control__fieldset__TFf7m.segmented-control__largeSize__E2xmR [data-radio-options-root] .segmented-control__text__KfpLV svg{ margin-right:var(--spacer-1); } .description__description__JB-Na{ 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); margin:0; color:var(--color-text-secondary); } .selection__selectionHover__NDXuf[data-fpl-selected='false']:hover, .selection__selectionHover__NDXuf[data-fpl-selected='focus']:focus-within{ background:var(--color-bg-selected); } .selection__selectionToggle__wuups[data-fpl-selected='true'], .selection__selectionToggle__wuups[data-fpl-selected='focus']:focus-within{ background:var(--color-bg-selected); } .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); position:relative; flex:1 0 auto; height:var(--fpl-slider-height); max-height:var(--fpl-slider-height); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq::before, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq::before{ position:absolute; 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; } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq[data-mixed]:focus-within::before, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq[data-mixed]:focus-within::before{ outline-color:var(--color-border-selected); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__thumb__621tr, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__thumb__621tr{ border-radius:var(--radius-full); background:var(--color-icon-onbrand); box-shadow:var(--elevation-200); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq[data-focus-visible] :focus-visible ~ .slider__thumb__621tr, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq[data-focus-visible] :focus-visible ~ .slider__thumb__621tr{ outline:1px solid var(--color-border-selected); outline-offset:-1px; } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__modified__7Bsu-, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__modified__7Bsu-{ border:0.25rem solid var(--color-icon-onbrand); background:var(--fpl-slider-thumb-bg); box-shadow:var(--elevation-200), inset 0 0 0 0.5px var(--color-bordertranslucent); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq [aria-disabled='true'] ~ .slider__thumb__621tr, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq [aria-disabled='true'] ~ .slider__thumb__621tr{ border:none; background:var(--color-bg-disabled); box-shadow:none; } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6{ position:absolute; height:100%; } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6::after, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__range__2uem6::after{ position:absolute; inset:0 calc(var(--fpl-slider-height)*-1/2); content:''; border-radius:var(--radius-full); background:var(--color-bg-brand); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO{ position:absolute; top:50%; width:0.25rem; height:0.25rem; border-radius:var(--radius-full); background:var(--color-icon-tertiary); transform:translate(-50%, -50%); } [data-fpl-version='ui3'] .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO.slider__main__Q2Z7m, :where([data-fpl-ui3-override]) .slider__root__9tITq.slider__root__9tITq .slider__dot__sggOO.slider__main__Q2Z7m{ background:var(--color-icon); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)){ --fpl-slider-height:0.5rem; } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *))::before{ position:absolute; top:50%; left:0; right:0; content:''; height:1px; background:var(--color-border-strong); transform:translateY(-50%); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq[data-range]:where(:not([data-fpl-ui3-override] *))::before{ background:var(--color-icon-tertiary); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq[data-mixed]:where(:not([data-fpl-ui3-override] *)):focus-within::before{ background:var(--color-border-selected); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) .slider__thumb__621tr{ border-radius:1000px; background:var(--color-bg); outline:1px solid var(--color-bg); overflow:hidden; } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) .slider__thumb__621tr::before{ position:absolute; inset:0; content:''; border:1px solid var(--color-icon); border-radius:1000px; background:var(--color-bg); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq[data-disabled]:where(:not([data-fpl-ui3-override] *))::before{ background:var(--color-bg-disabled); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) [aria-disabled='true'] ~ .slider__thumb__621tr::before{ background:var(--color-bg-disabled); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq[data-focus-visible]:where(:not([data-fpl-ui3-override] *)) :focus-visible ~ .slider__thumb__621tr::before{ border-color:var(--color-icon-brand); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) .slider__modified__7Bsu-::before{ position:absolute; inset:0; content:''; border:none; background:var(--color-icon); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq[data-focus-visible]:where(:not([data-fpl-ui3-override] *)) :focus-visible ~ .slider__modified__7Bsu-::before{ background:var(--color-icon-brand); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) .slider__dot__sggOO{ position:absolute; top:50%; width:0.0625rem; height:0.5625rem; background:var(--color-icon-tertiary); transform:translate(-50%, -50%); } body:not([data-fpl-version='ui3']) .slider__root__9tITq.slider__root__9tITq:where(:not([data-fpl-ui3-override] *)) .slider__range__2uem6{ position:absolute; top:50%; height:1px; background:var(--color-border-strong); transform:translateY(-50%); } .slider__root__9tITq.slider__root__9tITq .slider__thumb__621tr{ position:absolute; top:0; width:var(--fpl-slider-thumb-width); height:var(--fpl-slider-thumb-width); box-sizing:border-box; } .slider__root__9tITq.slider__root__9tITq[data-mixed] .slider__thumb__621tr, .slider__root__9tITq.slider__root__9tITq[data-mixed] .slider__range__2uem6{ opacity:0; } .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:0.875rem; --fpl-switch-knob-h:0.875rem; --fpl-switch-knob-x:0; --transition-duration:0.08s; position:relative; display:inline-block; flex-shrink:0; width:2rem; height:1.5rem; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:focus-visible + .manually-labeled-switch__visuals__g13eB{ --fpl-switch-bg-inset:0.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:0.6875rem; --fpl-switch-knob-w:0.5rem; --fpl-switch-knob-h:0.125rem; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9: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{ --fpl-switch-bg:var(--color-bgswitchoff); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9:disabled:not(:indeterminate){ --fpl-switch-knob-bg:var(--color-icon-ondisabled); } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__checkbox__-pgR9{ --fpl-switch-input-inset:0.25rem; position:absolute; inset:var(--fpl-switch-input-inset) 0; width:100%; height:calc(100% - var(--fpl-switch-input-inset)*2); margin:0; outline:none; opacity:0; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB{ position:absolute; inset:0.25rem 0; display:flex; align-items:center; box-sizing:border-box; border:0.0625rem solid transparent; border-radius:var(--radius-full); pointer-events:none; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB::before{ position:absolute; inset:var(--fpl-switch-bg-inset); content:''; display:block; border-radius:var(--radius-full); background:var(--fpl-switch-bg); transition:background var(--transition-duration) ease-out; } .manually-labeled-switch__root__sp5fN .manually-labeled-switch__visuals__g13eB::after{ content:''; display:block; 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; } .switch__root__K7xJr{ display:grid; grid-template-columns:max-content; column-gap:var(--spacer-2); } .switch__root__K7xJr > .switch__description__I3Yn2{ grid-row:2; grid-column:2; } .switch__root__K7xJr > label{ grid-column:2; margin-top:0.25rem; } .tabs__tabStrip__6GiU-{ display:flex; gap:var(--spacer-1); } .tabs__tabStrip__6GiU-[aria-orientation='vertical']{ flex-direction:column; gap:var(--spacer-2); } .tabs__tabStrip__6GiU- .tabs__tabButton__UEhB4:only-child{ background-color:transparent; } .tabs__tabButton__UEhB4{ display:grid; justify-content:center; align-items:center; height:1.5rem; padding:0 var(--spacer-2); color:var(--color-text-secondary); text-wrap:nowrap; border:none; border-radius:var(--radius-medium); background-color:var(--color-bg); outline:none; -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); } .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{ grid-row:1; grid-column:1; word-break:keep-all; } [data-enhanced-contrast] .tabs__tabButton__UEhB4[aria-selected='true']{ border:1px solid var(--color-border); } .tabs__tabPanel__-3APM:focus-visible{ outline:1px solid var(--color-border-selected); } .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); display:block; width:100%; padding:var(--spacer-1) var(--spacer-2); box-sizing:border-box; color:var(--color-text); text-overflow:ellipsis; border:none; border-radius:var(--radius-medium); } .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{ flex:1; height:100%; min-width:0; background:transparent; outline:none; } .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); } .toast__root__nVszD{ display:inline-flex; align-items:center; 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); } .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{ display:inline-flex; align-items:center; align-self:stretch; } .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:toast__loading-spinner-rotate__r9tqw 1s linear infinite; } @keyframes toast__loading-spinner-rotate__r9tqw{ from{ transform:rotate(0); } to{ transform:rotate(1turn); } } .window__root__KsyeI{ --fpl-dialog-elevation:var(--elevation-400); --fpl-contents-max-height:80vh; position:fixed; width:fit-content; } @supports (width: 100dvh){ .window__root__KsyeI{ --fpl-contents-max-height:80dvh; } .window__root__KsyeI.window__fullHeight__aDy3i{ --fpl-contents-max-height:100dvh; } } .window__root__KsyeI:focus{ outline:none; } .window__root__KsyeI.window__fullHeight__aDy3i{ --fpl-contents-max-height:100vh; } .card-primitive__root__h5a39{ position:relative; isolation:isolate; } .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{ position:absolute; inset:0; content:''; z-index:-1; } .card-primitive__interactive__9-8aA > *{ pointer-events:auto; } .card-primitive__button__jv46G, .card-primitive__link__K4nzB{ position:absolute; inset:0; z-index:-1; pointer-events:auto; } .card-primitive__button__jv46G{ background:none; } .menu__light__LPWu-{ --menu-separator-style:0.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:0.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:0 0.5px 0 0 rgb(255 255 255 / 8%) inset, 0 10px 16px 0 rgb(0 0 0 / 35%), 0 0 0.5px 0 rgb(255 255 255 / 35%) inset, 0 2px 5px 0 rgb(0 0 0 / 35%); } .menu__container__ZmSkT{ --menu-separator-gap:0.4375rem; min-width:80px; padding:var(--spacer-2, 0.5rem) 0; border-radius:var(--radius-large, 0.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); display:flex; align-items:center; padding:0 var(--spacer-2); color:var(--color-text); text-decoration:none; -webkit-user-select:none; user-select:none; } .menu__item__Tl2MO:focus{ outline:0; } .menu__item__Tl2MO[aria-disabled='true'], .menu__item__Tl2MO[aria-disabled='true'][data-fpl-selected='true']{ --color-icon:var(--color-icon-disabled); color:var(--color-text-disabled); } .menu__item__Tl2MO[aria-disabled='true'] .menu__itemText__qcxtq, .menu__item__Tl2MO[aria-disabled='true'][data-fpl-selected='true'] .menu__itemText__qcxtq, .menu__item__Tl2MO[aria-disabled='true'] .menu__subText__0OMd9, .menu__item__Tl2MO[aria-disabled='true'][data-fpl-selected='true'] .menu__subText__0OMd9{ color:var(--color-text-disabled); } .menu__item__Tl2MO[data-fpl-selected='true']{ color:var(--color-text-onbrand); } .menu__item__Tl2MO[data-fpl-selected='true'] .menu__itemText__qcxtq, .menu__item__Tl2MO[data-fpl-selected='true'] .menu__subtrigger__bzQWF{ color:var(--color-text-onbrand); background-color:var(--color-bg-brand); } .menu__item__Tl2MO[data-fpl-selected='true'] .menu__subText__0OMd9{ color:var(--color-text-onbrand-secondary); } .menu__itemText__qcxtq{ --color-icon:currentcolor; display:flex; align-items:center; width:100%; min-height:1.5rem; padding:var(--spacer-1, 0.1rem) var(--spacer-2, 1rem); box-sizing:border-box; color:var(--color-text); white-space:nowrap; border-radius:var(--radius-medium); } .menu__subtrigger__bzQWF{ display:grid; grid-template-columns:1fr 1.5rem; gap:var(--spacer-2, 0.5rem); padding-right:0; } .menu__subTriggerText__j8Zgp{ display:flex; align-items:center; } .menu__iconContainer__aYOvR{ position:relative; display:flex; width:100%; margin:calc(var(--spacer-1, 0.25rem)*-1) 0; } .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); display:flex; justify-content:space-between; align-items:center; height:1.5rem; padding:0 var(--spacer-3, 1rem); color:var(--color-text-secondary); -webkit-user-select:none; user-select:none; } .menu__subtriggerItem__iLXtd:where([data-fpl-nested-selection]){ padding-left:var(--spacer-1); } .menu__subTriggerDot__D21MC{ position:relative; margin:calc(var(--spacer-1)*-1) 0; margin-right:var(--spacer-1); } .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{ margin-left:auto; padding-left:var(--spacer-3, 1rem); } .menu__lead__EftIO{ position:relative; display:flex; align-items:center; margin:calc(var(--spacer-1, 0.25rem)*-1) 0; margin-right:var(--spacer-1, 0.25rem); } .menu__selectItem__I9GzL{ padding-left:var(--spacer-2); } .menu__selectItem__I9GzL[aria-checked='false'] .menu__selectIcon__zD-Q-{ opacity:0; } .menu__selectIcon__zD-Q-{ position:relative; margin:calc(var(--spacer-1, 0.25rem)*-1) 0; margin-right:var(--spacer-1); } .menu__selectItemText__m9o3C{ padding-left:var(--spacer-1, 0.75rem); } .menu__subText__0OMd9{ color:var(--color-text-secondary); } .menu__checkboxItem__htoq3[aria-checked='true'] .menu__checkboxIconContainer__KELDn{ --color-icon: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{ --color-icon:var(--color-icon-disabled); } .menu__checkboxText__HXE5X{ display:flex; align-items:center; width:100%; } .menu__checkboxIcon__FB0yg{ display:none; } .menu__checkboxContainer__i0-bq{ display:grid; grid-template-columns:1fr 1rem; gap:var(--spacer-2, 0.25rem); } .menu__checkboxIconContainer__KELDn{ position:relative; display:flex; justify-content:center; align-items:center; width:16px; height:16px; margin:calc(var(--spacer-1, 0.25rem)*-1) 0; border:1px solid var(--color-border); border-radius:var(--radius-medium); background-color:var(--color-bg-secondary); } .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, 0.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, 0.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:1.375rem; } .menu__allowsIndent__1tnRp.menu__container__ZmSkT:has(li.menu__selectItem__I9GzL) .menu__title__qibGG{ padding-left:1.875rem; } :where(.menu-primitive__container__5lt-5){ margin:0; padding:0; box-sizing:border-box; outline:0; overflow-y:auto; -webkit-user-select:none; user-select:none; overscroll-behavior:contain; scrollbar-width:none; } :where(.menu-primitive__list__i3VRn){ margin:0; padding:0; list-style-type:none; } :where(.menu-primitive__scrollArrow__Om355){ position:sticky; z-index:1; display:none; justify-content:center; align-items:center; width:100%; border-radius:0; cursor:default; -webkit-user-select:none; user-select:none; } :where(.menu-primitive__scrollArrow__Om355)::before{ position:absolute; left:0; content:''; z-index:-1; display:block; width:100%; pointer-events:none; } [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; } [data-modals-open]{ overflow:hidden; touch-action:none; -webkit-overflow-scrolling:none; overscroll-behavior:none; } .modal-primitive__root__x1Mdk[aria-hidden='true']{ display:none; } .radio-like-primitive__hiddenInput__-rswg{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; } .radio-like-primitive__optionRoot__9WImp{ position:relative; } .select-primitive__overlay__GNxMT{ z-index:var(--z-index-dropdown); } :where(.select-primitive__container__hpR3l){ margin:0; padding:0; box-sizing:border-box; outline:0; overflow-y:auto; -webkit-user-select:none; user-select:none; overscroll-behavior:contain; scrollbar-width:none; } :where(.select-primitive__scrollArrow__-uP-4){ position:absolute; z-index:1; display:flex; justify-content:center; align-items:center; width:100%; border-radius:0; visibility:hidden; cursor:default; -webkit-user-select:none; user-select:none; } :where(.select-primitive__scrollArrow__-uP-4)::before{ position:absolute; left:0; content:''; z-index:-1; display:block; width:100%; pointer-events:none; } [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; } .slider-primitive__root__j6miT{ --fpl-slider-primitive-hitbox:44px; position:relative; border:0 solid transparent; border-width:0 calc(var(--fpl-slider-thumb-width)/2); } .slider-primitive__root__j6miT :not(.slider-primitive__hitbox__MAYcD){ pointer-events:none; } .slider-primitive__hitbox__MAYcD{ --horizontal-padding:calc(var(--fpl-slider-primitive-hitbox)*-1/2); position:absolute; top:50%; left:var(--horizontal-padding); right:var(--horizontal-padding); height:100%; min-height:var(--fpl-slider-primitive-hitbox); outline:none; transform:translateY(-50%); } @layer reset{ .textarea-reset__textareaReset__SBluM{ cursor:default; resize:none; } } .window-outlet__windowOutlet__S7mWP{ position:fixed; inset:0; z-index:var(--z-index-window); isolation:isolate; pointer-events:none; } .window-outlet__windowOutlet__S7mWP > *{ pointer-events:auto; } .window-primitive__resizable__VdDxG{ --handle-size:8px; --corner-size:16px; --handle-offset:-6px; position:relative; -webkit-user-select:none; user-select:none; } .window-primitive__top__Y8xPK, .window-primitive__bottom__e1lS-{ position:absolute; left:0; width:100%; height:var(--handle-size); cursor:ns-resize; } .window-primitive__left__J0ctB, .window-primitive__right__0DfwX{ position:absolute; top:0; width:var(--handle-size); height:100%; cursor:ew-resize; } .window-primitive__left__J0ctB{ left:var(--handle-offset); } .window-primitive__top__Y8xPK{ top:var(--handle-offset); } .window-primitive__right__0DfwX{ right:var(--handle-offset); } .window-primitive__bottom__e1lS-{ bottom:var(--handle-offset); } .window-primitive__topLeft__S7zYw, .window-primitive__topRight__pTYva, .window-primitive__bottomRight__WtCYr, .window-primitive__bottomLeft__xyrRa{ position:absolute; width:var(--corner-size); height:var(--corner-size); } .window-primitive__topLeft__S7zYw{ top:var(--handle-offset); left:var(--handle-offset); cursor:nwse-resize; } .window-primitive__topRight__pTYva{ top:var(--handle-offset); right:var(--handle-offset); cursor:nesw-resize; } .window-primitive__bottomRight__WtCYr{ bottom:var(--handle-offset); right:var(--handle-offset); cursor:nwse-resize; } .window-primitive__bottomLeft__xyrRa{ left:var(--handle-offset); bottom:var(--handle-offset); cursor:nesw-resize; } @layer reset{ .button-reset__buttonReset__zO1D7{ display:inline-flex; place-items:center; margin:0; padding:0; box-sizing:border-box; font:inherit; letter-spacing:inherit; text-align:inherit; border:none; background:none; -webkit-user-select:none; user-select:none; } .button-reset__buttonReset__zO1D7 *{ pointer-events:none; } } .scroll-container__root__2RmsE{ position:relative; min-width:0; min-height:0; overscroll-behavior:none; } .scroll-container__scroll__8Q3Cb{ position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; touch-action:initial; overscroll-behavior:none; } @media (pointer: fine){ .scroll-container__scroll__8Q3Cb{ scrollbar-width:none; } .scroll-container__scroll__8Q3Cb::-webkit-scrollbar{ display:none; } } .scroll-container__x__3bIVO{ overflow-x:auto; } .scroll-container__y__WrBOK{ overflow-y:auto; } .scroll-container__both__D9TzF{ overflow:auto; } .scroll-container__noScroll__6yNJu{ overflow:initial; touch-action:none; } .scroll-container__fill__qOryJ{ width:100%; height:100%; } .scroll-container__content__OKxPs{ box-sizing:border-box; } .scroll-container__scrollBars__qxWAs{ position:absolute; inset:0; z-index:1; pointer-events:none; } .scroll-container__scrollBar__5Nut9{ --scrollbar-border:transparent; --scrollbar-size:7px; --track-size:11px; position:absolute; inset:0; display:none; align-items:center; border-top:1px solid transparent; border-left:1px solid transparent; background:transparent; pointer-events:auto; transition:all 0.2s; overscroll-behavior:none; } @media (pointer: fine){ .scroll-container__scrollBar__5Nut9{ display:flex; } } .scroll-container__scrollBar__5Nut9::after{ position:absolute; content:''; width:var(--scrollbar-size); height:var(--scrollbar-size); border-radius:var(--radius-full, 9999px); background:var(--color-scrollbar); opacity:0; transition:opacity 0.2s; } .scroll-container__root__2RmsE .scroll-container__scrollBar__5Nut9:hover{ --scrollbar-border:var(--color-border); background:var(--color-scrollbartrackhover, rgb(245 245 245 / 50%)); } .scroll-container__root__2RmsE:hover .scroll-container__scrollBar__5Nut9::after{ opacity:1; } :is(.scroll-container__dragging__NUd6f, #scroll-container__specificity-hack__vgVtm) .scroll-container__scrollBar__5Nut9{ background:var(--color-scrollbartrackdrag, rgb(255 255 255 / 50%)); } .scroll-container__scrolling__XpT9A .scroll-container__scrollBar__5Nut9{ pointer-events:none; } .scroll-container__scrollBar__5Nut9[data-fpl-orientation='horizontal']{ top:initial; flex-direction:row; height:var(--track-size); border-top:1px solid var(--scrollbar-border); } .scroll-container__scrollBar__5Nut9[data-fpl-orientation='horizontal']::after{ left:var(--scroll-percent); width:calc(var(--scroll-size) - 1px); } .scroll-container__scrollBar__5Nut9[data-fpl-orientation='vertical']{ left:initial; flex-direction:column; width:var(--track-size); border-left:1px solid var(--scrollbar-border); } .scroll-container__scrollBar__5Nut9[data-fpl-orientation='vertical']::after{ top:var(--scroll-percent); height:calc(var(--scroll-size) - 1px); } .scroll-container__pinBottom__RQoSX *{ overflow-anchor:none; } .scroll-container__pinBottomAnchor__kxzWs{ overflow-anchor:auto; height:1px; } .split-input__splitInputContainer__ebAeQ{ --fpl-radius-right:0; display:grid; grid-template-columns:1fr min-content; gap:1px; align-items:center; align-self:stretch; border-radius:var(--radius-medium, 0.3125rem); } .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{ align-self:stretch; border-radius:0 var(--radius-medium) var(--radius-medium) 0; background:var(--color-bg-secondary); } .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); margin-left:-1px; color:var(--color-text-disabled); background:var(--color-bg); outline:var(--color-border-disabled) solid 1px; outline-offset:-1px; } .split-input__splitInputTrigger__8jaub[aria-readonly='true']{ --fpl-icon-color:var(--color-icon-disabled); margin-left:-1px; color:var(--color-text); background:var(--color-bg); outline:var(--color-border-disabled) solid 1px; outline-offset:-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){ background:var(--color-bg-transparent-hover); } .split-input__splitInputTrigger__8jaub:not([aria-disabled='true'], [aria-readonly='true']):active{ background:var(--color-bg-transparent-hover); } .stack__row__-rJHV, .stack__col__4xLd-{ display:flex; flex-flow:var(--dir, row) var(--wrap, nowrap); justify-content:start; } .stack__row__-rJHV{ --dir:row; align-items:center; } .stack__row__-rJHV .stack__spacer__uMkLf + *{ margin-left:auto; } .stack__col__4xLd-{ --dir:column; align-items:stretch; } .stack__col__4xLd- .stack__spacer__uMkLf + *{ margin-top:auto; } .stack__spacer__uMkLf{ display:none; } .stack__fill__6NGzz{ flex:1 1 auto; } .toggle-tip__container__IjXj-{ --color-bg:var(--color-bg-tooltip); 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); display:flex; border-radius:var(--radius-medium, 0.3125rem); background:var(--color-bg); box-shadow:var(--elevation-300); } .toggle-tip__arrow__Ve94t{ margin:-1px; } .toggle-tip__content__M80HZ{ display:flex; align-items:center; padding:var(--spacer-1, 0.3rem) var(--spacer-2, 0.5rem); overflow-wrap:break-word; outline-color:var(--color-border-tooltip-selected); } .toggle-tip__content__M80HZ.toggle-tip__hasIconLead__d-j37{ padding-left:var(--spacer-1, 0.3rem); } .toggle-tip__content__M80HZ:has(input){ width:150px; padding:var(--spacer-1, 0.3rem); } .toggle-tip__iconLead__mQE-L{ --color-icon:var(--color-icon-secondary); display:inline-flex; align-items:center; } .toggle-tip__text__Lo6VS{ --color-text:var(--color-text-tooltip); 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:1; min-width:0; color:var(--color-text); overflow-wrap:break-word; } .toggle-tip__iconTriggerButton__IQcG0{ --icon-button-icon:var(--color-icon-secondary); --icon-button-size:1.5rem; --icon-button-outline-offset:-0.0625rem; --icon-button-outline-width:0.0625rem; display:grid; } .toggle-tip__iconTriggerButton__IQcG0[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); } .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):hover, :where([data-fpl-group]:hover) .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']), [data-fpl-group]:has([data-show-focus]:focus-visible) .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):not(:focus-visible){ --icon-button-icon:var(--color-icon); } .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):hover .toggle-tip__icon__z9TWq, :where([data-fpl-group]:hover) .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']) .toggle-tip__icon__z9TWq, [data-fpl-group]:has([data-show-focus]:focus-visible) .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):not(:focus-visible) .toggle-tip__icon__z9TWq{ background:var(--color-bg-transparent-hover); } .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):active{ --icon-button-icon:var(--color-icon); } .toggle-tip__iconTriggerButton__IQcG0:not([aria-disabled='true']):active .toggle-tip__icon__z9TWq{ background:var(--color-bg-transparent-pressed); } .toggle-tip__iconTriggerButton__IQcG0[data-show-focus]:focus-visible{ outline:none; } .toggle-tip__iconTriggerButton__IQcG0[data-show-focus]:focus-visible .toggle-tip__icon__z9TWq{ --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-tip__icon__z9TWq{ --icon-button-radius:var(--radius-medium); --icon-button-icon-size:1rem; display:flex; justify-content:center; align-items:center; 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; } .toggle-tip__trail__sdb9G{ display:inline-flex; flex-direction:row; gap:var(--spacer-1, 0.3rem); align-items:center; padding:var(--spacer-1, 0.3rem) var(--spacer-1, 0.3rem) var(--spacer-1, 0.3rem) 0; } .toggle-tip__shortcutText__M7FjA{ 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:1; min-width:0; padding-right:var(--spacer-1, 0.3rem); color:var(--color-text-secondary); overflow-wrap:break-word; } .form__row__EJ6Lu{ display:flex; flex-direction:column; } .form__md__Yv6-d{ gap:var(--spacer-1); margin-bottom:var(--spacer-2); } .form__lg__R2MmR{ 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{ display:flex; align-items:center; height:1rem; color:var(--color-text); } .form__labelRow__saVtn{ display:flex; justify-content:space-between; } .form__helper__U6b3z{ display:flex; gap:var(--spacer-1); align-items:center; margin:0; color:var(--color-text-secondary); } .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); display:flex; gap:var(--spacer-1); align-items:center; margin:0; color:var(--color-text-danger); } .banner__root__inu1D{ position:relative; display:flex; flex-basis:100%; justify-content:space-between; } .banner__content__w-Bvk{ display:flex; } .banner__message__5vNg-{ display:flex; flex-grow:1; flex-wrap:wrap; 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); } .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-{ flex-shrink:0; margin:calc(var(--spacer-1, 0.3rem)*-1) 0; padding:var(--spacer-1, 0.3rem) 0; } .banner__link__xTpa-:active{ background:unset !important; } .banner__fullWidthType__Z5YjP{ padding-left:var(--spacer-2, 0.5rem); } .banner__fullWidthType__Z5YjP .banner__content__w-Bvk{ flex-flow:row wrap; flex-grow:1; justify-content:space-between; align-items:center; padding:var(--spacer-2, 0.5rem) var(--spacer-2, 0.5rem) var(--spacer-2, 0.5rem) var(--spacer-1, 0.3rem); column-gap:var(--spacer-2, 0.5rem); } .banner__fullWidthType__Z5YjP .banner__iconContainer__OJjv2{ align-items:center; } .banner__fullWidthType__Z5YjP .banner__message__5vNg-{ padding:var(--spacer-1, 0.3rem) 0; column-gap:var(--spacer-2, 0.5rem); } .banner__fullWidthType__Z5YjP .banner__closeWrapper__LDSV6{ display:flex; align-items:center; padding:var(--spacer-2, 0.5rem); border-left:1px solid var(--color-bordertranslucent); } .banner__inlineType__5DSqf{ flex-direction:column; align-items:flex-start; padding:var(--spacer-1, 0.3rem) var(--spacer-2, 0.5rem) var(--spacer-2, 0.5rem); border-radius:var(--radius-medium, 0.3125rem); } .banner__inlineType__5DSqf .banner__content__w-Bvk{ flex-direction:column; row-gap:var(--spacer-2, 0.5rem); align-items:flex-start; padding:var(--spacer-1, 0.3rem) var(--spacer-1, 0.3rem) 0; } .banner__inlineType__5DSqf .banner__message__5vNg-{ flex-direction:column; } .banner__inlineType__5DSqf .banner__closeWrapper__LDSV6{ position:absolute; top:var(--spacer-1, 0.3rem); right:var(--spacer-1, 0.3rem); } .banner__informationalType__TRLt9{ flex-direction:column; align-items:flex-start; padding:var(--spacer-2-5, 0.5rem) var(--spacer-3, 1rem) var(--spacer-3, 1rem); } .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{ flex-direction:column; row-gap:var(--spacer-2, 0.5rem); align-items:flex-start; padding:var(--spacer-1, 0.3rem) var(--spacer-1, 0.3rem) 0; } .banner__informationalType__TRLt9 .banner__message__5vNg-{ flex-direction:column; } .banner__informationalType__TRLt9 .banner__closeWrapper__LDSV6{ position:absolute; top:calc(var(--spacer-2, 0.5rem) + var(--spacer-1, 0.3rem)); right:var(--spacer-2, 0.5rem); } .banner__insetModalType__iKAqf{ padding:var(--spacer-2, 0.5rem); column-gap:var(--spacer-2, 0.5rem); border-radius:var(--radius-medium, 0.3125rem); } .banner__insetModalType__iKAqf .banner__content__w-Bvk{ flex-flow:row wrap; flex-grow:1; justify-content:space-between; align-items:center; column-gap:var(--spacer-2, 0.5rem); } .banner__insetModalType__iKAqf .banner__message__5vNg-{ flex-direction:column; } .banner__insetType__r9XLp{ padding-left:var(--spacer-2, 0.5rem); border-radius:var(--radius-medium, 0.3125rem); } .banner__insetType__r9XLp .banner__content__w-Bvk{ flex-flow:row wrap; flex-grow:1; justify-content:space-between; align-items:center; min-width:0; padding:var(--spacer-2, 0.5rem) var(--spacer-2, 0.5rem) var(--spacer-2, 0.5rem) var(--spacer-1, 0.3rem); column-gap:var(--spacer-2, 0.5rem); } .banner__insetType__r9XLp .banner__iconContainer__OJjv2{ padding-top:var(--spacer-2, 0.5rem); } .banner__insetType__r9XLp .banner__message__5vNg-{ padding:var(--spacer-1, 0.3rem) 0; column-gap:var(--spacer-2, 0.5rem); } .banner__insetType__r9XLp .banner__closeWrapper__LDSV6{ padding:var(--spacer-2, 0.5rem); 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); } .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){ background:var(--color-bghovertransparent); } .icon-button__ghost__1ok6j:not([aria-disabled='true']):active{ background:var(--color-bgtransparent-secondary-hover); } .icon-button__ghost__1ok6j[data-show-focus]:focus-visible{ --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{ --icon-button-outline-color:var(--color-border-selected); } .icon-button__secondary__-jfOG:not([aria-disabled='true']):active{ background:var(--color-bghovertransparent); } .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; } .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-disabled); --icon-button-icon-secondary:var(--color-icon-disabled); --icon-button-icon-tertiary:var(--color-icon-disabled); background:var(--color-bg-disabled); } .icon-button__primary__R4q5D[data-show-focus]:focus-visible{ --icon-button-outline-offset:0.0625rem; --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']):active{ background:var(--color-bg-brand-pressed); } .icon-button__primaryCircle__lapkn{ --icon-button-icon:var(--color-icon-onbrand); --icon-button-radius:var(--radius-full); background-color:var(--color-bg-brand); } .icon-button__primaryCircle__lapkn[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); background:var(--color-bg-disabled); } .icon-button__primaryCircle__lapkn[data-show-focus]:focus-visible{ --icon-button-outline-offset:0.0625rem; --icon-button-outline-color:var(--color-border-selected); } .icon-button__primaryCircle__lapkn:not([aria-disabled='true']):hover, :where([data-fpl-group]:hover) .icon-button__primaryCircle__lapkn:not([aria-disabled='true']), [data-fpl-group]:has([data-show-focus]:focus-visible) .icon-button__primaryCircle__lapkn:not([aria-disabled='true']):not(:focus-visible){ background:var(--color-bg-brand); } .icon-button__primaryCircle__lapkn:not([aria-disabled='true']):active{ background:var(--color-bg-brand-pressed); } .toggle-button__input__NF3YA{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity: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:transparent; } .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{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; width:100%; height:100%; 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; } .toggle-button__toggleButton__opcx3{ --icon-button-size:1.5rem; --icon-button-icon-size:1.5rem; --icon-button-radius:var(--radius-medium); position:relative; display:flex; } .toggle-button__toggleButton__opcx3.toggle-button__sizeLg__-UK3Y{ --icon-button-size:2rem; } .stepper__up__z53LA, .stepper__down__zob3i{ --color-icon:var(--color-icon-secondary); --offset:2px; flex:0 0 0.75rem; min-height:0; background:transparent; } .stepper__up__z53LA:disabled, .stepper__down__zob3i:disabled{ --color-icon:var(--color-icon-tertiary); } .stepper__up__z53LA:not(:disabled):hover, .stepper__down__zob3i:not(:disabled):hover{ --color-icon:inherit; } .stepper__up__z53LA:not(:disabled):active, .stepper__down__zob3i:not(:disabled):active{ --offset:1px; } .stepper__up__z53LA{ border-top-right-radius:var(--radius-medium); } .stepper__up__z53LA > svg{ transform:translateY(var(--offset)); } .stepper__down__zob3i{ border-bottom-right-radius:var(--radius-medium); } .stepper__down__zob3i > svg{ transform:translateY(calc(var(--offset)*-1)); } .select__trigger__r1rqC{ 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); display:flex; align-items:center; padding:0 0 0 var(--spacer-2); box-sizing:border-box; color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-medium); background:var(--color-bg); -webkit-user-select:none; user-select:none; } .select__trigger__r1rqC:focus-visible{ outline:1px solid var(--color-border-selected); outline-offset:-1px; } .select__trigger__r1rqC:disabled, .select__trigger__r1rqC[aria-disabled='true']{ --fpl-icon-color:var(--color-icon-disabled); color:var(--color-text-disabled); } .select__triggerContent__ZmjT4{ text-align:left; text-wrap:nowrap; text-overflow:ellipsis; overflow:hidden; } .select__lead__9Wz1o{ display:flex; align-items:center; height:1.5rem; margin-left:calc(var(--spacer-2)*-1); } .select__triggerContainer__69alI{ display:grid; grid-template-columns:1fr 1.5rem; align-items:center; width:100%; margin-top:-1px; } .select__dark__z2S-S{ --select-background:var(--color-bg-menu); background-color:var(--select-background); } .select__light__ZPzTt{ --select-background:var(--color-bg); background-color:var(--select-background); } .select__container__bEPx-{ padding:var(--spacer-2) 0; border-radius:var(--radius-large); list-style-type:none; box-shadow:var(--elevation-400); } .select__container__bEPx- .select__group__6-RCX:not(:first-child){ margin-top:var(--spacer-2); padding-top:var(--spacer-2); } .select__separator__Esj5N{ --separator-gap:0.4375rem; margin-top:var(--separator-gap); padding-top:var(--separator-gap); border-top:1px solid var(--color-border); } .select__option__p8RMn{ 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); } .select__option__p8RMn:focus{ outline:0; } .select__option__p8RMn[aria-selected='false'] .select__optionIcon__Gg4OF{ opacity:0; } .select__option__p8RMn[aria-selected='false'] .select__optionIconLead__OQJuP{ opacity:1; } .select__option__p8RMn[aria-selected='true'] .select__optionIcon__Gg4OF{ opacity:1; } .select__option__p8RMn[aria-selected='true'] .select__optionIconLead__OQJuP{ opacity:0; } .select__option__p8RMn[aria-disabled='true'], .select__option__p8RMn[aria-disabled='true'][data-fpl-selected] .select__optionInner__dN2u1{ color:var(--color-text-disabled); } .select__option__p8RMn[aria-disabled='true']:not([data-fpl-selected]) .select__optionInner__dN2u1{ background-color:transparent; } .select__optionInner__dN2u1{ display:grid; grid-template-columns:1rem 1fr; gap:var(--spacer-1); align-items:center; width:100%; padding:var(--spacer-1); padding-right:var(--spacer-4); box-sizing:border-box; border-radius:var(--radius-medium); } [data-fpl-selected='true'] .select__optionInner__dN2u1, [data-fpl-selected='false']:hover:not(:disabled):not([aria-disabled='true']) .select__optionInner__dN2u1{ --fpl-icon-color:var(--color-icon-onbrand); color:var(--color-text-onbrand); background-color:var(--color-bg-brand); } .select__optionIcon__Gg4OF{ grid-row:1; grid-column:1; } .select__optionIconLead__OQJuP{ grid-row:1; grid-column:1; } .select__optionText__iI1Gx{ grid-row:1; grid-column:2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .select__inputGroup__SFgrR{ display:flex; flex-direction:column; gap:var(--spacer-1); } .select__group__6-RCX{ margin:0; padding:0; list-style-type:none; } .select__group__6-RCX:not(:first-child){ border-top:1px solid var(--color-border); } .select__groupLabel__mTJxS{ 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); display:flex; align-items:center; height:1.5rem; padding:0 var(--spacer-3); color:var(--color-text-tertiary); } .select__scrollArrow__nfZxe{ background-color:var(--select-background); } .select__scrollArrow__nfZxe:hover{ background-color:var(--color-bg-hover); } .select__scrollArrow__nfZxe[data-fpl-select-direction='down']{ border-bottom-right-radius:var(--radius-large); border-bottom-left-radius:var(--radius-large); } .select__scrollArrow__nfZxe[data-fpl-select-direction='up']{ border-top-left-radius:var(--radius-large); border-top-right-radius:var(--radius-large); } .select__fill__5eps8{ width:100%; text-align:left; } .select__hug__xpOwt{ width:fit-content; } .select__md__bE-kQ{ height:1.5rem; } .select__lg__O-bfN{ height:2rem; } @layer reset{ .grid-primitive-cell__cell__7RyeB:focus-visible{ border-radius:var(--radius-medium); outline:1px solid var(--color-border-selected); } } .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{ position:fixed; top:0; left:0; z-index:var(--z-index-scrub-cursor); width:100vw; height:100vh; height:100dvh; pointer-events:none; } .use-scrub__cursor__MpGYj > div{ position:absolute; display:grid; width:0; height:0; } .use-scrub__cursor__MpGYj > :nth-child(1){ 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){ left:0; bottom:0; } .use-scrub__cursor__MpGYj > div > *{ transform:translate(-50%, -50%); } .tabs-primitive__tabPanelHidden__4RMiV{ display:none; } .dialog-common__sidebar__KAr8F{ grid-area:sidebar; width:calc(var(--width, 15rem) + 1px); box-sizing:border-box; border-right:1px solid var(--color-border); } .dialog-common__groupBase__DCUhG:not(:last-child){ border-bottom:1px solid var(--color-border); } .dialog-common__group__nlrwK{ display:flex; flex-direction:column; padding:var(--spacer-2); } .dialog-common__groupTitle__mAoxh{ 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); display:flex; align-items:center; min-height:1.5rem; padding-left:0.75rem; color:var(--color-text-secondary); } .dialog-common__tabStrip__WAGGi, .dialog-common__tabGroup__Viw3J{ display:flex; flex-direction:column; } .dialog-common__tabGroup__Viw3J{ padding:var(--spacer-1) 0; } .dialog-common__tab__XePXB{ --outline:transparent; position:relative; display:flex; gap:var(--spacer-1); align-items:center; min-height:2rem; padding:0 var(--spacer-3); color:var(--color-text); text-align:left; text-wrap:nowrap; border:none; background-color:var(--color-bg); outline:none; isolation:isolate; -webkit-user-select:none; user-select:none; } .dialog-common__tab__XePXB::after{ position:absolute; inset:var(--spacer-1) var(--spacer-2); z-index:-1; border-radius:var(--radius-medium); background:var(--color-bg-hover); outline:1px solid var(--outline); outline-offset:-1px; } .dialog-common__tab__XePXB:hover::after, .dialog-common__tab__XePXB[aria-selected='true']::after{ content:''; } .dialog-common__tab__XePXB:hover::after{ background-color:var(--color-bg-hover); } .dialog-common__tab__XePXB:has(> svg:first-child){ padding-left:var(--spacer-2); } .dialog-common__tab__XePXB[aria-selected='true']::after{ background:var(--color-bg-secondary); } .dialog-common__tab__XePXB > span{ grid-row:1; grid-column:1; word-break:keep-all; } .dialog-common__tab__XePXB > .dialog-common__tabButtonStrong__uYo5E{ 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); } .dialog-common__tab__XePXB[aria-selected='true']{ color:var(--color-text); 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); } .dialog-common__tab__XePXB[data-show-focus]:focus-visible{ --outline:var(--color-border-selected); } .dialog-common__tab__XePXB{ 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); } .inputs__text__FIVwi{ --fpl-input-cursor:default; } .link-button__link__zeZSY{ text-align:center; text-decoration:none; cursor:pointer; -webkit-user-select:none; user-select:none; } ._5dooxx0:focus { outline: none; } [data-modal-fullscreen] ._5dooxx0 { width: 100%; height: 100%; } ._5dooxx0:not([data-top-page]) { position: absolute; opacity: 0; pointer-events: none; } ._13bc4u00 { position: absolute; clip-path: inset(50%); margin: -1px; border-width: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; user-select: none; white-space: nowrap; } ._13bc4u01 { display: contents; } ._1rmwg390 { position: absolute; display: flex; align-items: center; justify-content: center; outline: none; } ._1rmwg390::before { position: absolute; border-radius: var(--radius-full); background: var(--color-border-selected); } ._1rmwg390[aria-orientation="vertical"] { cursor: ns-resize; height: 8px; } ._1rmwg390[aria-orientation="vertical"]::before { width: 50%; height: 4px; } ._1rmwg390[aria-orientation="horizontal"] { cursor: ew-resize; width: 8px; } ._1rmwg390[aria-orientation="horizontal"]::before { width: 4px; height: 50%; } ._1rmwg390[data-fpl-side="top"] { top: -6px; left: 0; width: 100%; } ._1rmwg390[data-fpl-side="top"]::before { transform: translateY(2px); } ._1rmwg390[data-fpl-side="bottom"] { bottom: -6px; left: 0; width: 100%; } ._1rmwg390[data-fpl-side="bottom"]::before { transform: translateY(-2px); } ._1rmwg390[data-fpl-side="left"] { top: 0; left: -6px; height: 100%; } ._1rmwg390[data-fpl-side="left"]::before { transform: translateX(2px); } ._1rmwg390[data-fpl-side="right"] { top: 0; right: -6px; height: 100%; } ._1rmwg390[data-fpl-side="right"]::before { transform: translateX(-2px); } ._1rmwg390:focus-visible::before { content: ""; } ._1rmwg390[data-fpl-side="top"][data-fpl-extrema="max"] { cursor: s-resize; } ._1rmwg390[data-fpl-side="top"][data-fpl-extrema="min"] { cursor: n-resize; } ._1rmwg390[data-fpl-side="bottom"][data-fpl-extrema="max"] { cursor: n-resize; } ._1rmwg390[data-fpl-side="bottom"][data-fpl-extrema="min"] { cursor: s-resize; } ._1rmwg390[data-fpl-side="left"][data-fpl-extrema="max"] { cursor: e-resize; } ._1rmwg390[data-fpl-side="left"][data-fpl-extrema="min"] { cursor: w-resize; } ._1rmwg390[data-fpl-side="right"][data-fpl-extrema="max"] { cursor: w-resize; } ._1rmwg390[data-fpl-side="right"][data-fpl-extrema="min"] { cursor: e-resize; } .mjji5b { --mjji50: 18px; --mjji51: 7px; --mjji52: 4px; --mjji53: 3.5px; --mjji54: 17.5px; --mjji55: 17.5px; --mjji56: 5px; --mjji57: radial-gradient(circle at var(--mjji50) var(--mjji51), transparent var(--mjji53), black var(--mjji53)); --mjji58: radial-gradient(circle at var(--mjji54) var(--mjji55), transparent var(--mjji56), black var(--mjji56)); --mjji59: radial-gradient(circle at var(--mjji50) var(--mjji51), transparent var(--mjji53), black var(--mjji53)), radial-gradient(circle at var(--mjji54) var(--mjji55), black var(--mjji56), transparent var(--mjji56)) ; position: relative; width: 24px; height: 24px; } .mjji5b:has([data-fpl-icon-size="16"]) { --mjji50: 13px; --mjji51: 4px; } .mjji5b:has([data-fpl-icon-size="24"]) { --mjji50: 18px; --mjji51: 7px; } .mjji5b:has([data-fpl-icon-size="24L"]) { --mjji50: 20px; --mjji51: 6px; --mjji52: 6px; --mjji53: 4.5px; --mjji54: 18.5px; --mjji55: 18.5px; --mjji56: 6px; } .mjji5d { --mjji5a: var(--mjji57); } .mjji5e { --mjji5a: var(--mjji58); } .mjji5f { --mjji5a: var(--mjji59); } .mjji5g { position: absolute; top: var(--mjji51); left: var(--mjji50); transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--fpl-icon-badge-color, var(--color-icon-danger)); width: var(--mjji52); height: var(--mjji52); } .mjji5h { position: absolute; top: var(--mjji55); left: var(--mjji54); display: none; transform: translate(-50%, -50%); } .mjji5b:has([data-fpl-icon-size="24"]) .mjji5i { display: block; } .mjji5b:has([data-fpl-icon-size="24L"]) .mjji5j { display: block; } .mjji5b > :first-child { mask-image: var(--mjji5a); mask-composite: exclude; } ._1ajgxie0 { line-height: var(--text-display-line-height); letter-spacing: var(--text-display-letter-spacing); font-family: var(--text-display-font-family); font-size: var(--text-display-font-size); font-weight: var(--text-display-font-weight); } ._1ajgxie1 { line-height: var(--text-heading-large-line-height); letter-spacing: var(--text-heading-large-letter-spacing); font-family: var(--text-heading-large-font-family); font-size: var(--text-heading-large-font-size); font-weight: var(--text-heading-large-font-weight); } ._1ajgxie2 { line-height: var(--text-heading-medium-line-height); letter-spacing: var(--text-heading-medium-letter-spacing); font-family: var(--text-heading-medium-font-family); font-size: var(--text-heading-medium-font-size); font-weight: var(--text-heading-medium-font-weight); } ._1ajgxie3 { line-height: var(--text-heading-small-line-height); letter-spacing: var(--text-heading-small-letter-spacing); font-family: var(--text-heading-small-font-family); font-size: var(--text-heading-small-font-size); font-weight: var(--text-heading-small-font-weight); } ._1ajgxie4 { line-height: var(--text-body-large-line-height); letter-spacing: var(--text-body-large-letter-spacing); font-family: var(--text-body-large-font-family); font-size: var(--text-body-large-font-size); font-weight: var(--text-body-large-font-weight); } ._1ajgxie5 { line-height: var(--text-body-large-strong-line-height); letter-spacing: var(--text-body-large-strong-letter-spacing); 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); } ._1ajgxie6 { line-height: var(--text-body-medium-line-height); letter-spacing: var(--text-body-medium-letter-spacing); font-family: var(--text-body-medium-font-family); font-size: var(--text-body-medium-font-size); font-weight: var(--text-body-medium-font-weight); } ._1ajgxie7 { line-height: var(--text-body-medium-strong-line-height); letter-spacing: var(--text-body-medium-strong-letter-spacing); 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); } ._1ajgxie8 { line-height: var(--text-body-small-line-height); letter-spacing: var(--text-body-small-letter-spacing); font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); font-weight: var(--text-body-small-font-weight); } ._1ajgxie9 { line-height: var(--text-body-small-strong-line-height); letter-spacing: var(--text-body-small-strong-letter-spacing); 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); } @property --_10es1vk0 { syntax: ""; inherits: false; initial-value: transparent; } @property --_10es1vk1 { syntax: ""; inherits: false; initial-value: transparent; } @layer reset; ._10es1vk2 { 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); overflow: hidden; color: var(--color-text); } [data-modal-fullscreen] ._10es1vk2 { border-radius: 0; box-shadow: none; width: 100%; height: 100%; } ._10es1vk2 ._10es1vk3 { overflow: initial; } ._10es1vk4 { display: grid; } ._10es1vk5 { grid-template: 'header header' auto 'sidebar body' 1fr 'sidebar footer' auto / auto 1fr; } ._10es1vk6 { grid-template: 'header header' auto 'sidebar body' 1fr 'footer footer' auto / auto 1fr; } ._10es1vk4 > * { min-width: 0; } ._10es1vk7 { position: absolute; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 14.9%)) drop-shadow(0 10px 16px rgb(0 0 0 / 12.2%)) drop-shadow(0 0 0.5px rgb(0 0 0 / 12.2%)); ; clip-path: polygon(-100% -100%, 200% -100%, 200% 100%, -100% 100%); pointer-events: none; stroke-width: 0.5px; } [data-preferred-theme="dark"] ._10es1vk7 { filter: drop-shadow(0 2px 5px rgb(0 0 0 / 34.9%)) drop-shadow(0 10px 16px rgb(0 0 0 / 34.9%)) ; } ._10es1vk8 { top: 0; transform: translate(-50%, -90%); } ._10es1vk9 { right: 0; transform: translate(8.5px, -3px) rotate(90deg); } ._10es1vka { bottom: 0; transform: translate(-50%, 95%) rotate(180deg); } ._10es1vkb { left: 0; transform: translate(-8.5px, -3px) rotate(-90deg); } ._10es1vkd { grid-area: header; box-shadow: inset 0 -1px var(--color-border); } ._10es1vkf { box-sizing: border-box; display: flex; align-items: center; padding-right: calc(32rem / 16); padding-left: var(--spacer-2); } ._10es1vkc ._10es1vkf { padding-right: var(--spacer-2); } :where(body:not(.feature_flag_fpl_dialog_header_min_height)) ._10es1vkf { height: calc(40rem / 16); } :where(body.feature_flag_fpl_dialog_header_min_height) ._10es1vkf { min-height: calc(40rem / 16); } ._10es1vkg { margin: var(--spacer-12px) 0 var(--spacer-12px) var(--spacer-8px); user-select: none; } ._10es1vkg:focus-visible { outline: 1px solid var(--color-border-selected); outline-offset: 4px; border-radius: var(--radius-medium); } ._10es1vkh { position: absolute; top: calc(8rem / 16); right: calc(8rem / 16); display: flex; align-items: center; justify-content: center; pointer-events: auto; } ._10es1vkj { --color-icon: var(--color-iconondarkcanvas); } ._10es1vkj:hover { background: var(--color-bghoverondarkcanvas); } ._10es1vkk { --color-icon: var(--color-icononlightcanvas); } ._10es1vkk:hover { background: var(--color-bghoveronlightcanvas); } ._10es1vkl { margin-left: calc(-1 * var(--spacer-2)); width: calc(100% + var(--spacer-2)); } ._10es1vkm { display: flex; align-items: center; height: 100%; } ._10es1vkn { padding-left: var(--spacer-2); } ._10es1vko { transition: var(--_10es1vk0), var(--_10es1vk1); transition-timing-function: linear; transition-duration: var(--duration-sm); } ._10es1vkl:not([data-fpl-scroll-x="none"]) ._10es1vko { mask-image: linear-gradient( to right, var(--_10es1vk0), black 32px, black calc(100% - 32px), var(--_10es1vk1) ) ; } ._10es1vkl[data-fpl-scroll-x="start"] ._10es1vko { --_10es1vk0: black; } ._10es1vkl[data-fpl-scroll-x="end"] ._10es1vko { --_10es1vk1: black; } ._10es1vkp { transition: mask-size, mask-position; mask-position: center center; mask-size: 100%; } ._10es1vkl:not([data-fpl-scroll-x="none"]) ._10es1vkp { mask-image: linear-gradient( to right, transparent, black 32px, black calc(100% - 32px), transparent ) ; } ._10es1vkl[data-fpl-scroll-x="start"] ._10es1vkp { mask-position: right center; mask-size: calc(100% + 32px); } ._10es1vkl[data-fpl-scroll-x="end"] ._10es1vkp { mask-position: left center; mask-size: calc(100% + 32px); } ._10es1vkq { grid-area: body; touch-action: none; padding: var(--spacer-2) var(--spacer-3); overflow-y: auto; } ._10es1vk3 ._10es1vkq { overflow-y: initial; } [data-body-scrolls] ._10es1vkq, [data-resizing] ._10es1vkq { touch-action: initial; overflow-y: auto; } ._10es1vkq._10es1vkr { overflow-y: hidden; } ._10es1vks { grid-area: body; } ._10es1vkt { padding: var(--spacer-2) var(--spacer-3); } ._10es1vku { position: relative; } ._10es1vkv { grid-area: footer; box-shadow: inset 0 1px var(--color-border); } ._10es1vkw { display: flex; align-items: center; padding: 0 8px 0 16px; min-height: var(--spacer-6); } ._10es1vkx { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacer-2); margin-left: auto; } :where(body.feature_flag_fpl_dialog_header_min_height) ._10es1vkx { align-self: start; min-height: calc(40rem / 16); } @layer reset { ._10es1vke { padding-right: calc(32rem / 16); } ._10es1vkc ._10es1vke { padding-right: 0; } } /* "shared/auth/views/auth_view/auth_form/verify_human_form.css" */ @layer css-modules { .verify_human_form--modalContainer--HHS66 { padding: 48px 32px; border-radius: 13px; width: 350px; display: flex; flex-direction: column; gap: 24px; text-align: center; } .verify_human_form--modalContainer--HHS66 * { font-size: 16px; line-height: 24px; } .verify_human_form--title--dMAaz { font-family: var(--figma-sans); font-size: 32px; font-weight: 400; line-height: 100%; } .verify_human_form--timeoutText--epUTH { display: inline; } } /* "shared/auth/views/auth_view/authentication/google_sso_redirect/google_sso_redirect.css" */ @layer css-modules { .google_sso_redirect--redirectOverlay--JDjM5 { 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--DTN47 { 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--iiAxF { margin-top: 2px; margin-right: 8px; min-width: 16px; color: currentColor; fill: currentColor; } .inline_banner--information--py6Ld { background: var(--color-bg-selected); } .inline_banner--error--fyvtW { background: var(--color-bg-measure-tertiary); } .inline_banner--warning--e-qBj { background: var(--color-bg-warning-tertiary); } .inline_banner--figjam--QYVh4 { background: var(--color-bg-figjam-tertiary); } .inline_banner--plain--63mA6 { background: var(--color-bg-secondary); } .inline_banner--fullWidth--Zsj-V { width: 100%; } .inline_banner--closeWrapper--K8clr { display: flex; margin-left: auto; } } /* "shared/components/brand/brand_buttons.css" */ @layer css-modules { .brand_buttons--figmaSans--DrTle { font-family: 'Figma Sans', sans-serif !important; font-variation-settings: 'wdth' 98; font-optical-sizing: auto; } .brand_buttons--fullWidth--wxuBy { width: 100%; } .brand_buttons--autoHeight--6570e { height: auto; min-height: 48px; max-height: 100px; } .brand_buttons--brandButtonHoverIconEffects--3yLPb { transition: border-radius 160ms ease-out 0s; } .brand_buttons--brandButtonHoverIconEffects--3yLPb > span { transition: translate 160ms ease-out 0s; } .brand_buttons--brandButtonHoverIconEffects--3yLPb > span > span > svg { fill: var(--color-bg); transition: opacity 160ms ease-out 0s; opacity: 0; } .brand_buttons--brandButtonHoverIconEffects--3yLPb:hover, .brand_buttons--brandButtonHoverIconEffects--3yLPb:active, .brand_buttons--brandButtonHoverIconEffects--3yLPb:focus { border-radius: 0; } .brand_buttons--brandButtonHoverIconEffects--3yLPb:hover > span, .brand_buttons--brandButtonHoverIconEffects--3yLPb:active > span, .brand_buttons--brandButtonHoverIconEffects--3yLPb:focus > span { translate: 9px; } .brand_buttons--brandButtonHoverIconEffects--3yLPb:hover > span > span > svg, .brand_buttons--brandButtonHoverIconEffects--3yLPb:active > span > span > svg, .brand_buttons--brandButtonHoverIconEffects--3yLPb:focus > span > span > svg { opacity: 1; } @keyframes brand_buttons--loadingSpinner--pyfR9 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .brand_buttons--brandButtonLoadingIconEffects--ehMt4 { transition: border-radius 160ms ease-out 0s; border-radius: 0; } .brand_buttons--brandButtonLoadingIconEffects--ehMt4 > span { transition: translate 160ms ease-out 0s; translate: 9px; } .brand_buttons--brandButtonLoadingIconEffects--ehMt4 > span > span > svg { fill: var(--color-bg); animation: brand_buttons--loadingSpinner--pyfR9 2s infinite linear; } .brand_buttons--brandButton---M0AN { display: flex; justify-content: center; align-items: center; background-color: var(--standard-brand-button); } .brand_buttons--brandButton---M0AN:disabled { background-color: var(--standard-button-disabled, #000); } .brand_buttons--brandButton---M0AN:hover:not(:disabled) { background-color: var(--standard-brand-button); } .brand_buttons--brandButton---M0AN:focus { border-radius: 8px; outline: 2px solid var(--color-border-strong); outline-offset: 4px; outline-style: dashed; } .brand_buttons--brandButtonContent--Cqygr { font-size: 18px; font-weight: 480; line-height: 140%; letter-spacing: -0.09px; position: relative; display: block; } .brand_buttons--standardButtonContent--YH2Tl { color: var(--standard-brand-button-content); } .brand_buttons--iconContainer--TZlGd { display: inline-block; position: absolute; inset: 50% auto auto -23px; translate: 0px -50%; pointer-events: none; } .brand_buttons--hollowButton--DR02c { 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--DR02c:hover:not(:disabled) { box-shadow: unset; background-color: var(--hollow-button-background); } .brand_buttons--hollowButton--DR02c:focus { box-shadow: unset; outline: 2px solid var(--color-border-strong); outline-offset: 4px; outline-style: dashed; } .brand_buttons--googleText--eFD1h { 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--B-z2c { display: flex; align-items: center; justify-content: center; } .brand_buttons--googleIcon--9qgFK { width: 18px; height: 18px; display: inline-block; margin-right: 12px; } } /* "ui2/avatar/user.css" */ @layer css-modules { .user--avatarContainer--4NmkU { 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--Yqydl::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; } }