.spectrum { /* spectrum-animationGlobals.css */ --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-global-animation-duration-0: 0ms; --spectrum-global-animation-duration-100: 130ms; --spectrum-global-animation-duration-200: 160ms; --spectrum-global-animation-duration-300: 190ms; --spectrum-global-animation-duration-400: 220ms; --spectrum-global-animation-duration-500: 250ms; --spectrum-global-animation-duration-600: 300ms; --spectrum-global-animation-duration-700: 350ms; --spectrum-global-animation-duration-800: 400ms; --spectrum-global-animation-duration-900: 450ms; --spectrum-global-animation-duration-1000: 500ms; --spectrum-global-animation-duration-2000: 1000ms; --spectrum-global-animation-duration-4000: 2000ms; --spectrum-global-animation-ease-in-out: cubic-bezier(.45, 0, .40, 1); --spectrum-global-animation-ease-in: cubic-bezier(.50, 0, 1, 1); --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.40, 1); --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); /* spectrum-colorGlobals.css */ --spectrum-global-color-status: Verified; --spectrum-global-color-version: 5.1.0; --spectrum-global-color-static-black: rgb(0, 0, 0); --spectrum-global-color-static-white: rgb(255, 255, 255); --spectrum-global-color-static-blue: rgb(20, 115, 230); --spectrum-global-color-static-gray-50: rgb(255, 255, 255); --spectrum-global-color-static-gray-75: rgb(255, 255, 255); --spectrum-global-color-static-gray-100: rgb(255, 255, 255); --spectrum-global-color-static-gray-200: rgb(244, 244, 244); --spectrum-global-color-static-gray-300: rgb(234, 234, 234); --spectrum-global-color-static-gray-400: rgb(211, 211, 211); --spectrum-global-color-static-gray-500: rgb(188, 188, 188); --spectrum-global-color-static-gray-600: rgb(149, 149, 149); --spectrum-global-color-static-gray-700: rgb(116, 116, 116); --spectrum-global-color-static-gray-800: rgb(80, 80, 80); --spectrum-global-color-static-gray-900: rgb(50, 50, 50); --spectrum-global-color-static-blue-200: rgb(90, 169, 250); --spectrum-global-color-static-blue-300: rgb(75, 156, 245); --spectrum-global-color-static-blue-400: rgb(55, 142, 240); --spectrum-global-color-static-blue-500: rgb(38, 128, 235); --spectrum-global-color-static-blue-600: rgb(20, 115, 230); --spectrum-global-color-static-blue-700: rgb(13, 102, 208); --spectrum-global-color-static-blue-800: rgb(9, 90, 186); --spectrum-global-color-static-red-400: rgb(236, 91, 98); --spectrum-global-color-static-red-500: rgb(227, 72, 80); --spectrum-global-color-static-red-600: rgb(215, 55, 63); --spectrum-global-color-static-red-700: rgb(201, 37, 45); --spectrum-global-color-static-red-800: rgb(187, 18, 26); --spectrum-global-color-static-orange-400: rgb(242, 148, 35); --spectrum-global-color-static-orange-500: rgb(230, 134, 25); --spectrum-global-color-static-orange-600: rgb(218, 123, 17); --spectrum-global-color-static-orange-700: rgb(203, 111, 16); --spectrum-global-color-static-orange-800: rgb(189, 100, 13); --spectrum-global-color-static-green-400: rgb(51, 171, 132); --spectrum-global-color-static-green-500: rgb(45, 157, 120); --spectrum-global-color-static-green-600: rgb(38, 142, 108); --spectrum-global-color-static-green-700: rgb(18, 128, 92); --spectrum-global-color-static-green-800: rgb(16, 113, 84); --spectrum-global-color-static-celery-200: rgb(88, 224, 111); --spectrum-global-color-static-celery-300: rgb(81, 210, 103); --spectrum-global-color-static-celery-400: rgb(75, 195, 95); --spectrum-global-color-static-celery-500: rgb(68, 181, 86); --spectrum-global-color-static-celery-600: rgb(61, 167, 78); --spectrum-global-color-static-celery-700: rgb(55, 153, 71); --spectrum-global-color-static-celery-800: rgb(49, 139, 64); --spectrum-global-color-static-chartreuse-300: rgb(155, 236, 84); --spectrum-global-color-static-chartreuse-400: rgb(142, 222, 73); --spectrum-global-color-static-chartreuse-500: rgb(133, 208, 68); --spectrum-global-color-static-chartreuse-600: rgb(124, 195, 63); --spectrum-global-color-static-chartreuse-700: rgb(115, 181, 58); --spectrum-global-color-static-chartreuse-800: rgb(106, 168, 52); --spectrum-global-color-static-yellow-200: rgb(255, 226, 46); --spectrum-global-color-static-yellow-300: rgb(250, 217, 0); --spectrum-global-color-static-yellow-400: rgb(237, 204, 0); --spectrum-global-color-static-yellow-500: rgb(223, 191, 0); --spectrum-global-color-static-yellow-600: rgb(210, 178, 0); --spectrum-global-color-static-yellow-700: rgb(196, 166, 0); --spectrum-global-color-static-yellow-800: rgb(183, 153, 0); --spectrum-global-color-static-magenta-200: rgb(245, 107, 183); --spectrum-global-color-static-magenta-300: rgb(236, 90, 170); --spectrum-global-color-static-magenta-400: rgb(226, 73, 157); --spectrum-global-color-static-magenta-500: rgb(216, 55, 144); --spectrum-global-color-static-magenta-600: rgb(202, 41, 130); --spectrum-global-color-static-magenta-700: rgb(188, 28, 116); --spectrum-global-color-static-magenta-800: rgb(174, 14, 102); --spectrum-global-color-static-fuchsia-400: rgb(207, 62, 220); --spectrum-global-color-static-fuchsia-500: rgb(192, 56, 204); --spectrum-global-color-static-fuchsia-600: rgb(177, 48, 189); --spectrum-global-color-static-fuchsia-700: rgb(162, 40, 173); --spectrum-global-color-static-fuchsia-800: rgb(147, 33, 158); --spectrum-global-color-static-purple-400: rgb(157, 100, 225); --spectrum-global-color-static-purple-500: rgb(146, 86, 217); --spectrum-global-color-static-purple-600: rgb(134, 76, 204); --spectrum-global-color-static-purple-700: rgb(122, 66, 191); --spectrum-global-color-static-purple-800: rgb(111, 56, 177); --spectrum-global-color-static-indigo-200: rgb(144, 144, 250); --spectrum-global-color-static-indigo-300: rgb(130, 130, 246); --spectrum-global-color-static-indigo-400: rgb(117, 117, 241); --spectrum-global-color-static-indigo-500: rgb(103, 103, 236); --spectrum-global-color-static-indigo-600: rgb(92, 92, 224); --spectrum-global-color-static-indigo-700: rgb(81, 81, 211); --spectrum-global-color-static-indigo-800: rgb(70, 70, 198); --spectrum-global-color-static-seafoam-200: rgb(38, 192, 199); --spectrum-global-color-static-seafoam-300: rgb(35, 178, 184); --spectrum-global-color-static-seafoam-400: rgb(32, 163, 168); --spectrum-global-color-static-seafoam-500: rgb(27, 149, 154); --spectrum-global-color-static-seafoam-600: rgb(22, 135, 140); --spectrum-global-color-static-seafoam-700: rgb(15, 121, 125); --spectrum-global-color-static-seafoam-800: rgb(9, 108, 111); --spectrum-global-color-sequential-cerulean: #E9FFF1,#C8F1E4,#A5E3D7,#82D5CA,#68C5C1,#54B4BA,#3FA2B2,#2991AC,#2280A2,#1F6D98,#1D5C8D,#1A4B83,#1A3979,#1A266F,#191264,#180057; --spectrum-global-color-sequential-forest: #FFFFDF,#E2F6BA,#C4EB95,#A4E16D,#8DD366,#77C460,#5FB65A,#48A754,#36984F,#2C894D,#237A4A,#196B47,#105C45,#094D41,#033F3E,#00313A; --spectrum-global-color-sequential-rose: #FFF4DD,#FFDDD7,#FFC5D2,#FEAECB,#FA96C4,#F57EBD,#EF64B5,#E846AD,#D238A1,#BB2E96,#A3248C,#8A1B83,#71167C,#560F74,#370B6E,#000968; --spectrum-global-color-diverging-orange-yellow-seafoam: #580000,#79260B,#9C4511,#BD651A,#DD8629,#F5AD52,#FED693,#FFFFE0,#BBE4D1,#76C7BE,#3EA8A6,#208288,#076769,#00494B,#002C2D; --spectrum-global-color-diverging-red-yellow-blue: #4A001E,#751232,#A52747,#C65154,#E47961,#F0A882,#FAD4AC,#FFFFE0,#BCE2CF,#89C0C4,#579EB9,#397AA8,#1C5796,#163771,#10194D; --spectrum-global-color-diverging-red-blue: #4A001E,#731331,#9F2945,#CC415A,#E06E85,#ED9AB0,#F8C3D9,#FAF0FF,#C6D0F2,#92B2DE,#5D94CB,#2F74B3,#265191,#163670,#0B194C; /* spectrum-colorSemantics.css */ --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-700); --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500); --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600); --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400); --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400); --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500); --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600); --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700); --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700); --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600); --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400); --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600); --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700); --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800); --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700); --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-700); --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500); --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600); --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400); --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600); --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400); --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500); --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600); --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700); --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400); --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600); --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700); --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800); --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700); --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-700); --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500); --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600); --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400); --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600); --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400); --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500); --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600); --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700); --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400); --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600); --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700); --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800); --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700); --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-700); --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500); --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600); --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400); --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600); --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400); --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500); --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600); --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700); --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400); --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600); --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700); --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800); --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700); --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-blue-600); --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-blue-700); --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-blue-800); --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-blue-600); --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700); --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800); --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900); --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800); --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500); --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400); --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400); --spectrum-semantic-presence-color-4: rgb(75, 204, 162); --spectrum-semantic-presence-color-5: rgb(0, 199, 255); --spectrum-semantic-presence-color-6: rgb(0, 140, 184); --spectrum-semantic-presence-color-7: rgb(126, 75, 243); --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600); /* spectrum-dimensionGlobals.css */ --spectrum-global-dimension-static-percent-50: 50%; --spectrum-global-dimension-static-percent-70: 70%; --spectrum-global-dimension-static-percent-100: 100%; --spectrum-global-dimension-static-breakpoint-xsmall: 304px; --spectrum-global-dimension-static-breakpoint-small: 768px; --spectrum-global-dimension-static-breakpoint-medium: 1280px; --spectrum-global-dimension-static-breakpoint-large: 1768px; --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; --spectrum-global-dimension-static-grid-columns: 12; --spectrum-global-dimension-static-grid-fluid-width: 100%; --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; --spectrum-global-dimension-static-size-0: 0px; --spectrum-global-dimension-static-size-10: 1px; --spectrum-global-dimension-static-size-25: 2px; --spectrum-global-dimension-static-size-40: 3px; --spectrum-global-dimension-static-size-50: 4px; --spectrum-global-dimension-static-size-65: 5px; --spectrum-global-dimension-static-size-75: 6px; --spectrum-global-dimension-static-size-85: 7px; --spectrum-global-dimension-static-size-100: 8px; --spectrum-global-dimension-static-size-115: 9px; --spectrum-global-dimension-static-size-125: 10px; --spectrum-global-dimension-static-size-130: 11px; --spectrum-global-dimension-static-size-150: 12px; --spectrum-global-dimension-static-size-160: 13px; --spectrum-global-dimension-static-size-175: 14px; --spectrum-global-dimension-static-size-200: 16px; --spectrum-global-dimension-static-size-225: 18px; --spectrum-global-dimension-static-size-250: 20px; --spectrum-global-dimension-static-size-275: 22px; --spectrum-global-dimension-static-size-300: 24px; --spectrum-global-dimension-static-size-325: 26px; --spectrum-global-dimension-static-size-400: 32px; --spectrum-global-dimension-static-size-450: 36px; --spectrum-global-dimension-static-size-500: 40px; --spectrum-global-dimension-static-size-550: 44px; --spectrum-global-dimension-static-size-600: 48px; --spectrum-global-dimension-static-size-700: 56px; --spectrum-global-dimension-static-size-800: 64px; --spectrum-global-dimension-static-size-900: 72px; --spectrum-global-dimension-static-size-1000: 80px; --spectrum-global-dimension-static-size-1200: 96px; --spectrum-global-dimension-static-size-1700: 136px; --spectrum-global-dimension-static-size-2400: 192px; --spectrum-global-dimension-static-size-2500: 200px; --spectrum-global-dimension-static-size-2600: 208px; --spectrum-global-dimension-static-size-2800: 224px; --spectrum-global-dimension-static-size-3200: 256px; --spectrum-global-dimension-static-size-3400: 272px; --spectrum-global-dimension-static-size-3500: 280px; --spectrum-global-dimension-static-size-3600: 288px; --spectrum-global-dimension-static-size-3800: 304px; --spectrum-global-dimension-static-size-4600: 368px; --spectrum-global-dimension-static-size-5000: 400px; --spectrum-global-dimension-static-size-6000: 480px; --spectrum-global-dimension-static-size-16000: 1280px; --spectrum-global-dimension-static-font-size-50: 11px; --spectrum-global-dimension-static-font-size-75: 12px; --spectrum-global-dimension-static-font-size-100: 14px; --spectrum-global-dimension-static-font-size-150: 15px; --spectrum-global-dimension-static-font-size-200: 16px; --spectrum-global-dimension-static-font-size-300: 18px; --spectrum-global-dimension-static-font-size-400: 20px; --spectrum-global-dimension-static-font-size-500: 22px; --spectrum-global-dimension-static-font-size-600: 25px; --spectrum-global-dimension-static-font-size-700: 28px; --spectrum-global-dimension-static-font-size-800: 32px; --spectrum-global-dimension-static-font-size-900: 36px; --spectrum-global-dimension-static-font-size-1000: 40px; /* spectrum-fontGlobals.css */ --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif; --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; --spectrum-global-font-weight-thin: 100; --spectrum-global-font-weight-ultra-light: 200; --spectrum-global-font-weight-light: 300; --spectrum-global-font-weight-regular: 400; --spectrum-global-font-weight-medium: 500; --spectrum-global-font-weight-semi-bold: 600; --spectrum-global-font-weight-bold: 700; --spectrum-global-font-weight-extra-bold: 800; --spectrum-global-font-weight-black: 900; --spectrum-global-font-style-regular: normal; --spectrum-global-font-style-italic: italic; --spectrum-global-font-letter-spacing-none: 0; --spectrum-global-font-letter-spacing-small: 0.0125em; --spectrum-global-font-letter-spacing-han: 0.05em; --spectrum-global-font-letter-spacing-medium: 0.06em; --spectrum-global-font-line-height-large: 1.7; --spectrum-global-font-line-height-medium: 1.5; --spectrum-global-font-line-height-small: 1.3; --spectrum-global-font-multiplier-0: 0em; --spectrum-global-font-multiplier-25: 0.25em; --spectrum-global-font-multiplier-75: 0.75em; --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, source-han-japanese, 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', 'sans-serif'; --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; /* spectrum-staticAliases.css */ --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300); --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300); --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small); --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light); --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25); --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base); --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium); --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular); --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75); --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold); --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular); --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular); --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular); --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular); --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code); --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular); --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium); --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); --spectrum-alias-font-family-ar: var(--spectrum-global-font-family-base); --spectrum-alias-font-family-he: var(--spectrum-global-font-family-base); --spectrum-alias-font-family-zh: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; --spectrum-alias-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; --spectrum-alias-font-family-ko: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; --spectrum-alias-font-family-ja: adobe-clean-han-japanese, source-han-japanese, 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', 'sans-serif'; --spectrum-alias-font-family-condensed: var(--spectrum-global-font-family-base); --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small); --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small); --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium); --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif); --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium); --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold); --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular); --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black); --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large); --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular); --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold); --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular); --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); } .spectrum--medium, .spectrum--large { /* spectrum-dimensionAliases.css */ --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200); --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250); --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300); --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75); --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200); --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300); --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75); --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130); --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175); --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50); --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50); --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200); --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250); --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300); --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50); --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130); --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50); --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185); --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225); --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40); --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130); --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40); --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130); --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160); --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185); --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175); --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200); --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225); --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250); --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75); --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75); --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185); --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175); --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200); --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225); --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75); --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100); --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75); --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185); --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100); --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900); --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700); --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500); --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200); --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900); --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800); --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600); --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400); --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200); --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900); --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800); --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600); --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400); --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200); --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800); --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700); --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500); --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300); --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200); --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-50); --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-static-size-0); --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10); --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-175); --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-200); --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-225); --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-250); --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-75); --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-85); --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-100); --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-115); --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-125); --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-175); --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-200); --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-225); --spectrum-alias-percent-50: 50%; --spectrum-alias-percent-70: 70%; --spectrum-alias-percent-100: 100%; --spectrum-alias-breakpoint-xsmall: 304px; --spectrum-alias-breakpoint-small: 768px; --spectrum-alias-breakpoint-medium: 1280px; --spectrum-alias-breakpoint-large: 1768px; --spectrum-alias-breakpoint-xlarge: 2160px; --spectrum-alias-grid-columns: 12; --spectrum-alias-grid-fluid-width: 100%; --spectrum-alias-grid-fixed-max-width: 1280px; --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-0); --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-10); --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10); --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100); --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10); --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25); --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50); --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100); --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200); --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400); --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400); --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200); --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225); --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275); --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200); --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225); --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250); --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275); --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100); --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200); --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300); --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65); --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75); --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100); --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); } .spectrum--darkest, .spectrum--dark, .spectrum--light, .spectrum--lightest { /* spectrum-colorAliases.css */ --spectrum-alias-colorhandle-outer-border-color: rgba(0,0,0,0.42); --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500); --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800); --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-key-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color: var(--spectrum-global-color-gray-800); --spectrum-alias-component-text-color-selected-default: var(--spectrum-global-color-gray-800); --spectrum-alias-component-text-color-selected-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-selected-down: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-component-text-color-selected: var(--spectrum-global-color-gray-800); --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-global-color-static-white); --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover); --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down); --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); --spectrum-alias-component-text-color-error: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); --spectrum-alias-component-icon-color-default: var(--spectrum-alias-icon-color); --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover); --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down); --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); --spectrum-alias-component-icon-color: var(--spectrum-alias-icon-color); --spectrum-alias-component-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral-subdued); --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white); --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-global-color-static-white); --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-global-color-static-white); --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-global-color-static-white); --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-global-color-static-white); --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent); --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-75); --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-component-background-color: var(--spectrum-global-color-gray-75); --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-selected: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent); --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-background-color-transparent); --spectrum-alias-component-background-color-quiet-down: var(--spectrum-global-color-gray-300); --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-background-color-transparent); --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-background-color-transparent); --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-global-color-gray-200); --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled); --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent); --spectrum-alias-component-border-color-default: var(--spectrum-alias-border-color); --spectrum-alias-component-border-color-hover: var(--spectrum-alias-border-color-hover); --spectrum-alias-component-border-color-down: var(--spectrum-alias-border-color-down); --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-component-border-color: var(--spectrum-alias-border-color); --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-border-color); --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-border-color-hover); --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-border-color-down); --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-component-border-color-selected: var(--spectrum-alias-border-color); --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent); --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent); --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent); --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-border-color-transparent); --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-global-color-gray-200); --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-global-color-gray-200); --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-global-color-gray-200); --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-global-color-gray-200); --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-700); --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-800); --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-800); --spectrum-alias-toggle-background-color: var(--spectrum-global-color-gray-700); --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-semantic-cta-background-color-default); --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-700); --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-800); --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-800); --spectrum-alias-toggle-border-color: var(--spectrum-global-color-gray-700); --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75); --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-static-white); --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-background-color: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-border-color-hover: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-border-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-border-color: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-text-color-default: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-text-color: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-icon-color-default: var(--spectrum-global-color-gray-800); --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-icon-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-primary-icon-color: var(--spectrum-global-color-gray-800); --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800); --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-border-color-down: var(--spectrum-global-color-gray-800); --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-border-color: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-text-color-default: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-text-color: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-global-color-gray-700); --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-secondary-icon-color: var(--spectrum-global-color-gray-700); --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700); --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-background-color: var(--spectrum-alias-background-color-transparent); --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700); --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-border-color: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-text-color-default: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-text-color: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-icon-color-default: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-icon-color-down: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-global-color-gray-50); --spectrum-alias-button-negative-icon-color: var(--spectrum-semantic-negative-text-color-small); --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent); --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid); --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color); --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover); --spectrum-alias-input-border-color-down: var(--spectrum-alias-border-color-mouse-focus); --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-alias-border-color-mouse-focus); --spectrum-alias-input-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-input-border-color: var(--spectrum-alias-border-color); --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default); --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover); --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down); --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover); --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-alias-border-color-key-focus); --spectrum-alias-input-border-color-invalid: var(--spectrum-semantic-negative-color-default); --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-600); --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-700); --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-700); --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-800); --spectrum-alias-background-color-yellow: var(--spectrum-global-color-static-yellow-600); --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100); --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200); --spectrum-alias-background-color-transparent: transparent; --spectrum-alias-background-color-overbackground-down: rgba(255,255,255,0.2); --spectrum-alias-background-color-quiet-overbackground-hover: rgba(255,255,255,0.1); --spectrum-alias-background-color-quiet-overbackground-down: rgba(255,255,255,0.2); --spectrum-alias-background-color-overbackground-disabled: rgba(255,255,255,0.1); --spectrum-alias-background-color-quickactions-overlay: rgba(0,0,0,0.2); --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800); --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800); --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600); --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900); --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white); --spectrum-alias-text-color-overbackground-disabled: rgba(255,255,255,0.2); --spectrum-alias-text-color-quiet-overbackground-disabled: rgba(255,255,255,0.2); --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400); --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500); --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100); --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600); --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900); --spectrum-alias-border-color-transparent: transparent; --spectrum-alias-border-color-translucent-dark: rgba(0,0,0,0.05); --spectrum-alias-border-color-translucent-darker: rgba(0,0,0,0.1); --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-400); --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white); --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); --spectrum-alias-track-color-overbackground: rgba(255,255,255,0.2); --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white); --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); --spectrum-alias-icon-color-overbackground-disabled: rgba(255,255,255,0.2); --spectrum-alias-icon-color-quiet-overbackground-disabled: rgba(255,255,255,0.15); --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900); --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800); --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600); --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700); --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600); --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30); --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100); --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800); --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75); --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600); --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600); --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600); --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600); --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600); --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600); --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600); --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600); --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600); --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700); --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200); --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700); --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500); --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500); --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200); --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200); --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500); --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800); --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500); --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700); --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600); --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300); --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200); --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500); --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200); --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200); } .spectrum--medium { --spectrum-global-dimension-scale-factor: 1; --spectrum-global-dimension-size-0: 0px; --spectrum-global-dimension-size-10: 1px; --spectrum-global-dimension-size-25: 2px; --spectrum-global-dimension-size-40: 3px; --spectrum-global-dimension-size-50: 4px; --spectrum-global-dimension-size-65: 5px; --spectrum-global-dimension-size-75: 6px; --spectrum-global-dimension-size-85: 7px; --spectrum-global-dimension-size-100: 8px; --spectrum-global-dimension-size-115: 9px; --spectrum-global-dimension-size-125: 10px; --spectrum-global-dimension-size-130: 11px; --spectrum-global-dimension-size-150: 12px; --spectrum-global-dimension-size-160: 13px; --spectrum-global-dimension-size-175: 14px; --spectrum-global-dimension-size-185: 15px; --spectrum-global-dimension-size-200: 16px; --spectrum-global-dimension-size-225: 18px; --spectrum-global-dimension-size-250: 20px; --spectrum-global-dimension-size-275: 22px; --spectrum-global-dimension-size-300: 24px; --spectrum-global-dimension-size-325: 26px; --spectrum-global-dimension-size-350: 28px; --spectrum-global-dimension-size-400: 32px; --spectrum-global-dimension-size-450: 36px; --spectrum-global-dimension-size-500: 40px; --spectrum-global-dimension-size-550: 44px; --spectrum-global-dimension-size-600: 48px; --spectrum-global-dimension-size-650: 52px; --spectrum-global-dimension-size-675: 54px; --spectrum-global-dimension-size-700: 56px; --spectrum-global-dimension-size-750: 60px; --spectrum-global-dimension-size-800: 64px; --spectrum-global-dimension-size-900: 72px; --spectrum-global-dimension-size-1000: 80px; --spectrum-global-dimension-size-1125: 90px; --spectrum-global-dimension-size-1200: 96px; --spectrum-global-dimension-size-1250: 100px; --spectrum-global-dimension-size-1600: 128px; --spectrum-global-dimension-size-1700: 136px; --spectrum-global-dimension-size-1800: 144px; --spectrum-global-dimension-size-2000: 160px; --spectrum-global-dimension-size-2400: 192px; --spectrum-global-dimension-size-2500: 200px; --spectrum-global-dimension-size-3000: 240px; --spectrum-global-dimension-size-3400: 272px; --spectrum-global-dimension-size-3600: 288px; --spectrum-global-dimension-size-4600: 368px; --spectrum-global-dimension-size-5000: 400px; --spectrum-global-dimension-size-6000: 480px; --spectrum-global-dimension-font-size-25: 10px; --spectrum-global-dimension-font-size-50: 11px; --spectrum-global-dimension-font-size-75: 12px; --spectrum-global-dimension-font-size-100: 14px; --spectrum-global-dimension-font-size-150: 15px; --spectrum-global-dimension-font-size-200: 16px; --spectrum-global-dimension-font-size-300: 18px; --spectrum-global-dimension-font-size-400: 20px; --spectrum-global-dimension-font-size-500: 22px; --spectrum-global-dimension-font-size-600: 25px; --spectrum-global-dimension-font-size-700: 28px; --spectrum-global-dimension-font-size-800: 32px; --spectrum-global-dimension-font-size-900: 36px; --spectrum-global-dimension-font-size-1000: 40px; --spectrum-global-dimension-font-size-1100: 45px; --spectrum-global-dimension-font-size-1200: 50px; --spectrum-global-dimension-font-size-1300: 60px; --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115); --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65); --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175); --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75); --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75); --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125); --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-item-control-3-width-s: 23px; --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325); --spectrum-alias-item-control-3-width-l: 29px; --spectrum-alias-item-control-3-width-xl: 33px; --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-150); --spectrum-alias-control-three-width-s: 23px; --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-325); --spectrum-alias-control-three-width-l: 29px; --spectrum-alias-control-three-width-xl: 33px; --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250); --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175); --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175); --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225); --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175); --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225); --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100); --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175); --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150); --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175); --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200); --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225); --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250); --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25); --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65); --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85); --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125); --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); --spectrum-dragthumb-swatch-width: var(--spectrum-global-dimension-static-size-150); --spectrum-dragthumb-swatch-height: var(--spectrum-global-dimension-static-size-200); --spectrum-actionbutton-s-quiet-emphasized-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-emphasized-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-emphasized-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-quiet-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-quiet-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-actionbutton-s-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-s-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-actionbutton-m-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-actionbutton-m-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-actionbutton-m-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-quiet-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-m-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-emphasized-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-emphasized-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-emphasized-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-emphasized-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-emphasized-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-quiet-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-quiet-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-quiet-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-emphasized-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-actionbutton-l-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-actionbutton-l-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-l-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-quiet-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-emphasized-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-icononly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-actionbutton-xl-icononly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-badge-s-fuchsia-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-indigo-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-informative-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-magenta-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-negative-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-neutral-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-positive-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-purple-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-seafoam-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-yellow-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-fuchsia-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-indigo-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-informative-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-magenta-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-negative-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-positive-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-purple-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-seafoam-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-yellow-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-fuchsia-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-indigo-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-informative-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-magenta-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-negative-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-neutral-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-positive-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-purple-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-seafoam-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-s-yellow-icononly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-badge-m-fuchsia-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-indigo-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-informative-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-magenta-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-negative-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-neutral-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-positive-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-purple-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-seafoam-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-m-yellow-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-badge-l-fuchsia-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-fuchsia-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-indigo-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-indigo-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-informative-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-informative-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-magenta-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-magenta-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-negative-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-negative-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-neutral-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-neutral-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-positive-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-positive-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-purple-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-purple-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-seafoam-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-seafoam-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-yellow-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-yellow-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-fuchsia-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-fuchsia-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-indigo-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-indigo-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-informative-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-informative-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-magenta-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-magenta-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-negative-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-negative-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-neutral-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-neutral-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-positive-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-positive-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-purple-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-purple-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-seafoam-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-seafoam-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-yellow-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-yellow-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-fuchsia-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-fuchsia-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-indigo-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-indigo-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-informative-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-informative-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-magenta-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-magenta-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-negative-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-negative-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-neutral-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-neutral-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-positive-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-positive-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-purple-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-purple-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-seafoam-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-seafoam-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-badge-l-yellow-icononly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-badge-l-yellow-icononly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-breadcrumb-s-multiline-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-s-multiline-item-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-breadcrumb-s-multiline-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-s-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-s-item-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-breadcrumb-s-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-m-multiline-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-m-multiline-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-m-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-m-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-l-multiline-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-l-multiline-item-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-breadcrumb-l-multiline-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-l-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-breadcrumb-l-item-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-breadcrumb-l-item-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-overbackground-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-cta-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-cta-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-primary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-primary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-secondary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-secondary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-overbackground-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-button-s-negative-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-s-negative-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-cta-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-cta-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-cta-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-primary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-primary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-primary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-primary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-secondary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-secondary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-secondary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-secondary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-negative-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-negative-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-negative-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-overbackground-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-negative-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-texticon-padding-left: var(--spectrum-global-dimension-size-175); --spectrum-button-m-cta-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-cta-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-primary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-secondary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-m-negative-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-quiet-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-quiet-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-quiet-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-quiet-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-overbackground-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-overbackground-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-quiet-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-cta-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-cta-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-cta-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-quiet-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-primary-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-primary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-primary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-quiet-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-secondary-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-secondary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-secondary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-quiet-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-overbackground-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-overbackground-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-button-l-negative-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-button-l-negative-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-l-negative-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-cta-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-texticon-padding-left: 21px; --spectrum-button-xl-cta-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-cta-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-texticon-padding-left: 21px; --spectrum-button-xl-primary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-primary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-texticon-padding-left: 21px; --spectrum-button-xl-primary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-primary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-texticon-padding-left: 21px; --spectrum-button-xl-secondary-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-secondary-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-texticon-padding-left: 21px; --spectrum-button-xl-secondary-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-secondary-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-texticon-padding-left: 21px; --spectrum-button-xl-negative-quiet-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-negative-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-texticon-padding-left: 21px; --spectrum-button-xl-negative-overbackground-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-overbackground-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-overbackground-texticon-padding-left: 21px; --spectrum-button-xl-negative-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-texticon-padding-left: 21px; --spectrum-button-xl-cta-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-cta-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-primary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-secondary-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-overbackground-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-overbackground-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-button-xl-negative-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-s-emphasized-box-size: var(--spectrum-global-dimension-size-150); --spectrum-checkbox-s-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-checkbox-s-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-s-box-size: var(--spectrum-global-dimension-size-150); --spectrum-checkbox-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-checkbox-s-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-m-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-m-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-l-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-checkbox-l-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-checkbox-l-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-xl-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-checkbox-xl-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-s-overbackground-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-s-overbackground-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-s-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-s-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-m-overbackground-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-m-overbackground-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-m-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-clearbutton-m-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-colorslider-vertical-touch-hit-x: var(--spectrum-global-dimension-size-150); --spectrum-colorslider-touch-hit-y: var(--spectrum-global-dimension-size-150); --spectrum-colorwheel-min-size: var(--spectrum-global-dimension-size-2400); --spectrum-colorwheel-touch-hit-outer: var(--spectrum-global-dimension-size-150); --spectrum-colorwheel-touch-hit-inner: var(--spectrum-global-dimension-size-150); --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); --spectrum-colorwheel-min-height: var(--spectrum-global-dimension-size-2400); --spectrum-dialog-confirm-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-confirm-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-confirm-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-confirm-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-dialog-destructive-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-destructive-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-destructive-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-destructive-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-destructive-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-dialog-error-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-error-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-error-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-error-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-error-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-dialog-info-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-info-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-info-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-info-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-info-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-dialog-fullscreen-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-fullscreen-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-fullscreen-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-fullscreen-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-fullscreen-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-dialog-fullscreentakeover-title-text-size: var(--spectrum-global-dimension-font-size-300); --spectrum-dialog-fullscreentakeover-description-text-size: var(--spectrum-global-dimension-font-size-100); --spectrum-dialog-fullscreentakeover-description-margin-bottom: var(--spectrum-global-dimension-static-size-600); --spectrum-dialog-fullscreentakeover-max-width: var(--spectrum-global-dimension-static-size-6000); --spectrum-dialog-fullscreentakeover-padding: var(--spectrum-global-dimension-static-size-500); --spectrum-colorloupe-colorhandle-gap: var(--spectrum-global-dimension-static-size-125); --spectrum-colorloupe-offset-y: var(--spectrum-global-dimension-static-size-125); --spectrum-cyclebutton-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-cyclebutton-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-helptext-s-neutral-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-s-negative-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-s-neutral-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-s-negative-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-m-neutral-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-m-negative-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-m-neutral-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-m-negative-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-helptext-l-neutral-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-helptext-l-negative-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-helptext-l-neutral-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-helptext-l-negative-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-helptext-xl-neutral-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-helptext-xl-negative-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-helptext-xl-neutral-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-helptext-xl-negative-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-listitem-s-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-listitem-s-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-listitem-s-textthumbnail-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-listitem-m-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-listitem-m-textthumbnail-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-listitem-l-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-listitem-l-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-listitem-l-texticon-thumbnail-size: var(--spectrum-global-dimension-static-size-250); --spectrum-listitem-l-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-listitem-l-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-listitem-l-textonly-thumbnail-size: var(--spectrum-global-dimension-static-size-250); --spectrum-listitem-l-textthumbnail-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-listitem-l-textthumbnail-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-listitem-l-textthumbnail-thumbnail-size: var(--spectrum-global-dimension-static-size-250); --spectrum-meter-s-negative-overbackground-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-negative-overbackground-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-s-negative-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-negative-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-s-notice-overbackground-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-notice-overbackground-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-s-notice-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-notice-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-s-positive-overbackground-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-positive-overbackground-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-s-positive-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-s-positive-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-meter-m-negative-overbackground-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-m-negative-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-m-notice-overbackground-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-m-notice-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-m-positive-overbackground-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-m-positive-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-meter-l-negative-overbackground-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-l-negative-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-l-notice-overbackground-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-l-notice-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-l-positive-overbackground-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-l-positive-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-meter-xl-negative-overbackground-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-xl-negative-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-xl-notice-overbackground-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-xl-notice-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-xl-positive-overbackground-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-meter-xl-positive-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-pagination-page-button-line-height: 26px; --spectrum-pagination-button-page-button-line-height: 26px; --spectrum-pagination-explicit-page-button-line-height: 26px; --spectrum-pagination-listing-page-button-line-height: 26px; --spectrum-picker-s-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-quiet-textthumbnail-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-quiet-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-quiet-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-textthumbnail-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-picker-s-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-s-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-texticon-popover-offset-x: var(--spectrum-global-dimension-size-125); --spectrum-picker-m-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-picker-m-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-quiet-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-textthumbnail-popover-offset-x: var(--spectrum-global-dimension-size-125); --spectrum-picker-m-textthumbnail-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-picker-m-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-m-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-textthumbnail-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-quiet-textthumbnail-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-quiet-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-quiet-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-textthumbnail-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-picker-l-textthumbnail-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-picker-l-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-l-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-quiet-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-textthumbnail-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-picker-xl-textthumbnail-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-panel-s-collapsible-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-s-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-s-spacious-collapsible-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-s-spacious-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-l-collapsible-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-l-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-l-spacious-collapsible-header-height: var(--spectrum-global-dimension-size-600); --spectrum-panel-l-spacious-header-height: var(--spectrum-global-dimension-size-600); --spectrum-progresscircle-s-indeterminate-overbackground-border-size: var(--spectrum-global-dimension-static-size-25); --spectrum-progresscircle-s-indeterminate-border-size: var(--spectrum-global-dimension-static-size-25); --spectrum-progresscircle-s-overbackground-border-size: var(--spectrum-global-dimension-static-size-25); --spectrum-progresscircle-s-border-size: var(--spectrum-global-dimension-static-size-25); --spectrum-progresscircle-m-indeterminate-overbackground-border-size: 3px; --spectrum-progresscircle-m-indeterminate-border-size: 3px; --spectrum-progresscircle-m-overbackground-border-size: 3px; --spectrum-progresscircle-m-border-size: 3px; --spectrum-progressbar-s-indeterminate-overbackground-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-s-indeterminate-overbackground-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-progressbar-s-indeterminate-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-s-indeterminate-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-progressbar-s-overbackground-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-s-overbackground-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-progressbar-s-value-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-s-border-radius: var(--spectrum-global-dimension-static-size-25); --spectrum-progressbar-m-indeterminate-overbackground-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-progressbar-m-indeterminate-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-progressbar-m-overbackground-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-progressbar-m-border-radius: var(--spectrum-global-dimension-static-size-40); --spectrum-progressbar-l-indeterminate-overbackground-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-progressbar-l-indeterminate-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-progressbar-l-overbackground-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-progressbar-l-value-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-progressbar-xl-indeterminate-overbackground-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-xl-indeterminate-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-xl-overbackground-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-progressbar-xl-border-radius: var(--spectrum-global-dimension-static-size-65); --spectrum-radio-s-emphasized-circle-diameter: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-emphasized-circle-width: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-emphasized-circle-height: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-radio-s-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-s-circle-diameter: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-circle-width: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-circle-height: var(--spectrum-global-dimension-size-150); --spectrum-radio-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-radio-s-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-m-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-m-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-l-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-radio-l-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-radio-l-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-xl-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-radio-xl-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-rating-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-rating-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-search-s-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-search-s-quiet-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-s-quiet-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-search-s-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-s-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-m-quiet-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-m-quiet-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-m-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-m-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-m-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-search-l-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-search-l-quiet-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-search-l-quiet-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-l-quiet-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-search-l-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-search-l-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-l-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-xl-quiet-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-xl-quiet-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-search-xl-touch-hit-x: var(--spectrum-global-dimension-size-100); --spectrum-search-xl-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-sidenav-multilevel-item-touch-hit-bottom: var(--spectrum-global-dimension-static-size-25); --spectrum-sidenav-multilevel-main-item-touch-hit-bottom: var(--spectrum-global-dimension-static-size-25); --spectrum-sidenav-item-touch-hit-bottom: var(--spectrum-global-dimension-static-size-25); --spectrum-sidenav-main-item-touch-hit-bottom: var(--spectrum-global-dimension-static-size-25); --spectrum-slider-s-tick-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-tick-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-tick-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-tick-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-ramp-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-ramp-tick-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-tick-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-tick-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-range-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-range-tick-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-tick-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-tick-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-tick-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-tick-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-tick-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-ramp-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-ramp-tick-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-tick-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-tick-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-range-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-range-tick-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-tick-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-ramp-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-ramp-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-editable-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-range-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-range-editable-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-editable-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-ramp-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-ramp-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-ramp-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-ramp-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-slider-s-range-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-s-range-handle-width: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-handle-height: var(--spectrum-global-dimension-size-150); --spectrum-slider-s-range-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-s-range-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-ramp-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-range-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-ramp-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-range-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-ramp-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-range-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-ramp-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-ramp-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-m-range-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-m-range-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-tick-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-tick-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-ramp-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-ramp-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-tick-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-range-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-range-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-tick-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-tick-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-ramp-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-ramp-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-tick-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-range-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-range-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-ramp-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-ramp-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-editable-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-range-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-range-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-ramp-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-ramp-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-ramp-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-slider-l-range-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-l-range-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-l-range-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-ramp-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-tick-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-range-tick-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-tick-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-ramp-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-tick-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-range-tick-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-tick-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-ramp-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-editable-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-range-editable-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-editable-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-ramp-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-ramp-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-track-touch-hit-y: var(--spectrum-global-dimension-size-100); --spectrum-slider-xl-range-handle-touch-hit-x: var(--spectrum-global-dimension-size-200); --spectrum-slider-xl-range-handle-touch-hit-y: var(--spectrum-global-dimension-size-200); --spectrum-statuslight-l-celery-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-chartreuse-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-fuchsia-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-indigo-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-info-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-magenta-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-neutral-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-negative-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-notice-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-positive-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-purple-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-seafoam-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-l-yellow-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-celery-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-chartreuse-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-fuchsia-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-indigo-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-info-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-magenta-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-neutral-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-negative-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-notice-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-positive-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-purple-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-seafoam-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-statuslight-xl-yellow-dot-size: var(--spectrum-global-dimension-size-125); --spectrum-switch-s-emphasized-handle-size: var(--spectrum-global-dimension-size-150); --spectrum-switch-s-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-switch-s-emphasized-track-height: var(--spectrum-global-dimension-size-150); --spectrum-switch-s-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-s-handle-size: var(--spectrum-global-dimension-size-150); --spectrum-switch-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-switch-s-track-height: var(--spectrum-global-dimension-size-150); --spectrum-switch-s-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-m-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-m-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-l-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-switch-l-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-switch-l-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-xl-emphasized-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-switch-xl-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tabs-s-quiet-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-quiet-emphasized-margin-left: -7px; --spectrum-tabs-s-quiet-emphasized-margin-right: -7px; --spectrum-tabs-s-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-s-quiet-margin-left: -7px; --spectrum-tabs-s-quiet-margin-right: -7px; --spectrum-tabs-s-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-emphasized-margin-left: -7px; --spectrum-tabs-s-emphasized-margin-right: -7px; --spectrum-tabs-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-focus-ring-border-radius: 5px; --spectrum-tabs-s-margin-left: -7px; --spectrum-tabs-s-margin-right: -7px; --spectrum-tabs-s-vertical-quiet-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-vertical-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-s-vertical-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-vertical-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-quiet-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-quiet-emphasized-margin-left: -7px; --spectrum-tabs-s-compact-quiet-emphasized-margin-right: -7px; --spectrum-tabs-s-compact-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-quiet-margin-left: -7px; --spectrum-tabs-s-compact-quiet-margin-right: -7px; --spectrum-tabs-s-compact-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-emphasized-margin-left: -7px; --spectrum-tabs-s-compact-emphasized-margin-right: -7px; --spectrum-tabs-s-compact-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-margin-left: -7px; --spectrum-tabs-s-compact-margin-right: -7px; --spectrum-tabs-s-compact-vertical-quiet-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-vertical-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-vertical-emphasized-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-s-compact-vertical-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tabs-s-compact-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-m-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-quiet-emphasized-margin-left: -8px; --spectrum-tabs-m-quiet-emphasized-margin-right: -8px; --spectrum-tabs-m-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-m-quiet-margin-left: -8px; --spectrum-tabs-m-quiet-margin-right: -8px; --spectrum-tabs-m-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-emphasized-margin-left: -8px; --spectrum-tabs-m-emphasized-margin-right: -8px; --spectrum-tabs-m-focus-ring-border-radius: 5px; --spectrum-tabs-m-margin-left: -8px; --spectrum-tabs-m-margin-right: -8px; --spectrum-tabs-m-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-m-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-quiet-emphasized-margin-left: -8px; --spectrum-tabs-m-compact-quiet-emphasized-margin-right: -8px; --spectrum-tabs-m-compact-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-quiet-margin-left: -8px; --spectrum-tabs-m-compact-quiet-margin-right: -8px; --spectrum-tabs-m-compact-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-emphasized-margin-left: -8px; --spectrum-tabs-m-compact-emphasized-margin-right: -8px; --spectrum-tabs-m-compact-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-margin-left: -8px; --spectrum-tabs-m-compact-margin-right: -8px; --spectrum-tabs-m-compact-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-m-compact-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-l-quiet-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-quiet-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-quiet-emphasized-margin-left: -9px; --spectrum-tabs-l-quiet-emphasized-margin-right: -9px; --spectrum-tabs-l-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-quiet-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-l-quiet-margin-left: -9px; --spectrum-tabs-l-quiet-margin-right: -9px; --spectrum-tabs-l-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-emphasized-margin-left: -9px; --spectrum-tabs-l-emphasized-margin-right: -9px; --spectrum-tabs-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-focus-ring-border-radius: 5px; --spectrum-tabs-l-margin-left: -9px; --spectrum-tabs-l-margin-right: -9px; --spectrum-tabs-l-vertical-quiet-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-vertical-quiet-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-vertical-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-vertical-quiet-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-l-vertical-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-vertical-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-vertical-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-vertical-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-quiet-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-quiet-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-quiet-emphasized-margin-left: -9px; --spectrum-tabs-l-compact-quiet-emphasized-margin-right: -9px; --spectrum-tabs-l-compact-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-quiet-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-quiet-margin-left: -9px; --spectrum-tabs-l-compact-quiet-margin-right: -9px; --spectrum-tabs-l-compact-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-emphasized-margin-left: -9px; --spectrum-tabs-l-compact-emphasized-margin-right: -9px; --spectrum-tabs-l-compact-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-margin-left: -9px; --spectrum-tabs-l-compact-margin-right: -9px; --spectrum-tabs-l-compact-vertical-quiet-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-vertical-quiet-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-vertical-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-vertical-quiet-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-vertical-emphasized-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-vertical-emphasized-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-l-compact-vertical-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tabs-l-compact-vertical-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tabs-l-compact-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-xl-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-quiet-emphasized-margin-left: -10px; --spectrum-tabs-xl-quiet-emphasized-margin-right: -10px; --spectrum-tabs-xl-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-xl-quiet-margin-left: -10px; --spectrum-tabs-xl-quiet-margin-right: -10px; --spectrum-tabs-xl-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-emphasized-margin-left: -10px; --spectrum-tabs-xl-emphasized-margin-right: -10px; --spectrum-tabs-xl-focus-ring-border-radius: 5px; --spectrum-tabs-xl-margin-left: -10px; --spectrum-tabs-xl-margin-right: -10px; --spectrum-tabs-xl-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-xl-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-vertical-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-quiet-emphasized-margin-left: -10px; --spectrum-tabs-xl-compact-quiet-emphasized-margin-right: -10px; --spectrum-tabs-xl-compact-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-quiet-margin-left: -10px; --spectrum-tabs-xl-compact-quiet-margin-right: -10px; --spectrum-tabs-xl-compact-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-emphasized-margin-left: -10px; --spectrum-tabs-xl-compact-emphasized-margin-right: -10px; --spectrum-tabs-xl-compact-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-margin-left: -10px; --spectrum-tabs-xl-compact-margin-right: -10px; --spectrum-tabs-xl-compact-vertical-quiet-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-vertical-quiet-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-vertical-emphasized-focus-ring-border-radius: 5px; --spectrum-tabs-xl-compact-vertical-focus-ring-border-radius: 5px; --spectrum-textfield-s-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-quiet-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textfield-s-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-quiet-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textfield-s-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textfield-s-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-s-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textfield-m-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-textfield-m-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-m-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-quiet-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textfield-l-quiet-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-textfield-l-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-quiet-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textfield-l-quiet-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-textfield-l-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textfield-l-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-textfield-l-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-l-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textfield-l-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-textfield-xl-quiet-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-quiet-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-quiet-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-quiet-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-texticon-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-texticon-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-textonly-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textfield-xl-textonly-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-removable-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-texticon-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-removable-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-textonly-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-avatartext-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-removable-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-removable-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-avatartext-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-tag-s-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-s-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-tag-m-removable-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-texticon-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-tag-m-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-avatartext-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-tag-m-removable-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-removable-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-avatartext-padding-left: var(--spectrum-global-dimension-size-125); --spectrum-tag-m-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-m-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-removable-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-texticon-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-texticon-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-texticon-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-texticon-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-texticon-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-texticon-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-removable-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-textonly-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-textonly-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-textonly-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-textonly-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-textonly-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-textonly-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-avatartext-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-removable-avatartext-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-avatartext-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-removable-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-removable-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-avatartext-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-tag-l-avatartext-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-avatartext-button-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-tag-l-avatartext-button-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-tag-l-avatartext-button-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-multiline-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textarea-s-multiline-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-multiline-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-quiet-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textarea-s-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-multiline-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textarea-s-multiline-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-multiline-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-textarea-s-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-s-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-multiline-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-multiline-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-multiline-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-multiline-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-m-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-multiline-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textarea-l-multiline-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-multiline-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-quiet-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textarea-l-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-multiline-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textarea-l-multiline-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-multiline-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-text-padding-top: var(--spectrum-global-dimension-size-115); --spectrum-textarea-l-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-l-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-multiline-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-multiline-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-quiet-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-quiet-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-multiline-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-multiline-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-touch-hit-x: var(--spectrum-global-dimension-static-size-100); --spectrum-textarea-xl-touch-hit-y: var(--spectrum-global-dimension-static-size-100); --spectrum-tooltip-neutral-padding-bottom: 5px; --spectrum-tooltip-info-padding-bottom: 5px; --spectrum-tooltip-positive-padding-bottom: 5px; --spectrum-tooltip-negative-padding-bottom: 5px; --spectrum-treeview-s-item-text-padding-bottom: var(--spectrum-global-dimension-static-size-65); --spectrum-treeview-l-item-icon-size: var(--spectrum-global-dimension-static-size-250); --spectrum-treeview-l-item-text-padding-top: var(--spectrum-global-dimension-size-115); } .spectrum--light { --spectrum-global-color-status: Verified; --spectrum-global-color-version: 5.1.0; --spectrum-global-color-opacity-100: 1; --spectrum-global-color-opacity-90: 0.9; --spectrum-global-color-opacity-80: 0.8; --spectrum-global-color-opacity-60: 0.6; --spectrum-global-color-opacity-50: 0.5; --spectrum-global-color-opacity-42: 0.42; --spectrum-global-color-opacity-40: 0.4; --spectrum-global-color-opacity-30: 0.3; --spectrum-global-color-opacity-25: 0.25; --spectrum-global-color-opacity-20: 0.2; --spectrum-global-color-opacity-15: 0.15; --spectrum-global-color-opacity-10: 0.1; --spectrum-global-color-opacity-8: 0.08; --spectrum-global-color-opacity-7: 0.07; --spectrum-global-color-opacity-6: 0.06; --spectrum-global-color-opacity-5: 0.05; --spectrum-global-color-opacity-4: 0.04; --spectrum-global-color-opacity-0: 0.00; --spectrum-global-color-celery-400: rgb(68, 181, 86); --spectrum-global-color-celery-500: rgb(61, 167, 78); --spectrum-global-color-celery-600: rgb(55, 153, 71); --spectrum-global-color-celery-700: rgb(49, 139, 64); --spectrum-global-color-chartreuse-400: rgb(133, 208, 68); --spectrum-global-color-chartreuse-500: rgb(124, 195, 63); --spectrum-global-color-chartreuse-600: rgb(115, 181, 58); --spectrum-global-color-chartreuse-700: rgb(106, 168, 52); --spectrum-global-color-yellow-400: rgb(223, 191, 0); --spectrum-global-color-yellow-500: rgb(210, 178, 0); --spectrum-global-color-yellow-600: rgb(196, 166, 0); --spectrum-global-color-yellow-700: rgb(183, 153, 0); --spectrum-global-color-magenta-400: rgb(216, 55, 144); --spectrum-global-color-magenta-500: rgb(206, 39, 131); --spectrum-global-color-magenta-600: rgb(188, 28, 116); --spectrum-global-color-magenta-700: rgb(174, 14, 102); --spectrum-global-color-fuchsia-400: rgb(192, 56, 204); --spectrum-global-color-fuchsia-500: rgb(177, 48, 189); --spectrum-global-color-fuchsia-600: rgb(162, 40, 173); --spectrum-global-color-fuchsia-700: rgb(147, 33, 158); --spectrum-global-color-purple-400: rgb(146, 86, 217); --spectrum-global-color-purple-500: rgb(134, 76, 204); --spectrum-global-color-purple-600: rgb(122, 66, 191); --spectrum-global-color-purple-700: rgb(111, 56, 177); --spectrum-global-color-indigo-400: rgb(103, 103, 236); --spectrum-global-color-indigo-500: rgb(92, 92, 224); --spectrum-global-color-indigo-600: rgb(81, 81, 211); --spectrum-global-color-indigo-700: rgb(70, 70, 198); --spectrum-global-color-seafoam-400: rgb(27, 149, 154); --spectrum-global-color-seafoam-500: rgb(22, 135, 140); --spectrum-global-color-seafoam-600: rgb(15, 121, 125); --spectrum-global-color-seafoam-700: rgb(9, 108, 111); --spectrum-global-color-red-400: rgb(227, 72, 80); --spectrum-global-color-red-500: rgb(215, 55, 63); --spectrum-global-color-red-600: rgb(201, 37, 45); --spectrum-global-color-red-700: rgb(187, 18, 26); --spectrum-global-color-orange-400: rgb(230, 134, 25); --spectrum-global-color-orange-500: rgb(218, 123, 17); --spectrum-global-color-orange-600: rgb(203, 111, 16); --spectrum-global-color-orange-700: rgb(189, 100, 13); --spectrum-global-color-green-400: rgb(45, 157, 120); --spectrum-global-color-green-500: rgb(38, 142, 108); --spectrum-global-color-green-600: rgb(18, 128, 92); --spectrum-global-color-green-700: rgb(16, 113, 84); --spectrum-global-color-blue-400: rgb(38, 128, 235); --spectrum-global-color-blue-500: rgb(20, 115, 230); --spectrum-global-color-blue-600: rgb(13, 102, 208); --spectrum-global-color-blue-700: rgb(9, 90, 186); --spectrum-global-color-gray-50: rgb(255, 255, 255); --spectrum-global-color-gray-75: rgb(250, 250, 250); --spectrum-global-color-gray-100: rgb(245, 245, 245); --spectrum-global-color-gray-200: rgb(234, 234, 234); --spectrum-global-color-gray-300: rgb(225, 225, 225); --spectrum-global-color-gray-400: rgb(202, 202, 202); --spectrum-global-color-gray-500: rgb(179, 179, 179); --spectrum-global-color-gray-600: rgb(142, 142, 142); --spectrum-global-color-gray-700: rgb(110, 110, 110); --spectrum-global-color-gray-800: rgb(75, 75, 75); --spectrum-global-color-gray-900: rgb(44, 44, 44); --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100); --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300); --spectrum-alias-background-color-modal-overlay: rgba(0,0,0,0.4); --spectrum-alias-dropshadow-color: rgba(0,0,0,0.15); --spectrum-alias-background-color-hover-overlay: rgba(44,44,44,0.04); --spectrum-alias-highlight-hover: rgba(44,44,44,0.06); --spectrum-alias-highlight-down: rgba(44,44,44,0.1); --spectrum-alias-highlight-selected: rgba(20,115,230,0.1); --spectrum-alias-highlight-selected-hover: rgba(20,115,230,0.2); --spectrum-alias-text-highlight-color: rgba(20,115,230,0.2); --spectrum-alias-background-color-quickactions: rgba(245,245,245,0.9); --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); --spectrum-alias-border-color-translucent: rgba(44,44,44,0.1); --spectrum-alias-radial-reaction-color-default: rgba(75,75,75,0.6); --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300); --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300); --spectrum-slider-s-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-ramp-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-range-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-range-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-ramp-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-s-range-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-ramp-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-range-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-range-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-ramp-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-m-range-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-ramp-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-range-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-range-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-ramp-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-l-range-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-ramp-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-ramp-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-slider-xl-range-radial-reaction-color: rgba(75,75,75,0.6); --spectrum-well-background-color: rgba(75,75,75,0.02); --spectrum-well-border-color: rgba(44,44,44,0.05); } .spectrum--darkest { --spectrum-global-color-status: Verified; --spectrum-global-color-version: 5.1.0; --spectrum-global-color-opacity-100: 1; --spectrum-global-color-opacity-90: 0.9; --spectrum-global-color-opacity-80: 0.8; --spectrum-global-color-opacity-60: 0.6; --spectrum-global-color-opacity-50: 0.5; --spectrum-global-color-opacity-42: 0.42; --spectrum-global-color-opacity-40: 0.4; --spectrum-global-color-opacity-30: 0.3; --spectrum-global-color-opacity-25: 0.25; --spectrum-global-color-opacity-20: 0.2; --spectrum-global-color-opacity-15: 0.15; --spectrum-global-color-opacity-10: 0.1; --spectrum-global-color-opacity-8: 0.08; --spectrum-global-color-opacity-7: 0.07; --spectrum-global-color-opacity-6: 0.06; --spectrum-global-color-opacity-5: 0.05; --spectrum-global-color-opacity-4: 0.04; --spectrum-global-color-opacity-0: 0.00; --spectrum-global-color-celery-400: rgb(61, 167, 78); --spectrum-global-color-celery-500: rgb(68, 181, 86); --spectrum-global-color-celery-600: rgb(75, 195, 95); --spectrum-global-color-celery-700: rgb(81, 210, 103); --spectrum-global-color-chartreuse-400: rgb(124, 195, 63); --spectrum-global-color-chartreuse-500: rgb(133, 208, 68); --spectrum-global-color-chartreuse-600: rgb(142, 222, 73); --spectrum-global-color-chartreuse-700: rgb(155, 236, 84); --spectrum-global-color-yellow-400: rgb(210, 178, 0); --spectrum-global-color-yellow-500: rgb(223, 191, 0); --spectrum-global-color-yellow-600: rgb(237, 204, 0); --spectrum-global-color-yellow-700: rgb(250, 217, 0); --spectrum-global-color-magenta-400: rgb(202, 41, 150); --spectrum-global-color-magenta-500: rgb(216, 55, 144); --spectrum-global-color-magenta-600: rgb(226, 73, 157); --spectrum-global-color-magenta-700: rgb(236, 90, 170); --spectrum-global-color-fuchsia-400: rgb(177, 48, 189); --spectrum-global-color-fuchsia-500: rgb(192, 56, 204); --spectrum-global-color-fuchsia-600: rgb(207, 62, 220); --spectrum-global-color-fuchsia-700: rgb(217, 81, 229); --spectrum-global-color-purple-400: rgb(134, 76, 204); --spectrum-global-color-purple-500: rgb(146, 86, 217); --spectrum-global-color-purple-600: rgb(157, 100, 225); --spectrum-global-color-purple-700: rgb(168, 115, 223); --spectrum-global-color-indigo-400: rgb(92, 92, 224); --spectrum-global-color-indigo-500: rgb(103, 103, 236); --spectrum-global-color-indigo-600: rgb(117, 117, 241); --spectrum-global-color-indigo-700: rgb(130, 130, 246); --spectrum-global-color-seafoam-400: rgb(22, 135, 140); --spectrum-global-color-seafoam-500: rgb(27, 149, 154); --spectrum-global-color-seafoam-600: rgb(32, 163, 168); --spectrum-global-color-seafoam-700: rgb(35, 178, 184); --spectrum-global-color-red-400: rgb(215, 55, 63); --spectrum-global-color-red-500: rgb(227, 72, 80); --spectrum-global-color-red-600: rgb(236, 91, 98); --spectrum-global-color-red-700: rgb(247, 109, 116); --spectrum-global-color-orange-400: rgb(218, 123, 17); --spectrum-global-color-orange-500: rgb(230, 134, 25); --spectrum-global-color-orange-600: rgb(242, 148, 35); --spectrum-global-color-orange-700: rgb(249, 164, 63); --spectrum-global-color-green-400: rgb(38, 142, 108); --spectrum-global-color-green-500: rgb(45, 157, 120); --spectrum-global-color-green-600: rgb(51, 171, 132); --spectrum-global-color-green-700: rgb(57, 185, 144); --spectrum-global-color-blue-400: rgb(20, 115, 230); --spectrum-global-color-blue-500: rgb(38, 128, 235); --spectrum-global-color-blue-600: rgb(55, 142, 240); --spectrum-global-color-blue-700: rgb(75, 156, 245); --spectrum-global-color-gray-50: rgb(8, 8, 8); --spectrum-global-color-gray-75: rgb(26, 26, 26); --spectrum-global-color-gray-100: rgb(30, 30, 30); --spectrum-global-color-gray-200: rgb(44, 44, 44); --spectrum-global-color-gray-300: rgb(57, 57, 57); --spectrum-global-color-gray-400: rgb(73, 73, 73); --spectrum-global-color-gray-500: rgb(92, 92, 92); --spectrum-global-color-gray-600: rgb(124, 124, 124); --spectrum-global-color-gray-700: rgb(162, 162, 162); --spectrum-global-color-gray-800: rgb(200, 200, 200); --spectrum-global-color-gray-900: rgb(239, 239, 239); --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50); --spectrum-alias-background-color-modal-overlay: rgba(0,0,0,0.6); --spectrum-alias-dropshadow-color: rgba(0,0,0,0.8); --spectrum-alias-background-color-hover-overlay: rgba(239,239,239,0.08); --spectrum-alias-highlight-hover: rgba(239,239,239,0.08); --spectrum-alias-highlight-down: rgba(239,239,239,0.15); --spectrum-alias-highlight-selected: rgba(38,128,235,0.2); --spectrum-alias-highlight-selected-hover: rgba(38,128,235,0.3); --spectrum-alias-text-highlight-color: rgba(38,128,235,0.3); --spectrum-alias-background-color-quickactions: rgba(30,30,30,0.9); --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); --spectrum-alias-border-color-translucent: rgba(239,239,239,0.1); --spectrum-alias-radial-reaction-color-default: rgba(200,200,200,0.6); --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50); --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50); --spectrum-slider-s-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-ramp-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-range-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-range-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-ramp-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-s-range-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-ramp-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-range-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-range-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-ramp-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-m-range-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-ramp-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-range-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-range-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-ramp-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-l-range-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-ramp-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-ramp-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-slider-xl-range-radial-reaction-color: rgba(200,200,200,0.6); --spectrum-well-background-color: rgba(200,200,200,0.02); --spectrum-well-border-color: rgba(239,239,239,0.05); } .spectrum { background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100)); -webkit-tap-highlight-color: rgba(0,0,0,0); } .spectrum-Icon, .spectrum-UIIcon { display: inline-block; color: inherit; fill: currentColor; pointer-events: none; } .spectrum-Icon:not(:root), .spectrum-UIIcon:not(:root) { overflow: hidden; } @media (forced-colors: active) { .spectrum-Icon, .spectrum-UIIcon { forced-color-adjust: auto; } } .spectrum-Icon { --spectrum-icon-size-s: var(--spectrum-alias-workflow-icon-size-s, var(--spectrum-global-dimension-size-200)); --spectrum-icon-size-m: var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)); --spectrum-icon-size-l: var(--spectrum-alias-workflow-icon-size-l); --spectrum-icon-size-xl: var(--spectrum-alias-workflow-icon-size-xl, var(--spectrum-global-dimension-size-275)); --spectrum-icon-size-xxl: var(--spectrum-global-dimension-size-400); } .spectrum-Icon--sizeS, .spectrum-Icon--sizeS img, .spectrum-Icon--sizeS svg { height: var(--spectrum-icon-size-s); width: var(--spectrum-icon-size-s); } .spectrum-Icon--sizeM, .spectrum-Icon--sizeM img, .spectrum-Icon--sizeM svg { height: var(--spectrum-icon-size-m); width: var(--spectrum-icon-size-m); } .spectrum-Icon--sizeL, .spectrum-Icon--sizeL img, .spectrum-Icon--sizeL svg { height: var(--spectrum-icon-size-l); width: var(--spectrum-icon-size-l); } .spectrum-Icon--sizeXL, .spectrum-Icon--sizeXL img, .spectrum-Icon--sizeXL svg { height: var(--spectrum-icon-size-xl); width: var(--spectrum-icon-size-xl); } .spectrum-Icon--sizeXXL, .spectrum-Icon--sizeXXL img, .spectrum-Icon--sizeXXL svg { height: var(--spectrum-icon-size-xxl); width: var(--spectrum-icon-size-xxl); } .spectrum--medium .spectrum-UIIcon--large { display: none; } .spectrum--medium .spectrum-UIIcon--medium { display: inline; } .spectrum--large .spectrum-UIIcon--medium { display: none; } .spectrum--large .spectrum-UIIcon--large { display: inline; } .spectrum--large { --ui-icon-large-display: block; --ui-icon-medium-display: none; } .spectrum--medium { --ui-icon-medium-display: block; --ui-icon-large-display: none; } .spectrum-UIIcon--large { display: var(--ui-icon-large-display); } .spectrum-UIIcon--medium { display: var(--ui-icon-medium-display); } .spectrum-UIIcon-ChevronDown75, .spectrum-UIIcon-ChevronDown100, .spectrum-UIIcon-ChevronDown200, .spectrum-UIIcon-ChevronDown300, .spectrum-UIIcon-ChevronDown400, .spectrum-UIIcon-ChevronDown500, .spectrum-UIIcon-ArrowDown75, .spectrum-UIIcon-ArrowDown100, .spectrum-UIIcon-ArrowDown200, .spectrum-UIIcon-ArrowDown300, .spectrum-UIIcon-ArrowDown400, .spectrum-UIIcon-ArrowDown500, .spectrum-UIIcon-ArrowDown600 { transform: rotate(90deg); } .spectrum-UIIcon-ChevronLeft75, .spectrum-UIIcon-ChevronLeft100, .spectrum-UIIcon-ChevronLeft200, .spectrum-UIIcon-ChevronLeft300, .spectrum-UIIcon-ChevronLeft400, .spectrum-UIIcon-ChevronLeft500, .spectrum-UIIcon-ArrowLeft75, .spectrum-UIIcon-ArrowLeft100, .spectrum-UIIcon-ArrowLeft200, .spectrum-UIIcon-ArrowLeft300, .spectrum-UIIcon-ArrowLeft400, .spectrum-UIIcon-ArrowLeft500, .spectrum-UIIcon-ArrowLeft600 { transform: rotate(180deg); } .spectrum-UIIcon-ChevronUp75, .spectrum-UIIcon-ChevronUp100, .spectrum-UIIcon-ChevronUp200, .spectrum-UIIcon-ChevronUp300, .spectrum-UIIcon-ChevronUp400, .spectrum-UIIcon-ChevronUp500, .spectrum-UIIcon-ArrowUp75, .spectrum-UIIcon-ArrowUp100, .spectrum-UIIcon-ArrowUp200, .spectrum-UIIcon-ArrowUp300, .spectrum-UIIcon-ArrowUp400, .spectrum-UIIcon-ArrowUp500, .spectrum-UIIcon-ArrowUp600 { transform: rotate(270deg); } .spectrum-UIIcon-ChevronRight75, .spectrum-UIIcon-ChevronDown75, .spectrum-UIIcon-ChevronLeft75, .spectrum-UIIcon-ChevronUp75 { width: var(--spectrum-alias-ui-icon-chevron-size-75); height: var(--spectrum-alias-ui-icon-chevron-size-75); } .spectrum-UIIcon-ChevronRight100, .spectrum-UIIcon-ChevronDown100, .spectrum-UIIcon-ChevronLeft100, .spectrum-UIIcon-ChevronUp100 { width: var(--spectrum-alias-ui-icon-chevron-size-100); height: var(--spectrum-alias-ui-icon-chevron-size-100); } .spectrum-UIIcon-ChevronRight200, .spectrum-UIIcon-ChevronDown200, .spectrum-UIIcon-ChevronLeft200, .spectrum-UIIcon-ChevronUp200 { width: var(--spectrum-alias-ui-icon-chevron-size-200); height: var(--spectrum-alias-ui-icon-chevron-size-200); } .spectrum-UIIcon-ChevronRight300, .spectrum-UIIcon-ChevronDown300, .spectrum-UIIcon-ChevronLeft300, .spectrum-UIIcon-ChevronUp300 { width: var(--spectrum-alias-ui-icon-chevron-size-300); height: var(--spectrum-alias-ui-icon-chevron-size-300); } .spectrum-UIIcon-ChevronRight400, .spectrum-UIIcon-ChevronDown400, .spectrum-UIIcon-ChevronLeft400, .spectrum-UIIcon-ChevronUp400 { width: var(--spectrum-alias-ui-icon-chevron-size-400); height: var(--spectrum-alias-ui-icon-chevron-size-400); } .spectrum-UIIcon-ChevronRight500, .spectrum-UIIcon-ChevronDown500, .spectrum-UIIcon-ChevronLeft500, .spectrum-UIIcon-ChevronUp500 { width: var(--spectrum-alias-ui-icon-chevron-size-500); height: var(--spectrum-alias-ui-icon-chevron-size-500); } .spectrum-UIIcon-ArrowRight75, .spectrum-UIIcon-ArrowDown75, .spectrum-UIIcon-ArrowLeft75, .spectrum-UIIcon-ArrowUp75 { width: var(--spectrum-alias-ui-icon-arrow-size-75); height: var(--spectrum-alias-ui-icon-arrow-size-75); } .spectrum-UIIcon-ArrowRight100, .spectrum-UIIcon-ArrowDown100, .spectrum-UIIcon-ArrowLeft100, .spectrum-UIIcon-ArrowUp100 { width: var(--spectrum-alias-ui-icon-arrow-size-100); height: var(--spectrum-alias-ui-icon-arrow-size-100); } .spectrum-UIIcon-ArrowRight200, .spectrum-UIIcon-ArrowDown200, .spectrum-UIIcon-ArrowLeft200, .spectrum-UIIcon-ArrowUp200 { width: var(--spectrum-alias-ui-icon-arrow-size-200); height: var(--spectrum-alias-ui-icon-arrow-size-200); } .spectrum-UIIcon-ArrowRight300, .spectrum-UIIcon-ArrowDown300, .spectrum-UIIcon-ArrowLeft300, .spectrum-UIIcon-ArrowUp300 { width: var(--spectrum-alias-ui-icon-arrow-size-300); height: var(--spectrum-alias-ui-icon-arrow-size-300); } .spectrum-UIIcon-ArrowRight400, .spectrum-UIIcon-ArrowDown400, .spectrum-UIIcon-ArrowLeft400, .spectrum-UIIcon-ArrowUp400 { width: var(--spectrum-alias-ui-icon-arrow-size-400); height: var(--spectrum-alias-ui-icon-arrow-size-400); } .spectrum-UIIcon-ArrowRight500, .spectrum-UIIcon-ArrowDown500, .spectrum-UIIcon-ArrowLeft500, .spectrum-UIIcon-ArrowUp500 { width: var(--spectrum-alias-ui-icon-arrow-size-500); height: var(--spectrum-alias-ui-icon-arrow-size-500); } .spectrum-UIIcon-ArrowRight600, .spectrum-UIIcon-ArrowDown600, .spectrum-UIIcon-ArrowLeft600, .spectrum-UIIcon-ArrowUp600 { width: var(--spectrum-alias-ui-icon-arrow-size-600); height: var(--spectrum-alias-ui-icon-arrow-size-600); } .spectrum-UIIcon-Checkmark50 { width: var(--spectrum-alias-ui-icon-checkmark-size-50); height: var(--spectrum-alias-ui-icon-checkmark-size-50); } .spectrum-UIIcon-Checkmark75 { width: var(--spectrum-alias-ui-icon-checkmark-size-75); height: var(--spectrum-alias-ui-icon-checkmark-size-75); } .spectrum-UIIcon-Checkmark100 { width: var(--spectrum-alias-ui-icon-checkmark-size-100); height: var(--spectrum-alias-ui-icon-checkmark-size-100); } .spectrum-UIIcon-Checkmark200 { width: var(--spectrum-alias-ui-icon-checkmark-size-200); height: var(--spectrum-alias-ui-icon-checkmark-size-200); } .spectrum-UIIcon-Checkmark300 { width: var(--spectrum-alias-ui-icon-checkmark-size-300); height: var(--spectrum-alias-ui-icon-checkmark-size-300); } .spectrum-UIIcon-Checkmark400 { width: var(--spectrum-alias-ui-icon-checkmark-size-400); height: var(--spectrum-alias-ui-icon-checkmark-size-400); } .spectrum-UIIcon-Checkmark500 { width: var(--spectrum-alias-ui-icon-checkmark-size-500); height: var(--spectrum-alias-ui-icon-checkmark-size-500); } .spectrum-UIIcon-Checkmark600 { width: var(--spectrum-alias-ui-icon-checkmark-size-600); height: var(--spectrum-alias-ui-icon-checkmark-size-600); } .spectrum-UIIcon-Dash50 { width: var(--spectrum-alias-ui-icon-dash-size-50); height: var(--spectrum-alias-ui-icon-dash-size-50); } .spectrum-UIIcon-Dash75 { width: var(--spectrum-alias-ui-icon-dash-size-75); height: var(--spectrum-alias-ui-icon-dash-size-75); } .spectrum-UIIcon-Dash100 { width: var(--spectrum-alias-ui-icon-dash-size-100); height: var(--spectrum-alias-ui-icon-dash-size-100); } .spectrum-UIIcon-Dash200 { width: var(--spectrum-alias-ui-icon-dash-size-200); height: var(--spectrum-alias-ui-icon-dash-size-200); } .spectrum-UIIcon-Dash300 { width: var(--spectrum-alias-ui-icon-dash-size-300); height: var(--spectrum-alias-ui-icon-dash-size-300); } .spectrum-UIIcon-Dash400 { width: var(--spectrum-alias-ui-icon-dash-size-400); height: var(--spectrum-alias-ui-icon-dash-size-400); } .spectrum-UIIcon-Dash500 { width: var(--spectrum-alias-ui-icon-dash-size-500); height: var(--spectrum-alias-ui-icon-dash-size-500); } .spectrum-UIIcon-Dash600 { width: var(--spectrum-alias-ui-icon-dash-size-600); height: var(--spectrum-alias-ui-icon-dash-size-600); } .spectrum-UIIcon-Cross75 { width: var(--spectrum-alias-ui-icon-cross-size-75); height: var(--spectrum-alias-ui-icon-cross-size-75); } .spectrum-UIIcon-Cross100 { width: var(--spectrum-alias-ui-icon-cross-size-100); height: var(--spectrum-alias-ui-icon-cross-size-100); } .spectrum-UIIcon-Cross200 { width: var(--spectrum-alias-ui-icon-cross-size-200); height: var(--spectrum-alias-ui-icon-cross-size-200); } .spectrum-UIIcon-Cross300 { width: var(--spectrum-alias-ui-icon-cross-size-300); height: var(--spectrum-alias-ui-icon-cross-size-300); } .spectrum-UIIcon-Cross400 { width: var(--spectrum-alias-ui-icon-cross-size-400); height: var(--spectrum-alias-ui-icon-cross-size-400); } .spectrum-UIIcon-Cross500 { width: var(--spectrum-alias-ui-icon-cross-size-500); height: var(--spectrum-alias-ui-icon-cross-size-500); } .spectrum-UIIcon-Cross600 { width: var(--spectrum-alias-ui-icon-cross-size-600); height: var(--spectrum-alias-ui-icon-cross-size-600); } .spectrum-UIIcon-TripleGripper100 { width: var(--spectrum-alias-ui-icon-triplegripper-size-100-height, var(--spectrum-global-dimension-size-100)); height: var(--spectrum-alias-ui-icon-triplegripper-size-100-width); } .spectrum-UIIcon-DoubleGripper100 { width: var(--spectrum-alias-ui-icon-doublegripper-size-100-height); height: var(--spectrum-alias-ui-icon-doublegripper-size-100-width, var(--spectrum-global-dimension-size-200)); } .spectrum-UIIcon-SingleGripper100 { width: var(--spectrum-alias-ui-icon-singlegripper-size-100-height); height: var(--spectrum-alias-ui-icon-singlegripper-size-100-width, var(--spectrum-global-dimension-size-300)); } .spectrum-UIIcon-CornerTriangle75 { width: var(--spectrum-alias-ui-icon-cornertriangle-size-75, var(--spectrum-global-dimension-size-65)); height: var(--spectrum-alias-ui-icon-cornertriangle-size-75, var(--spectrum-global-dimension-size-65)); } .spectrum-UIIcon-CornerTriangle100 { width: var(--spectrum-alias-ui-icon-cornertriangle-size-100); height: var(--spectrum-alias-ui-icon-cornertriangle-size-100); } .spectrum-UIIcon-CornerTriangle200 { width: var(--spectrum-alias-ui-icon-cornertriangle-size-200, var(--spectrum-global-dimension-size-75)); height: var(--spectrum-alias-ui-icon-cornertriangle-size-200, var(--spectrum-global-dimension-size-75)); } .spectrum-UIIcon-CornerTriangle300 { width: var(--spectrum-alias-ui-icon-cornertriangle-size-300); height: var(--spectrum-alias-ui-icon-cornertriangle-size-300); } .spectrum-UIIcon-Asterisk75 { width: var(--spectrum-alias-ui-icon-asterisk-size-75, var(--spectrum-global-dimension-static-size-100)); height: var(--spectrum-alias-ui-icon-asterisk-size-300); } .spectrum-UIIcon-Asterisk100 { width: var(--spectrum-alias-ui-icon-asterisk-size-100, var(--spectrum-global-dimension-size-100)); height: var(--spectrum-alias-ui-icon-asterisk-size-100, var(--spectrum-global-dimension-size-100)); } .spectrum-UIIcon-Asterisk200 { width: var(--spectrum-alias-ui-icon-asterisk-size-200); height: var(--spectrum-alias-ui-icon-asterisk-size-200); } .spectrum-UIIcon-Asterisk300 { width: var(--spectrum-alias-ui-icon-asterisk-size-300); height: var(--spectrum-alias-ui-icon-asterisk-size-300); } .spectrum-Link--sizeS { --spectrum-link-primary-text-size: var(--spectrum-link-primary-s-text-size, var(--spectrum-alias-item-text-size-s)); } .spectrum-Link--sizeM { --spectrum-link-primary-text-size: var(--spectrum-link-primary-m-text-size, var(--spectrum-alias-item-text-size-m)); } .spectrum-Link--sizeL { --spectrum-link-primary-text-size: var(--spectrum-link-primary-l-text-size, var(--spectrum-alias-item-text-size-l)); } .spectrum-Link--sizeXL { --spectrum-link-primary-text-size: var(--spectrum-link-primary-xl-text-size, var(--spectrum-alias-item-text-size-xl)); } .spectrum-Link--sizeS, .spectrum-Link--sizeM, .spectrum-Link--sizeL, .spectrum-Link--sizeXL { font-size: var(--spectrum-link-primary-text-size); } .spectrum-Link { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: underline; transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; outline: none; cursor: pointer; } .spectrum-Link.focus-ring { text-decoration: underline; -webkit-text-decoration-style: double; text-decoration-style: double; } .spectrum-Link--quiet { text-decoration: none; } .spectrum-Link--quiet:hover { text-decoration: underline; } .spectrum-Link { color: var(--spectrum-link-primary-m-text-color, var(--spectrum-global-color-blue-600)); } .spectrum-Link:hover { color: var(--spectrum-link-primary-m-text-color-hover, var(--spectrum-global-color-blue-600)); } .spectrum-Link:active { color: var(--spectrum-link-primary-m-text-color-down, var(--spectrum-global-color-blue-700)); } .spectrum-Link.focus-ring { color: var(--spectrum-link-primary-m-text-color-key-focus, var(--spectrum-alias-text-color-key-focus)); } .spectrum-Link--secondary { color: inherit; } .spectrum-Link--secondary:hover { color: inherit; } .spectrum-Link--secondary:active { color: inherit; } .spectrum-Link--secondary:focus { color: inherit; } .spectrum-Link--overBackground { color: var(--spectrum-link-over-background-m-text-color, var(--spectrum-alias-text-color-over-background)); } .spectrum-Link--overBackground:hover { color: var(--spectrum-link-over-background-m-text-color-hover, var(--spectrum-alias-text-color-over-background)); } .spectrum-Link--overBackground:active { color: var(--spectrum-link-over-background-m-text-color-down, var(--spectrum-alias-text-color-over-background)); } .spectrum-Link--overBackground:focus { color: var(--spectrum-link-over-background-m-text-color-key-focus, var(--spectrum-alias-text-color-over-background)); } @media (forced-colors: active) { .spectrum-Link--secondary { color: linktext; } .spectrum-Link--secondary:hover { color: linktext; } .spectrum-Link--secondary:active { color: linktext; } .spectrum-Link--secondary:focus { color: linktext; } } .spectrum-Alert { position: relative; display: inline-block; box-sizing: border-box; min-width: var(--spectrum-alert-min-width, var(--spectrum-global-dimension-static-size-4600)); min-height: 38px; margin: 8px 0; padding: var(--spectrum-alert-padding-y, var(--spectrum-global-dimension-static-size-250)) var(--spectrum-alert-padding-x, var(--spectrum-global-dimension-static-size-250)); border-width: 2px; border-style: solid; border-radius: 4px; } .spectrum-Alert-icon { position: absolute; display: block; top: 20px; right: 20px; } .spectrum-Alert-header { display: inline-block; height: auto; min-height: 0; margin: 0; padding: 0; padding-right: 30px; font-size: 14px; font-weight: 700; font-style: normal; line-height: 14px; text-transform: none; } .spectrum-Alert-content { display: block; margin: var(--spectrum-alert-content-margin-top, var(--spectrum-global-dimension-static-size-100)) 0 0 0; padding: 0; font-size: 14px; word-wrap: break-word; } .spectrum-Alert-footer { display: block; text-align: right; padding-top: 0.5rem; } .spectrum-Alert-footer:empty { display: none; } .spectrum-Alert-footer .spectrum-Button { margin-right: 0; margin-left: 0.75rem; } .spectrum-Alert { background-color: var(--spectrum-alert-background-color, var(--spectrum-global-color-gray-50)); color: var(--spectrum-alert-text-color, var(--spectrum-global-color-gray-700)); } .spectrum-Alert-header { color: var(--spectrum-alert-title-text-color, var(--spectrum-global-color-gray-900)); } .spectrum-Alert-content { color: var(--spectrum-alert-text-color, var(--spectrum-global-color-gray-700)); } .spectrum-Alert--info { border-color: var(--spectrum-alert-info-border-color, var(--spectrum-semantic-informative-color-border)); } .spectrum-Alert--info .spectrum-Alert-icon { color: var(--spectrum-alert-info-icon-color, var(--spectrum-semantic-informative-color-icon)); } .spectrum-Alert--help { border-color: var(--spectrum-alert-info-border-color, var(--spectrum-semantic-informative-color-border)); } .spectrum-Alert--help .spectrum-Alert-icon { color: var(--spectrum-alert-info-icon-color, var(--spectrum-semantic-informative-color-icon)); } .spectrum-Alert--error { border-color: var(--spectrum-alert-error-border-color, var(--spectrum-semantic-negative-color-border)); } .spectrum-Alert--error .spectrum-Alert-icon { color: var(--spectrum-alert-error-icon-color, var(--spectrum-semantic-negative-color-icon)); } .spectrum-Alert--success { border-color: var(--spectrum-alert-success-border-color, var(--spectrum-semantic-positive-color-border)); } .spectrum-Alert--success .spectrum-Alert-icon { color: var(--spectrum-alert-success-icon-color, var(--spectrum-semantic-positive-color-icon)); } .spectrum-Alert--warning { border-color: var(--spectrum-alert-warning-border-color, var(--spectrum-semantic-notice-color-border)); } .spectrum-Alert--warning .spectrum-Alert-icon { color: var(--spectrum-alert-warning-icon-color, var(--spectrum-semantic-notice-color-icon)); } .spectrum-Radio { --spectrum-radio-circle-border-size: var(--spectrum-radio-m-circle-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-radio-circle-dot-size: var(--spectrum-radio-m-circle-dot-size, var(--spectrum-global-dimension-static-size-50)); --spectrum-radio-text-font-style: var(--spectrum-radio-m-text-font-style, var(--spectrum-global-font-style-regular)); --spectrum-radio-text-font-weight: var(--spectrum-radio-m-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-radio-text-line-height: var(--spectrum-radio-m-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-radio-text-size: var(--spectrum-radio-m-text-size, var(--spectrum-alias-item-text-size-m)); --spectrum-radio-height: var(--spectrum-radio-m-height, var(--spectrum-alias-item-height-m)); --spectrum-radio-circle-diameter: var(--spectrum-radio-m-circle-diameter, var(--spectrum-alias-item-control-2-size-m)); --spectrum-radio-text-gap: var(--spectrum-radio-m-text-gap, var(--spectrum-alias-item-control-gap-m)); --spectrum-radio-radius: calc(var(--spectrum-radio-circle-diameter) / 2); --spectrum-radio-border-width-checked: calc(var(--spectrum-radio-circle-diameter) / 2 - var(--spectrum-radio-circle-dot-size) / 2); --spectrum-radio-labelbelow-label-margin: var( --spectrum-global-dimension-size-50 ) 0 0 0; --spectrum-radio-labelbelow-height: auto; --spectrum-radio-label-margin-top: var(--spectrum-global-dimension-size-75); } .spectrum-Radio { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: start; align-items: flex-start; position: relative; min-height: var(--spectrum-radio-height); max-width: 100%; vertical-align: top; } .spectrum-Radio-input { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; overflow: visible; box-sizing: border-box; padding: 0; position: absolute; width: 100%; height: 100%; opacity: 0.0001; z-index: 1; cursor: pointer; } .spectrum-Radio-input:disabled { cursor: default; } .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-width: var(--spectrum-radio-border-width-checked); } .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after { margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1); } [dir="ltr"] .spectrum-Radio-label { text-align: left; } [dir="rtl"] .spectrum-Radio-label { text-align: right; } [dir="ltr"] .spectrum-Radio-label { margin-left: var(--spectrum-radio-text-gap); } [dir="rtl"] .spectrum-Radio-label { margin-right: var(--spectrum-radio-text-gap); } .spectrum-Radio-label { margin-top: var(--spectrum-radio-label-margin-top); font-size: var(--spectrum-radio-text-size); font-weight: var(--spectrum-radio-text-font-weight); font-style: var(--spectrum-radio-text-font-style); line-height: var(--spectrum-radio-text-line-height); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Radio-button { position: relative; box-sizing: border-box; width: var(--spectrum-radio-circle-diameter); height: var(--spectrum-radio-circle-diameter); margin: calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter)) / 2) 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } .spectrum-Radio-button:before { display: block; z-index: 0; content: ""; box-sizing: border-box; position: absolute; width: var(--spectrum-radio-circle-diameter); height: var(--spectrum-radio-circle-diameter); border-radius: var(--spectrum-radio-radius); border-width: var(--spectrum-radio-circle-border-size); border-style: solid; transition: border var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Radio-button:after { border-radius: 100%; content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)); transition: opacity var(--spectrum-global-animation-duration-100, 130ms) ease-out, margin var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .spectrum-Radio--labelBelow { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; height: var(--spectrum-radio-labelbelow-height); } .spectrum-Radio--labelBelow .spectrum-Radio-button { -ms-flex-negative: 0; flex-shrink: 0; margin: 0; } .spectrum-Radio--labelBelow .spectrum-Radio-label { margin: var(--spectrum-radio-labelbelow-label-margin); } .spectrum-Radio { --spectrum-radio-m-emphasized-circle-border-color-selected-key-focus: var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600)); } .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-selected, var(--spectrum-global-color-gray-700)); } .spectrum-Radio-label { color: var(--spectrum-radio-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Radio-button:before { forced-color-adjust: none; background-color: var(--spectrum-radio-m-circle-background-color, var(--spectrum-global-color-gray-75)); border-color: var(--spectrum-radio-m-circle-border-color, var(--spectrum-global-color-gray-600)); } .spectrum-Radio:hover .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-hover, var(--spectrum-global-color-gray-700)); box-shadow: none; } .spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-selected-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Radio:hover .spectrum-Radio-label { color: var(--spectrum-radio-m-text-color-hover, var(--spectrum-alias-text-color-hover)); } .spectrum-Radio:active .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-down, var(--spectrum-global-color-gray-800)); } .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-selected-down, var(--spectrum-global-color-gray-900)); } .spectrum-Radio:active .spectrum-Radio-label { color: var(--spectrum-radio-m-text-color-down, var(--spectrum-alias-text-color-down)); } .spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected, var(--spectrum-global-color-blue-500)); } .spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover, var(--spectrum-global-color-blue-600)); } .spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-down, var(--spectrum-global-color-blue-700)); } .spectrum-Radio.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-error-hover, var(--spectrum-global-color-red-600)); } .spectrum-Radio.is-invalid:hover .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid:hover .spectrum-Radio-label { color: var(--spectrum-radio-m-emphasized-text-color-error-hover, var(--spectrum-global-color-red-700)); } .spectrum-Radio.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-text-color-error-hover, var(--spectrum-global-color-red-700)); } .spectrum-Radio.is-invalid:active .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid:active .spectrum-Radio-label { color: var(--spectrum-radio-m-emphasized-text-color-error-down, var(--spectrum-global-color-red-700)); } .spectrum-Radio.is-invalid .spectrum-Radio-button:before, .spectrum-Radio.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-button:before, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-error, var(--spectrum-global-color-red-500)); } .spectrum-Radio.is-invalid .spectrum-Radio-label, .spectrum-Radio--emphasized.is-invalid .spectrum-Radio-label { color: var(--spectrum-radio-m-emphasized-text-color-error, var(--spectrum-global-color-red-600)); } .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label { color: var(--spectrum-radio-m-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Radio .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-key-focus, var(--spectrum-global-color-gray-700)); } .spectrum-Radio .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button:after { forced-color-adjust: none; box-shadow: 0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color)); } .spectrum-Radio .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio:hover .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before, .spectrum-Radio--emphasized:hover .spectrum-Radio-input.focus-ring:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus, var(--spectrum-global-color-blue-600)); } @media (forced-colors: active) { .spectrum-Radio { --spectrum-radio-m-circle-background-color: ButtonFace; --spectrum-radio-m-circle-border-color-down: Highlight; --spectrum-radio-m-circle-border-color-hover: Highlight; --spectrum-radio-m-circle-border-color-key-focus: Highlight; --spectrum-radio-m-circle-border-color-selected-down: Highlight; --spectrum-radio-m-circle-border-color-selected-hover : Highlight; --spectrum-radio-m-circle-border-color-selected: Highlight; --spectrum-radio-m-circle-border-color: ButtonText; --spectrum-radio-m-emphasized-circle-border-color-disabled : GrayText; --spectrum-radio-m-emphasized-circle-border-color-error-hover: Highlight; --spectrum-radio-m-emphasized-circle-border-color-error: ButtonText; --spectrum-radio-m-emphasized-circle-border-color-selected-down: Highlight; --spectrum-radio-m-emphasized-circle-border-color-selected-hover: Highlight; --spectrum-radio-m-emphasized-circle-border-color-selected-key-focus: Highlight; --spectrum-radio-m-emphasized-circle-border-color-selected: Highlight; --spectrum-radio-m-emphasized-text-color-disabled: GrayText; --spectrum-radio-m-emphasized-text-color-error-down: CanvasText; --spectrum-radio-m-emphasized-text-color-error-hover: CanvasText; --spectrum-radio-m-emphasized-text-color-error: CanvasText; --spectrum-radio-m-focus-ring-color-key-focus: CanvasText; --spectrum-radio-m-text-color-down: CanvasText; --spectrum-radio-m-text-color-hover: CanvasText; --spectrum-radio-m-text-color: CanvasText; } .spectrum-Radio.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button:before { border-color: var(--spectrum-radio-m-circle-border-color-selected, var(--spectrum-global-color-gray-700)); } } .spectrum-SideNav { --spectrum-sidenav-item-padding-y: var(--spectrum-global-dimension-size-65); } .spectrum-SideNav { list-style-type: none; margin: 0; padding: 0; } .spectrum-SideNav-item { list-style-type: none; margin-top: var(--spectrum-sidenav-item-gap, var(--spectrum-global-dimension-size-50)); margin-bottom: var(--spectrum-sidenav-item-gap, var(--spectrum-global-dimension-size-50)); margin-left: 0; margin-right: 0; } .spectrum-SideNav-itemLink { position: relative; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: left; justify-content: left; box-sizing: border-box; width: 100%; min-height: var(--spectrum-sidenav-item-height, var(--spectrum-alias-single-line-height)); padding-left: var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)); padding-right: var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150)); padding-top: var(--spectrum-sidenav-item-padding-y); padding-bottom: var(--spectrum-sidenav-item-padding-y); border-radius: var(--spectrum-sidenav-item-border-radius, var(--spectrum-alias-border-radius-regular)); font-size: var(--spectrum-sidenav-item-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-sidenav-item-text-font-weight, var(--spectrum-global-font-weight-regular)); font-style: normal; text-decoration: none; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; cursor: pointer; transition: background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, color var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .spectrum-SideNav-itemLink:focus { outline: none; } [dir="ltr"] .spectrum-SideNav-itemLink.focus-ring::before { left: 0; } [dir="rtl"] .spectrum-SideNav-itemLink.focus-ring::before { right: 0; } [dir="ltr"] .spectrum-SideNav-itemLink.focus-ring::before { right: 0; } [dir="rtl"] .spectrum-SideNav-itemLink.focus-ring::before { left: 0; } .spectrum-SideNav-itemLink.focus-ring::before { content: ""; position: absolute; top: 0; bottom: 0; border-top: var(--spectrum-tabs-m-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent; border-bottom: var(--spectrum-tabs-m-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent; border-radius: var(--spectrum-sidenav-item-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon { margin-right: var(--spectrum-sidenav-icon-gap, var(--spectrum-global-dimension-size-100)); } [dir="rtl"] .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon { margin-left: var(--spectrum-sidenav-icon-gap, var(--spectrum-global-dimension-size-100)); } .spectrum-SideNav-itemLink .spectrum-SideNav-itemIcon { -ms-flex-negative: 0; flex-shrink: 0; } [dir="ltr"] .spectrum-SideNav-heading { margin-right: 0; } [dir="rtl"] .spectrum-SideNav-heading { margin-left: 0; } [dir="ltr"] .spectrum-SideNav-heading { margin-left: 0; } [dir="rtl"] .spectrum-SideNav-heading { margin-right: 0; } .spectrum-SideNav-heading { height: var(--spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height)); line-height: var(--spectrum-sidenav-heading-height, var(--spectrum-alias-single-line-height)); margin-top: var(--spectrum-sidenav-heading-gap-top, var(--spectrum-global-dimension-size-200)); margin-bottom: var(--spectrum-sidenav-heading-gap-bottom, var(--spectrum-global-dimension-size-50)); padding-top: 0; padding-bottom: 0; padding-left: var(--spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150)); padding-right: var(--spectrum-sidenav-heading-padding-x, var(--spectrum-global-dimension-size-150)); border-radius: var(--spectrum-sidenav-heading-border-radius, var(--spectrum-alias-border-radius-regular)); font-size: var(--spectrum-sidenav-heading-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-sidenav-heading-text-font-weight, var(--spectrum-global-font-weight-medium)); font-style: normal; letter-spacing: var(--spectrum-sidenav-heading-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: uppercase; } .spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink { font-weight: var(--spectrum-sidenav-multilevel-main-item-font-weight, var(--spectrum-global-font-weight-bold)); } .spectrum-SideNav--multiLevel .spectrum-SideNav { margin: 0; padding: 0; } [dir="ltr"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink { padding-left: calc(var(--spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150))); } [dir="rtl"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink { padding-right: calc(var(--spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150))); } .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink { font-weight: var(--spectrum-sidenav-item-text-font-weight, var(--spectrum-global-font-weight-regular)); } [dir="ltr"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink { padding-left: calc(var(--spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150))); } [dir="rtl"] .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink { padding-right: calc(var(--spectrum-sidenav-multilevel-item-indentation, var(--spectrum-global-dimension-size-150)) + var(--spectrum-sidenav-item-padding-x, var(--spectrum-global-dimension-size-150))); } .spectrum-SideNav-item.is-selected > .spectrum-SideNav-itemLink { color: var(--spectrum-sidenav-item-text-color-selected, var(--spectrum-alias-text-color-hover)); background-color: var(--spectrum-sidenav-item-background-color-selected, var(--spectrum-alias-highlight-hover)); } .spectrum-SideNav-item .is-active > .spectrum-SideNav-itemLink { background-color: var(--spectrum-sidenav-item-background-color-down, var(--spectrum-alias-highlight-hover)); } .spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink { background-color: var(--spectrum-sidenav-item-background-color-disabled, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-sidenav-item-text-color-disabled, var(--spectrum-alias-text-color-disabled)); cursor: default; pointer-events: none; } .spectrum-SideNav-itemLink { background-color: var(--spectrum-sidenav-item-background-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-sidenav-item-text-color, var(--spectrum-alias-text-color)); } .spectrum-SideNav-itemLink:hover { background-color: var(--spectrum-sidenav-item-background-color-hover, var(--spectrum-alias-highlight-hover)); color: var(--spectrum-sidenav-item-text-color-hover, var(--spectrum-alias-text-color-hover)); } .spectrum-SideNav-itemLink:active { background-color: var(--spectrum-sidenav-item-background-color-down, var(--spectrum-alias-highlight-hover)); } .spectrum-SideNav-itemLink.focus-ring { background-color: var(--spectrum-sidenav-item-background-color-key-focus, var(--spectrum-alias-highlight-hover)); color: var(--spectrum-sidenav-item-text-color-key-focus, var(--spectrum-alias-text-color-hover)); } .spectrum-SideNav-itemLink.focus-ring::before { border-color: var(--spectrum-sidenav-item-border-color-key-focus, var(--spectrum-alias-border-color-focus)); } .spectrum-SideNav-heading { color: var(--spectrum-sidenav-heading-text-color, var(--spectrum-global-color-gray-700)); } .spectrum-Dialog { --spectrum-dialog-fullscreen-header-text-size: 28px; --spectrum-dialog-confirm-small-width: 400px; --spectrum-dialog-confirm-medium-width: 480px; --spectrum-dialog-confirm-large-width: 640px; --spectrum-dialog-error-width: var(--spectrum-dialog-confirm-medium-width); --spectrum-dialog-confirm-hero-height: var( --spectrum-global-dimension-size-1600 ); --spectrum-dialog-confirm-description-padding: var( --spectrum-global-dimension-size-25 ); --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-global-dimension-size-25) * -1); --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-global-dimension-static-size-500, 40px); --spectrum-dialog-confirm-gap-size: var(--spectrum-global-dimension-size-200); --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-global-dimension-static-size-500, 40px); --spectrum-dialog-confirm-close-button-size: var( --spectrum-global-dimension-size-400 ); --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-global-dimension-size-175)); --spectrum-dialog-confirm-divider-height: var(--spectrum-global-dimension-static-size-25, 2px); } .spectrum-Dialog { display: -ms-flexbox; display: flex; box-sizing: border-box; width: fit-content; min-width: var(--spectrum-dialog-confirm-min-width, var(--spectrum-global-dimension-static-size-3600)); max-width: 100%; max-height: inherit; outline: none; } .spectrum-Dialog--small { width: var(--spectrum-dialog-confirm-small-width); } .spectrum-Dialog--medium { width: var(--spectrum-dialog-confirm-medium-width); } .spectrum-Dialog--large { width: var(--spectrum-dialog-confirm-large-width); } .spectrum-Dialog-hero { grid-area: hero; height: var(--spectrum-dialog-confirm-hero-height); border-top-left-radius: var(--spectrum-dialog-confirm-border-radius, var(--spectrum-global-dimension-size-50)); border-top-right-radius: var(--spectrum-dialog-confirm-border-radius, var(--spectrum-global-dimension-size-50)); background-size: cover; background-position: center center; overflow: hidden; } .spectrum-Dialog .spectrum-Dialog-grid { display: -ms-grid; display: grid; -ms-grid-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-confirm-padding); grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-confirm-padding); -ms-grid-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." ". heading header header typeIcon ." ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; width: 100%; } [dir="ltr"] .spectrum-Dialog-heading { padding-right: var(--spectrum-dialog-confirm-gap-size); } [dir="rtl"] .spectrum-Dialog-heading { padding-left: var(--spectrum-dialog-confirm-gap-size); } .spectrum-Dialog-heading { grid-area: heading; margin: 0; font-size: var(--spectrum-dialog-confirm-title-text-size); font-weight: var(--spectrum-dialog-confirm-title-text-font-weight, var(--spectrum-global-font-weight-bold)); line-height: var(--spectrum-dialog-confirm-title-text-line-height, var(--spectrum-alias-heading-text-line-height)); outline: none; } [dir="ltr"] .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader { padding-right: 0; } [dir="rtl"] .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader { padding-left: 0; } .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader { grid-area: heading-start / heading-start / header-end / header-end; } .spectrum-Dialog-header { grid-area: header; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; box-sizing: border-box; outline: none; } .spectrum-Dialog-typeIcon { grid-area: typeIcon; } .spectrum-Dialog .spectrum-Dialog-divider { grid-area: divider; width: 100%; margin-top: var(--spectrum-dialog-confirm-divider-margin-top, var(--spectrum-global-dimension-static-size-150)); margin-bottom: var(--spectrum-dialog-confirm-divider-margin-bottom, var(--spectrum-global-dimension-static-size-200)); } .spectrum-Dialog--noDivider .spectrum-Dialog-divider { display: none; } .spectrum-Dialog--noDivider .spectrum-Dialog-heading { padding-bottom: calc(var(--spectrum-dialog-confirm-divider-margin-top, var(--spectrum-global-dimension-static-size-150)) + var(--spectrum-dialog-confirm-divider-margin-bottom, var(--spectrum-global-dimension-static-size-200)) + var(--spectrum-dialog-confirm-divider-height, var(--spectrum-global-dimension-size-25))); } .spectrum-Dialog-content { grid-area: content; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; font-size: var(--spectrum-dialog-confirm-description-text-size); font-weight: var(--spectrum-dialog-confirm-description-text-font-weight, var(--spectrum-global-font-weight-regular)); line-height: var(--spectrum-dialog-confirm-description-text-line-height, var(--spectrum-alias-component-text-line-height)); padding: 0 var(--spectrum-dialog-confirm-description-padding); margin: 0 var(--spectrum-dialog-confirm-description-margin); } .spectrum-Dialog-footer { grid-area: footer; padding-top: var(--spectrum-dialog-confirm-footer-padding-top); display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; outline: none; } .spectrum-Dialog-footer > *, .spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button { margin-bottom: 0; } [dir="ltr"] .spectrum-Dialog-buttonGroup { padding-left: var(--spectrum-dialog-confirm-gap-size); } [dir="rtl"] .spectrum-Dialog-buttonGroup { padding-right: var(--spectrum-dialog-confirm-gap-size); } .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; padding-top: var(--spectrum-dialog-confirm-buttongroup-padding-top); display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; } .spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter { grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; } .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { -ms-grid-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); -ms-grid-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" ". heading header header typeIcon closeButton closeButton" ". divider divider divider divider divider ." ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." ". . . . . . ."; } .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup { display: none; } .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer { grid-area: footer / footer/ buttonGroup / buttonGroup; } [dir="ltr"] .spectrum-Dialog-closeButton { margin-right: var(--spectrum-dialog-confirm-close-button-padding); } [dir="rtl"] .spectrum-Dialog-closeButton { margin-left: var(--spectrum-dialog-confirm-close-button-padding); } .spectrum-Dialog-closeButton { grid-area: closeButton; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; justify-self: end; margin-top: var(--spectrum-dialog-confirm-close-button-padding); } .spectrum-Dialog--error { width: var(--spectrum-dialog-error-width, 90%); } .spectrum-Dialog--fullscreen { width: 100%; height: 100%; } .spectrum-Dialog--fullscreenTakeover { width: 100%; height: 100%; border-radius: 0; } .spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover { max-height: none; max-width: none; } .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid { display: -ms-grid; display: grid; -ms-grid-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var( --spectrum-dialog-confirm-padding ); grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var( --spectrum-dialog-confirm-padding ); -ms-grid-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var( --spectrum-dialog-confirm-padding ); grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var( --spectrum-dialog-confirm-padding ); grid-template-areas: ". . . . ." ". heading header buttonGroup ." ". divider divider divider ." ". content content content ." ". . . . ."; } .spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading { font-size: var(--spectrum-dialog-fullscreen-header-text-size); } .spectrum-Dialog--fullscreen .spectrum-Dialog-content, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content { max-height: none; } .spectrum-Dialog--fullscreen .spectrum-Dialog-footer, .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup { padding-top: 0px; } .spectrum-Dialog--fullscreen .spectrum-Dialog-footer, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer { display: none; } .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } @media screen and (max-width: 700px) { .spectrum-Dialog .spectrum-Dialog-grid { -ms-grid-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-confirm-padding); grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-confirm-padding); -ms-grid-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." ". heading heading heading typeIcon ." ". header header header header ." ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; } .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { -ms-grid-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); -ms-grid-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" ". heading heading heading typeIcon closeButton closeButton" ". header header header header header ." ". divider divider divider divider divider ." ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." ". . . . . . ."; } .spectrum-Dialog .spectrum-Dialog-header { -ms-flex-pack: start; justify-content: flex-start; } .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid { display: -ms-grid; display: grid; -ms-grid-columns: var(--spectrum-dialog-confirm-padding) 1fr var( --spectrum-dialog-confirm-padding ); grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr var( --spectrum-dialog-confirm-padding ); -ms-grid-rows: var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( --spectrum-dialog-confirm-padding ); grid-template-areas: ". . ." ". heading ." ". header ." ". divider ." ". content ." ". buttonGroup ." ". . ."; } .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup { padding-top: var( --spectrum-dialog-confirm-buttongroup-padding-top ); } .spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading { font-size: var(--spectrum-dialog-confirm-title-text-size); } } @media (forced-colors: active) { .spectrum-Dialog { border: solid; } } .spectrum-Dialog-heading { color: var(--spectrum-dialog-confirm-title-text-color, var(--spectrum-global-color-gray-900)); } .spectrum-Dialog-content { color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-global-color-gray-800)); } .spectrum-Dialog-footer { color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-global-color-gray-800)); } .spectrum-Dialog-typeIcon { color: var(--spectrum-dialog-confirm-icon-color, var(--spectrum-global-color-gray-900)); } .spectrum-Dialog--error .spectrum-Dialog-typeIcon { color: var(--spectrum-dialog-error-icon-color, var(--spectrum-semantic-negative-icon-color)); } .spectrum-ActionButton { position: relative; display: -ms-inline-flexbox; display: inline-flex; box-sizing: border-box; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; overflow: visible; margin: 0; border-style: solid; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: button; vertical-align: top; transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-out, border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, color var(--spectrum-global-animation-duration-100, 130ms) ease-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out; text-decoration: none; font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); line-height: var(--spectrum-alias-component-text-line-height, var(--spectrum-global-font-line-height-small)); -ms-user-select: none; user-select: none; -webkit-user-select: none; cursor: pointer; } .spectrum-ActionButton:focus { outline: none; } .spectrum-ActionButton::-moz-focus-inner { border: 0; border-style: none; padding: 0; margin-top: -2px; margin-bottom: -2px; } .spectrum-ActionButton:disabled { cursor: default; } .spectrum-ActionButton .spectrum-Icon { max-height: 100%; -ms-flex-negative: 0; flex-shrink: 0; } a.spectrum-ActionButton { -webkit-appearance: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .spectrum-ActionButton-label { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; justify-self: center; text-align: center; } .spectrum-ActionButton-label:empty { display: none; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled, rgba(0,0,0,0.25)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled.is-selected { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected, transparent) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled:not(.is-selected) { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled, transparent) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled) { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-default, rgba(0,0,0,0.4)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):hover { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-hover, rgba(0,0,0,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):active { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-down, rgba(0,0,0,0.7)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus, rgba(0,0,0,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled).is-keyboardFocused { border-color: var(--spectrum-alias-actionbutton-staticBlack-border-color-key-focus, rgba(0,0,0,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected) { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-default, transparent); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):hover { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-hover, rgba(0,0,0,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):active { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-down, rgba(0,0,0,0.4)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus, rgba(0,0,0,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected).is-keyboardFocused { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-key-focus, rgba(0,0,0,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:disabled { border-color: transparent; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:disabled:not(.is-selected) { background-color: transparent } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled) { border-color: transparent; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected) { background-color: var(--spectrum-alias-component-background-color-quiet-default, var(--spectrum-alias-background-color-transparent)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):hover { background-color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):active { background-color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible { background-color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected).is-keyboardFocused { background-color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected { background-color: var(--spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected, rgba(0,0,0,0.1)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) { background-color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-90)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):hover { background-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):active { background-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):focus-visible { background-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled).is-keyboardFocused { background-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-ActionButton-holdIcon { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-ActionButton-label { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-Icon { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-ActionButton-holdIcon { color: var(--spectrum-ActionButton-static-black-color) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-Icon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-Icon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-Icon { color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-black-rgb, 0, 0, 0), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-ActionButton-label { color: var(--spectrum-ActionButton-static-black-color) } .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-Icon { color: var(--spectrum-ActionButton-static-black-color) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled, rgba(255,255,255,0.25)); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled.is-selected { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected, transparent) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled:not(.is-selected) { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled, transparent) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled) { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-default, rgba(255,255,255,0.4)); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):hover { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-hover, rgba(255,255,255,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):active { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-down, rgba(255,255,255,0.7)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus, rgba(255,255,255,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled).is-keyboardFocused { border-color: var(--spectrum-alias-actionbutton-staticWhite-border-color-key-focus, rgba(255,255,255,0.55)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected) { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-default, transparent); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):hover { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-hover, rgba(255,255,255,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):active { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-down, rgba(255,255,255,0.4)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus, rgba(255,255,255,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected).is-keyboardFocused { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-key-focus, rgba(255,255,255,0.25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:disabled { border-color: transparent; } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:disabled:not(.is-selected) { background-color: transparent } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled) { border-color: transparent; } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected) { background-color: var(--spectrum-alias-component-background-color-quiet-default, var(--spectrum-alias-background-color-transparent)); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):hover { background-color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):active { background-color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible { background-color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected).is-keyboardFocused { background-color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-25)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected { background-color: var(--spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected, rgba(255,255,255,0.1)); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-40)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) { background-color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-90)); } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):hover { background-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):active { background-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):focus-visible { background-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled).is-keyboardFocused { background-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-ActionButton-holdIcon { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-ActionButton-label { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-Icon { color: inherit } .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-ActionButton-holdIcon { color: var(--spectrum-ActionButton-static-white-color) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-ActionButton-holdIcon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-Icon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-Icon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-holdIcon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-label { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-Icon { color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-ActionButton-label { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-Icon { color: rgba(var(--spectrum-global-color-static-white-rgb, 255, 255, 255), var(--spectrum-global-color-opacity-90)) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-ActionButton-label { color: var(--spectrum-ActionButton-static-white-color) } .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-Icon { color: var(--spectrum-ActionButton-static-white-color) } .spectrum-ActionButton--sizeS { --spectrum-actionbutton-texticon-border-size: var(--spectrum-actionbutton-s-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-texticon-icon-gap: var(--spectrum-actionbutton-s-texticon-icon-gap, var(--spectrum-global-dimension-size-85)); --spectrum-actionbutton-texticon-padding-left: var(--spectrum-actionbutton-s-texticon-padding-left, var(--spectrum-global-dimension-size-85)); --spectrum-actionbutton-quiet-textonly-border-size: var(--spectrum-actionbutton-s-quiet-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-quiet-textonly-text-size: var(--spectrum-actionbutton-s-quiet-textonly-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-actionbutton-quiet-textonly-text-font-weight: var(--spectrum-actionbutton-s-quiet-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-quiet-textonly-border-radius: var(--spectrum-actionbutton-s-quiet-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-border-size: var(--spectrum-actionbutton-s-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-textonly-hold-icon-padding-right: var(--spectrum-actionbutton-s-textonly-hold-icon-padding-right, var(--spectrum-global-dimension-size-40)); --spectrum-actionbutton-textonly-hold-icon-padding-bottom: var(--spectrum-actionbutton-s-textonly-hold-icon-padding-bottom, var(--spectrum-global-dimension-size-40)); --spectrum-actionbutton-textonly-text-size: var(--spectrum-actionbutton-s-textonly-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-actionbutton-textonly-text-font-weight: var(--spectrum-actionbutton-s-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-textonly-text-line-height: var(--spectrum-actionbutton-s-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-actionbutton-textonly-height: var(--spectrum-actionbutton-s-textonly-height, var(--spectrum-global-dimension-size-300)); --spectrum-actionbutton-textonly-border-radius: var(--spectrum-actionbutton-s-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-s-textonly-padding-right, var(--spectrum-global-dimension-size-115)); --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-s-textonly-padding-left, var(--spectrum-global-dimension-size-115)); --spectrum-actionbutton-icononly-border-size: var(--spectrum-actionbutton-s-icononly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-s-icononly-padding-right, var(--spectrum-global-dimension-size-50)); --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-s-icononly-padding-left, var(--spectrum-global-dimension-size-50)); --spectrum-actionbutton-textonly-min-width: var(--spectrum-global-dimension-size-300); } .spectrum-ActionButton--sizeM { --spectrum-actionbutton-texticon-padding-left: var(--spectrum-actionbutton-m-texticon-padding-left); --spectrum-actionbutton-texticon-border-size: var(--spectrum-actionbutton-m-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-texticon-icon-gap: var(--spectrum-actionbutton-m-texticon-icon-gap, var(--spectrum-global-dimension-size-100)); --spectrum-actionbutton-quiet-textonly-border-size: var(--spectrum-actionbutton-m-quiet-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-quiet-textonly-text-size: var(--spectrum-actionbutton-m-quiet-textonly-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-actionbutton-quiet-textonly-text-font-weight: var(--spectrum-actionbutton-m-quiet-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-quiet-textonly-border-radius: var(--spectrum-actionbutton-m-quiet-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-border-size: var(--spectrum-actionbutton-m-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-textonly-hold-icon-padding-right: var(--spectrum-actionbutton-m-textonly-hold-icon-padding-right, var(--spectrum-global-dimension-size-50)); --spectrum-actionbutton-textonly-hold-icon-padding-bottom: var(--spectrum-actionbutton-m-textonly-hold-icon-padding-bottom, var(--spectrum-global-dimension-size-50)); --spectrum-actionbutton-textonly-text-size: var(--spectrum-actionbutton-m-textonly-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-actionbutton-textonly-text-font-weight: var(--spectrum-actionbutton-m-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-textonly-text-line-height: var(--spectrum-actionbutton-m-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-actionbutton-textonly-min-width: var(--spectrum-actionbutton-m-textonly-min-width, var(--spectrum-global-dimension-size-400)); --spectrum-actionbutton-textonly-height: var(--spectrum-actionbutton-m-textonly-height, var(--spectrum-global-dimension-size-400)); --spectrum-actionbutton-textonly-border-radius: var(--spectrum-actionbutton-m-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-m-textonly-padding-right, var(--spectrum-global-dimension-size-150)); --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-m-textonly-padding-left, var(--spectrum-global-dimension-size-150)); --spectrum-actionbutton-icononly-border-size: var(--spectrum-actionbutton-m-icononly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-m-icononly-padding-right, var(--spectrum-global-dimension-size-85)); --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-m-icononly-padding-left, var(--spectrum-global-dimension-size-85)); } .spectrum-ActionButton--sizeL { --spectrum-actionbutton-texticon-border-size: var(--spectrum-actionbutton-l-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-texticon-icon-gap: var(--spectrum-actionbutton-l-texticon-icon-gap, var(--spectrum-global-dimension-size-115)); --spectrum-actionbutton-texticon-padding-left: var(--spectrum-actionbutton-l-texticon-padding-left, var(--spectrum-global-dimension-size-160)); --spectrum-actionbutton-quiet-textonly-border-size: var(--spectrum-actionbutton-l-quiet-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-quiet-textonly-text-size: var(--spectrum-actionbutton-l-quiet-textonly-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-actionbutton-quiet-textonly-text-font-weight: var(--spectrum-actionbutton-l-quiet-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-quiet-textonly-border-radius: var(--spectrum-actionbutton-l-quiet-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-border-size: var(--spectrum-actionbutton-l-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-textonly-hold-icon-padding-right: var(--spectrum-actionbutton-l-textonly-hold-icon-padding-right, var(--spectrum-global-dimension-size-65)); --spectrum-actionbutton-textonly-hold-icon-padding-bottom: var(--spectrum-actionbutton-l-textonly-hold-icon-padding-bottom, var(--spectrum-global-dimension-size-65)); --spectrum-actionbutton-textonly-text-size: var(--spectrum-actionbutton-l-textonly-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-actionbutton-textonly-text-font-weight: var(--spectrum-actionbutton-l-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-textonly-text-line-height: var(--spectrum-actionbutton-l-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-actionbutton-textonly-min-width: var(--spectrum-actionbutton-l-textonly-min-width, var(--spectrum-global-dimension-size-400)); --spectrum-actionbutton-textonly-height: var(--spectrum-actionbutton-l-textonly-height, var(--spectrum-global-dimension-size-500)); --spectrum-actionbutton-textonly-border-radius: var(--spectrum-actionbutton-l-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-l-textonly-padding-right, var(--spectrum-global-dimension-size-185)); --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-l-textonly-padding-left, var(--spectrum-global-dimension-size-185)); --spectrum-actionbutton-icononly-border-size: var(--spectrum-actionbutton-l-icononly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-l-icononly-padding-right, var(--spectrum-global-dimension-size-125)); --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-l-icononly-padding-left, var(--spectrum-global-dimension-size-125)); } .spectrum-ActionButton--sizeXL { --spectrum-actionbutton-texticon-border-size: var(--spectrum-actionbutton-xl-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-texticon-icon-gap: var(--spectrum-actionbutton-xl-texticon-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-actionbutton-texticon-padding-left: var(--spectrum-actionbutton-xl-texticon-padding-left, var(--spectrum-global-dimension-size-185)); --spectrum-actionbutton-quiet-textonly-border-size: var(--spectrum-actionbutton-xl-quiet-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-quiet-textonly-text-size: var(--spectrum-actionbutton-xl-quiet-textonly-text-size, var(--spectrum-global-dimension-font-size-300)); --spectrum-actionbutton-quiet-textonly-text-font-weight: var(--spectrum-actionbutton-xl-quiet-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-quiet-textonly-border-radius: var(--spectrum-actionbutton-xl-quiet-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-border-size: var(--spectrum-actionbutton-xl-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-textonly-hold-icon-padding-right: var(--spectrum-actionbutton-xl-textonly-hold-icon-padding-right, var(--spectrum-global-dimension-size-75)); --spectrum-actionbutton-textonly-hold-icon-padding-bottom: var(--spectrum-actionbutton-xl-textonly-hold-icon-padding-bottom, var(--spectrum-global-dimension-size-75)); --spectrum-actionbutton-textonly-text-size: var(--spectrum-actionbutton-xl-textonly-text-size, var(--spectrum-global-dimension-font-size-300)); --spectrum-actionbutton-textonly-text-font-weight: var(--spectrum-actionbutton-xl-textonly-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-actionbutton-textonly-text-line-height: var(--spectrum-actionbutton-xl-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-actionbutton-textonly-min-width: var(--spectrum-actionbutton-xl-textonly-min-width, var(--spectrum-global-dimension-size-400)); --spectrum-actionbutton-textonly-height: var(--spectrum-actionbutton-xl-textonly-height, var(--spectrum-global-dimension-size-600)); --spectrum-actionbutton-textonly-border-radius: var(--spectrum-actionbutton-xl-textonly-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-xl-textonly-padding-right, var(--spectrum-global-dimension-size-225)); --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-xl-textonly-padding-left, var(--spectrum-global-dimension-size-225)); --spectrum-actionbutton-icononly-border-size: var(--spectrum-actionbutton-xl-icononly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-xl-icononly-padding-right, var(--spectrum-global-dimension-size-160)); --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-xl-icononly-padding-left, var(--spectrum-global-dimension-size-160)); } .spectrum-ActionButton { --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-left) - var(--spectrum-actionbutton-texticon-border-size)); --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-textonly-border-size)); --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-textonly-border-size)); --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-icononly-border-size)); --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-icononly-border-size)); --spectrum-actionbutton-focus-ring-border-radius-adjusted: calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap)); } [dir="ltr"] .spectrum-ActionButton { padding-left: var(--spectrum-actionbutton-textonly-padding-left-adjusted); padding-right: var(--spectrum-actionbutton-textonly-padding-right-adjusted); } [dir="rtl"] .spectrum-ActionButton { padding-right: var(--spectrum-actionbutton-textonly-padding-left-adjusted); padding-left: var(--spectrum-actionbutton-textonly-padding-right-adjusted); } .spectrum-ActionButton { position: relative; height: var(--spectrum-actionbutton-textonly-height); min-width: var(--spectrum-actionbutton-textonly-min-width); border-width: var(--spectrum-actionbutton-textonly-border-size); border-radius: var(--spectrum-actionbutton-textonly-border-radius); font-size: var(--spectrum-actionbutton-textonly-text-size); font-weight: var(--spectrum-actionbutton-textonly-text-font-weight); line-height: var(--spectrum-actionbutton-textonly-text-line-height); color: inherit; } [dir="ltr"] .spectrum-ActionButton .spectrum-Icon { margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))); } [dir="rtl"] .spectrum-ActionButton .spectrum-Icon { margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))); } [dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label { padding-left: var(--spectrum-actionbutton-texticon-icon-gap); } [dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label { padding-right: var(--spectrum-actionbutton-texticon-icon-gap); } [dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label { padding-right: 0; } [dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label { padding-left: 0; } .spectrum-ActionButton .spectrum-ActionButton-hold + .spectrum-Icon, .spectrum-ActionButton .spectrum-Icon:only-child { margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted))); margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted))); } .spectrum-ActionButton-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [dir="ltr"] .spectrum-ActionButton-hold { right: var(--spectrum-actionbutton-textonly-hold-icon-padding-right); } [dir="rtl"] .spectrum-ActionButton-hold { left: var(--spectrum-actionbutton-textonly-hold-icon-padding-right); } [dir="rtl"] .spectrum-ActionButton-hold { transform: matrix(-1, 0, 0, 1, 0, 0) ; } .spectrum-ActionButton-hold { position: absolute; bottom: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom); } .spectrum-ActionButton--quiet { border-width: var(--spectrum-actionbutton-quiet-textonly-border-size); border-radius: var(--spectrum-actionbutton-quiet-textonly-border-radius); font-size: var(--spectrum-actionbutton-quiet-textonly-text-size); font-weight: var(--spectrum-actionbutton-quiet-textonly-text-font-weight); } .spectrum-ActionButton { --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap, var(--spectrum-global-dimension-static-size-0)); --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size, var(--spectrum-global-dimension-static-size-10)); --spectrum-actionbutton-focus-ring-color: var(--spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus, var(--spectrum-alias-focus-ring-color)); transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-ActionButton:after { pointer-events: none; content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size)) * -1); border-radius: var(--spectrum-actionbutton-focus-ring-border-radius-adjusted); transition: box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-ActionButton.focus-ring { box-shadow: none !important; } .spectrum-ActionButton.focus-ring:after { box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color); } .spectrum-ActionButton--staticWhite { --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))); } .spectrum-ActionButton--staticBlack { --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))); } .spectrum-ActionButton--emphasized.is-selected, .spectrum-ActionButton--staticWhite, .spectrum-ActionButton--staticBlack { --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized, var(--spectrum-global-dimension-static-size-25)); --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized, var(--spectrum-global-dimension-static-size-25)); } .spectrum-ActionButton { background-color: var(--spectrum-actionbutton-m-textonly-background-color, var(--spectrum-alias-component-background-color-default)); border-color: var(--spectrum-actionbutton-m-textonly-border-color, var(--spectrum-alias-component-border-color-default)); color: var(--spectrum-actionbutton-m-textonly-text-color, var(--spectrum-alias-component-text-color-default)); } .spectrum-ActionButton .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color, var(--spectrum-alias-component-icon-color-default)); } .spectrum-ActionButton .spectrum-ActionButton-hold { color: var(--spectrum-actionbutton-m-textonly-hold-icon-color, var(--spectrum-alias-component-icon-color-default)); } .spectrum-ActionButton:hover { background-color: var(--spectrum-actionbutton-m-textonly-background-color-hover, var(--spectrum-alias-component-background-color-hover)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-hover, var(--spectrum-alias-component-border-color-hover)); color: var(--spectrum-actionbutton-m-textonly-text-color-hover, var(--spectrum-alias-component-text-color-hover)); } .spectrum-ActionButton:hover .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-hover, var(--spectrum-alias-component-icon-color-hover)); } .spectrum-ActionButton:hover .spectrum-ActionButton-hold { color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-hover, var(--spectrum-alias-component-icon-color-hover)); } .spectrum-ActionButton.focus-ring { background-color: var(--spectrum-actionbutton-m-textonly-background-color-key-focus, var(--spectrum-alias-component-background-color-key-focus)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus, var(--spectrum-alias-component-border-color-key-focus)); color: var(--spectrum-actionbutton-m-textonly-text-color-key-focus, var(--spectrum-alias-component-text-color-key-focus)); } .spectrum-ActionButton.focus-ring:active { border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus, var(--spectrum-alias-component-border-color-key-focus)); } .spectrum-ActionButton.focus-ring .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-key-focus, var(--spectrum-alias-component-icon-color-key-focus)); } .spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold { color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus, var(--spectrum-alias-component-icon-color-key-focus)); } .spectrum-ActionButton:active { background-color: var(--spectrum-actionbutton-m-textonly-background-color-down, var(--spectrum-alias-component-background-color-down)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-down, var(--spectrum-alias-component-border-color-down)); color: var(--spectrum-actionbutton-m-textonly-text-color-down, var(--spectrum-alias-component-text-color-down)); } .spectrum-ActionButton:active .spectrum-ActionButton-hold { color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-down, var(--spectrum-alias-component-icon-color-down)); } .spectrum-ActionButton:disabled, .spectrum-ActionButton.is-disabled { background-color: var(--spectrum-actionbutton-m-textonly-background-color-disabled, var(--spectrum-alias-component-background-color-disabled)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-disabled, var(--spectrum-alias-component-border-color-disabled)); color: var(--spectrum-actionbutton-m-textonly-text-color-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton:disabled .spectrum-Icon, .spectrum-ActionButton.is-disabled .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-disabled, var(--spectrum-alias-component-icon-color-disabled)); } .spectrum-ActionButton:disabled .spectrum-ActionButton-hold, .spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold { color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-disabled, var(--spectrum-alias-component-icon-color-disabled)); } .spectrum-ActionButton.is-selected { background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected, var(--spectrum-alias-component-background-color-selected-default)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected, var(--spectrum-alias-component-border-color-selected-default)); color: var(--spectrum-actionbutton-m-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton.is-selected .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-selected, var(--spectrum-alias-component-icon-color-selected)); } .spectrum-ActionButton.is-selected.focus-ring { background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-key-focus, var(--spectrum-alias-component-background-color-selected-key-focus)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-key-focus, var(--spectrum-alias-component-border-color-selected-key-focus)); color: var(--spectrum-actionbutton-m-textonly-text-color-selected-key-focus, var(--spectrum-alias-component-text-color-selected-key-focus)); } .spectrum-ActionButton.is-selected.focus-ring:active { border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus, var(--spectrum-alias-component-border-color-key-focus)); } .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus, var(--spectrum-alias-component-icon-color-selected)); } .spectrum-ActionButton.is-selected:hover { background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-hover, var(--spectrum-alias-component-background-color-selected-hover)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-hover, var(--spectrum-alias-component-border-color-selected-hover)); color: var(--spectrum-actionbutton-m-textonly-text-color-selected-hover, var(--spectrum-alias-component-text-color-selected-hover)); } .spectrum-ActionButton.is-selected:hover .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-hover, var(--spectrum-alias-component-icon-color-selected)); } .spectrum-ActionButton.is-selected:active { background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-down, var(--spectrum-alias-component-background-color-selected-down)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-down, var(--spectrum-alias-component-border-color-selected-down)); color: var(--spectrum-actionbutton-m-textonly-text-color-selected-down, var(--spectrum-alias-component-text-color-selected-down)); } .spectrum-ActionButton.is-selected:active .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-down, var(--spectrum-alias-component-icon-color-selected)); } .spectrum-ActionButton.is-selected:disabled, .spectrum-ActionButton.is-selected.is-disabled { background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-disabled, var(--spectrum-alias-component-background-color-disabled)); border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-disabled, var(--spectrum-alias-component-border-color-disabled)); color: var(--spectrum-actionbutton-m-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon { color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-disabled, var(--spectrum-alias-component-icon-color-disabled)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected, .spectrum-ActionButton--emphasized.is-selected { background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected, var(--spectrum-alias-component-background-color-emphasized-selected-default)); border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected, var(--spectrum-alias-component-border-color-emphasized-selected-default)); color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected, var(--spectrum-alias-component-text-color-emphasized-selected-default)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon { color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected, var(--spectrum-alias-component-icon-color-emphasized-selected-default)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring, .spectrum-ActionButton--emphasized.is-selected.focus-ring { background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus, var(--spectrum-alias-component-background-color-emphasized-selected-key-focus)); border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus, var(--spectrum-alias-component-border-color-emphasized-selected-key-focus)); color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus, var(--spectrum-alias-component-text-color-emphasized-selected-key-focus)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon { color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus, var(--spectrum-alias-component-icon-color-emphasized-selected-key-focus)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover, .spectrum-ActionButton--emphasized.is-selected:hover { background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover, var(--spectrum-alias-component-background-color-emphasized-selected-hover)); border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover, var(--spectrum-alias-component-border-color-emphasized-selected-hover)); color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover, var(--spectrum-alias-component-text-color-emphasized-selected-hover)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon { color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover, var(--spectrum-alias-component-icon-color-emphasized-selected-hover)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active, .spectrum-ActionButton--emphasized.is-selected.is-active { background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down, var(--spectrum-alias-component-background-color-emphasized-selected-down)); border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down, var(--spectrum-alias-component-border-color-emphasized-selected-down)); color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down, var(--spectrum-alias-component-text-color-emphasized-selected-down)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon { color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down, var(--spectrum-alias-component-icon-color-emphasized-selected-down)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled, .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled, .spectrum-ActionButton--emphasized.is-selected:disabled, .spectrum-ActionButton--emphasized.is-selected.is-disabled { background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled, var(--spectrum-alias-component-background-color-disabled)); border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled, var(--spectrum-alias-component-border-color-disabled)); color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon { color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled, var(--spectrum-alias-component-icon-color-disabled)); } .spectrum-ActionButton--quiet { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color, var(--spectrum-alias-component-background-color-quiet-default)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color, var(--spectrum-alias-component-border-color-quiet-default)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color, var(--spectrum-alias-component-text-color-default)); } .spectrum-ActionButton--quiet:hover { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-hover, var(--spectrum-alias-component-background-color-quiet-hover)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-hover, var(--spectrum-alias-component-border-color-quiet-hover)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-hover, var(--spectrum-alias-component-text-color-hover)); } .spectrum-ActionButton--quiet.focus-ring { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus, var(--spectrum-alias-component-background-color-quiet-key-focus)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus, var(--spectrum-alias-component-border-color-quiet-key-focus)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus, var(--spectrum-alias-component-text-color-key-focus)); } .spectrum-ActionButton--quiet:active { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-down, var(--spectrum-alias-component-background-color-quiet-down)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-down, var(--spectrum-alias-component-border-color-quiet-down)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-down, var(--spectrum-alias-component-text-color-down)); } .spectrum-ActionButton--quiet:disabled, .spectrum-ActionButton--quiet.is-disabled { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-disabled, var(--spectrum-alias-component-background-color-quiet-disabled)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-disabled, var(--spectrum-alias-component-border-color-quiet-disabled)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton--quiet.is-selected { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected, var(--spectrum-alias-component-background-color-selected-default)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected, var(--spectrum-alias-component-border-color-quiet-selected-default)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton--quiet.is-selected.focus-ring { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus, var(--spectrum-alias-component-background-color-quiet-selected-key-focus)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus, var(--spectrum-alias-component-border-color-quiet-selected-key-focus)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus, var(--spectrum-alias-component-text-color-selected-key-focus)); } .spectrum-ActionButton--quiet.is-selected:hover { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover, var(--spectrum-alias-component-background-color-quiet-selected-hover)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover, var(--spectrum-alias-component-border-color-quiet-selected-hover)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover, var(--spectrum-alias-component-text-color-selected-hover)); } .spectrum-ActionButton--quiet.is-selected:active { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down, var(--spectrum-alias-component-background-color-quiet-selected-down)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down, var(--spectrum-alias-component-border-color-quiet-selected-down)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down, var(--spectrum-alias-component-text-color-selected-down)); } .spectrum-ActionButton--quiet.is-selected:disabled, .spectrum-ActionButton--quiet.is-selected.is-disabled { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled, var(--spectrum-alias-component-background-color-quiet-selected-disabled)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled, var(--spectrum-alias-component-border-color-quiet-disabled)); color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite { --spectrum-global-color-static-black-rgb: 0, 0, 0; --spectrum-global-color-static-white-rgb: 255, 255, 255; --spectrum-ActionButton-static-black-color: var(--spectrum-global-color-static-black, rgb(var(--spectrum-global-color-static-black-rgb))); --spectrum-ActionButton-static-white-color: var(--spectrum-global-color-static-white, rgb(var(--spectrum-global-color-static-white-rgb))); } .spectrum-ActionButton--staticBlack.is-selected, .spectrum-ActionButton--staticWhite.is-selected { color: inherit !important; } @media (forced-colors: active) { .spectrum-ActionButton { --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized, var(--spectrum-global-dimension-static-size-25)); --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized, var(--spectrum-global-dimension-static-size-25)); --spectrum-actionbutton-focus-ring-color: ButtonText; --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected: HighlightText; --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled: GrayText; --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down: HighlightText; --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover: HighlightText; --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-background-color-selected: Highlight; --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled: ButtonFace; --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down: Highlight; --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover: Highlight; --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus: Highlight; --spectrum-actionbutton-m-emphasized-textonly-border-color-selected: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled: GrayText; --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-text-color-selected: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled: GrayText; --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover: HighlightText; --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-quiet-textonly-background-color-selected: Highlight; --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled: ButtonFace; --spectrum-actionbutton-m-quiet-textonly-background-color-selected-down: Highlight; --spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover: Highlight; --spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus: Highlight; --spectrum-actionbutton-m-quiet-textonly-border-color: ButtonFace; --spectrum-actionbutton-m-quiet-textonly-border-color-down: Highlight; --spectrum-actionbutton-m-quiet-textonly-border-color-hover: Highlight; --spectrum-actionbutton-m-quiet-textonly-border-color-selected: HighlightText; --spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled: GrayText; --spectrum-actionbutton-m-quiet-textonly-border-color-selected-down: HighlightText; --spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover: HighlightText; --spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-quiet-textonly-text-color-selected: HighlightText; --spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled: GrayText; --spectrum-actionbutton-m-quiet-textonly-text-color-selected-down: HighlightText; --spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover: HighlightText; --spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-texticon-icon-color-selected: HighlightText; --spectrum-actionbutton-m-texticon-icon-color-selected-disabled: GrayText; --spectrum-actionbutton-m-texticon-icon-color-selected-down: HighlightText; --spectrum-actionbutton-m-texticon-icon-color-selected-hover: HighlightText; --spectrum-actionbutton-m-texticon-icon-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-textonly-background-color-selected: Highlight; --spectrum-actionbutton-m-textonly-background-color-selected-disabled: ButtonFace; --spectrum-actionbutton-m-textonly-background-color-selected-down: Highlight; --spectrum-actionbutton-m-textonly-background-color-selected-hover: Highlight; --spectrum-actionbutton-m-textonly-background-color-selected-key-focus: Highlight; --spectrum-actionbutton-m-textonly-border-color-selected: HighlightText; --spectrum-actionbutton-m-textonly-border-color-selected-disabled: GrayText; --spectrum-actionbutton-m-textonly-border-color-selected-down: HighlightText; --spectrum-actionbutton-m-textonly-border-color-selected-hover: HighlightText; --spectrum-actionbutton-m-textonly-border-color-selected-key-focus: HighlightText; --spectrum-actionbutton-m-textonly-text-color-selected: HighlightText; --spectrum-actionbutton-m-textonly-text-color-selected-disabled: GrayText; --spectrum-actionbutton-m-textonly-text-color-selected-down: HighlightText; --spectrum-actionbutton-m-textonly-text-color-selected-hover: HighlightText; --spectrum-actionbutton-m-textonly-text-color-selected-key-focus: HighlightText; } .spectrum-ActionButton:after { forced-color-adjust: none; } .spectrum-ActionButton.is-selected:not(.is-disabled) .spectrum-ActionButton-label { forced-color-adjust: none; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled), .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled) { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected, var(--spectrum-alias-component-background-color-selected-default)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected, var(--spectrum-alias-component-border-color-quiet-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled) .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled) .spectrum-ActionButton-holdIcon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled) .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled) .spectrum-ActionButton-label { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)) ! important; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled) .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled) .spectrum-Icon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)) ! important; } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):hover, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):active, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):focus-visible, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled).is-keyboardFocused, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):hover, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):active, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):focus-visible, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled).is-keyboardFocused { background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected, var(--spectrum-alias-component-background-color-selected-default)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected, var(--spectrum-alias-component-border-color-quiet-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):hover .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):active .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):hover .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):active .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-ActionButton-holdIcon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):hover .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):active .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):hover .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):active .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-ActionButton-label { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):hover .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):active .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):hover .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):active .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled):focus-visible .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled, .is-disabled).is-keyboardFocused .spectrum-Icon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected, var(--spectrum-alias-component-text-color-selected-default)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:disabled, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.is-disabled, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:disabled, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected.is-disabled { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled, var(--spectrum-alias-component-background-color-quiet-selected-disabled)); border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled, var(--spectrum-alias-component-border-color-quiet-disabled)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:disabled .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.is-disabled .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:disabled .spectrum-ActionButton-holdIcon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected.is-disabled .spectrum-ActionButton-holdIcon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:disabled .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.is-disabled .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:disabled .spectrum-ActionButton-label, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected.is-disabled .spectrum-ActionButton-label { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.is-disabled .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected.is-disabled .spectrum-Icon { color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled, var(--spectrum-alias-component-text-color-disabled)); } } .spectrum-LogicButton, .spectrum-ClearButton, .spectrum-Button { position: relative; display: -ms-inline-flexbox; display: inline-flex; box-sizing: border-box; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; overflow: visible; margin: 0; border-style: solid; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: button; vertical-align: top; transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-out, border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, color var(--spectrum-global-animation-duration-100, 130ms) ease-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out; text-decoration: none; font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); line-height: var(--spectrum-alias-component-text-line-height, var(--spectrum-global-font-line-height-small)); -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; cursor: pointer; } .spectrum-LogicButton:focus, .spectrum-ClearButton:focus, .spectrum-Button:focus { outline: none; } .spectrum-LogicButton::-moz-focus-inner, .spectrum-ClearButton::-moz-focus-inner, .spectrum-Button::-moz-focus-inner { border: 0; border-style: none; padding: 0; margin-top: -2px; margin-bottom: -2px; } .spectrum-LogicButton:disabled, .spectrum-ClearButton:disabled, .spectrum-Button:disabled { cursor: default; } .spectrum-Button .spectrum-Icon { max-height: 100%; -ms-flex-negative: 0; flex-shrink: 0; } .spectrum-LogicButton:after, .spectrum-ClearButton:after, .spectrum-Button:after { border-radius: calc(var(--spectrum-button-primary-texticon-border-radius) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25))); content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1); transition: opacity var(--spectrum-global-animation-duration-100, 130ms) ease-out, margin var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .spectrum-LogicButton.focus-ring:after, .spectrum-ClearButton.focus-ring:after, .spectrum-Button.focus-ring:after { margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -2); } a.spectrum-Button { -webkit-appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spectrum-Button-label { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; justify-self: center; text-align: center; } .spectrum-Button-label:empty { display: none; } .spectrum-LogicButton { height: var(--spectrum-logicbutton-and-height, var(--spectrum-global-dimension-static-size-300)); padding: var(--spectrum-logicbutton-and-padding-x, var(--spectrum-global-dimension-size-100)); border-width: var(--spectrum-logicbutton-and-border-size, var(--spectrum-alias-border-size-thick)); border-radius: var(--spectrum-logicbutton-and-border-radius, var(--spectrum-alias-border-radius-regular)); font-size: var(--spectrum-logicbutton-and-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-logicbutton-and-text-font-weight, var(--spectrum-global-font-weight-bold)); line-height: 0; } .spectrum-LogicButton:after { border-radius: calc(var(--spectrum-logicbutton-and-border-radius, var(--spectrum-alias-border-radius-regular)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25))); } .spectrum-LogicButton.focus-ring:after, .spectrum-LogicButton.is-focused:after { box-shadow: 0 0 0 var(--spectrum-button-m-primary-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-m-primary-texticon-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color)); } .spectrum-ClearButton { background-color: var(--spectrum-clearbutton-m-background-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-clearbutton-m-icon-color, var(--spectrum-alias-icon-color)); } .spectrum-ClearButton:hover { background-color: var(--spectrum-clearbutton-m-background-color-hover, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-clearbutton-m-icon-color-hover, var(--spectrum-alias-icon-color-hover)); } .spectrum-ClearButton:active { background-color: var(--spectrum-clearbutton-m-background-color-down, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-clearbutton-m-icon-color-down, var(--spectrum-alias-icon-color-down)); } .spectrum-ClearButton.focus-ring { background-color: var(--spectrum-clearbutton-m-background-color-key-focus, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-clearbutton-m-icon-color-key-focus, var(--spectrum-alias-icon-color-key-focus)); } .spectrum-ClearButton:disabled, .spectrum-ClearButton.is-disabled { background-color: var(--spectrum-clearbutton-m-background-color-disabled, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-clearbutton-m-icon-color-disabled, var(--spectrum-alias-icon-color-disabled)); } .spectrum-LogicButton--and { background-color: var(--spectrum-logicbutton-and-background-color, var(--spectrum-global-color-blue-500)); border-color: var(--spectrum-logicbutton-and-border-color, var(--spectrum-global-color-blue-500)); color: var(--spectrum-logicbutton-and-text-color, var(--spectrum-global-color-static-white)); } .spectrum-LogicButton--and:hover { background-color: var(--spectrum-logicbutton-and-background-color-hover, var(--spectrum-global-color-blue-700)); border-color: var(--spectrum-logicbutton-and-border-color-hover, var(--spectrum-global-color-blue-700)); color: var(--spectrum-logicbutton-and-text-color, var(--spectrum-global-color-static-white)); } .spectrum-LogicButton--and:disabled, .spectrum-LogicButton--and.is-disabled { background-color: var(--spectrum-logicbutton-and-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-logicbutton-and-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-logicbutton-and-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-LogicButton--or { background-color: var(--spectrum-logicbutton-or-background-color, var(--spectrum-global-color-magenta-500)); border-color: var(--spectrum-logicbutton-or-border-color, var(--spectrum-global-color-magenta-500)); color: var(--spectrum-logicbutton-or-text-color, var(--spectrum-global-color-static-white)); } .spectrum-LogicButton--or:hover { background-color: var(--spectrum-logicbutton-or-background-color-hover, var(--spectrum-global-color-magenta-700)); border-color: var(--spectrum-logicbutton-or-border-color-hover, var(--spectrum-global-color-magenta-700)); color: var(--spectrum-logicbutton-or-text-color, var(--spectrum-global-color-static-white)); } .spectrum-LogicButton--or:disabled, .spectrum-LogicButton--or.is-disabled { background-color: var(--spectrum-button-m-secondary-texticon-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-secondary-texticon-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-logicbutton-and-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-ClearButton { width: var(--spectrum-clearbutton-m-width, var(--spectrum-global-dimension-size-400)); height: var(--spectrum-clearbutton-m-height, var(--spectrum-global-dimension-size-400)); border-radius: 100%; padding: 0; margin: 0; border: none; } .spectrum-ClearButton > .spectrum-Icon { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; } .spectrum-ClearButton--overBackground.focus-ring:after { margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1); } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .spectrum-ClearButton > .spectrum-Icon { margin: 0; } } .spectrum-ClearButton--small { width: var(--spectrum-clearbutton-s-width, var(--spectrum-global-dimension-size-300)); height: var(--spectrum-clearbutton-s-height, var(--spectrum-global-dimension-size-300)); } .spectrum-Button--sizeS { --spectrum-button-primary-textonly-text-padding-bottom: var(--spectrum-button-s-primary-textonly-text-padding-bottom); --spectrum-button-primary-texticon-text-size: var(--spectrum-button-s-primary-texticon-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-button-s-primary-texticon-text-font-weight, var(--spectrum-global-font-weight-bold)); --spectrum-button-primary-texticon-text-line-height: var(--spectrum-button-s-primary-texticon-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-button-primary-texticon-icon-gap: var(--spectrum-button-s-primary-texticon-icon-gap, var(--spectrum-global-dimension-size-85)); --spectrum-button-primary-texticon-focus-ring-size: var(--spectrum-button-s-primary-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size)); --spectrum-button-primary-texticon-border-size: var(--spectrum-button-s-primary-texticon-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-texticon-border-radius: var(--spectrum-button-s-primary-texticon-border-radius, var(--spectrum-global-dimension-size-150)); --spectrum-button-primary-texticon-padding-left: var(--spectrum-button-s-primary-texticon-padding-left, var(--spectrum-global-dimension-size-125)); --spectrum-button-primary-textonly-border-size: var(--spectrum-button-s-primary-textonly-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-textonly-min-width: var(--spectrum-button-s-primary-textonly-min-width, var(--spectrum-global-dimension-size-675)); --spectrum-button-primary-textonly-padding-right: var(--spectrum-button-s-primary-textonly-padding-right, var(--spectrum-global-dimension-size-150)); --spectrum-button-primary-textonly-padding-left: var(--spectrum-button-s-primary-textonly-padding-left, var(--spectrum-global-dimension-size-150)); --spectrum-button-primary-textonly-height: var(--spectrum-button-s-primary-textonly-height, var(--spectrum-global-dimension-size-300)); --spectrum-button-primary-textonly-text-padding-top: calc(var(--spectrum-button-s-primary-textonly-text-padding-top, var(--spectrum-global-dimension-static-size-50)) - 1px); } .spectrum-Button--sizeM { --spectrum-button-primary-texticon-padding-left: var(--spectrum-button-m-primary-texticon-padding-left); --spectrum-button-primary-texticon-text-size: var(--spectrum-button-m-primary-texticon-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-button-m-primary-texticon-text-font-weight, var(--spectrum-global-font-weight-bold)); --spectrum-button-primary-texticon-text-line-height: var(--spectrum-button-m-primary-texticon-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-button-primary-texticon-icon-gap: var(--spectrum-button-m-primary-texticon-icon-gap, var(--spectrum-global-dimension-size-100)); --spectrum-button-primary-texticon-focus-ring-size: var(--spectrum-button-m-primary-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size)); --spectrum-button-primary-texticon-border-size: var(--spectrum-button-m-primary-texticon-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-texticon-border-radius: var(--spectrum-button-m-primary-texticon-border-radius, var(--spectrum-global-dimension-size-200)); --spectrum-button-primary-textonly-text-padding-top: var(--spectrum-button-m-primary-textonly-text-padding-top, var(--spectrum-global-dimension-size-75)); --spectrum-button-primary-textonly-border-size: var(--spectrum-button-m-primary-textonly-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-textonly-min-width: var(--spectrum-button-m-primary-textonly-min-width, var(--spectrum-global-dimension-size-900)); --spectrum-button-primary-textonly-padding-right: var(--spectrum-button-m-primary-textonly-padding-right, var(--spectrum-global-dimension-size-200)); --spectrum-button-primary-textonly-padding-left: var(--spectrum-button-m-primary-textonly-padding-left, var(--spectrum-global-dimension-size-200)); --spectrum-button-primary-textonly-height: var(--spectrum-button-m-primary-textonly-height, var(--spectrum-global-dimension-size-400)); --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-m-primary-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-115)) - 1px); } .spectrum-Button--sizeL { --spectrum-button-primary-textonly-text-padding-top: var(--spectrum-button-l-primary-textonly-text-padding-top); --spectrum-button-primary-texticon-text-size: var(--spectrum-button-l-primary-texticon-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-button-l-primary-texticon-text-font-weight, var(--spectrum-global-font-weight-bold)); --spectrum-button-primary-texticon-text-line-height: var(--spectrum-button-l-primary-texticon-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-button-primary-texticon-icon-gap: var(--spectrum-button-l-primary-texticon-icon-gap, var(--spectrum-global-dimension-size-115)); --spectrum-button-primary-texticon-focus-ring-size: var(--spectrum-button-l-primary-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size)); --spectrum-button-primary-texticon-border-size: var(--spectrum-button-l-primary-texticon-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-texticon-border-radius: var(--spectrum-button-l-primary-texticon-border-radius, var(--spectrum-global-dimension-size-250)); --spectrum-button-primary-texticon-padding-left: var(--spectrum-button-l-primary-texticon-padding-left, var(--spectrum-global-dimension-size-225)); --spectrum-button-primary-textonly-text-padding-bottom: var(--spectrum-button-l-primary-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-130)); --spectrum-button-primary-textonly-border-size: var(--spectrum-button-l-primary-textonly-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-textonly-min-width: var(--spectrum-button-l-primary-textonly-min-width, var(--spectrum-global-dimension-size-1125)); --spectrum-button-primary-textonly-padding-right: var(--spectrum-button-l-primary-textonly-padding-right, var(--spectrum-global-dimension-size-250)); --spectrum-button-primary-textonly-padding-left: var(--spectrum-button-l-primary-textonly-padding-left, var(--spectrum-global-dimension-size-250)); --spectrum-button-primary-textonly-height: var(--spectrum-button-l-primary-textonly-height, var(--spectrum-global-dimension-size-500)); } .spectrum-Button--sizeXL { --spectrum-button-primary-texticon-padding-left: var(--spectrum-button-xl-primary-texticon-padding-left); --spectrum-button-primary-texticon-text-size: var(--spectrum-button-xl-primary-texticon-text-size, var(--spectrum-global-dimension-font-size-300)); --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-button-xl-primary-texticon-text-font-weight, var(--spectrum-global-font-weight-bold)); --spectrum-button-primary-texticon-text-line-height: var(--spectrum-button-xl-primary-texticon-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-button-primary-texticon-icon-gap: var(--spectrum-button-xl-primary-texticon-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-button-primary-texticon-focus-ring-size: var(--spectrum-button-xl-primary-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size)); --spectrum-button-primary-texticon-border-size: var(--spectrum-button-xl-primary-texticon-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-texticon-border-radius: var(--spectrum-button-xl-primary-texticon-border-radius, var(--spectrum-global-dimension-size-300)); --spectrum-button-primary-textonly-text-padding-top: var(--spectrum-button-xl-primary-textonly-text-padding-top, var(--spectrum-global-dimension-size-150)); --spectrum-button-primary-textonly-border-size: var(--spectrum-button-xl-primary-textonly-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-button-primary-textonly-min-width: var(--spectrum-button-xl-primary-textonly-min-width, var(--spectrum-global-dimension-size-1250)); --spectrum-button-primary-textonly-padding-right: var(--spectrum-button-xl-primary-textonly-padding-right, var(--spectrum-global-dimension-size-300)); --spectrum-button-primary-textonly-padding-left: var(--spectrum-button-xl-primary-textonly-padding-left, var(--spectrum-global-dimension-size-300)); --spectrum-button-primary-textonly-height: var(--spectrum-button-xl-primary-textonly-height, var(--spectrum-global-dimension-size-600)); --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-xl-primary-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-175)) - 1px); } .spectrum-Button { --spectrum-button-primary-padding-left-adjusted: calc(var(--spectrum-button-primary-texticon-padding-left) - var(--spectrum-button-primary-texticon-border-size)); --spectrum-button-primary-textonly-padding-left-adjusted: calc(var(--spectrum-button-primary-textonly-padding-left) - var(--spectrum-button-primary-texticon-border-size)); --spectrum-button-primary-textonly-padding-right-adjusted: calc(var(--spectrum-button-primary-textonly-padding-right) - var(--spectrum-button-primary-texticon-border-size)); } [dir="ltr"] .spectrum-Button { padding-left: var(--spectrum-button-primary-textonly-padding-left-adjusted); padding-right: var(--spectrum-button-primary-textonly-padding-right-adjusted); } [dir="rtl"] .spectrum-Button { padding-right: var(--spectrum-button-primary-textonly-padding-left-adjusted); padding-left: var(--spectrum-button-primary-textonly-padding-right-adjusted); } .spectrum-Button { border-width: var(--spectrum-button-primary-texticon-border-size); border-style: solid; border-radius: var(--spectrum-button-primary-texticon-border-radius); min-height: var(--spectrum-button-primary-textonly-height); height: auto; min-width: var(--spectrum-button-primary-textonly-min-width); padding-top: 0; padding-bottom: 0; font-size: var(--spectrum-button-primary-texticon-text-size); font-weight: var(--spectrum-button-primary-texticon-text-font-weight); } .spectrum-Button:hover, .spectrum-Button:active { box-shadow: none; } [dir="ltr"] .spectrum-Button .spectrum-Icon { margin-left: calc(-1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - var(--spectrum-button-primary-padding-left-adjusted))); } [dir="rtl"] .spectrum-Button .spectrum-Icon { margin-right: calc(-1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - var(--spectrum-button-primary-padding-left-adjusted))); } [dir="ltr"] .spectrum-Button .spectrum-Icon + .spectrum-Button-label { padding-left: var(--spectrum-button-primary-texticon-icon-gap); } [dir="rtl"] .spectrum-Button .spectrum-Icon + .spectrum-Button-label { padding-right: var(--spectrum-button-primary-texticon-icon-gap); } [dir="ltr"] .spectrum-Button .spectrum-Icon + .spectrum-Button-label { padding-right: 0; } [dir="rtl"] .spectrum-Button .spectrum-Icon + .spectrum-Button-label { padding-left: 0; } .spectrum-Button-label { line-height: var(--spectrum-button-primary-texticon-text-line-height); padding-top: calc(var(--spectrum-button-primary-textonly-text-padding-top) - var(--spectrum-button-primary-textonly-border-size)); padding-bottom: calc(var(--spectrum-button-primary-textonly-text-padding-bottom) - var(--spectrum-button-primary-textonly-border-size)); } .spectrum-LogicButton.focus-ring:after, .spectrum-LogicButton.is-focused:after, .spectrum-Button.focus-ring:after, .spectrum-Button.is-focused:after { box-shadow: 0 0 0 var(--spectrum-button-primary-texticon-focus-ring-size) var(--spectrum-button-m-primary-texticon-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color)); } .spectrum-Button--cta { background-color: var(--spectrum-button-m-cta-texticon-background-color, var(--spectrum-semantic-cta-background-color-default)); border-color: var(--spectrum-button-m-cta-texticon-border-color, var(--spectrum-semantic-cta-background-color-default)); color: var(--spectrum-button-m-cta-texticon-text-color, var(--spectrum-global-color-static-white)); } .spectrum-Button--cta:hover { background-color: var(--spectrum-button-m-cta-texticon-background-color-hover, var(--spectrum-semantic-cta-background-color-hover)); border-color: var(--spectrum-button-m-cta-texticon-border-color-hover, var(--spectrum-semantic-cta-background-color-hover)); color: var(--spectrum-button-m-cta-texticon-text-color-hover, var(--spectrum-global-color-static-white)); } .spectrum-Button--cta.focus-ring { background-color: var(--spectrum-button-m-cta-texticon-background-color-key-focus, var(--spectrum-semantic-cta-background-color-hover)); border-color: var(--spectrum-button-m-cta-texticon-border-color-key-focus, var(--spectrum-semantic-cta-background-color-hover)); color: var(--spectrum-button-m-cta-texticon-text-color-key-focus, var(--spectrum-global-color-static-white)); } .spectrum-Button--cta:active { background-color: var(--spectrum-button-m-cta-texticon-background-color-down, var(--spectrum-semantic-cta-background-color-down)); border-color: var(--spectrum-button-m-cta-texticon-border-color-down, var(--spectrum-semantic-cta-background-color-down)); color: var(--spectrum-button-m-cta-texticon-text-color-down, var(--spectrum-global-color-static-white)); } .spectrum-Button--cta:disabled, .spectrum-Button--cta.is-disabled { background-color: var(--spectrum-button-m-cta-texticon-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-cta-texticon-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-cta-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--primary { background-color: var(--spectrum-button-m-primary-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-texticon-border-color, var(--spectrum-global-color-gray-800)); color: var(--spectrum-button-m-primary-texticon-text-color, var(--spectrum-global-color-gray-800)); } .spectrum-Button--primary:hover { background-color: var(--spectrum-button-m-primary-texticon-background-color-hover, var(--spectrum-global-color-gray-800)); border-color: var(--spectrum-button-m-primary-texticon-border-color-hover, var(--spectrum-global-color-gray-800)); color: var(--spectrum-button-m-primary-texticon-text-color-hover, var(--spectrum-global-color-gray-50)); } .spectrum-Button--primary.focus-ring { background-color: var(--spectrum-button-m-primary-texticon-background-color-key-focus, var(--spectrum-global-color-gray-800)); border-color: var(--spectrum-button-m-primary-texticon-border-color-key-focus, var(--spectrum-global-color-gray-800)); color: var(--spectrum-button-m-primary-texticon-text-color-key-focus, var(--spectrum-global-color-gray-50)); } .spectrum-Button--primary:active { background-color: var(--spectrum-button-m-primary-texticon-background-color-down, var(--spectrum-global-color-gray-900)); border-color: var(--spectrum-button-m-primary-texticon-border-color-down, var(--spectrum-global-color-gray-900)); color: var(--spectrum-button-m-primary-texticon-text-color-down, var(--spectrum-global-color-gray-50)); } .spectrum-Button--primary:disabled, .spectrum-Button--primary.is-disabled { background-color: var(--spectrum-button-m-primary-texticon-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-primary-texticon-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-primary-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--secondary { background-color: var(--spectrum-button-m-secondary-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-secondary-texticon-border-color, var(--spectrum-global-color-gray-700)); color: var(--spectrum-button-m-secondary-texticon-text-color, var(--spectrum-global-color-gray-700)); } .spectrum-Button--secondary:hover { background-color: var(--spectrum-button-m-secondary-texticon-background-color-hover, var(--spectrum-global-color-gray-700)); border-color: var(--spectrum-button-m-secondary-texticon-border-color-hover, var(--spectrum-global-color-gray-700)); color: var(--spectrum-button-m-secondary-texticon-text-color-hover, var(--spectrum-global-color-gray-50)); } .spectrum-Button--secondary.focus-ring { background-color: var(--spectrum-button-m-secondary-texticon-background-color-key-focus, var(--spectrum-global-color-gray-700)); border-color: var(--spectrum-button-m-secondary-texticon-border-color-key-focus, var(--spectrum-global-color-gray-700)); color: var(--spectrum-button-m-secondary-texticon-text-color-key-focus, var(--spectrum-global-color-gray-50)); } .spectrum-Button--secondary:active { background-color: var(--spectrum-button-m-secondary-texticon-background-color-down, var(--spectrum-global-color-gray-800)); border-color: var(--spectrum-button-m-secondary-texticon-border-color-down, var(--spectrum-global-color-gray-800)); color: var(--spectrum-button-m-secondary-texticon-text-color-down, var(--spectrum-global-color-gray-50)); } .spectrum-Button--secondary:disabled, .spectrum-Button--secondary.is-disabled { background-color: var(--spectrum-button-m-secondary-texticon-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-secondary-texticon-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-secondary-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--negative { background-color: var(--spectrum-button-m-negative-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-negative-texticon-border-color, var(--spectrum-semantic-negative-text-color-small)); color: var(--spectrum-button-m-negative-texticon-text-color, var(--spectrum-semantic-negative-text-color-small)); } .spectrum-Button--negative:hover { background-color: var(--spectrum-button-m-negative-texticon-background-color-hover, var(--spectrum-semantic-negative-text-color-small)); border-color: var(--spectrum-button-m-negative-texticon-border-color-hover, var(--spectrum-semantic-negative-text-color-small)); color: var(--spectrum-button-m-negative-texticon-text-color-hover, var(--spectrum-global-color-gray-50)); } .spectrum-Button--negative.focus-ring { background-color: var(--spectrum-button-m-negative-texticon-background-color-key-focus, var(--spectrum-semantic-negative-text-color-small)); border-color: var(--spectrum-button-m-negative-texticon-border-color-key-focus, var(--spectrum-semantic-negative-text-color-small)); color: var(--spectrum-button-m-negative-texticon-text-color-key-focus, var(--spectrum-global-color-gray-50)); } .spectrum-Button--negative:active { background-color: var(--spectrum-button-m-negative-texticon-background-color-down, var(--spectrum-global-color-red-700)); border-color: var(--spectrum-button-m-negative-texticon-border-color-down, var(--spectrum-global-color-red-700)); color: var(--spectrum-button-m-negative-texticon-text-color-down, var(--spectrum-global-color-gray-50)); } .spectrum-Button--negative:disabled, .spectrum-Button--negative.is-disabled { background-color: var(--spectrum-button-m-negative-texticon-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-negative-texticon-border-color-disabled, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-negative-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--overBackground { background-color: var(--spectrum-button-m-primary-overbackground-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-overbackground-texticon-border-color, var(--spectrum-global-color-static-white)); color: var(--spectrum-button-m-primary-overbackground-texticon-text-color, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground:hover { background-color: var(--spectrum-button-m-primary-overbackground-texticon-background-color-hover, var(--spectrum-global-color-static-white)); border-color: var(--spectrum-button-m-primary-overbackground-texticon-border-color-hover, var(--spectrum-global-color-static-white)); color: inherit; } .spectrum-Button--overBackground.focus-ring { background-color: var(--spectrum-button-m-primary-overbackground-texticon-background-color-hover, var(--spectrum-global-color-static-white)); border-color: var(--spectrum-button-m-primary-overbackground-texticon-border-color-hover, var(--spectrum-global-color-static-white)); color: inherit; } .spectrum-Button--overBackground.focus-ring:after { box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground:active { background-color: var(--spectrum-button-m-primary-overbackground-texticon-background-color-down, var(--spectrum-global-color-static-white)); border-color: var(--spectrum-button-m-primary-overbackground-texticon-border-color-down, var(--spectrum-global-color-static-white)); color: inherit; } .spectrum-Button--overBackground:disabled, .spectrum-Button--overBackground.is-disabled { background-color: var(--spectrum-button-m-primary-overbackground-texticon-background-color-disabled, var(--spectrum-alias-background-color-overbackground-disabled)); border-color: var(--spectrum-button-m-primary-overbackground-texticon-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-overbackground-texticon-text-color-disabled, var(--spectrum-alias-text-color-overbackground-disabled)); } .spectrum-Button--overBackground.spectrum-Button--quiet, .spectrum-ClearButton--overBackground { background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground.spectrum-Button--quiet:hover, .spectrum-ClearButton--overBackground:hover { background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover, var(--spectrum-alias-background-color-quiet-overbackground-hover)); border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, .spectrum-ClearButton--overBackground.focus-ring { background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover, var(--spectrum-alias-background-color-quiet-overbackground-hover)); border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover, var(--spectrum-global-color-static-white)); box-shadow: none; } .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring:after, .spectrum-ClearButton--overBackground.focus-ring:after { box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground.spectrum-Button--quiet:active, .spectrum-ClearButton--overBackground:active { background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down, var(--spectrum-alias-background-color-quiet-overbackground-down)); border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down, var(--spectrum-global-color-static-white)); } .spectrum-Button--overBackground.spectrum-Button--quiet:disabled, .spectrum-Button--overBackground.spectrum-Button--quiet.is-disabled, .spectrum-ClearButton--overBackground:disabled, .spectrum-ClearButton--overBackground.is-disabled { background-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled, var(--spectrum-alias-text-color-quiet-overbackground-disabled)); } .spectrum-Button--primary.spectrum-Button--quiet { background-color: var(--spectrum-button-m-primary-quiet-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-quiet-texticon-border-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-button-m-primary-quiet-texticon-text-color, var(--spectrum-global-color-gray-800)); } .spectrum-Button--primary.spectrum-Button--quiet:hover { background-color: var(--spectrum-button-m-primary-quiet-texticon-background-color-hover, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-primary-quiet-texticon-border-color-hover, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-primary-quiet-texticon-text-color-hover, var(--spectrum-global-color-gray-900)); } .spectrum-Button--primary.spectrum-Button--quiet.focus-ring { background-color: var(--spectrum-button-m-primary-quiet-texticon-background-color-key-focus, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-primary-quiet-texticon-border-color-key-focus, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-primary-quiet-texticon-text-color-key-focus, var(--spectrum-global-color-gray-900)); } .spectrum-Button--primary.spectrum-Button--quiet:active { background-color: var(--spectrum-button-m-primary-quiet-texticon-background-color-down, var(--spectrum-global-color-gray-300)); border-color: var(--spectrum-button-m-primary-quiet-texticon-border-color-down, var(--spectrum-global-color-gray-300)); color: var(--spectrum-button-m-primary-quiet-texticon-text-color-down, var(--spectrum-global-color-gray-900)); } .spectrum-Button--primary.spectrum-Button--quiet:disabled, .spectrum-Button--primary.spectrum-Button--quiet.is-disabled { background-color: var(--spectrum-button-m-primary-quiet-texticon-background-color-disabled, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-primary-quiet-texticon-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-primary-quiet-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--secondary.spectrum-Button--quiet { background-color: var(--spectrum-button-m-secondary-quiet-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-secondary-quiet-texticon-border-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-button-m-secondary-quiet-texticon-text-color, var(--spectrum-global-color-gray-700)); } .spectrum-Button--secondary.spectrum-Button--quiet:hover { background-color: var(--spectrum-button-m-secondary-quiet-texticon-background-color-hover, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-secondary-quiet-texticon-border-color-hover, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-secondary-quiet-texticon-text-color-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring { background-color: var(--spectrum-button-m-secondary-quiet-texticon-background-color-key-focus, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-secondary-quiet-texticon-border-color-key-focus, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-secondary-quiet-texticon-text-color-key-focus, var(--spectrum-global-color-gray-800)); } .spectrum-Button--secondary.spectrum-Button--quiet:active { background-color: var(--spectrum-button-m-secondary-quiet-texticon-background-color-down, var(--spectrum-global-color-gray-300)); border-color: var(--spectrum-button-m-secondary-quiet-texticon-border-color-down, var(--spectrum-global-color-gray-300)); color: var(--spectrum-button-m-secondary-quiet-texticon-text-color-down, var(--spectrum-global-color-gray-800)); } .spectrum-Button--secondary.spectrum-Button--quiet:disabled, .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled { background-color: var(--spectrum-button-m-secondary-quiet-texticon-background-color-disabled, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-secondary-quiet-texticon-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-secondary-quiet-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Button--negative.spectrum-Button--quiet { background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color, var(--spectrum-alias-background-color-transparent)); color: var(--spectrum-button-m-negative-quiet-texticon-text-color, var(--spectrum-semantic-negative-text-color-small)); } .spectrum-Button--negative.spectrum-Button--quiet:hover { background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-hover, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-hover, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-negative-quiet-texticon-text-color-hover, var(--spectrum-global-color-red-700)); } .spectrum-Button--negative.spectrum-Button--quiet.focus-ring { background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-key-focus, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-key-focus, var(--spectrum-global-color-gray-200)); color: var(--spectrum-button-m-negative-quiet-texticon-text-color-key-focus, var(--spectrum-global-color-red-700)); } .spectrum-Button--negative.spectrum-Button--quiet:active { background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-down, var(--spectrum-global-color-gray-300)); border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-down, var(--spectrum-global-color-gray-300)); color: var(--spectrum-button-m-negative-quiet-texticon-text-color-down, var(--spectrum-global-color-red-700)); } .spectrum-Button--negative.spectrum-Button--quiet:disabled, .spectrum-Button--negative.spectrum-Button--quiet.is-disabled { background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-disabled, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-button-m-negative-quiet-texticon-text-color-disabled, var(--spectrum-global-color-gray-500)); } @media (forced-colors: active) { .spectrum-Button { forced-color-adjust:none; } } .spectrum-Badge--sizeS { --spectrum-badge-neutral-textonly-text-padding-bottom: var(--spectrum-badge-s-neutral-textonly-text-padding-bottom); --spectrum-badge-neutral-textonly-text-size: var(--spectrum-badge-s-neutral-textonly-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-badge-neutral-textonly-text-padding-top: var(--spectrum-badge-s-neutral-textonly-text-padding-top, var(--spectrum-global-dimension-static-size-50)); --spectrum-badge-neutral-textonly-text-line-height: var(--spectrum-badge-s-neutral-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-badge-neutral-textonly-border-top-left-radius: var(--spectrum-badge-s-neutral-textonly-border-top-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-top-right-radius: var(--spectrum-badge-s-neutral-textonly-border-top-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(--spectrum-badge-s-neutral-textonly-border-bottom-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(--spectrum-badge-s-neutral-textonly-border-bottom-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-padding-left: var(--spectrum-badge-s-neutral-textonly-padding-left, var(--spectrum-global-dimension-size-115)); --spectrum-badge-neutral-textonly-padding-right: var(--spectrum-badge-s-neutral-textonly-padding-right, var(--spectrum-global-dimension-size-115)); } .spectrum-Badge--sizeM { --spectrum-badge-neutral-textonly-text-size: var(--spectrum-badge-m-neutral-textonly-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-badge-neutral-textonly-text-padding-top: var(--spectrum-badge-m-neutral-textonly-text-padding-top, var(--spectrum-global-dimension-size-75)); --spectrum-badge-neutral-textonly-text-padding-bottom: var(--spectrum-badge-m-neutral-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-115)); --spectrum-badge-neutral-textonly-text-line-height: var(--spectrum-badge-m-neutral-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-badge-neutral-textonly-border-top-left-radius: var(--spectrum-badge-m-neutral-textonly-border-top-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-top-right-radius: var(--spectrum-badge-m-neutral-textonly-border-top-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(--spectrum-badge-m-neutral-textonly-border-bottom-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(--spectrum-badge-m-neutral-textonly-border-bottom-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-padding-left: var(--spectrum-badge-m-neutral-textonly-padding-left, var(--spectrum-global-dimension-size-150)); --spectrum-badge-neutral-textonly-padding-right: var(--spectrum-badge-m-neutral-textonly-padding-right, var(--spectrum-global-dimension-size-150)); } .spectrum-Badge--sizeL { --spectrum-badge-neutral-textonly-text-padding-top: var(--spectrum-badge-l-neutral-textonly-text-padding-top); --spectrum-badge-neutral-textonly-text-size: var(--spectrum-badge-l-neutral-textonly-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-badge-neutral-textonly-text-padding-bottom: var(--spectrum-badge-l-neutral-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-130)); --spectrum-badge-neutral-textonly-text-line-height: var(--spectrum-badge-l-neutral-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-badge-neutral-textonly-border-top-left-radius: var(--spectrum-badge-l-neutral-textonly-border-top-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-top-right-radius: var(--spectrum-badge-l-neutral-textonly-border-top-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(--spectrum-badge-l-neutral-textonly-border-bottom-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(--spectrum-badge-l-neutral-textonly-border-bottom-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-padding-left: var(--spectrum-badge-l-neutral-textonly-padding-left, var(--spectrum-global-dimension-size-185)); --spectrum-badge-neutral-textonly-padding-right: var(--spectrum-badge-l-neutral-textonly-padding-right, var(--spectrum-global-dimension-size-185)); } .spectrum-Badge--sizeXL { --spectrum-badge-neutral-textonly-text-size: var(--spectrum-badge-xl-neutral-textonly-text-size, var(--spectrum-global-dimension-font-size-300)); --spectrum-badge-neutral-textonly-text-padding-top: var(--spectrum-badge-xl-neutral-textonly-text-padding-top, var(--spectrum-global-dimension-size-150)); --spectrum-badge-neutral-textonly-text-padding-bottom: var(--spectrum-badge-xl-neutral-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-175)); --spectrum-badge-neutral-textonly-text-line-height: var(--spectrum-badge-xl-neutral-textonly-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-badge-neutral-textonly-border-top-left-radius: var(--spectrum-badge-xl-neutral-textonly-border-top-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-top-right-radius: var(--spectrum-badge-xl-neutral-textonly-border-top-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(--spectrum-badge-xl-neutral-textonly-border-bottom-right-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(--spectrum-badge-xl-neutral-textonly-border-bottom-left-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-badge-neutral-textonly-padding-left: var(--spectrum-badge-xl-neutral-textonly-padding-left, var(--spectrum-global-dimension-size-225)); --spectrum-badge-neutral-textonly-padding-right: var(--spectrum-badge-xl-neutral-textonly-padding-right, var(--spectrum-global-dimension-size-225)); } [dir="ltr"] .spectrum-Badge { padding-left: var(--spectrum-badge-neutral-textonly-padding-right); padding-right: var(--spectrum-badge-neutral-textonly-padding-left); } [dir="rtl"] .spectrum-Badge { padding-right: var(--spectrum-badge-neutral-textonly-padding-right); padding-left: var(--spectrum-badge-neutral-textonly-padding-left); } .spectrum-Badge { display: inline-block; position: relative; width: auto; padding-top: var(--spectrum-badge-neutral-textonly-text-padding-top); padding-bottom: var(--spectrum-badge-neutral-textonly-text-padding-bottom); border-radius: var(--spectrum-badge-neutral-textonly-border-top-left-radius) var(--spectrum-badge-neutral-textonly-border-top-right-radius) var(--spectrum-badge-neutral-textonly-border-bottom-right-radius) var(--spectrum-badge-neutral-textonly-border-bottom-left-radius); font-size: var(--spectrum-badge-neutral-textonly-text-size); line-height: var(--spectrum-badge-neutral-textonly-text-line-height); cursor: default; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; } .spectrum-Badge--neutral { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-neutral-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-neutral-textonly-background-color, var(--spectrum-semantic-neutral-background-color-default)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-neutral-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-neutral-textonly-background-color-hover, var(--spectrum-semantic-neutral-background-color-hover)); } .spectrum-Badge--informative { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-informative-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-informative-textonly-background-color, var(--spectrum-semantic-informative-background-color-default)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-informative-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-informative-textonly-background-color-hover, var(--spectrum-semantic-informative-background-color-hover)); } .spectrum-Badge--positive { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-positive-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-positive-textonly-background-color, var(--spectrum-semantic-positive-background-color-default)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-positive-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-positive-textonly-background-color-hover, var(--spectrum-semantic-positive-background-color-hover)); } .spectrum-Badge--negative { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-negative-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-negative-textonly-background-color, var(--spectrum-semantic-negative-background-color-default)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-negative-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-negative-textonly-background-color-hover, var(--spectrum-semantic-negative-background-color-hover)); } .spectrum-Badge--fuchsia { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-fuchsia-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-fuchsia-textonly-background-color, var(--spectrum-global-color-static-fuchsia-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-fuchsia-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-fuchsia-textonly-background-color-hover, var(--spectrum-global-color-static-fuchsia-700)); } .spectrum-Badge--indigo { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-indigo-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-indigo-textonly-background-color, var(--spectrum-global-color-static-indigo-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-indigo-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-indigo-textonly-background-color-hover, var(--spectrum-global-color-static-indigo-700)); } .spectrum-Badge--magenta { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-magenta-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-magenta-textonly-background-color, var(--spectrum-global-color-static-magenta-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-magenta-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-magenta-textonly-background-color-hover, var(--spectrum-global-color-static-magenta-700)); } .spectrum-Badge--purple { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-purple-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-purple-textonly-background-color, var(--spectrum-global-color-static-purple-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-purple-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-purple-textonly-background-color-hover, var(--spectrum-global-color-static-purple-700)); } .spectrum-Badge--seafoam { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-seafoam-texticon-text-color, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-seafoam-textonly-background-color, var(--spectrum-global-color-static-seafoam-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-seafoam-textonly-text-color-hover, var(--spectrum-global-color-static-white)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-seafoam-textonly-background-color-hover, var(--spectrum-global-color-static-seafoam-700)); } .spectrum-Badge--yellow { --spectrum-badge-m-texticon-text-color: var(--spectrum-badge-m-yellow-texticon-text-color, var(--spectrum-global-color-static-black)); --spectrum-badge-m-textonly-background-color: var(--spectrum-badge-m-yellow-textonly-background-color, var(--spectrum-global-color-static-yellow-600)); --spectrum-badge-m-textonly-text-color-hover: var(--spectrum-badge-m-yellow-textonly-text-color-hover, var(--spectrum-global-color-static-black)); --spectrum-badge-m-textonly-background-color-hover: var(--spectrum-badge-m-yellow-textonly-background-color-hover, var(--spectrum-global-color-static-yellow-700)); } .spectrum-Badge { color: var(--spectrum-badge-m-texticon-text-color); background-color: var(--spectrum-badge-m-textonly-background-color); } .spectrum-Badge:hover { color: var(--spectrum-badge-m-textonly-text-color-hover); background-color: var(--spectrum-badge-m-textonly-background-color-hover); } .spectrum-ActionGroup { --spectrum-actiongroup-button-gap-reset: 0; --spectrum-actiongroup-quiet-compact-button-gap: var( --spectrum-global-dimension-size-25 ); } .spectrum-ActionGroup { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .spectrum-ActionGroup .spectrum-ActionGroup-item { -ms-flex-negative: 0; flex-shrink: 0; } .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) { margin-top: calc(-1 * var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100))); } .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item { -ms-flex-negative: 0; flex-shrink: 0; margin-top: var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)); } [dir="ltr"] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) { margin-right: var(--spectrum-actiongroup-button-gap-x, var(--spectrum-global-dimension-size-100)); } [dir="rtl"] .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical).spectrum-ActionGroup:not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item:not(:last-child) { margin-left: var(--spectrum-actiongroup-button-gap-x, var(--spectrum-global-dimension-size-100)); } .spectrum-ActionGroup--vertical { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; } [dir="ltr"] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-left: var(--spectrum-actiongroup-button-gap-reset); } [dir="rtl"] .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-right: var(--spectrum-actiongroup-button-gap-reset); } .spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-top: var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)); } [dir="ltr"] .spectrum-ActionGroup--vertical.spectrum-ActionGroup--vertical { margin-left: var(--spectrum-actiongroup-button-gap-reset); } [dir="rtl"] .spectrum-ActionGroup--vertical.spectrum-ActionGroup--vertical { margin-right: var(--spectrum-actiongroup-button-gap-reset); } .spectrum-ActionGroup--vertical.spectrum-ActionGroup--vertical { margin-top: var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)); } [dir="ltr"] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-left: var(--spectrum-actiongroup-quiet-compact-button-gap); } [dir="rtl"] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-right: var(--spectrum-actiongroup-quiet-compact-button-gap); } .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-top: var(--spectrum-actiongroup-button-gap-reset); } [dir="ltr"] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-left: var(--spectrum-actiongroup-button-gap-reset); } [dir="rtl"] .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-right: var(--spectrum-actiongroup-button-gap-reset); } .spectrum-ActionGroup--compact.spectrum-ActionGroup--quiet.spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-top: var( --spectrum-actiongroup-quiet-compact-button-gap ); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item { position: relative; border-radius: 0; z-index: 0; } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { border-top-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { border-top-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { border-bottom-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { border-bottom-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { margin-right: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child { margin-left: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { border-top-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { border-top-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { border-bottom-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { border-bottom-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { margin-left: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { margin-right: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { margin-right: 0; } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child { margin-left: 0; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected { z-index: 1; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover { z-index: 2; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.focus-ring { z-index: 3; } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-left: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-right: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-right: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-left: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label { width: auto; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item { border-radius: 0; } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item + .spectrum-ActionGroup-item { margin-top: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); margin-bottom: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child { border-top-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child { border-top-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child { border-top-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child { border-top-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:first-child { border-radius: 0; margin-bottom: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child { border-bottom-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child { border-bottom-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="ltr"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child { border-bottom-right-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } [dir="rtl"] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child { border-bottom-left-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular)); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item:last-child { border-radius: 0; margin-top: calc(-1 * var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin)) / 2); margin-bottom: 0; } .spectrum-ActionGroup--justified .spectrum-ActionGroup-item { -ms-flex: 1; flex: 1; } .spectrum-Divider--sizeS { --spectrum-divider-height: var(--spectrum-divider-s-height, var(--spectrum-global-dimension-size-10)); --spectrum-divider-vertical-width: var(--spectrum-divider-s-vertical-width, var(--spectrum-global-dimension-size-10)); } .spectrum-Divider--sizeM { --spectrum-divider-height: var(--spectrum-divider-m-height, var(--spectrum-global-dimension-size-25)); --spectrum-divider-vertical-width: var(--spectrum-divider-m-vertical-width, var(--spectrum-global-dimension-size-25)); } .spectrum-Divider--sizeL { --spectrum-divider-height: var(--spectrum-divider-l-height, var(--spectrum-global-dimension-size-50)); --spectrum-divider-vertical-width: var(--spectrum-divider-l-vertical-width, var(--spectrum-global-dimension-size-50)); } .spectrum-Divider { --spectrum-divider-vertical-height: 100%; } .spectrum-Divider { width: 100%; height: var(--spectrum-divider-height); overflow: visible; border: none; border-width: var(--spectrum-divider-height); border-radius: var(--spectrum-divider-height); } .spectrum-Divider--vertical { height: var(--spectrum-divider-vertical-height); width: var(--spectrum-divider-vertical-width); } .spectrum-Divider { --spectrum-divider-l-background-color: var(--spectrum-global-color-gray-800); --spectrum-divider-m-background-color: var(--spectrum-global-color-gray-300); --spectrum-divider-s-background-color: var(--spectrum-global-color-gray-300); } .spectrum-Divider--sizeL { background-color: var(--spectrum-divider-l-background-color, var(--spectrum-global-color-gray-800)); } .spectrum-Divider--sizeM { background-color: var(--spectrum-divider-m-background-color, var(--spectrum-global-color-gray-300)); } .spectrum-Divider--sizeS { background-color: var(--spectrum-divider-s-background-color, var(--spectrum-global-color-gray-300)); } .spectrum-FieldGroup { --spectrum-fieldgroup-margin: var(--spectrum-global-dimension-size-200); } .spectrum-FieldGroup { display: -ms-flexbox; display: flex; vertical-align: top; -ms-flex-wrap: wrap; flex-wrap: wrap; } [dir="ltr"] .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item:not(:last-child) { margin-right: var(--spectrum-fieldgroup-margin); } [dir="rtl"] .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item:not(:last-child) { margin-left: var(--spectrum-fieldgroup-margin); } .spectrum-FieldGroup--vertical { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; } .spectrum-Textfield { --spectrum-textfield-border-size: var(--spectrum-textfield-m-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-textfield-text-line-height: var(--spectrum-textfield-m-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-textfield-text-size: var(--spectrum-textfield-m-text-size, var(--spectrum-alias-item-text-size-m)); --spectrum-textfield-height: var(--spectrum-textfield-m-height, var(--spectrum-alias-item-height-m)); --spectrum-textfield-padding-left: var(--spectrum-textfield-m-padding-left, var(--spectrum-alias-item-padding-m)); --spectrum-textfield-padding-right: var(--spectrum-textfield-m-padding-right, var(--spectrum-alias-item-padding-m)); --spectrum-textfield-min-width: var(--spectrum-textfield-m-min-width, var(--spectrum-global-dimension-size-600)); --spectrum-textfield-success-icon-height: var(--spectrum-textfield-m-success-icon-height, var(--spectrum-alias-ui-icon-checkmark-size-100)); --spectrum-textfield-success-icon-width: var(--spectrum-textfield-m-success-icon-width, var(--spectrum-alias-ui-icon-checkmark-size-100)); --spectrum-textfield-success-icon-margin-left: var(--spectrum-textfield-m-success-icon-margin-left, var(--spectrum-global-dimension-size-150)); --spectrum-textfield-error-icon-height: var(--spectrum-textfield-m-error-icon-height, var(--spectrum-alias-ui-icon-alert-size-100)); --spectrum-textfield-error-icon-width: var(--spectrum-textfield-m-error-icon-width, var(--spectrum-alias-ui-icon-alert-size-100)); --spectrum-textfield-error-icon-margin-left: var(--spectrum-textfield-m-error-icon-margin-left, var(--spectrum-global-dimension-size-150)); --spectrum-textfield-placeholder-text-font-style: var(--spectrum-textfield-m-placeholder-text-font-style, var(--spectrum-global-font-style-italic)); --spectrum-textfield-placeholder-text-font-weight: var(--spectrum-textfield-m-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular)); --spectrum-textfield-border-radius: var(--spectrum-textfield-m-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-textfield-quiet-border-size: var(--spectrum-textfield-quiet-m-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-textfield-quiet-padding-left: var(--spectrum-textfield-quiet-m-padding-left, 0); --spectrum-textfield-quiet-padding-right: var(--spectrum-textfield-quiet-m-padding-right, 0); --spectrum-textfield-quiet-success-icon-margin-left: var(--spectrum-textfield-quiet-m-success-icon-margin-left, var(--spectrum-global-dimension-size-150)); --spectrum-textfield-quiet-error-icon-margin-left: var(--spectrum-textfield-quiet-m-error-icon-margin-left, var(--spectrum-global-dimension-size-150)); --spectrum-textfield-quiet-border-radius: var(--spectrum-textfield-quiet-m-border-radius, 0px); --spectrum-textarea-text-padding-top: var(--spectrum-textarea-m-text-padding-top, var(--spectrum-alias-item-text-padding-top-m)); --spectrum-textarea-text-padding-bottom: var(--spectrum-textarea-m-text-padding-bottom, var(--spectrum-alias-item-text-padding-bottom-m)); --spectrum-textarea-height: var(--spectrum-textarea-m-height, var(--spectrum-alias-item-height-m)); --spectrum-textarea-padding-left: var(--spectrum-textarea-m-padding-left, var(--spectrum-alias-item-padding-m)); --spectrum-textarea-padding-right: var(--spectrum-textarea-m-padding-right, var(--spectrum-alias-item-padding-m)); --spectrum-textfield-padding-top: 3px; --spectrum-textfield-padding-bottom: 5px; --spectrum-textfield-text-font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); --spectrum-textfield-icon-gap: var(--spectrum-global-dimension-size-65); --spectrum-textfield-quiet-icon-gap: var(--spectrum-global-dimension-size-75); --spectrum-textarea-min-height: var(--spectrum-textarea-height); --spectrum-textarea-height-adjusted: auto; --spectrum-textarea-padding-top: var(--spectrum-textarea-text-padding-top); --spectrum-textarea-padding-bottom: var(--spectrum-textarea-text-padding-bottom); } .spectrum-Textfield { display: -ms-inline-flexbox; display: inline-flex; position: relative; min-width: var(--spectrum-textfield-min-width); width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400)); } .spectrum-Textfield.spectrum-Textfield--quiet.spectrum-Textfield--multiline .spectrum-Textfield-input { height: var(--spectrum-textfield-height); min-height: var(--spectrum-textfield-height); } .spectrum-Textfield-input { box-sizing: border-box; border: var(--spectrum-textfield-border-size) solid; border-radius: var(--spectrum-textfield-border-radius); padding: var(--spectrum-textfield-padding-top) var(--spectrum-textfield-padding-right) var(--spectrum-textfield-padding-bottom) calc(var(--spectrum-textfield-padding-left) - 1px); text-indent: 0; width: 100%; height: var(--spectrum-textfield-height); vertical-align: top; margin: 0; overflow: visible; font-family: var(--spectrum-textfield-text-font-family); font-size: var(--spectrum-textfield-text-size); line-height: var(--spectrum-textfield-text-line-height); text-overflow: ellipsis; transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; outline: none; -webkit-appearance: none; -moz-appearance: textfield; } .spectrum-Textfield-input::placeholder { font-weight: var(--spectrum-textfield-placeholder-text-font-weight); font-style: var(--spectrum-textfield-placeholder-text-font-style); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; opacity: 1; } .spectrum-Textfield-input::-ms-input-placeholder { font-weight: var(--spectrum-textfield-placeholder-text-font-weight); font-style: var(--spectrum-textfield-placeholder-text-font-style); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; opacity: 1; } .spectrum-Textfield-input:lang(ja)::placeholder, .spectrum-Textfield-input:lang(zh)::placeholder, .spectrum-Textfield-input:lang(ko)::placeholder { font-style: normal; } .spectrum-Textfield-input:lang(ja)::-ms-input-placeholder, .spectrum-Textfield-input:lang(zh)::-ms-input-placeholder, .spectrum-Textfield-input:lang(ko)::-ms-input-placeholder { font-style: normal; } .spectrum-Textfield-input:hover::placeholder { font-weight: var(--spectrum-textfield-placeholder-text-font-weight); } .spectrum-Textfield-input:disabled { resize: none; opacity: 1; } .spectrum-Textfield-input:disabled::placeholder { font-weight: var(--spectrum-textfield-placeholder-text-font-weight); } .spectrum-Textfield-input::-ms-clear { width: 0; height: 0; } .spectrum-Textfield-input::-webkit-inner-spin-button, .spectrum-Textfield-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .spectrum-Textfield-input:-moz-ui-invalid { box-shadow: none; } [dir="ltr"] .spectrum-Textfield.is-valid .spectrum-Textfield-input { padding-right: calc(var(--spectrum-textfield-padding-right) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-success-icon-margin-left)); } [dir="rtl"] .spectrum-Textfield.is-valid .spectrum-Textfield-input { padding-left: calc(var(--spectrum-textfield-padding-right) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-success-icon-margin-left)); } [dir="ltr"] .spectrum-Textfield.is-invalid .spectrum-Textfield-input { padding-right: calc(var(--spectrum-textfield-padding-right) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-error-icon-margin-left)); } [dir="rtl"] .spectrum-Textfield.is-invalid .spectrum-Textfield-input { padding-left: calc(var(--spectrum-textfield-padding-right) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-error-icon-margin-left)); } .spectrum-Textfield--multiline .spectrum-Textfield-input { height: var(--spectrum-textarea-height-adjusted); min-height: var(--spectrum-textarea-min-height); padding: var(--spectrum-textarea-padding-top) var(--spectrum-textarea-padding-right) var(--spectrum-textarea-padding-bottom) calc(var(--spectrum-textarea-padding-left) - 1px); overflow: auto; } [dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-input { padding-left: var(--spectrum-textfield-quiet-padding-left); } [dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-input { padding-right: var(--spectrum-textfield-quiet-padding-left); } [dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-input { padding-right: var(--spectrum-textfield-quiet-padding-right); } [dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-input { padding-left: var(--spectrum-textfield-quiet-padding-right); } .spectrum-Textfield--quiet .spectrum-Textfield-input { border-radius: var(--spectrum-textfield-quiet-border-radius); border-top-width: 0; border-bottom-width: var(--spectrum-textfield-quiet-border-size); border-left-width: 0; border-right-width: 0; resize: none; overflow-y: hidden; } [dir="ltr"] .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input { padding-right: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-error-icon-margin-left)); } [dir="rtl"] .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input { padding-left: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-error-icon-margin-left)); } [dir="ltr"] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input { padding-right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-quiet-success-icon-margin-left)); } [dir="rtl"] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input { padding-left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-quiet-success-icon-margin-left)); } .spectrum-Textfield-validationIcon { position: absolute; pointer-events: all; } [dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-validationIcon { padding-right: 0; } [dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-validationIcon { padding-left: 0; } [dir="ltr"] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { right: var(--spectrum-textfield-error-icon-margin-left); } [dir="rtl"] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { left: var(--spectrum-textfield-error-icon-margin-left); } .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { width: var(--spectrum-textfield-error-icon-width); height: var(--spectrum-textfield-error-icon-height); bottom: calc(var(--spectrum-textfield-height) / 2 - var(--spectrum-textfield-error-icon-height) / 2); } [dir="ltr"] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { right: 0; } [dir="rtl"] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { left: 0; } [dir="ltr"] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { right: var(--spectrum-textfield-success-icon-margin-left); } [dir="rtl"] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { left: var(--spectrum-textfield-success-icon-margin-left); } .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { width: var(--spectrum-textfield-success-icon-width); height: var(--spectrum-textfield-success-icon-height); bottom: calc(var(--spectrum-textfield-height) / 2 - var(--spectrum-textfield-success-icon-height) / 2); } [dir="ltr"] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { right: 0; } [dir="rtl"] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { left: 0; } [dir="ltr"] .spectrum-Textfield-icon { left: var(--spectrum-textfield-error-icon-margin-left); } [dir="rtl"] .spectrum-Textfield-icon { right: var(--spectrum-textfield-error-icon-margin-left); } .spectrum-Textfield-icon { display: block; position: absolute; height: var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)); width: var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)); top: calc(var(--spectrum-textfield-height) / 2 - var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) / 2); } [dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-icon { left: 0; } [dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-icon { right: 0; } [dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-icon ~ .spectrum-Textfield-input { padding-left: calc(var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-icon-gap)); } [dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-icon ~ .spectrum-Textfield-input { padding-right: calc(var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-icon-gap)); } [dir="ltr"] .spectrum-Textfield-icon + .spectrum-Textfield-input { padding-left: calc(var(--spectrum-textfield-error-icon-margin-left) + var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-gap)); } [dir="rtl"] .spectrum-Textfield-icon + .spectrum-Textfield-input { padding-right: calc(var(--spectrum-textfield-error-icon-margin-left) + var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-gap)); } .spectrum-Textfield--multiline .spectrum-Textfield-icon ~ .spectrum-Textfield-input { height: var(--spectrum-textfield-height); min-height: var(--spectrum-textfield-height); } .spectrum-Textfield { --spectrum-textfield-m-validation-icon-color-valid: var(--spectrum-semantic-positive-color-icon, var(--spectrum-global-color-green-600)); } .spectrum-Textfield:hover .spectrum-Textfield-input { border-color: var(--spectrum-textfield-m-border-color-hover, var(--spectrum-alias-border-color-hover)); box-shadow: none; } .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder { color: var(--spectrum-textfield-m-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover)); } .spectrum-Textfield:hover .spectrum-Textfield-icon { color: var(--spectrum-textfield-m-icon-color-hover, var(--spectrum-global-color-gray-900)); } .spectrum-Textfield:active .spectrum-Textfield-input { border-color: var(--spectrum-textfield-m-border-color-down, var(--spectrum-alias-border-color-mouse-focus)); } .spectrum-Textfield:active .spectrum-Textfield-icon { color: var(--spectrum-textfield-m-icon-color-down, var(--spectrum-alias-icon-color-down)); } .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon { color: var(--spectrum-textfield-m-validation-icon-color-valid, var(--spectrum-global-color-green-400)); } .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon { color: var(--spectrum-textfield-m-validation-icon-color-error, var(--spectrum-semantic-negative-color-icon)); } .spectrum-Textfield.is-invalid:hover .spectrum-Textfield-input { border-color: var(--spectrum-textfield-m-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover)); } .spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon { color: var(--spectrum-textfield-m-validation-icon-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Textfield.is-disabled .spectrum-Textfield-icon { color: var(--spectrum-textfield-m-icon-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Textfield-icon { color: var(--spectrum-textfield-m-icon-color, var(--spectrum-alias-icon-color)); } .spectrum-Textfield-input { background-color: var(--spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50)); border-color: var(--spectrum-textfield-m-border-color, var(--spectrum-alias-border-color)); color: var(--spectrum-textfield-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Textfield-input::placeholder { color: var(--spectrum-textfield-m-placeholder-text-color, var(--spectrum-global-color-gray-600)); } .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus { border-color: var(--spectrum-textfield-m-border-color-down, var(--spectrum-alias-border-color-mouse-focus)); } .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield-input.focus-ring { border-color: var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus)); box-shadow: 0 0 0 1px var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus)); } .spectrum-Textfield.is-invalid .spectrum-Textfield-input { border-color: var(--spectrum-textfield-m-border-color-error, var(--spectrum-semantic-negative-color-default)); } .is-keyboardFocused.spectrum-Textfield.is-invalid .spectrum-Textfield-input, .spectrum-Textfield.is-invalid .spectrum-Textfield-input.focus-ring { border-color: var(--spectrum-textfield-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus)); box-shadow: 0 0 0 1px var(--spectrum-textfield-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus)); } .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield-input :disabled { background-color: var(--spectrum-textfield-m-background-color-disabled, var(--spectrum-global-color-gray-200)); border-color: var(--spectrum-textfield-m-border-color-disabled, var(--spectrum-alias-border-color-transparent)); color: var(--spectrum-textfield-m-text-color-disabled, var(--spectrum-alias-text-color-disabled)); -webkit-text-fill-color: var(--spectrum-textfield-m-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input :disabled::placeholder { color: var(--spectrum-textfield-m-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Textfield--quiet .spectrum-Textfield-input { background-color: var(--spectrum-textfield-quiet-m-background-color, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-textfield-quiet-m-border-color, var(--spectrum-alias-border-color)); } :hover.spectrum-Textfield--quiet .spectrum-Textfield-input { border-color: var(--spectrum-textfield-quiet-m-border-color-hover, var(--spectrum-alias-border-color-hover)); } :active.spectrum-Textfield--quiet .spectrum-Textfield-input { border-color: var(--spectrum-textfield-quiet-m-border-color-down, var(--spectrum-alias-border-color-mouse-focus)); } .is-focused.spectrum-Textfield--quiet .spectrum-Textfield-input, .spectrum-Textfield--quiet .spectrum-Textfield-input:focus { border-color: var(--spectrum-textfield-quiet-m-border-color-mouse-focus, var(--spectrum-alias-border-color-mouse-focus)); } .is-keyboardFocused.spectrum-Textfield--quiet .spectrum-Textfield-input, .spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring { border-color: var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus)); box-shadow: 0 1px 0 var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus)); } .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input { border-color: var(--spectrum-textfield-quiet-m-border-color-error, var(--spectrum-semantic-negative-color-default)); } .is-focused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input, .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input:focus { border-color: var(--spectrum-textfield-quiet-m-border-color-error-mouse-focus, var(--spectrum-semantic-negative-color-state-hover)); } .is-keyboardFocused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input, .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring { border-color: var(--spectrum-textfield-quiet-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus)); box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus)); } .is-disabled:hover.spectrum-Textfield--quiet .spectrum-Textfield-input, .is-disabled.spectrum-Textfield--quiet .spectrum-Textfield-input, .spectrum-Textfield--quiet .spectrum-Textfield-input :disabled { background-color: var(--spectrum-textfield-quiet-m-background-color-disabled, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-textfield-quiet-m-border-color-disabled, var(--spectrum-alias-border-color-mid)); } .spectrum-Picker { position: relative; display: -ms-inline-flexbox; display: inline-flex; box-sizing: border-box; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; overflow: visible; margin: 0; border-style: solid; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: button; vertical-align: top; transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-out, border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, color var(--spectrum-global-animation-duration-100, 130ms) ease-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out; text-decoration: none; font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); line-height: var(--spectrum-alias-component-text-line-height, var(--spectrum-global-font-line-height-small)); -ms-user-select: none; user-select: none; -webkit-user-select: none; cursor: pointer; } .spectrum-Picker:focus { outline: none; } .spectrum-Picker::-moz-focus-inner { border: 0; border-style: none; padding: 0; margin-top: -2px; margin-bottom: -2px; } .spectrum-Picker:disabled { cursor: default; } [dir="ltr"] .spectrum-Picker { padding-left: var(--spectrum-picker-textonly-padding-left-adjusted); padding-right: var(--spectrum-picker-textonly-padding-right-adjusted); } [dir="rtl"] .spectrum-Picker { padding-right: var(--spectrum-picker-textonly-padding-left-adjusted); padding-left: var(--spectrum-picker-textonly-padding-right-adjusted); } .spectrum-Picker { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; max-width: 100%; width: var(--spectrum-picker-texticon-width); min-width: var(--spectrum-picker-texticon-min-width); height: var(--spectrum-picker-texticon-height); margin: 0; padding-top: 0; padding-bottom: 0; border-width: var(--spectrum-picker-texticon-border-size); border-style: solid; border-radius: var(--spectrum-picker-texticon-border-radius); transition: background-color var(--spectrum-global-animation-duration-100, 130ms), box-shadow var(--spectrum-global-animation-duration-100, 130ms), border-color var(--spectrum-global-animation-duration-100, 130ms); } .spectrum-Picker:disabled, .spectrum-Picker.is-disabled { border-width: var(--spectrum-picker-texticon-disabled-border-size); cursor: default; } [dir="ltr"] .spectrum-Picker .spectrum-Picker-icon { margin-right: var(--spectrum-picker-texticon-icon-gap); } [dir="rtl"] .spectrum-Picker .spectrum-Picker-icon { margin-left: var(--spectrum-picker-texticon-icon-gap); } .spectrum-Picker .spectrum-Picker-icon { -ms-flex-negative: 0; flex-shrink: 0; } [dir="ltr"] .spectrum-Picker .spectrum-Picker-label + .spectrum-Picker-icon { margin-left: calc(-1 * (var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))); } [dir="rtl"] .spectrum-Picker .spectrum-Picker-label + .spectrum-Picker-icon { margin-right: calc(-1 * (var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))); } .spectrum-Picker--sizeS { --spectrum-picker-texticon-border-size: var(--spectrum-picker-s-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-texticon-text-size: var(--spectrum-picker-s-texticon-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-picker-texticon-icon-gap: var(--spectrum-picker-s-texticon-icon-gap, var(--spectrum-global-dimension-size-85)); --spectrum-picker-texticon-placeholder-font-style: var(--spectrum-picker-s-texticon-placeholder-font-style, var(--spectrum-global-font-style-italic)); --spectrum-picker-texticon-placeholder-font-weight: var(--spectrum-picker-s-texticon-placeholder-font-weight, var(--spectrum-global-font-weight-regular)); --spectrum-picker-texticon-error-icon-margin-left: var(--spectrum-picker-s-texticon-error-icon-margin-left, var(--spectrum-global-dimension-size-100)); --spectrum-picker-texticon-ui-icon-gap: var(--spectrum-picker-s-texticon-ui-icon-gap, var(--spectrum-global-dimension-size-85)); --spectrum-picker-texticon-popover-max-width: var(--spectrum-picker-s-texticon-popover-max-width, var(--spectrum-global-dimension-size-1800)); --spectrum-picker-texticon-padding-left: var(--spectrum-picker-s-texticon-padding-left, var(--spectrum-global-dimension-size-85)); --spectrum-picker-texticon-height: var(--spectrum-picker-s-texticon-height, var(--spectrum-global-dimension-size-300)); --spectrum-picker-texticon-min-width: var(--spectrum-picker-s-texticon-min-width, var(--spectrum-global-dimension-size-450)); --spectrum-picker-texticon-width: var(--spectrum-picker-s-texticon-width, var(--spectrum-global-dimension-size-2000)); --spectrum-picker-texticon-border-radius: var(--spectrum-picker-s-texticon-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-picker-textonly-border-size: var(--spectrum-picker-s-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-textonly-padding-left: var(--spectrum-picker-s-textonly-padding-left, var(--spectrum-global-dimension-size-115)); --spectrum-picker-textonly-padding-right: var(--spectrum-picker-s-textonly-padding-right, var(--spectrum-global-dimension-size-115)); --spectrum-picker-textonly-border-radius: var(--spectrum-picker-s-textonly-border-radius, var(--spectrum-alias-component-border-radius)); } .spectrum-Picker--sizeM { --spectrum-picker-texticon-padding-left: var(--spectrum-picker-m-texticon-padding-left); --spectrum-picker-texticon-border-size: var(--spectrum-picker-m-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-texticon-text-size: var(--spectrum-picker-m-texticon-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-picker-texticon-icon-gap: var(--spectrum-picker-m-texticon-icon-gap, var(--spectrum-global-dimension-size-100)); --spectrum-picker-texticon-placeholder-font-style: var(--spectrum-picker-m-texticon-placeholder-font-style, var(--spectrum-global-font-style-italic)); --spectrum-picker-texticon-placeholder-font-weight: var(--spectrum-picker-m-texticon-placeholder-font-weight, var(--spectrum-global-font-weight-regular)); --spectrum-picker-texticon-error-icon-margin-left: var(--spectrum-picker-m-texticon-error-icon-margin-left, var(--spectrum-global-dimension-size-150)); --spectrum-picker-texticon-ui-icon-gap: var(--spectrum-picker-m-texticon-ui-icon-gap, var(--spectrum-global-dimension-size-100)); --spectrum-picker-texticon-popover-max-width: var(--spectrum-picker-m-texticon-popover-max-width, var(--spectrum-global-dimension-size-2400)); --spectrum-picker-texticon-height: var(--spectrum-picker-m-texticon-height, var(--spectrum-global-dimension-size-400)); --spectrum-picker-texticon-min-width: var(--spectrum-picker-m-texticon-min-width, var(--spectrum-global-dimension-size-600)); --spectrum-picker-texticon-width: var(--spectrum-picker-m-texticon-width, var(--spectrum-global-dimension-size-2400)); --spectrum-picker-texticon-border-radius: var(--spectrum-picker-m-texticon-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-picker-textonly-border-size: var(--spectrum-picker-m-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-textonly-padding-left: var(--spectrum-picker-m-textonly-padding-left, var(--spectrum-global-dimension-size-150)); --spectrum-picker-textonly-padding-right: var(--spectrum-picker-m-textonly-padding-right, var(--spectrum-global-dimension-size-150)); --spectrum-picker-textonly-border-radius: var(--spectrum-picker-m-textonly-border-radius, var(--spectrum-alias-component-border-radius)); } .spectrum-Picker--sizeL { --spectrum-picker-texticon-border-size: var(--spectrum-picker-l-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-texticon-text-size: var(--spectrum-picker-l-texticon-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-picker-texticon-icon-gap: var(--spectrum-picker-l-texticon-icon-gap, var(--spectrum-global-dimension-size-115)); --spectrum-picker-texticon-placeholder-font-style: var(--spectrum-picker-l-texticon-placeholder-font-style, var(--spectrum-global-font-style-italic)); --spectrum-picker-texticon-placeholder-font-weight: var(--spectrum-picker-l-texticon-placeholder-font-weight, var(--spectrum-global-font-weight-regular)); --spectrum-picker-texticon-error-icon-margin-left: var(--spectrum-picker-l-texticon-error-icon-margin-left, var(--spectrum-global-dimension-size-185)); --spectrum-picker-texticon-ui-icon-gap: var(--spectrum-picker-l-texticon-ui-icon-gap, var(--spectrum-global-dimension-size-115)); --spectrum-picker-texticon-popover-max-width: var(--spectrum-picker-l-texticon-popover-max-width, var(--spectrum-global-dimension-size-3000)); --spectrum-picker-texticon-padding-left: var(--spectrum-picker-l-texticon-padding-left, var(--spectrum-global-dimension-size-160)); --spectrum-picker-texticon-height: var(--spectrum-picker-l-texticon-height, var(--spectrum-global-dimension-size-500)); --spectrum-picker-texticon-min-width: var(--spectrum-picker-l-texticon-min-width, var(--spectrum-global-dimension-size-750)); --spectrum-picker-texticon-width: var(--spectrum-picker-l-texticon-width, var(--spectrum-global-dimension-size-2500)); --spectrum-picker-texticon-border-radius: var(--spectrum-picker-l-texticon-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-picker-textonly-border-size: var(--spectrum-picker-l-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-textonly-padding-left: var(--spectrum-picker-l-textonly-padding-left, var(--spectrum-global-dimension-size-185)); --spectrum-picker-textonly-padding-right: var(--spectrum-picker-l-textonly-padding-right, var(--spectrum-global-dimension-size-185)); --spectrum-picker-textonly-border-radius: var(--spectrum-picker-l-textonly-border-radius, var(--spectrum-alias-component-border-radius)); } .spectrum-Picker--sizeXL { --spectrum-picker-texticon-border-size: var(--spectrum-picker-xl-texticon-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-texticon-text-size: var(--spectrum-picker-xl-texticon-text-size, var(--spectrum-global-dimension-font-size-300)); --spectrum-picker-texticon-icon-gap: var(--spectrum-picker-xl-texticon-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-picker-texticon-placeholder-font-style: var(--spectrum-picker-xl-texticon-placeholder-font-style, var(--spectrum-global-font-style-italic)); --spectrum-picker-texticon-placeholder-font-weight: var(--spectrum-picker-xl-texticon-placeholder-font-weight, var(--spectrum-global-font-weight-regular)); --spectrum-picker-texticon-error-icon-margin-left: var(--spectrum-picker-xl-texticon-error-icon-margin-left, var(--spectrum-global-dimension-size-225)); --spectrum-picker-texticon-ui-icon-gap: var(--spectrum-picker-xl-texticon-ui-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-picker-texticon-popover-max-width: var(--spectrum-picker-xl-texticon-popover-max-width, var(--spectrum-global-dimension-size-3600)); --spectrum-picker-texticon-padding-left: var(--spectrum-picker-xl-texticon-padding-left, var(--spectrum-global-dimension-size-185)); --spectrum-picker-texticon-height: var(--spectrum-picker-xl-texticon-height, var(--spectrum-global-dimension-size-600)); --spectrum-picker-texticon-min-width: var(--spectrum-picker-xl-texticon-min-width, var(--spectrum-global-dimension-size-900)); --spectrum-picker-texticon-width: var(--spectrum-picker-xl-texticon-width, var(--spectrum-global-dimension-size-3000)); --spectrum-picker-texticon-border-radius: var(--spectrum-picker-xl-texticon-border-radius, var(--spectrum-alias-component-border-radius)); --spectrum-picker-textonly-border-size: var(--spectrum-picker-xl-textonly-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-picker-textonly-padding-left: var(--spectrum-picker-xl-textonly-padding-left, var(--spectrum-global-dimension-size-225)); --spectrum-picker-textonly-padding-right: var(--spectrum-picker-xl-textonly-padding-right, var(--spectrum-global-dimension-size-225)); --spectrum-picker-textonly-border-radius: var(--spectrum-picker-xl-textonly-border-radius, var(--spectrum-alias-component-border-radius)); } .spectrum-Picker { --spectrum-picker-texticon-min-width: var(--spectrum-global-dimension-size-400); --spectrum-picker-texticon-disabled-border-size: 0; --spectrum-picker-texticon-popover-max-width: var(--spectrum-global-dimension-size-3000); --spectrum-picker-texticon-width: var(--spectrum-global-dimension-size-2400); --spectrum-picker-texticon-border-size-increase-focus: 1px; --spectrum-picker-padding-left-adjusted: calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size)); --spectrum-picker-textonly-padding-left-adjusted: calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size)); --spectrum-picker-textonly-padding-right-adjusted: calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size)); --spectrum-picker-focus-ring-border-radius-adjusted: calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap)); } .spectrum-Picker { --spectrum-picker-focus-ring-gap: var(--spectrum-alias-component-focusring-gap, var(--spectrum-global-dimension-static-size-0)); --spectrum-picker-focus-ring-size: var(--spectrum-alias-component-focusring-size, var(--spectrum-global-dimension-static-size-10)); --spectrum-picker-focus-ring-color: var(--spectrum-picker-m-textonly-focusring-border-color-key-focus, var(--spectrum-alias-focus-ring-color)); transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Picker:after { pointer-events: none; content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size)) * -1); border-radius: var(--spectrum-picker-focus-ring-border-radius-adjusted); transition: box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Picker.focus-ring { box-shadow: none; } .spectrum-Picker.focus-ring:after { box-shadow: 0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color); } .spectrum-Picker--quiet { --spectrum-picker-texticon-border-size: 0; --spectrum-picker-texticon-border-radius: 0; --spectrum-picker-textonly-padding-left: 0; --spectrum-picker-textonly-padding-right: 0; --spectrum-picker-quiet-background-color-key-focus: transparent; --spectrum-picker-quiet-border-color-key-focus: var(--spectrum-global-color-blue-400); } .spectrum-Picker--quiet { width: auto; min-width: 0; } .spectrum-Picker--quiet:disabled.focus-ring, .spectrum-Picker--quiet.is-disabled.focus-ring { box-shadow: none; } [dir="ltr"] .spectrum-Picker-label { text-align: left; } [dir="rtl"] .spectrum-Picker-label { text-align: right; } .spectrum-Picker-label { -ms-flex: 1 1 auto; flex: 1 1 auto; white-space: nowrap; overflow: hidden; height: calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size) * 2); line-height: calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size) * 2); font-size: var(--spectrum-picker-texticon-text-size); text-overflow: ellipsis; } .spectrum-Picker-label.is-placeholder { font-weight: var(--spectrum-picker-texticon-placeholder-font-weight); font-style: var(--spectrum-picker-texticon-placeholder-font-style); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Picker-menuIcon { display: inline-block; position: relative; vertical-align: top; transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-out; -ms-flex-negative: 0; flex-shrink: 0; } [dir="ltr"] .spectrum-Picker-validationIcon { margin-left: var(--spectrum-picker-texticon-error-icon-margin-left); } [dir="rtl"] .spectrum-Picker-validationIcon { margin-right: var(--spectrum-picker-texticon-error-icon-margin-left); } [dir="ltr"] .spectrum-Picker-label ~ .spectrum-Picker-menuIcon { margin-left: var(--spectrum-picker-texticon-ui-icon-gap); } [dir="rtl"] .spectrum-Picker-label ~ .spectrum-Picker-menuIcon { margin-right: var(--spectrum-picker-texticon-ui-icon-gap); } .spectrum-Picker-popover { max-width: var(--spectrum-picker-texticon-popover-max-width); } [dir="ltr"] .spectrum-Picker-popover--quiet { margin-left: calc(-1 * (var(--spectrum-picker-m-quiet-texticon-popover-offset-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin)))); } [dir="rtl"] .spectrum-Picker-popover--quiet { margin-right: calc(-1 * (var(--spectrum-picker-m-quiet-texticon-popover-offset-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-popover-border-size, var(--spectrum-alias-border-size-thin)))); } .spectrum-Picker { color: var(--spectrum-picker-m-texticon-text-color, var(--spectrum-alias-component-text-color-default)); background-color: var(--spectrum-picker-m-texticon-background-color, var(--spectrum-alias-component-background-color-default)); border-color: var(--spectrum-picker-m-texticon-border-color, var(--spectrum-alias-component-border-color-default)); } .spectrum-Picker:hover { color: var(--spectrum-picker-m-texticon-text-color-hover, var(--spectrum-alias-component-text-color-hover)); background-color: var(--spectrum-picker-m-texticon-background-color-hover, var(--spectrum-alias-component-background-color-hover)); border-color: var(--spectrum-picker-m-texticon-border-color-hover, var(--spectrum-alias-component-border-color-hover)); } .spectrum-Picker:hover .spectrum-Picker-menuIcon { color: var(--spectrum-picker-m-texticon-icon-color-hover, var(--spectrum-alias-component-icon-color-hover)); } .spectrum-Picker:active, .spectrum-Picker.is-open { background-color: var(--spectrum-picker-m-texticon-background-color-down, var(--spectrum-alias-component-background-color-down)); border-color: var(--spectrum-picker-m-texticon-border-color-down, var(--spectrum-alias-component-border-color-down)); } .spectrum-Picker:active.is-placeholder .spectrum-Picker-label, .spectrum-Picker.is-open.is-placeholder .spectrum-Picker-label { color: var(--spectrum-picker-m-texticon-placeholder-text-color-down, var(--spectrum-alias-placeholder-text-color-down)); } .spectrum-Picker.focus-ring, .spectrum-Picker.is-focused { background-color: var(--spectrum-picker-m-texticon-background-color-key-focus, var(--spectrum-alias-component-background-color-key-focus)); border-color: var(--spectrum-picker-m-texticon-border-color-key-focus, var(--spectrum-alias-component-border-color-key-focus)); box-shadow: 0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus); color: var(--spectrum-picker-m-texticon-text-color-key-focus, var(--spectrum-alias-component-text-color-key-focus)); } .spectrum-Picker.focus-ring.is-placeholder, .spectrum-Picker.is-focused.is-placeholder { color: var(--spectrum-picker-m-texticon-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover)); } .spectrum-Picker.is-invalid { border-color: var(--spectrum-picker-m-texticon-border-color-error, var(--spectrum-semantic-negative-color-default)); } .spectrum-Picker.is-invalid .spectrum-Picker-validationIcon { color: var(--spectrum-picker-m-texticon-validation-icon-color-error, var(--spectrum-semantic-negative-icon-color)); } .spectrum-Picker.is-invalid:hover { border-color: var(--spectrum-picker-m-texticon-border-color-error-hover, var(--spectrum-semantic-negative-color-hover)); } .spectrum-Picker.is-invalid:active, .spectrum-Picker.is-invalid.is-open { border-color: var(--spectrum-picker-m-texticon-border-color-error-down, var(--spectrum-semantic-negative-color-down)); } .spectrum-Picker.is-invalid.focus-ring, .spectrum-Picker.is-invalid.is-focused { border-color: var(--spectrum-picker-m-texticon-border-color-error-key-focus, var(--spectrum-alias-border-color-key-focus)); box-shadow: 0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-m-texticon-border-color-error-key-focus, var(--spectrum-alias-border-color-key-focus)); } .spectrum-Picker:disabled, .spectrum-Picker.is-disabled { background-color: var(--spectrum-picker-m-texticon-background-color-disabled, var(--spectrum-alias-component-background-color-disabled)); color: var(--spectrum-picker-m-texticon-text-color-disabled, var(--spectrum-alias-component-text-color-disabled)); } .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon, .spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon { color: var(--spectrum-picker-m-texticon-icon-color-disabled, var(--spectrum-alias-component-icon-color-disabled)); } .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder { color: var(--spectrum-picker-m-texticon-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Picker-menuIcon { color: var(--spectrum-picker-m-texticon-icon-color, var(--spectrum-alias-component-icon-color-default)); } .spectrum-Picker-label.is-placeholder { color: var(--spectrum-picker-m-texticon-placeholder-text-color, var(--spectrum-alias-placeholder-text-color)); } .spectrum-Picker-label.is-placeholder:hover { color: var(--spectrum-picker-m-texticon-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover)); } .spectrum-Picker-label.is-placeholder:active { color: var(--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus, var(--spectrum-alias-placeholder-text-color-down)); } .spectrum-Picker--quiet { color: var(--spectrum-picker-m-texticon-text-color, var(--spectrum-alias-component-text-color-default)); border-color: var(--spectrum-picker-m-quiet-texticon-border-color, var(--spectrum-alias-component-border-color-quiet-default)); background-color: var(--spectrum-picker-m-quiet-texticon-background-color, var(--spectrum-alias-component-background-color-quiet-default)); } .spectrum-Picker--quiet:hover { background-color: var(--spectrum-picker-m-quiet-texticon-background-color-hover, var(--spectrum-alias-component-background-color-quiet-hover)); color: var(--spectrum-picker-m-texticon-text-color-hover, var(--spectrum-alias-component-text-color-hover)); } .spectrum-Picker--quiet.focus-ring, .spectrum-Picker--quiet.is-focused { background-color: var(--spectrum-picker-quiet-background-color-key-focus); box-shadow: 0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus); } .spectrum-Picker--quiet.focus-ring.is-placeholder, .spectrum-Picker--quiet.is-focused.is-placeholder { color: var(--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover)); } .spectrum-Picker--quiet.focus-ring .spectrum-Picker-menuIcon, .spectrum-Picker--quiet.is-focused .spectrum-Picker-menuIcon { color: var(--spectrum-picker-m-texticon-icon-color-key-focus, var(--spectrum-alias-component-icon-color-key-focus)) } .spectrum-Picker--quiet.focus-ring::after, .spectrum-Picker--quiet.is-focused::after { box-shadow: none; } .spectrum-Picker--quiet:active, .spectrum-Picker--quiet.is-open { background-color: var(--spectrum-picker-m-quiet-texticon-background-color-down, var(--spectrum-alias-background-color-transparent)); border-color: var(--spectrum-picker-m-quiet-texticon-border-color-down, var(--spectrum-alias-component-border-color-quiet-down)); } .spectrum-Picker--quiet:active.focus-ring, .spectrum-Picker--quiet:active.is-focused, .spectrum-Picker--quiet.is-open.focus-ring, .spectrum-Picker--quiet.is-open.is-focused { background-color: var(--spectrum-picker-quiet-background-color-key-focus); box-shadow: 0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus); } .spectrum-Picker--quiet.is-invalid.focus-ring, .spectrum-Picker--quiet.is-invalid.is-focused { box-shadow: 0 2px 0 0 var(--spectrum-picker-m-texticon-border-color-error-key-focus, var(--spectrum-alias-border-color-key-focus)); } .spectrum-Picker--quiet:disabled, .spectrum-Picker--quiet.is-disabled { background-color: var(--spectrum-picker-m-quiet-texticon-background-color-disabled, var(--spectrum-alias-component-background-color-quiet-disabled)); color: var(--spectrum-picker-m-texticon-text-color-disabled, var(--spectrum-alias-component-text-color-disabled)); } @media (forced-colors: active) { .spectrum-Picker { --spectrum-picker-focus-ring-color: Highlight; --spectrum-picker-m-quiet-texticon-border-color-down: ButtonText; --spectrum-picker-m-quiet-texticon-border-color: ButtonText; --spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus: GrayText; --spectrum-picker-m-texticon-border-color-error-key-focus: Highlight; --spectrum-picker-m-texticon-placeholder-text-color-disabled: GrayText; --spectrum-picker-m-texticon-placeholder-text-color-down: GrayText; --spectrum-picker-m-texticon-placeholder-text-color-hover: GrayText; --spectrum-picker-m-texticon-placeholder-text-color-key-focus: GrayText; --spectrum-picker-m-texticon-placeholder-text-color-mouse-focus: GrayText; --spectrum-picker-m-texticon-placeholder-text-color: GrayText; --spectrum-picker-m-texticon-text-color-disabled: GrayText; --spectrum-picker-m-texticon-text-color-key-focus: ButtonText; --spectrum-picker-m-texticon-text-color: ButtonText; --spectrum-picker-m-textonly-focusring-border-color-key-focus: Highlight; --spectrum-picker-quiet-border-color-key-focus: Highlight; } .spectrum-Picker.focus-ring { outline: 2px solid Highlight; } .spectrum-Picker:disabled, .spectrum-Picker .is-disabled { border-color: GrayText; border-width: var(--spectrum-picker-texticon-border-size); } .spectrum-Picker--quiet.focus-ring, .spectrum-Picker--quiet.is-focused { forced-color-adjust: none; outline: 0; box-shadow: 0 1px 0 0 var(--spectrum-picker-focus-ring-color); } } .spectrum-FieldLabel--sizeS { --spectrum-fieldlabel-text-font-weight: var(--spectrum-fieldlabel-s-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-fieldlabel-text-line-height: var(--spectrum-fieldlabel-s-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-fieldlabel-text-size: var(--spectrum-fieldlabel-s-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-fieldlabel-asterisk-gap: var(--spectrum-fieldlabel-s-asterisk-gap, var(--spectrum-global-dimension-size-25)); --spectrum-fieldlabel-asterisk-margin-y: var(--spectrum-fieldlabel-s-asterisk-margin-y, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-top: var(--spectrum-fieldlabel-s-padding-top, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-bottom: var(--spectrum-fieldlabel-s-padding-bottom, var(--spectrum-global-dimension-size-65)); } .spectrum-FieldLabel--sizeM { --spectrum-fieldlabel-text-font-weight: var(--spectrum-fieldlabel-m-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-fieldlabel-text-line-height: var(--spectrum-fieldlabel-m-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-fieldlabel-text-size: var(--spectrum-fieldlabel-m-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-fieldlabel-asterisk-gap: var(--spectrum-fieldlabel-m-asterisk-gap, var(--spectrum-global-dimension-size-25)); --spectrum-fieldlabel-asterisk-margin-y: var(--spectrum-fieldlabel-m-asterisk-margin-y, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-top: var(--spectrum-fieldlabel-m-padding-top, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-bottom: var(--spectrum-fieldlabel-m-padding-bottom, var(--spectrum-global-dimension-size-65)); } .spectrum-FieldLabel--sizeL { --spectrum-fieldlabel-text-font-weight: var(--spectrum-fieldlabel-l-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-fieldlabel-text-line-height: var(--spectrum-fieldlabel-l-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-fieldlabel-text-size: var(--spectrum-fieldlabel-l-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-fieldlabel-asterisk-gap: var(--spectrum-fieldlabel-l-asterisk-gap, var(--spectrum-global-dimension-size-25)); --spectrum-fieldlabel-asterisk-margin-y: var(--spectrum-fieldlabel-l-asterisk-margin-y, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-top: var(--spectrum-fieldlabel-l-padding-top, var(--spectrum-global-dimension-size-75)); --spectrum-fieldlabel-padding-bottom: var(--spectrum-fieldlabel-l-padding-bottom, var(--spectrum-global-dimension-size-115)); } .spectrum-FieldLabel--sizeXL { --spectrum-fieldlabel-text-font-weight: var(--spectrum-fieldlabel-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-fieldlabel-text-line-height: var(--spectrum-fieldlabel-xl-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-fieldlabel-text-size: var(--spectrum-fieldlabel-xl-text-size, var(--spectrum-global-dimension-font-size-200)); --spectrum-fieldlabel-asterisk-gap: var(--spectrum-fieldlabel-xl-asterisk-gap, var(--spectrum-global-dimension-size-25)); --spectrum-fieldlabel-asterisk-margin-y: var(--spectrum-fieldlabel-xl-asterisk-margin-y, var(--spectrum-global-dimension-size-50)); --spectrum-fieldlabel-padding-top: var(--spectrum-fieldlabel-xl-padding-top, var(--spectrum-global-dimension-size-115)); --spectrum-fieldlabel-padding-bottom: var(--spectrum-fieldlabel-xl-padding-bottom, var(--spectrum-global-dimension-size-130)); } .spectrum-FieldLabel, .spectrum-Form-itemLabel { display: block; box-sizing: border-box; padding-top: var(--spectrum-fieldlabel-padding-top); padding-bottom: var(--spectrum-fieldlabel-padding-bottom); padding-left: 0; padding-right: 0; font-size: var(--spectrum-fieldlabel-text-size); font-weight: var(--spectrum-fieldlabel-text-font-weight); line-height: var(--spectrum-fieldlabel-text-line-height); vertical-align: top; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; font-smoothing: subpixel-antialiased; } [dir="ltr"] .spectrum-FieldLabel-requiredIcon { margin-left: var(--spectrum-fieldlabel-asterisk-gap); margin-right: 0; } [dir="rtl"] .spectrum-FieldLabel-requiredIcon { margin-right: var(--spectrum-fieldlabel-asterisk-gap); margin-left: 0; } .spectrum-FieldLabel-requiredIcon { margin-top: var(--spectrum-fieldlabel-asterisk-margin-y); margin-bottom: 0; } [dir="ltr"] .spectrum-FieldLabel--left { padding-left: 0; padding-right: var(--spectrum-fieldlabel-side-m-padding-right, var(--spectrum-global-dimension-size-150)); } [dir="rtl"] .spectrum-FieldLabel--left { padding-right: 0; padding-left: var(--spectrum-fieldlabel-side-m-padding-right, var(--spectrum-global-dimension-size-150)); } .spectrum-FieldLabel--left { display: inline-block; padding-top: var(--spectrum-fieldlabel-side-m-padding-top, var(--spectrum-global-dimension-size-100)); padding-bottom: 0; } [dir="ltr"] .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon { margin-left: var(--spectrum-fieldlabel-asterisk-gap); margin-right: 0; } [dir="rtl"] .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon { margin-right: var(--spectrum-fieldlabel-asterisk-gap); margin-left: 0; } .spectrum-FieldLabel--left .spectrum-FieldLabel-requiredIcon { margin-top: var(--spectrum-fieldlabel-side-m-asterisk-margin-y, var(--spectrum-global-dimension-size-50)); margin-bottom: 0; } [dir="ltr"] .spectrum-FieldLabel--right { text-align: right; } [dir="rtl"] .spectrum-FieldLabel--right { text-align: left; } [dir="ltr"] .spectrum-FieldLabel--right { padding-left: 0; padding-right: var(--spectrum-fieldlabel-side-m-padding-right, var(--spectrum-global-dimension-size-150)); } [dir="rtl"] .spectrum-FieldLabel--right { padding-right: 0; padding-left: var(--spectrum-fieldlabel-side-m-padding-right, var(--spectrum-global-dimension-size-150)); } .spectrum-FieldLabel--right { display: inline-block; padding-top: var(--spectrum-fieldlabel-side-m-padding-top, var(--spectrum-global-dimension-size-100)); padding-bottom: 0; } .spectrum-Form { --spectrum-tableform-border-spacing: 0 var(--spectrum-global-dimension-size-300); --spectrum-tableform-margin: calc(var(--spectrum-global-dimension-size-250) * -1) 0; --spectrum-tableform-labelsabove-item-gap: var(--spectrum-global-dimension-size-100); display: table; border-collapse: separate; border-spacing: var(--spectrum-tableform-border-spacing); margin: var(--spectrum-tableform-margin); } .spectrum-Form-item { display: table-row; } .spectrum-Form-itemLabel { display: table-cell; } .spectrum-Form-itemField { display: table-cell; } .spectrum-Form--labelsAbove { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; margin: 0; } .spectrum-Form--labelsAbove .spectrum-Form-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .spectrum-Form--labelsAbove .spectrum-Form-item + .spectrum-Form-item { margin-top: var(--spectrum-tableform-labelsabove-item-gap); } .spectrum-FieldLabel, .spectrum-Form-itemLabel { color: var(--spectrum-fieldlabel-m-text-color, var(--spectrum-alias-label-text-color)); } .spectrum-FieldLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled { color: var(--spectrum-fieldlabel-m-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon { color: var(--spectrum-fieldlabel-m-asterisk-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-FieldLabel-requiredIcon { color: var(--spectrum-fieldlabel-m-asterisk-color, var(--spectrum-global-color-gray-600)); } .spectrum-Checkbox { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: start; align-items: flex-start; position: relative; min-height: var(--spectrum-checkbox-height); max-width: 100%; vertical-align: top; } .spectrum-Checkbox-input { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; overflow: visible; box-sizing: border-box; padding: 0; position: absolute; width: 100%; height: 100%; opacity: .0001; z-index: 1; cursor: pointer; } .spectrum-Checkbox-input:disabled { cursor: default; } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-width: calc(var(--spectrum-checkbox-box-size) / 2); } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark { transform: scale(1); opacity: 1; } .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:after { margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1); } .spectrum-Checkbox--sizeS { --spectrum-checkbox-text-font-style: var(--spectrum-checkbox-s-text-font-style, var(--spectrum-global-font-style-regular)); --spectrum-checkbox-text-font-weight: var(--spectrum-checkbox-s-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-checkbox-text-line-height: var(--spectrum-checkbox-s-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-checkbox-box-border-radius: var(--spectrum-checkbox-s-box-border-radius, var(--spectrum-alias-border-radius-small)); --spectrum-checkbox-box-border-size: var(--spectrum-checkbox-s-box-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-checkbox-text-size: var(--spectrum-checkbox-s-text-size, var(--spectrum-alias-item-text-size-s)); --spectrum-checkbox-text-padding-top: var(--spectrum-checkbox-s-text-padding-top, var(--spectrum-alias-item-text-padding-top-s)); --spectrum-checkbox-height: var(--spectrum-checkbox-s-height, var(--spectrum-alias-item-height-s)); --spectrum-checkbox-checkmark-size: var(--spectrum-checkbox-s-checkmark-size, var(--spectrum-alias-ui-icon-checkmark-size-75)); --spectrum-checkbox-box-size: var(--spectrum-checkbox-s-box-size, var(--spectrum-alias-item-control-2-size-s)); --spectrum-checkbox-text-gap: var(--spectrum-checkbox-s-text-gap, var(--spectrum-alias-item-control-gap-s)); } .spectrum-Checkbox--sizeM { --spectrum-checkbox-text-font-style: var(--spectrum-checkbox-m-text-font-style, var(--spectrum-global-font-style-regular)); --spectrum-checkbox-text-font-weight: var(--spectrum-checkbox-m-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-checkbox-text-line-height: var(--spectrum-checkbox-m-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-checkbox-box-border-radius: var(--spectrum-checkbox-m-box-border-radius, var(--spectrum-alias-border-radius-small)); --spectrum-checkbox-box-border-size: var(--spectrum-checkbox-m-box-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-checkbox-text-size: var(--spectrum-checkbox-m-text-size, var(--spectrum-alias-item-text-size-m)); --spectrum-checkbox-text-padding-top: var(--spectrum-checkbox-m-text-padding-top, var(--spectrum-alias-item-text-padding-top-m)); --spectrum-checkbox-height: var(--spectrum-checkbox-m-height, var(--spectrum-alias-item-height-m)); --spectrum-checkbox-checkmark-size: var(--spectrum-checkbox-m-checkmark-size, var(--spectrum-alias-ui-icon-checkmark-size-100)); --spectrum-checkbox-box-size: var(--spectrum-checkbox-m-box-size, var(--spectrum-alias-item-control-2-size-m)); --spectrum-checkbox-text-gap: var(--spectrum-checkbox-m-text-gap, var(--spectrum-alias-item-control-gap-m)); } .spectrum-Checkbox--sizeL { --spectrum-checkbox-text-font-style: var(--spectrum-checkbox-l-text-font-style, var(--spectrum-global-font-style-regular)); --spectrum-checkbox-text-font-weight: var(--spectrum-checkbox-l-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-checkbox-text-line-height: var(--spectrum-checkbox-l-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-checkbox-box-border-radius: var(--spectrum-checkbox-l-box-border-radius, var(--spectrum-alias-border-radius-small)); --spectrum-checkbox-box-border-size: var(--spectrum-checkbox-l-box-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-checkbox-text-size: var(--spectrum-checkbox-l-text-size, var(--spectrum-alias-item-text-size-l)); --spectrum-checkbox-text-padding-top: var(--spectrum-checkbox-l-text-padding-top, var(--spectrum-alias-item-text-padding-top-l)); --spectrum-checkbox-height: var(--spectrum-checkbox-l-height, var(--spectrum-alias-item-height-l)); --spectrum-checkbox-checkmark-size: var(--spectrum-checkbox-l-checkmark-size, var(--spectrum-alias-ui-icon-checkmark-size-200)); --spectrum-checkbox-box-size: var(--spectrum-checkbox-l-box-size, var(--spectrum-alias-item-control-2-size-l)); --spectrum-checkbox-text-gap: var(--spectrum-checkbox-l-text-gap, var(--spectrum-alias-item-control-gap-l)); } .spectrum-Checkbox--sizeXL { --spectrum-checkbox-text-font-style: var(--spectrum-checkbox-xl-text-font-style, var(--spectrum-global-font-style-regular)); --spectrum-checkbox-text-font-weight: var(--spectrum-checkbox-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-checkbox-text-line-height: var(--spectrum-checkbox-xl-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-checkbox-box-border-radius: var(--spectrum-checkbox-xl-box-border-radius, var(--spectrum-alias-border-radius-small)); --spectrum-checkbox-box-border-size: var(--spectrum-checkbox-xl-box-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-checkbox-text-size: var(--spectrum-checkbox-xl-text-size, var(--spectrum-alias-item-text-size-xl)); --spectrum-checkbox-text-padding-top: var(--spectrum-checkbox-xl-text-padding-top, var(--spectrum-alias-item-text-padding-top-xl)); --spectrum-checkbox-height: var(--spectrum-checkbox-xl-height, var(--spectrum-alias-item-height-xl)); --spectrum-checkbox-checkmark-size: var(--spectrum-checkbox-xl-checkmark-size, var(--spectrum-alias-ui-icon-checkmark-size-300)); --spectrum-checkbox-box-size: var(--spectrum-checkbox-xl-box-size, var(--spectrum-alias-item-control-2-size-xl)); --spectrum-checkbox-text-gap: var(--spectrum-checkbox-xl-text-gap, var(--spectrum-alias-item-control-gap-xl)); } .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-width: calc(var(--spectrum-checkbox-box-size) / 2); } .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark { display: none; } .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark { display: block; transform: scale(1); opacity: 1; } [dir="ltr"] .spectrum-Checkbox-label { text-align: left; } [dir="rtl"] .spectrum-Checkbox-label { text-align: right; } [dir="ltr"] .spectrum-Checkbox-label { margin-left: var(--spectrum-checkbox-text-gap); } [dir="rtl"] .spectrum-Checkbox-label { margin-right: var(--spectrum-checkbox-text-gap); } .spectrum-Checkbox-label { margin-top: var(--spectrum-checkbox-text-padding-top); font-size: var(--spectrum-checkbox-text-size); font-weight: var(--spectrum-checkbox-text-font-weight); font-style: var(--spectrum-checkbox-text-font-style); line-height: var(--spectrum-checkbox-text-line-height); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Checkbox-box { position: relative; box-sizing: border-box; width: var(--spectrum-checkbox-box-size); height: var(--spectrum-checkbox-box-size); margin: calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size)) / 2) 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } .spectrum-Checkbox-box:before { display: block; z-index: 0; content: ''; box-sizing: border-box; position: absolute; width: var(--spectrum-checkbox-box-size); height: var(--spectrum-checkbox-box-size); border-radius: var(--spectrum-checkbox-box-border-radius); border-width: var(--spectrum-checkbox-box-border-size); border-style: solid; transition: border var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Checkbox-box:after { border-radius: calc(var(--spectrum-checkbox-box-border-radius) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25))); content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)); transition: box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out, margin var(--spectrum-global-animation-duration-100, 130ms) ease-out; transform: translate(0, 0); } [dir="ltr"] .spectrum-Checkbox-checkmark,[dir="ltr"] .spectrum-Checkbox-partialCheckmark { left: 50%; } [dir="rtl"] .spectrum-Checkbox-checkmark,[dir="rtl"] .spectrum-Checkbox-partialCheckmark { right: 50%; } .spectrum-Checkbox-checkmark, .spectrum-Checkbox-partialCheckmark { position: absolute; top: 50%; opacity: 0; transform: scale(0); transition: opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } [dir="ltr"] .spectrum-Checkbox-checkmark { margin-left: calc(var(--spectrum-checkbox-checkmark-size) / -2); } [dir="rtl"] .spectrum-Checkbox-checkmark { margin-right: calc(var(--spectrum-checkbox-checkmark-size) / -2); } .spectrum-Checkbox-checkmark { margin-top: calc(var(--spectrum-checkbox-checkmark-size) / -2); } [dir="ltr"] .spectrum-Checkbox-partialCheckmark { margin-left: calc(var(--spectrum-checkbox-checkmark-size) / -2); } [dir="rtl"] .spectrum-Checkbox-partialCheckmark { margin-right: calc(var(--spectrum-checkbox-checkmark-size) / -2); } .spectrum-Checkbox-partialCheckmark { margin-top: calc(var(--spectrum-checkbox-checkmark-size) / -2); } .spectrum-Checkbox-partialCheckmark { display: none; } .spectrum-Checkbox { color: var(--spectrum-checkbox-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Checkbox-checkmark, .spectrum-Checkbox-partialCheckmark { color: var(--spectrum-checkbox-m-checkmark-color, var(--spectrum-global-color-gray-75)); } .spectrum-Checkbox-box:before { forced-color-adjust: none; border-color: var(--spectrum-checkbox-m-box-border-color, var(--spectrum-global-color-gray-600)); background-color: var(--spectrum-checkbox-m-box-background-color, var(--spectrum-global-color-gray-75)); } .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-selected, var(--spectrum-global-color-gray-700)); } .spectrum-Checkbox:hover.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-selected-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Checkbox:active.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-selected-down, var(--spectrum-global-color-gray-900)); } .spectrum-Checkbox { border-color: var(--spectrum-checkbox-m-box-border-color, var(--spectrum-global-color-gray-600)); } .spectrum-Checkbox:hover .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-hover, var(--spectrum-global-color-gray-700)); } .spectrum-Checkbox:hover .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-hover, var(--spectrum-alias-text-color-hover)); } .spectrum-Checkbox:active .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-down, var(--spectrum-global-color-gray-800)); } .spectrum-Checkbox:active .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-down, var(--spectrum-alias-text-color-down)); } .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-disabled, var(--spectrum-global-color-gray-400)); background-color: var(--spectrum-checkbox-m-box-background-color-disabled, var(--spectrum-global-color-gray-75)); } .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label { forced-color-adjust: none; color: var(--spectrum-checkbox-m-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-key-focus, var(--spectrum-global-color-gray-700)); } .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:after { forced-color-adjust:none; box-shadow: 0 0 0 var(--spectrum-checkbox-m-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-m-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color)); } .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:before, .spectrum-Checkbox-input:checked.focus-ring + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-selected-key-focus, var(--spectrum-global-color-gray-800)); } .spectrum-Checkbox-input.focus-ring ~ .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-key-focus, var(--spectrum-alias-text-color-hover)); } .spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-emphasized-box-border-color-selected, var(--spectrum-global-color-blue-500)); } .spectrum-Checkbox--emphasized:hover.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-emphasized-box-border-color-selected-hover, var(--spectrum-global-color-blue-600)); } .spectrum-Checkbox--emphasized:active.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-emphasized-box-border-color-selected-down, var(--spectrum-global-color-blue-700)); } .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error, var(--spectrum-global-color-red-500)); } .spectrum-Checkbox.is-invalid .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-error, var(--spectrum-global-color-red-600)); } .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error-hover, var(--spectrum-global-color-red-600)); } .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input.focus-ring ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input.focus-ring ~ .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-error-hover, var(--spectrum-global-color-red-700)); } .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error-hover, var(--spectrum-global-color-red-600)); } .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-error-hover, var(--spectrum-global-color-red-700)); } .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error-down, var(--spectrum-global-color-red-700)); } .spectrum-Checkbox.is-invalid:active .spectrum-Checkbox-label { color: var(--spectrum-checkbox-m-text-color-error-down, var(--spectrum-global-color-red-700)); } @media (forced-colors: active) { .spectrum-Checkbox { --spectrum-checkbox-m-box-background-color-disabled: ButtonFace; --spectrum-checkbox-m-box-background-color: ButtonFace; --spectrum-checkbox-m-box-border-color-disabled: GrayText; --spectrum-checkbox-m-box-border-color-down: Highlight; --spectrum-checkbox-m-box-border-color-error-down: Highlight; --spectrum-checkbox-m-box-border-color-error-hover: Highlight; --spectrum-checkbox-m-box-border-color-error: Highlight; --spectrum-checkbox-m-box-border-color-hover: Highlight; --spectrum-checkbox-m-box-border-color-key-focus: Highlight; --spectrum-checkbox-m-box-border-color-selected-down: Highlight; --spectrum-checkbox-m-box-border-color-selected-hover: Highlight; --spectrum-checkbox-m-box-border-color-selected-key-focus: Highlight; --spectrum-checkbox-m-box-border-color-selected: Highlight; --spectrum-checkbox-m-box-border-color: ButtonText; --spectrum-checkbox-m-checkmark-color: HighlightText; --spectrum-checkbox-m-emphasized-box-border-color-selected-down: Highlight; --spectrum-checkbox-m-emphasized-box-border-color-selected-hover: Highlight; --spectrum-checkbox-m-emphasized-box-border-color-selected: Highlight; --spectrum-checkbox-m-focus-ring-color-key-focus: FieldText; --spectrum-checkbox-m-text-color-disabled: GrayText; --spectrum-checkbox-m-text-color-down: FieldText; --spectrum-checkbox-m-text-color-error-down: FieldText; --spectrum-checkbox-m-text-color-error-hover: FieldText; --spectrum-checkbox-m-text-color-error: FieldText; --spectrum-checkbox-m-text-color-hover: FieldText; --spectrum-checkbox-m-text-color-key-focus: FieldText; --spectrum-checkbox-m-text-color: FieldText; } .spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color, var(--spectrum-global-color-gray-600)); } .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error, var(--spectrum-global-color-red-500)); } .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before { border-color: var(--spectrum-checkbox-m-box-border-color-error, var(--spectrum-global-color-red-500)); } } .spectrum-Switch { --spectrum-switch-handle-size: var(--spectrum-switch-m-handle-size, var(--spectrum-global-dimension-size-175)); --spectrum-switch-handle-border-size: var(--spectrum-switch-m-handle-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-switch-handle-border-radius: var(--spectrum-switch-m-handle-border-radius, var(--spectrum-global-dimension-size-85)); --spectrum-switch-text-gap: var(--spectrum-switch-m-text-gap, var(--spectrum-global-dimension-size-125)); --spectrum-switch-text-size: var(--spectrum-switch-m-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-switch-track-height: var(--spectrum-switch-m-track-height, var(--spectrum-alias-control-three-height-m)); --spectrum-switch-track-width: var(--spectrum-switch-m-track-width, var(--spectrum-alias-control-three-width-m)); --spectrum-switch-cursor-hit-x: var(--spectrum-switch-m-cursor-hit-x, var(--spectrum-global-dimension-size-100)); --spectrum-switch-height: var(--spectrum-switch-m-height, var(--spectrum-global-dimension-size-400)); --spectrum-switch-label-margin-top: var(--spectrum-global-dimension-size-65); --spectrum-switch-label-line-height: 1.49; } [dir="ltr"] .spectrum-Switch { margin-right: calc(var(--spectrum-switch-cursor-hit-x) * 2); } [dir="rtl"] .spectrum-Switch { margin-left: calc(var(--spectrum-switch-cursor-hit-x) * 2); } .spectrum-Switch { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: start; align-items: flex-start; position: relative; min-height: var(--spectrum-switch-height); max-width: 100%; vertical-align: top; } [dir="ltr"] .spectrum-Switch-input { left: 0; } [dir="rtl"] .spectrum-Switch-input { right: 0; } .spectrum-Switch-input { margin: 0; box-sizing: border-box; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; opacity: 0.0001; z-index: 1; cursor: pointer; } [dir="ltr"] .spectrum-Switch-input:checked + .spectrum-Switch-switch::before { transform: translateX( calc(var(--spectrum-switch-track-width) - 100%) ); } [dir="rtl"] .spectrum-Switch-input:checked + .spectrum-Switch-switch::before { transform: translateX( calc(-1 * (var(--spectrum-switch-track-width) - 100%)) ); } .spectrum-Switch-input:disabled, .spectrum-Switch-input[disabled] { cursor: default; } .spectrum-Switch-input.focus-ring + .spectrum-Switch-switch:after { margin: calc(var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * -1); } .spectrum-Switch-label { margin-left: var(--spectrum-switch-text-gap); margin-right: var(--spectrum-switch-text-gap); margin-top: var(--spectrum-switch-label-margin-top); margin-bottom: 0; font-size: var(--spectrum-switch-text-size); line-height: var(--spectrum-switch-label-line-height); transition: color var(--spectrum-global-animation-duration-200, 160ms) ease-in-out; } [dir="ltr"] .spectrum-Switch-switch { left: 0; } [dir="rtl"] .spectrum-Switch-switch { right: 0; } [dir="ltr"] .spectrum-Switch-switch { right: 0; } [dir="rtl"] .spectrum-Switch-switch { left: 0; } .spectrum-Switch-switch { display: inline-block; box-sizing: border-box; position: relative; width: var(--spectrum-switch-track-width); margin-top: calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height)) / 2); margin-bottom: calc((var(--spectrum-switch-height) - var(--spectrum-switch-track-height)) / 2); margin-left: 0; margin-right: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; vertical-align: middle; transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, border var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; height: var(--spectrum-switch-track-height); border-radius: calc(var(--spectrum-switch-track-height) / 2); } .spectrum-Switch-switch:before { display: block; position: absolute; content: ""; box-sizing: border-box; } [dir="ltr"] .spectrum-Switch-switch:before { left: 0; } [dir="rtl"] .spectrum-Switch-switch:before { right: 0; } .spectrum-Switch-switch:before { transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, border var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; width: var(--spectrum-switch-handle-size); height: var(--spectrum-switch-handle-size); top: 0; border-width: var(--spectrum-switch-handle-border-size); border-radius: var(--spectrum-switch-handle-border-radius); border-style: solid; } [dir="ltr"] .spectrum-Switch-switch:after { left: 0; } [dir="rtl"] .spectrum-Switch-switch:after { right: 0; } [dir="ltr"] .spectrum-Switch-switch:after { right: 0; } [dir="rtl"] .spectrum-Switch-switch:after { left: 0; } .spectrum-Switch-switch:after { border-radius: calc(var(--spectrum-switch-track-height) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25))); content: ""; display: block; position: absolute; bottom: 0; top: 0; margin: 0; transition: opacity var(--spectrum-global-animation-duration-100, 130ms) ease-out, margin var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color, var(--spectrum-global-color-gray-300)); } .spectrum-Switch-switch:before { background-color: var(--spectrum-switch-m-handle-background-color, var(--spectrum-global-color-gray-75)); border-color: var(--spectrum-switch-m-handle-border-color, var(--spectrum-global-color-gray-600)); } .spectrum-Switch-input ~ .spectrum-Switch-label { color: var(--spectrum-switch-m-text-color, var(--spectrum-global-color-gray-800)); } .spectrum-Switch-input:checked + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-selected, var(--spectrum-global-color-gray-700)); } .spectrum-Switch-input:checked + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-selected, var(--spectrum-global-color-gray-700)); } .spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-hover, var(--spectrum-global-color-gray-700)); box-shadow: none; } .spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label { color: var(--spectrum-switch-m-text-color-hover, var(--spectrum-global-color-gray-900)); } .spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-selected-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-selected-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-down, var(--spectrum-global-color-gray-800)); } .spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label { color: var(--spectrum-switch-m-text-color-down, var(--spectrum-global-color-gray-900)); } .spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-selected-down, var(--spectrum-global-color-gray-900)); } .spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-selected-down, var(--spectrum-global-color-gray-900)); } .spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-disabled, var(--spectrum-global-color-gray-300)); } .spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label { color: var(--spectrum-switch-m-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-selected-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-selected-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Switch .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label { color: var(--spectrum-switch-m-text-color-selected-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Switch--emphasized .spectrum-Switch-input:checked + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-emphasized-track-color-selected, var(--spectrum-semantic-cta-background-color-default)); } .spectrum-Switch--emphasized .spectrum-Switch-input:checked + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-emphasized-handle-border-color-selected, var(--spectrum-semantic-cta-background-color-default)); } .spectrum-Switch--emphasized:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-emphasized-track-color-selected-hover, var(--spectrum-semantic-cta-background-color-hover)); } .spectrum-Switch--emphasized:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-emphasized-handle-border-color-selected-hover, var(--spectrum-semantic-cta-background-color-hover)); } .spectrum-Switch.spectrum-Switch--emphasized:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-emphasized-track-color-selected-down, var(--spectrum-semantic-cta-background-color-down)); } .spectrum-Switch.spectrum-Switch--emphasized:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-emphasized-handle-border-color-selected-down, var(--spectrum-semantic-cta-background-color-down)); } .spectrum-Switch .spectrum-Switch-input.focus-ring + .spectrum-Switch-switch:after, .spectrum-Switch:hover .spectrum-Switch-input.focus-ring + .spectrum-Switch-switch:after { box-shadow: 0 0 0 var(--spectrum-switch-m-focus-ring-size, var(--spectrum-alias-focus-ring-size)) var(--spectrum-switch-m-focus-ring-color-key-focus, var(--spectrum-alias-focus-ring-color)); } .spectrum-Switch .spectrum-Switch-input.focus-ring + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input.focus-ring + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-key-focus, var(--spectrum-global-color-gray-700)); } .spectrum-Switch .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-track-color-selected-key-focus, var(--spectrum-global-color-gray-800)); } .spectrum-Switch .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-handle-border-color-selected-key-focus, var(--spectrum-global-color-gray-800)); } .spectrum-Switch--emphasized .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch, .spectrum-Switch--emphasized:hover .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch { background-color: var(--spectrum-switch-m-emphasized-track-color-selected-key-focus, var(--spectrum-semantic-cta-background-color-key-focus)); } .spectrum-Switch--emphasized .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch:before, .spectrum-Switch--emphasized:hover .spectrum-Switch-input.focus-ring:checked + .spectrum-Switch-switch:before { border-color: var(--spectrum-switch-m-emphasized-handle-border-color-selected-key-focus, var(--spectrum-semantic-cta-background-color-key-focus)); } .spectrum-ButtonGroup { --spectrum-buttongroup-button-gap-reset: 0; } .spectrum-ButtonGroup { display: -ms-flexbox; display: flex; } .spectrum-ButtonGroup .spectrum-ButtonGroup-item { -ms-flex-negative: 0; flex-shrink: 0; } [dir="ltr"] .spectrum-ButtonGroup .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item { margin-left: var(--spectrum-buttongroup-button-gap-x, var(--spectrum-global-dimension-static-size-200)); } [dir="rtl"] .spectrum-ButtonGroup .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item { margin-right: var(--spectrum-buttongroup-button-gap-x, var(--spectrum-global-dimension-static-size-200)); } .spectrum-ButtonGroup--vertical { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; } [dir="ltr"] .spectrum-ButtonGroup--vertical .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item { margin-left: var(--spectrum-buttongroup-button-gap-reset); } [dir="rtl"] .spectrum-ButtonGroup--vertical .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item { margin-right: var(--spectrum-buttongroup-button-gap-reset); } .spectrum-ButtonGroup--vertical .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item { margin-top: var(--spectrum-buttongroup-button-gap-y, var(--spectrum-global-dimension-static-size-200)); } .spectrum-Tooltip { --spectrum-overlay-animation-distance: var(--spectrum-picker-m-popover-offset-y, var(--spectrum-global-dimension-size-75)); visibility: hidden; opacity: 0; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms); pointer-events: none; } .spectrum-Tooltip.is-open { visibility: visible; opacity: 1; transition-delay: 0ms; pointer-events: auto; } .spectrum-Tooltip--bottom.is-open { transform: translateY(var(--spectrum-overlay-animation-distance)); } .spectrum-Tooltip--top.is-open { transform: translateY(calc(-1 * var(--spectrum-overlay-animation-distance))); } .spectrum-Tooltip--right.is-open { transform: translateX(var(--spectrum-overlay-animation-distance)); } .spectrum-Tooltip--left.is-open { transform: translateX(calc(-1 * var(--spectrum-overlay-animation-distance))); } .spectrum-Tooltip { --spectrum-tooltip-target-offset: 3px; --spectrum-tooltip-tip-width: var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)); } .spectrum-Tooltip { position: relative; left: 0px; top: 0px; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; box-sizing: border-box; vertical-align: top; width: auto; padding: var(--spectrum-tooltip-padding-top, var(--spectrum-global-dimension-size-50)) var(--spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125)); border-radius: var(--spectrum-tooltip-border-radius, var(--spectrum-global-dimension-size-50)); min-height: var(--spectrum-tooltip-min-height, var(--spectrum-global-dimension-size-300)); max-width: var(--spectrum-tooltip-max-width, var(--spectrum-global-dimension-size-2000)); font-size: var(--spectrum-tooltip-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-tooltip-text-font-weight, var(--spectrum-global-font-weight-regular)); line-height: var(--spectrum-tooltip-text-line-height, var(--spectrum-alias-component-text-line-height)); word-break: break-word; -webkit-font-smoothing: antialiased; } .spectrum-Tooltip { cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spectrum-Tooltip p { margin: 0; } .spectrum-Tooltip-tip { position: absolute; height: 0; width: 0; border-width: var(--spectrum-tooltip-tip-width, var(--spectrum-global-dimension-size-100)); border-style: solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--left .spectrum-Tooltip-tip { top: 50%; margin-top: calc(-1 * var(--spectrum-tooltip-tip-width, var(--spectrum-global-dimension-size-100))); } .spectrum-Tooltip--right { margin-left: var(--spectrum-tooltip-target-offset); } .spectrum-Tooltip--right .spectrum-Tooltip-tip { right: 100%; transform: rotate(90deg); } .spectrum-Tooltip--left { margin-right: var(--spectrum-tooltip-target-offset); } .spectrum-Tooltip--left .spectrum-Tooltip-tip { left: 100%; transform: rotate(-90deg); } .spectrum-Tooltip--top { margin-bottom: var(--spectrum-tooltip-target-offset); } .spectrum-Tooltip--top .spectrum-Tooltip-tip { top: 100%; } .spectrum-Tooltip--bottom { margin-top: var(--spectrum-tooltip-target-offset); } .spectrum-Tooltip--bottom .spectrum-Tooltip-tip { bottom: 100%; transform: rotate(-180deg); } .spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--top .spectrum-Tooltip-tip { left: 50%; margin-left: calc(-1 * var(--spectrum-tooltip-tip-width, var(--spectrum-global-dimension-size-100))); } [dir="ltr"] .spectrum-Tooltip-typeIcon { margin-left: calc(var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125))); } [dir="rtl"] .spectrum-Tooltip-typeIcon { margin-right: calc(var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125))); } [dir="ltr"] .spectrum-Tooltip-typeIcon { margin-right: var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100)); } [dir="rtl"] .spectrum-Tooltip-typeIcon { margin-left: var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100)); } .spectrum-Tooltip-typeIcon { width: var(--spectrum-tooltip-icon-size, var(--spectrum-global-dimension-size-175)); height: var(--spectrum-tooltip-icon-size, var(--spectrum-global-dimension-size-175)); -ms-flex-item-align: start; align-self: flex-start; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 1px; } .spectrum-Tooltip-label { line-height: var(--spectrum-tooltip-text-line-height, var(--spectrum-alias-component-text-line-height)); } .u-tooltip-showOnHover { display: inline-block; position: relative; } .u-tooltip-showOnHover .spectrum-Tooltip { position: absolute; white-space: nowrap; visibility: visible !important; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; top: -100%; } .u-tooltip-showOnHover .spectrum-Tooltip-label { max-width: none; } .u-tooltip-showOnHover .spectrum-Tooltip--right, .u-tooltip-showOnHover .spectrum-Tooltip--left { top: 50%; } .u-tooltip-showOnHover .spectrum-Tooltip--right .spectrum-Tooltip-tip, .u-tooltip-showOnHover .spectrum-Tooltip--left .spectrum-Tooltip-tip { top: 50%; } .u-tooltip-showOnHover .spectrum-Tooltip--right { left: 100%; transform: translate(0, -50%); } .u-tooltip-showOnHover .spectrum-Tooltip--left { transform: translate(-100%, -50%); } .u-tooltip-showOnHover .spectrum-Tooltip--bottom, .u-tooltip-showOnHover .spectrum-Tooltip--top { left: 50%; } .u-tooltip-showOnHover .spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .u-tooltip-showOnHover .spectrum-Tooltip--top .spectrum-Tooltip-tip { left: 50%; } .u-tooltip-showOnHover .spectrum-Tooltip--bottom { top: 100%; transform: translate(-50%, calc(-1 * var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)))); } .u-tooltip-showOnHover .spectrum-Tooltip--top { transform: translate(-50%, var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50))); } .u-tooltip-showOnHover:hover .spectrum-Tooltip, .u-tooltip-showOnHover:focus .spectrum-Tooltip, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip, .u-tooltip-showOnHover *:focus .spectrum-Tooltip { opacity: 1; } .u-tooltip-showOnHover:hover .spectrum-Tooltip.spectrum-Tooltip--bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip.spectrum-Tooltip--bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip.spectrum-Tooltip--bottom, .u-tooltip-showOnHover *:focus .spectrum-Tooltip.spectrum-Tooltip--bottom { transform: translate(-50%, 0); } .u-tooltip-showOnHover:hover .spectrum-Tooltip.spectrum-Tooltip--top, .u-tooltip-showOnHover:focus .spectrum-Tooltip.spectrum-Tooltip--top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip.spectrum-Tooltip--top, .u-tooltip-showOnHover *:focus .spectrum-Tooltip.spectrum-Tooltip--top { transform: translate(-50%, calc(-1 * var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)))); } .u-tooltip-showOnHover:hover .spectrum-Tooltip.spectrum-Tooltip--left, .u-tooltip-showOnHover:focus .spectrum-Tooltip.spectrum-Tooltip--left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip.spectrum-Tooltip--left, .u-tooltip-showOnHover *:focus .spectrum-Tooltip.spectrum-Tooltip--left { transform: translate( calc(-100% - var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50))), -50% ); } .u-tooltip-showOnHover:hover .spectrum-Tooltip.spectrum-Tooltip--right, .u-tooltip-showOnHover:focus .spectrum-Tooltip.spectrum-Tooltip--right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip.spectrum-Tooltip--right, .u-tooltip-showOnHover *:focus .spectrum-Tooltip.spectrum-Tooltip--right { transform: translate(var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)), -50%); } .spectrum-Tooltip { background-color: var(--spectrum-tooltip-background-color, var(--spectrum-global-color-static-gray-700)); color: var(--spectrum-tooltip-text-color, var(--spectrum-global-color-static-white)); } .spectrum-Tooltip-tip { border-top-color: var(--spectrum-tooltip-background-color, var(--spectrum-global-color-static-gray-700)); } .spectrum-Tooltip--negative, /** @deprecated */.spectrum-Tooltip--error { background-color: var(--spectrum-tooltip-negative-background-color, var(--spectrum-global-color-static-red-700)); } .spectrum-Tooltip--negative .spectrum-Tooltip-tip, .spectrum-Tooltip--error .spectrum-Tooltip-tip { border-top-color: var(--spectrum-tooltip-negative-background-color, var(--spectrum-global-color-static-red-700)); } .spectrum-Tooltip--info, /** @deprecated */.spectrum-Tooltip--help { background-color: var(--spectrum-tooltip-info-background-color, var(--spectrum-global-color-static-blue-700)); } .spectrum-Tooltip--info .spectrum-Tooltip-tip, .spectrum-Tooltip--help .spectrum-Tooltip-tip { border-top-color: var(--spectrum-tooltip-info-background-color, var(--spectrum-global-color-static-blue-700)); } .spectrum-Tooltip--positive, /** @deprecated */.spectrum-Tooltip--success { background-color: var(--spectrum-tooltip-positive-background-color, var(--spectrum-global-color-static-green-700)); } .spectrum-Tooltip--positive .spectrum-Tooltip-tip, .spectrum-Tooltip--success .spectrum-Tooltip-tip { border-top-color: var(--spectrum-tooltip-positive-background-color, var(--spectrum-global-color-static-green-700)); } .spectrum-Slider { --spectrum-slider-handle-border-size: var(--spectrum-slider-m-handle-border-size, var(--spectrum-alias-border-size-thick)); --spectrum-slider-handle-border-size-down: var(--spectrum-slider-m-handle-border-size-down, var(--spectrum-global-dimension-size-75)); --spectrum-slider-track-border-radius: var(--spectrum-slider-m-track-border-radius, var(--spectrum-global-dimension-static-size-10)); --spectrum-slider-track-height: var(--spectrum-slider-m-track-height, var(--spectrum-alias-border-size-thick)); --spectrum-slider-handle-gap: var(--spectrum-slider-m-handle-gap, var(--spectrum-alias-border-size-thicker)); --spectrum-slider-animation-duration: var(--spectrum-slider-m-animation-duration, var(--spectrum-global-animation-duration-100)); --spectrum-slider-height: var(--spectrum-slider-m-height, var(--spectrum-alias-item-height-m)); --spectrum-slider-min-width: var(--spectrum-slider-m-min-width, var(--spectrum-global-dimension-size-1250)); --spectrum-slider-handle-width: var(--spectrum-slider-m-handle-width, var(--spectrum-alias-item-control-2-size-l)); --spectrum-slider-handle-height: var(--spectrum-slider-m-handle-height, var(--spectrum-alias-item-control-2-size-l)); --spectrum-slider-handle-border-radius: var(--spectrum-slider-m-handle-border-radius, var(--spectrum-global-dimension-size-100)); --spectrum-slider-label-gap-x: var(--spectrum-slider-m-label-gap-x, var(--spectrum-alias-item-control-gap-m)); --spectrum-slider-tick-mark-width: var(--spectrum-slider-tick-m-mark-width, var(--spectrum-alias-border-size-thick)); --spectrum-slider-tick-mark-border-radius: var(--spectrum-slider-tick-m-mark-border-radius, var(--spectrum-alias-border-radius-xsmall)); --spectrum-slider-tick-mark-height: var(--spectrum-slider-tick-m-mark-height, var(--spectrum-global-dimension-size-125)); --spectrum-slider-label-gap-y: var(--spectrum-global-dimension-size-85); --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-width) / 2); --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); --spectrum-slider-handle-margin-top: calc(var(--spectrum-slider-handle-width) / -2); --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-width) / -2); --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width) / 2); --spectrum-slider-input-top: calc(var(--spectrum-slider-handle-margin-top) / 4); --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); --spectrum-slider-ramp-margin-top: 0; --spectrum-slider-range-track-reset: 0; --spectrum-slide-label-text-size: var(--spectrum-global-dimension-font-size-75); --spectrum-slide-label-text-line-height: var(--spectrum-global-font-line-height-small, 1.3); } .spectrum-Slider { position: relative; z-index: 1; display: block; min-height: var(--spectrum-slider-height); min-width: var(--spectrum-slider-min-width); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [dir="ltr"] .spectrum-Slider-controls { margin-left: var(--spectrum-slider-controls-margin); } [dir="rtl"] .spectrum-Slider-controls { margin-right: var(--spectrum-slider-controls-margin); } .spectrum-Slider-controls { display: inline-block; box-sizing: border-box; position: relative; z-index: auto; width: calc(100% - var(--spectrum-slider-controls-margin) * 2); min-height: var(--spectrum-slider-height); vertical-align: top; } [dir="ltr"] .spectrum-Slider-track,[dir="ltr"] .spectrum-Slider-fill { left: 0; } [dir="rtl"] .spectrum-Slider-track,[dir="rtl"] .spectrum-Slider-fill { right: 0; } [dir="ltr"] .spectrum-Slider-track,[dir="ltr"] .spectrum-Slider-fill { right: auto; } [dir="rtl"] .spectrum-Slider-track,[dir="rtl"] .spectrum-Slider-fill { left: auto; } .spectrum-Slider-track, .spectrum-Slider-fill { height: var(--spectrum-slider-track-height); box-sizing: border-box; position: absolute; z-index: 1; top: calc(var(--spectrum-slider-height) / 2); margin-top: calc(var(--spectrum-slider-track-height) / -2); pointer-events: none; } [dir="ltr"] .spectrum-Slider-track,[dir="ltr"] .spectrum-Slider-fill { padding-left: 0; padding-right: var(--spectrum-slider-track-handleoffset); } [dir="rtl"] .spectrum-Slider-track,[dir="rtl"] .spectrum-Slider-fill { padding-right: 0; padding-left: var(--spectrum-slider-track-handleoffset); } [dir="ltr"] .spectrum-Slider-track,[dir="ltr"] .spectrum-Slider-fill { margin-left: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider-track,[dir="rtl"] .spectrum-Slider-fill { margin-right: var(--spectrum-slider-track-margin-offset); } .spectrum-Slider-track, .spectrum-Slider-fill { padding-top: 0; padding-bottom: 0; } .spectrum-Slider-track::before, .spectrum-Slider-fill::before { content: ""; display: block; height: 100%; border-radius: var(--spectrum-slider-track-border-radius); } [dir="ltr"] .spectrum-Slider-fill { margin-left: 0; } [dir="rtl"] .spectrum-Slider-fill { margin-right: 0; } [dir="ltr"] .spectrum-Slider-fill { padding-left: calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset)); padding-right: 0; } [dir="rtl"] .spectrum-Slider-fill { padding-right: calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset)); padding-left: 0; } .spectrum-Slider-fill { padding-top: 0; padding-bottom: 0; } [dir="ltr"] .spectrum-Slider-fill--right { padding-left: 0; padding-right: calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset)); } [dir="rtl"] .spectrum-Slider-fill--right { padding-right: 0; padding-left: calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset)); } .spectrum-Slider-fill--right { padding-top: 0; padding-bottom: 0; } [dir="ltr"] .spectrum-Slider-track ~ .spectrum-Slider-track { left: auto; } [dir="rtl"] .spectrum-Slider-track ~ .spectrum-Slider-track { right: auto; } [dir="ltr"] .spectrum-Slider-track ~ .spectrum-Slider-track { right: var(--spectrum-slider-range-track-reset); } [dir="rtl"] .spectrum-Slider-track ~ .spectrum-Slider-track { left: var(--spectrum-slider-range-track-reset); } [dir="ltr"] .spectrum-Slider-track ~ .spectrum-Slider-track { padding-left: var(--spectrum-slider-track-handleoffset); padding-right: 0; } [dir="rtl"] .spectrum-Slider-track ~ .spectrum-Slider-track { padding-right: var(--spectrum-slider-track-handleoffset); padding-left: 0; } [dir="ltr"] .spectrum-Slider-track ~ .spectrum-Slider-track { margin-left: var(--spectrum-slider-range-track-reset); } [dir="rtl"] .spectrum-Slider-track ~ .spectrum-Slider-track { margin-right: var(--spectrum-slider-range-track-reset); } [dir="ltr"] .spectrum-Slider-track ~ .spectrum-Slider-track { margin-right: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider-track ~ .spectrum-Slider-track { margin-left: var(--spectrum-slider-track-margin-offset); } .spectrum-Slider-track ~ .spectrum-Slider-track { padding-top: 0; padding-bottom: 0; } .spectrum-Slider--range .spectrum-Slider-value { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { padding-left: 0; padding-right: var(--spectrum-slider-track-handleoffset); } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { padding-right: 0; padding-left: var(--spectrum-slider-track-handleoffset); } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { left: var(--spectrum-slider-range-track-reset); } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { right: var(--spectrum-slider-range-track-reset); } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { right: auto; } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { left: auto; } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { margin-left: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:first-of-type { margin-right: var(--spectrum-slider-track-margin-offset); } .spectrum-Slider--range .spectrum-Slider-track:first-of-type { padding-top: 0; padding-bottom: 0; } [dir="ltr"] [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track,[dir="ltr"] [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track { left: auto; } [dir="rtl"] [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track,[dir="rtl"] [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track { right: auto; } [dir="ltr"] [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track,[dir="ltr"] [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track { right: auto; } [dir="rtl"] [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track,[dir="rtl"] [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track { left: auto; } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track,[dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track { padding-top: 0; padding-bottom: 0; padding-left: var(--spectrum-slider-track-middle-handleoffset); padding-right: var(--spectrum-slider-track-middle-handleoffset); margin-left: var(--spectrum-slider-range-track-reset); margin-right: var(--spectrum-slider-range-track-reset); margin-top: var(--spectrum-slider-range-track-reset); margin-bottom: var(--spectrum-slider-range-track-reset); } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { padding-left: var(--spectrum-slider-track-handleoffset); padding-right: 0; } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { padding-right: var(--spectrum-slider-track-handleoffset); padding-left: 0; } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { left: auto; } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { right: auto; } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { right: var(--spectrum-slider-range-track-reset); } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { left: var(--spectrum-slider-range-track-reset); } [dir="ltr"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { margin-right: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider--range .spectrum-Slider-track:last-of-type { margin-left: var(--spectrum-slider-track-margin-offset); } .spectrum-Slider--range .spectrum-Slider-track:last-of-type { padding-top: 0; padding-bottom: 0; } [dir="ltr"] .spectrum-Slider-ramp { left: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider-ramp { right: var(--spectrum-slider-track-margin-offset); } [dir="ltr"] .spectrum-Slider-ramp { right: var(--spectrum-slider-track-margin-offset); } [dir="rtl"] .spectrum-Slider-ramp { left: var(--spectrum-slider-track-margin-offset); } .spectrum-Slider-ramp { margin-top: var(--spectrum-slider-ramp-margin-top); height: var(--spectrum-slider-ramp-track-height, var(--spectrum-global-dimension-static-size-200)); position: absolute; top: calc(var(--spectrum-slider-ramp-track-height, var(--spectrum-global-dimension-static-size-200)) / 2); } [dir="rtl"] .spectrum-Slider-ramp svg { transform: matrix(-1, 0, 0, 1, 0, 0) ; } .spectrum-Slider-ramp svg { width: 100%; height: 100%; } [dir="ltr"] .spectrum-Slider-handle { left: 0; } [dir="rtl"] .spectrum-Slider-handle { right: 0; } [dir="ltr"] .spectrum-Slider-handle { margin-left: calc(var(--spectrum-slider-handle-width) / -2); margin-right: 0; } [dir="rtl"] .spectrum-Slider-handle { margin-right: calc(var(--spectrum-slider-handle-width) / -2); margin-left: 0; } .spectrum-Slider-handle { position: absolute; top: calc(var(--spectrum-slider-height) / 2); z-index: 2; display: inline-block; box-sizing: border-box; width: var(--spectrum-slider-handle-width); height: var(--spectrum-slider-handle-height); margin-top: var(--spectrum-slider-handle-margin-top); margin-bottom: 0; border-width: var(--spectrum-slider-handle-border-size); border-style: solid; border-radius: var(--spectrum-slider-handle-border-radius); transition: border-width var(--spectrum-slider-animation-duration) ease-in-out; outline: none; } .spectrum-Slider-handle:active, .spectrum-Slider-handle.is-focused, .spectrum-Slider-handle.is-dragged { border-width: var(--spectrum-slider-handle-border-size-down); } .spectrum-Slider-handle:active, .spectrum-Slider-handle.is-focused, .spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle.is-tophandle { z-index: 3; } .spectrum-Slider-handle:before { content: " "; display: block; position: absolute; left: 50%; top: 50%; transition: box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out, width var(--spectrum-global-animation-duration-100, 130ms) ease-out, height var(--spectrum-global-animation-duration-100, 130ms) ease-out; width: var(--spectrum-slider-handle-width); height: var(--spectrum-slider-handle-height); transform: translate(-50%, -50%); border-radius: 100%; } .spectrum-Slider-handle.is-focused:before { width: calc(var(--spectrum-slider-handle-width) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2); height: calc(var(--spectrum-slider-handle-height) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2); } [dir="ltr"] .spectrum-Slider-input { left: var(--spectrum-slider-input-left); } [dir="rtl"] .spectrum-Slider-input { right: var(--spectrum-slider-input-left); } .spectrum-Slider-input { margin: 0; width: var(--spectrum-slider-handle-width); height: var(--spectrum-slider-handle-height); padding: 0; position: absolute; top: var(--spectrum-slider-input-top); overflow: hidden; opacity: 0.000001; cursor: default; -webkit-appearance: none; border: 0; pointer-events: none; } .spectrum-Slider-input:focus { outline: none; } .spectrum-Slider-labelContainer { display: -ms-flexbox; display: flex; position: relative; width: auto; padding-top: var(--spectrum-fieldlabel-m-padding-top, var(--spectrum-global-dimension-size-50)); font-size: var(--spectrum-slide-label-text-size); line-height: var(--spectrum-slide-label-text-line-height); } [dir="ltr"] .spectrum-Slider-label { padding-left: 0; } [dir="rtl"] .spectrum-Slider-label { padding-right: 0; } .spectrum-Slider-label { -ms-flex-positive: 1; flex-grow: 1; } [dir="ltr"] .spectrum-Slider-value { padding-right: 0; } [dir="rtl"] .spectrum-Slider-value { padding-left: 0; } [dir="ltr"] .spectrum-Slider-value { text-align: right; } [dir="rtl"] .spectrum-Slider-value { text-align: left; } .spectrum-Slider-value { -ms-flex-positive: 0; flex-grow: 0; cursor: default; font-feature-settings: "tnum"; } [dir="ltr"] .spectrum-Slider-value { margin-left: var(--spectrum-slider-label-gap-x); } [dir="rtl"] .spectrum-Slider-value { margin-right: var(--spectrum-slider-label-gap-x); } .spectrum-Slider-ticks { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; z-index: 0; margin: 0 var(--spectrum-slider-track-margin-offset); margin-top: calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height) / 2); } .spectrum-Slider-tick { position: relative; width: var(--spectrum-slider-tick-mark-width); } [dir="ltr"] .spectrum-Slider-tick:after { left: calc(50% - var(--spectrum-slider-tick-mark-width) / 2); } [dir="rtl"] .spectrum-Slider-tick:after { right: calc(50% - var(--spectrum-slider-tick-mark-width) / 2); } .spectrum-Slider-tick:after { display: block; position: absolute; top: 0; content: ""; width: var(--spectrum-slider-tick-mark-width); height: var(--spectrum-slider-tick-mark-height); border-radius: var(--spectrum-slider-tick-mark-border-radius); } .spectrum-Slider-tick .spectrum-Slider-tickLabel { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin-top: calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height)); margin-bottom: 0; margin-left: calc(var(--spectrum-slider-label-gap-x) * -1); margin-right: calc(var(--spectrum-slider-label-gap-x) * -1); font-size: var(--spectrum-slide-label-text-size); line-height: var(--spectrum-slide-label-text-line-height); } .spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel, .spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel { display: block; position: absolute; margin-left: 0; margin-right: 0; } [dir="ltr"] .spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel { left: 0; } [dir="rtl"] .spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel { right: 0; } [dir="ltr"] .spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel { right: 0; } [dir="rtl"] .spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel { left: 0; } .spectrum-Slider.is-disabled { cursor: default; } .spectrum-Slider.is-disabled .spectrum-Slider-handle { cursor: default; pointer-events: none; } .spectrum-Slider { --spectrum-slider-m-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25)); --spectrum-slider-m-handle-border-color-key-focus: var( --spectrum-global-color-gray-800 ); --spectrum-slider-m-handle-focus-ring-color-key-focus: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)); --spectrum-slider-m-label-text-color: var(--spectrum-alias-label-text-color, var(--spectrum-global-color-gray-700)); --spectrum-slider-m-label-text-color-disabled: var(--spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500)); } .spectrum-Slider-track::before { background: var(--spectrum-slider-m-track-color, var(--spectrum-global-color-gray-400)); } .spectrum-Slider-labelContainer { color: var(--spectrum-slider-m-label-text-color); } .spectrum-Slider--filled .spectrum-Slider-track:first-child::before { background: var(--spectrum-slider-m-track-fill-color, var(--spectrum-global-color-gray-700)); } .spectrum-Slider-fill::before { background: var(--spectrum-slider-m-track-fill-color, var(--spectrum-global-color-gray-700)); } .spectrum-Slider-ramp path { fill: var(--spectrum-slider-m-track-color, var(--spectrum-global-color-gray-400)); } .spectrum-Slider-handle { border-color: var(--spectrum-slider-m-handle-border-color, var(--spectrum-global-color-gray-700)); background: var(--spectrum-slider-m-handle-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Slider-handle:hover { border-color: var(--spectrum-slider-m-handle-border-color-hover, var(--spectrum-global-color-gray-800)); } .spectrum-Slider-handle.is-focused { border-color: var(--spectrum-slider-m-handle-border-color-key-focus, var(--spectrum-global-color-gray-800)); } .spectrum-Slider-handle.is-focused:before { box-shadow: 0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus, var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus); } .spectrum-Slider-handle:active, .spectrum-Slider-handle.is-dragged { border-color: var(--spectrum-slider-m-handle-border-color-down, var(--spectrum-global-color-gray-800)); } .spectrum-Slider--ramp .spectrum-Slider-handle { box-shadow: 0 0 0 4px var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100)); } .spectrum-Slider-input { background: transparent; } .spectrum-Slider-tick:after { background-color: var(--spectrum-slider-tick-m-mark-color, var(--spectrum-alias-track-color-default)); } .spectrum-Slider-handle.is-dragged { border-color: var(--spectrum-slider-m-handle-border-color-down, var(--spectrum-global-color-gray-800)); background: var(--spectrum-slider-m-handle-background-color-down, var(--spectrum-alias-background-color-transparent)); } .spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before { background: var(--spectrum-slider-m-track-fill-color, var(--spectrum-global-color-gray-700)); } .spectrum-Slider.is-disabled .spectrum-Slider-labelContainer { color: var(--spectrum-slider-m-label-text-color-disabled); } .spectrum-Slider.is-disabled .spectrum-Slider-handle { border-color: var(--spectrum-slider-m-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); background: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100)); } .spectrum-Slider.is-disabled .spectrum-Slider-handle:hover, .spectrum-Slider.is-disabled .spectrum-Slider-handle:active { border-color: var(--spectrum-slider-m-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); background: var(--spectrum-slider-m-handle-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Slider.is-disabled .spectrum-Slider-track::before { background: var(--spectrum-slider-m-track-color-disabled, var(--spectrum-global-color-gray-300)); } .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child::before { background: var(--spectrum-slider-m-track-fill-color-disabled, var(--spectrum-global-color-gray-300)); } .spectrum-Slider.is-disabled .spectrum-Slider-fill::before { background: var(--spectrum-slider-m-track-fill-color-disabled, var(--spectrum-global-color-gray-300)); } .spectrum-Slider.is-disabled .spectrum-Slider-ramp path { fill: var(--spectrum-slider-ramp-track-color-disabled, var(--spectrum-global-color-gray-200)); } .spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before { background: var(--spectrum-slider-m-track-fill-color-disabled, var(--spectrum-global-color-gray-300)); } .spectrum-Tabs { display: -ms-flexbox; display: flex; position: relative; z-index: 0; margin: 0; padding: 0 var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)); vertical-align: top; } .spectrum-Tabs-item { position: relative; box-sizing: border-box; height: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); line-height: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); z-index: 1; text-decoration: none; white-space: nowrap; transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-out; cursor: pointer; outline: none; } .spectrum-Tabs-item.is-disabled { cursor: default; } .spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel { cursor: default; } .spectrum-Tabs-item .spectrum-Icon { height: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); } .spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel { margin-left: calc(var(--spectrum-tabs-icon-gap, var(--spectrum-global-dimension-size-100)) - var(--spectrum-global-dimension-size-40)); } .spectrum-Tabs-item::before { content: ''; position: absolute; top: 50%; box-sizing: border-box; height: var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)); margin-top: calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2 + var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) / 2); left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100))); right: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100))); border: var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent; border-radius: var(--spectrum-tabs-focus-ring-border-radius); pointer-events: none; } .spectrum-Tabs-itemLabel { cursor: pointer; vertical-align: top; display: inline-block; font-size: var(--spectrum-tabs-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-tabs-text-font-weight, var(--spectrum-alias-body-text-font-weight)); } .spectrum-Tabs-itemLabel:empty { display: none; } .spectrum-Tabs-selectionIndicator { position: absolute; left: 0; z-index: 0; transition: transform var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; transform-origin: top left; border-radius: var(--spectrum-tabs-rule-border-radius, var(--spectrum-global-dimension-static-size-10)); } .spectrum-Tabs--compact .spectrum-Tabs-item { height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); line-height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); } .spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon { height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); } .spectrum-Tabs--horizontal { -ms-flex-align: center; align-items: center; border-bottom: var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) solid; } .spectrum-Tabs--horizontal .spectrum-Tabs-item { vertical-align: top; } .spectrum-Tabs--horizontal .spectrum-Tabs-item + *:not(.spectrum-Tabs-selectionIndicator) { margin-left: var(--spectrum-tabs-item-gap, var(--spectrum-global-dimension-size-300)); } .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator { position: absolute; bottom: 0; height: var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)); bottom: calc(-1 * var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); } .spectrum-Tabs--horizontal.spectrum-Tabs--compact { box-sizing: content-box; height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))); -ms-flex-align: end; align-items: end; } .spectrum-Tabs--quiet { display: -ms-inline-flexbox; display: inline-flex; } .spectrum-Tabs--vertical { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: column; flex-direction: column; padding: 0; border-left: var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) solid; } .spectrum-Tabs--vertical .spectrum-Tabs-item { height: var(--spectrum-tabs-vertical-item-height, var(--spectrum-global-dimension-size-550)); padding: 0 var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)); margin-left: calc(var(--spectrum-tabs-vertical-item-margin-left, var(--spectrum-global-dimension-size-150)) - var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100))); margin-bottom: var(--spectrum-tabs-vertical-item-gap, var(--spectrum-global-dimension-size-50)); } .spectrum-Tabs--vertical .spectrum-Tabs-item::before { left: calc(-1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))); right: calc(-1 * var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick))); margin-top: calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2); } .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item { height: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400)); line-height: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400)); margin-bottom: var(--spectrum-tabs-compact-vertical-item-gap, var(--spectrum-global-dimension-size-50)); } .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon { height: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400)); } .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator { position: absolute; left: 0px; width: var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)); left: calc(-1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))); } .spectrum-Tabs { border-bottom-color: var(--spectrum-tabs-rule-color, var(--spectrum-global-color-gray-200)); } .spectrum-Tabs--vertical { border-left-color: var(--spectrum-tabs-vertical-rule-color, var(--spectrum-global-color-gray-200)); } .spectrum-Tabs-selectionIndicator { background-color: var(--spectrum-tabs-selection-indicator-color, var(--spectrum-global-color-gray-900)); } .spectrum-Tabs-item { color: var(--spectrum-tabs-text-color, var(--spectrum-alias-label-text-color)); } .spectrum-Tabs-item .spectrum-Icon { color: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color)) } .spectrum-Tabs-item:hover { color: var(--spectrum-tabs-text-color-hover, var(--spectrum-alias-text-color-hover)); } .spectrum-Tabs-item:hover .spectrum-Icon { color: var(--spectrum-tabs-icon-color-hover, var(--spectrum-alias-icon-color-hover)) } .spectrum-Tabs-item.is-selected { color: var(--spectrum-tabs-text-color-selected, var(--spectrum-global-color-gray-900)); } .spectrum-Tabs-item.is-selected .spectrum-Icon { color: var(--spectrum-tabs-icon-color-selected, var(--spectrum-global-color-gray-900)) } .spectrum-Tabs-item.focus-ring { color: var(--spectrum-tabs-text-color-key-focus, var(--spectrum-alias-text-color-hover)); } .spectrum-Tabs-item.focus-ring::before { border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus)); } .spectrum-Tabs-item.focus-ring .spectrum-Icon { color: var(--spectrum-tabs-icon-color-key-focus, var(--spectrum-alias-icon-color-focus)) } .spectrum-Tabs-item.is-disabled { color: var(--spectrum-tabs-text-color-disabled, var(--spectrum-alias-text-color-disabled)); } .spectrum-Tabs-item.is-disabled .spectrum-Icon { color: var(--spectrum-tabs-icon-color-disabled, var(--spectrum-alias-icon-color-disabled)) } .spectrum-Tabs--quiet { border-bottom-color: var(--spectrum-tabs-quiet-rule-color, var(--spectrum-alias-border-color-transparent)); } .spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator { background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900)); } .spectrum-Tabs--vertical.spectrum-Tabs--quiet, .spectrum-Tabs--vertical.spectrum-Tabs--compact { border-left-color: var(--spectrum-tabs-quiet-vertical-rule-color, var(--spectrum-alias-border-color-transparent)); } .spectrum-Tabs--vertical.spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-selectionIndicator { background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900)); } .spectrum-Table { border-collapse: separate; border-spacing: 0; } .spectrum-Table--sizeS { --spectrum-table-compact-quiet-border-radius: var(--spectrum-table-s-compact-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-compact-header-border-radius: var(--spectrum-table-s-compact-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-compact-cell-border-radius-key-focus: var(--spectrum-table-s-compact-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-compact-divider-border-size: var(--spectrum-table-s-compact-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-compact-header-text-size: var(--spectrum-table-s-compact-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-compact-header-text-font-weight: var(--spectrum-table-s-compact-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-compact-header-text-letter-spacing: var(--spectrum-table-s-compact-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-compact-header-text-line-height: var(--spectrum-table-s-compact-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-compact-header-sort-icon-gap: var(--spectrum-table-s-compact-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-compact-header-min-height: var(--spectrum-table-s-compact-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-compact-header-padding-top: var(--spectrum-table-s-compact-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-compact-header-padding-bottom: var(--spectrum-table-s-compact-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-compact-header-padding-left: var(--spectrum-table-s-compact-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-header-padding-right: var(--spectrum-table-s-compact-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-text-size: var(--spectrum-table-s-compact-cell-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-table-compact-cell-text-font-weight: var(--spectrum-table-s-compact-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-compact-cell-text-line-height: var(--spectrum-table-s-compact-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-compact-cell-checkbox-padding-right: var(--spectrum-table-s-compact-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-compact-cell-checkbox-vertical-alignment: var(--spectrum-table-s-compact-cell-checkbox-vertical-alignment, middle); --spectrum-table-compact-cell-min-height: var(--spectrum-table-s-compact-cell-min-height, var(--spectrum-global-dimension-size-300)); --spectrum-table-compact-cell-padding-top: var(--spectrum-table-s-compact-cell-padding-top, var(--spectrum-global-dimension-size-50)); --spectrum-table-compact-cell-padding-bottom: var(--spectrum-table-s-compact-cell-padding-bottom, var(--spectrum-global-dimension-size-50)); --spectrum-table-compact-cell-padding-left: var(--spectrum-table-s-compact-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-padding-right: var(--spectrum-table-s-compact-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-vertical-alignment: var(--spectrum-table-s-compact-cell-vertical-alignment, top); --spectrum-table-compact-border-radius: var(--spectrum-table-s-compact-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-compact-border-size: var(--spectrum-table-s-compact-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-regular-quiet-border-radius: var(--spectrum-table-s-regular-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-regular-header-border-radius: var(--spectrum-table-s-regular-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-regular-cell-border-radius-key-focus: var(--spectrum-table-s-regular-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-regular-divider-border-size: var(--spectrum-table-s-regular-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-regular-header-text-size: var(--spectrum-table-s-regular-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-regular-header-text-font-weight: var(--spectrum-table-s-regular-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-regular-header-text-letter-spacing: var(--spectrum-table-s-regular-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-regular-header-text-line-height: var(--spectrum-table-s-regular-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-regular-header-sort-icon-gap: var(--spectrum-table-s-regular-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-regular-header-min-height: var(--spectrum-table-s-regular-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-regular-header-padding-top: var(--spectrum-table-s-regular-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-regular-header-padding-bottom: var(--spectrum-table-s-regular-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-regular-header-padding-left: var(--spectrum-table-s-regular-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-header-padding-right: var(--spectrum-table-s-regular-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-text-size: var(--spectrum-table-s-regular-cell-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-table-regular-cell-text-font-weight: var(--spectrum-table-s-regular-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-regular-cell-text-line-height: var(--spectrum-table-s-regular-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-regular-cell-checkbox-padding-right: var(--spectrum-table-s-regular-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-regular-cell-checkbox-vertical-alignment: var(--spectrum-table-s-regular-cell-checkbox-vertical-alignment, middle); --spectrum-table-regular-cell-min-height: var(--spectrum-table-s-regular-cell-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-regular-cell-padding-top: var(--spectrum-table-s-regular-cell-padding-top, var(--spectrum-global-dimension-size-85)); --spectrum-table-regular-cell-padding-bottom: var(--spectrum-table-s-regular-cell-padding-bottom, var(--spectrum-global-dimension-size-85)); --spectrum-table-regular-cell-padding-left: var(--spectrum-table-s-regular-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-padding-right: var(--spectrum-table-s-regular-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-vertical-alignment: var(--spectrum-table-s-regular-cell-vertical-alignment, top); --spectrum-table-regular-border-radius: var(--spectrum-table-s-regular-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-regular-border-size: var(--spectrum-table-s-regular-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-spacious-quiet-border-radius: var(--spectrum-table-s-spacious-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-spacious-header-border-radius: var(--spectrum-table-s-spacious-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-spacious-cell-border-radius-key-focus: var(--spectrum-table-s-spacious-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-spacious-divider-border-size: var(--spectrum-table-s-spacious-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-spacious-header-text-size: var(--spectrum-table-s-spacious-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-spacious-header-text-font-weight: var(--spectrum-table-s-spacious-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-spacious-header-text-letter-spacing: var(--spectrum-table-s-spacious-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-spacious-header-text-line-height: var(--spectrum-table-s-spacious-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-spacious-header-sort-icon-gap: var(--spectrum-table-s-spacious-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-spacious-header-min-height: var(--spectrum-table-s-spacious-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-spacious-header-padding-top: var(--spectrum-table-s-spacious-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-spacious-header-padding-bottom: var(--spectrum-table-s-spacious-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-spacious-header-padding-left: var(--spectrum-table-s-spacious-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-header-padding-right: var(--spectrum-table-s-spacious-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-text-size: var(--spectrum-table-s-spacious-cell-text-size, var(--spectrum-global-dimension-font-size-75)); --spectrum-table-spacious-cell-text-font-weight: var(--spectrum-table-s-spacious-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-spacious-cell-text-line-height: var(--spectrum-table-s-spacious-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-spacious-cell-checkbox-padding-right: var(--spectrum-table-s-spacious-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-spacious-cell-checkbox-vertical-alignment: var(--spectrum-table-s-spacious-cell-checkbox-vertical-alignment, middle); --spectrum-table-spacious-cell-min-height: var(--spectrum-table-s-spacious-cell-min-height, var(--spectrum-global-dimension-size-500)); --spectrum-table-spacious-cell-padding-top: var(--spectrum-table-s-spacious-cell-padding-top, var(--spectrum-global-dimension-size-125)); --spectrum-table-spacious-cell-padding-bottom: var(--spectrum-table-s-spacious-cell-padding-bottom, var(--spectrum-global-dimension-size-125)); --spectrum-table-spacious-cell-padding-left: var(--spectrum-table-s-spacious-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-padding-right: var(--spectrum-table-s-spacious-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-vertical-alignment: var(--spectrum-table-s-spacious-cell-vertical-alignment, top); --spectrum-table-spacious-border-radius: var(--spectrum-table-s-spacious-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-spacious-border-size: var(--spectrum-table-s-spacious-border-size, var(--spectrum-alias-border-size-thin)); } .spectrum-Table--sizeM { --spectrum-table-compact-quiet-border-radius: var(--spectrum-table-m-compact-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-compact-header-border-radius: var(--spectrum-table-m-compact-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-compact-cell-border-radius-key-focus: var(--spectrum-table-m-compact-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-compact-divider-border-size: var(--spectrum-table-m-compact-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-compact-header-text-size: var(--spectrum-table-m-compact-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-compact-header-text-font-weight: var(--spectrum-table-m-compact-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-compact-header-text-letter-spacing: var(--spectrum-table-m-compact-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-compact-header-text-line-height: var(--spectrum-table-m-compact-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-compact-header-sort-icon-gap: var(--spectrum-table-m-compact-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-compact-header-min-height: var(--spectrum-table-m-compact-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-compact-header-padding-top: var(--spectrum-table-m-compact-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-compact-header-padding-bottom: var(--spectrum-table-m-compact-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-compact-header-padding-left: var(--spectrum-table-m-compact-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-header-padding-right: var(--spectrum-table-m-compact-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-text-size: var(--spectrum-table-m-compact-cell-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-table-compact-cell-text-font-weight: var(--spectrum-table-m-compact-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-compact-cell-text-line-height: var(--spectrum-table-m-compact-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-compact-cell-checkbox-padding-right: var(--spectrum-table-m-compact-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-compact-cell-checkbox-vertical-alignment: var(--spectrum-table-m-compact-cell-checkbox-vertical-alignment, middle); --spectrum-table-compact-cell-min-height: var(--spectrum-table-m-compact-cell-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-compact-cell-padding-top: var(--spectrum-table-m-compact-cell-padding-top, var(--spectrum-global-dimension-size-85)); --spectrum-table-compact-cell-padding-bottom: var(--spectrum-table-m-compact-cell-padding-bottom, var(--spectrum-global-dimension-size-85)); --spectrum-table-compact-cell-padding-left: var(--spectrum-table-m-compact-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-padding-right: var(--spectrum-table-m-compact-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-compact-cell-vertical-alignment: var(--spectrum-table-m-compact-cell-vertical-alignment, top); --spectrum-table-compact-border-radius: var(--spectrum-table-m-compact-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-compact-border-size: var(--spectrum-table-m-compact-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-regular-quiet-border-radius: var(--spectrum-table-m-regular-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-regular-header-border-radius: var(--spectrum-table-m-regular-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-regular-cell-border-radius-key-focus: var(--spectrum-table-m-regular-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-regular-divider-border-size: var(--spectrum-table-m-regular-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-regular-header-text-size: var(--spectrum-table-m-regular-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-regular-header-text-font-weight: var(--spectrum-table-m-regular-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-regular-header-text-letter-spacing: var(--spectrum-table-m-regular-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-regular-header-text-line-height: var(--spectrum-table-m-regular-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-regular-header-sort-icon-gap: var(--spectrum-table-m-regular-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-regular-header-min-height: var(--spectrum-table-m-regular-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-regular-header-padding-top: var(--spectrum-table-m-regular-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-regular-header-padding-bottom: var(--spectrum-table-m-regular-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-regular-header-padding-left: var(--spectrum-table-m-regular-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-header-padding-right: var(--spectrum-table-m-regular-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-text-size: var(--spectrum-table-m-regular-cell-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-table-regular-cell-text-font-weight: var(--spectrum-table-m-regular-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-regular-cell-text-line-height: var(--spectrum-table-m-regular-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-regular-cell-checkbox-padding-right: var(--spectrum-table-m-regular-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-regular-cell-checkbox-vertical-alignment: var(--spectrum-table-m-regular-cell-checkbox-vertical-alignment, middle); --spectrum-table-regular-cell-min-height: var(--spectrum-table-m-regular-cell-min-height, var(--spectrum-global-dimension-size-500)); --spectrum-table-regular-cell-padding-top: var(--spectrum-table-m-regular-cell-padding-top, var(--spectrum-global-dimension-size-130)); --spectrum-table-regular-cell-padding-bottom: var(--spectrum-table-m-regular-cell-padding-bottom, var(--spectrum-global-dimension-size-130)); --spectrum-table-regular-cell-padding-left: var(--spectrum-table-m-regular-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-padding-right: var(--spectrum-table-m-regular-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-regular-cell-vertical-alignment: var(--spectrum-table-m-regular-cell-vertical-alignment, top); --spectrum-table-regular-border-radius: var(--spectrum-table-m-regular-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-regular-border-size: var(--spectrum-table-m-regular-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-spacious-quiet-border-radius: var(--spectrum-table-m-spacious-quiet-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-spacious-header-border-radius: var(--spectrum-table-m-spacious-header-border-radius, var(--spectrum-global-dimension-static-size-0)); --spectrum-table-spacious-cell-border-radius-key-focus: var(--spectrum-table-m-spacious-cell-border-radius-key-focus, var(--spectrum-alias-border-radius-regular)); --spectrum-table-spacious-divider-border-size: var(--spectrum-table-m-spacious-divider-border-size, var(--spectrum-alias-border-size-thin)); --spectrum-table-spacious-header-text-size: var(--spectrum-table-m-spacious-header-text-size, var(--spectrum-global-dimension-font-size-50)); --spectrum-table-spacious-header-text-font-weight: var(--spectrum-table-m-spacious-header-text-font-weight, var(--spectrum-alias-detail-text-font-weight-regular)); --spectrum-table-spacious-header-text-letter-spacing: var(--spectrum-table-m-spacious-header-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); --spectrum-table-spacious-header-text-line-height: var(--spectrum-table-m-spacious-header-text-line-height, var(--spectrum-alias-heading-text-line-height)); --spectrum-table-spacious-header-sort-icon-gap: var(--spectrum-table-m-spacious-header-sort-icon-gap, var(--spectrum-global-dimension-size-125)); --spectrum-table-spacious-header-min-height: var(--spectrum-table-m-spacious-header-min-height, var(--spectrum-global-dimension-size-400)); --spectrum-table-spacious-header-padding-top: var(--spectrum-table-m-spacious-header-padding-top, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-spacious-header-padding-bottom: var(--spectrum-table-m-spacious-header-padding-bottom, var(--spectrum-global-dimension-static-size-125)); --spectrum-table-spacious-header-padding-left: var(--spectrum-table-m-spacious-header-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-header-padding-right: var(--spectrum-table-m-spacious-header-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-text-size: var(--spectrum-table-m-spacious-cell-text-size, var(--spectrum-global-dimension-font-size-100)); --spectrum-table-spacious-cell-text-font-weight: var(--spectrum-table-m-spacious-cell-text-font-weight, var(--spectrum-alias-body-text-font-weight)); --spectrum-table-spacious-cell-text-line-height: var(--spectrum-table-m-spacious-cell-text-line-height, var(--spectrum-alias-component-text-line-height)); --spectrum-table-spacious-cell-checkbox-padding-right: var(--spectrum-table-m-spacious-cell-checkbox-padding-right, var(--spectrum-global-dimension-size-100)); --spectrum-table-spacious-cell-checkbox-vertical-alignment: var(--spectrum-table-m-spacious-cell-checkbox-vertical-alignment, middle); --spectrum-table-spacious-cell-min-height: var(--spectrum-table-m-spacious-cell-min-height, var(--spectrum-global-dimension-size-600)); --spectrum-table-spacious-cell-padding-top: var(--spectrum-table-m-spacious-cell-padding-top, var(--spectrum-global-dimension-size-185)); --spectrum-table-spacious-cell-padding-bottom: var(--spectrum-table-m-spacious-cell-padding-bottom, var(--spectrum-global-dimension-size-185)); --spectrum-table-spacious-cell-padding-left: var(--spectrum-table-m-spacious-cell-padding-left, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-padding-right: var(--spectrum-table-m-spacious-cell-padding-right, var(--spectrum-global-dimension-static-size-200)); --spectrum-table-spacious-cell-vertical-alignment: var(--spectrum-table-m-spacious-cell-vertical-alignment, top); --spectrum-table-spacious-border-radius: var(--spectrum-table-m-spacious-border-radius, var(--spectrum-alias-border-radius-regular)); --spectrum-table-spacious-border-size: var(--spectrum-table-m-spacious-border-size, var(--spectrum-alias-border-size-thin)); } [dir="ltr"] .spectrum-Table-sortedIcon { margin-left: var(--spectrum-table-regular-header-sort-icon-gap); } [dir="rtl"] .spectrum-Table-sortedIcon { margin-right: var(--spectrum-table-regular-header-sort-icon-gap); } .spectrum-Table-sortedIcon { display: none; vertical-align: middle; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } [dir="ltr"] .spectrum-Table-headCell { text-align: left; } [dir="rtl"] .spectrum-Table-headCell { text-align: right; } [dir="ltr"] .spectrum-Table-headCell { padding-left: var(--spectrum-table-regular-header-padding-left); padding-right: var(--spectrum-table-regular-header-padding-right); } [dir="rtl"] .spectrum-Table-headCell { padding-right: var(--spectrum-table-regular-header-padding-left); padding-left: var(--spectrum-table-regular-header-padding-right); } .spectrum-Table-headCell { box-sizing: border-box; font-size: var(--spectrum-table-regular-header-text-size); font-weight: var(--spectrum-table-regular-header-text-font-weight); line-height: var(--spectrum-table-regular-header-text-line-height); min-height: var(--spectrum-table-regular-header-min-height); letter-spacing: var(--spectrum-table-regular-header-text-letter-spacing); text-transform: uppercase; padding-top: var(--spectrum-table-regular-header-padding-top); padding-bottom: var(--spectrum-table-regular-header-padding-bottom); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; cursor: default; outline: 0; border-radius: var(--spectrum-table-regular-header-border-radius); } .spectrum-Table-headCell.is-sortable { cursor: pointer; } .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon, .spectrum-Table-headCell.is-sorted-desc .spectrum-Table-sortedIcon { display: inline-block; margin-top: calc(var(--spectrum-global-dimension-size-25) * -1); } .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon { transform: rotateZ(-90deg); } .spectrum-Table-cell--alignCenter { text-align: center; } [dir="ltr"] .spectrum-Table-cell--alignRight { text-align: right; } [dir="rtl"] .spectrum-Table-cell--alignRight { text-align: left; } [dir="ltr"] .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } [dir="rtl"] .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="ltr"] .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="rtl"] .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } .spectrum-Table-body.is-drop-target::before, .spectrum-Table-row.is-drop-target::before, .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before, .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; } .spectrum-Table-body { position: relative; border-width: var(--spectrum-table-regular-border-size); border-radius: var(--spectrum-table-regular-border-radius); overflow: auto; vertical-align: var(--spectrum-table-regular-cell-vertical-alignment); } .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body { border-width: var(--spectrum-table-regular-border-size); border-radius: var(--spectrum-table-regular-border-radius); } [dir="ltr"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-left-radius: var(--spectrum-table-regular-border-radius); } [dir="rtl"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-right-radius: var(--spectrum-table-regular-border-radius); } [dir="ltr"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-right-radius: var(--spectrum-table-regular-border-radius); } [dir="rtl"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-left-radius: var(--spectrum-table-regular-border-radius); } [dir="ltr"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-left-radius: var(--spectrum-table-regular-border-radius); } [dir="rtl"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-right-radius: var(--spectrum-table-regular-border-radius); } [dir="ltr"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-right-radius: var(--spectrum-table-regular-border-radius); } [dir="rtl"] .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-left-radius: var(--spectrum-table-regular-border-radius); } [dir="ltr"] .spectrum-Table-cell { padding-left: var(--spectrum-table-regular-cell-padding-left); padding-right: var(--spectrum-table-regular-cell-padding-right); } [dir="rtl"] .spectrum-Table-cell { padding-right: var(--spectrum-table-regular-cell-padding-left); padding-left: var(--spectrum-table-regular-cell-padding-right); } .spectrum-Table-cell { box-sizing: border-box; font-size: var(--spectrum-table-regular-cell-text-size); font-weight: var(--spectrum-table-regular-cell-text-font-weight); line-height: var(--spectrum-table-regular-cell-text-line-height); padding-top: var(--spectrum-table-regular-cell-padding-top); padding-bottom: var(--spectrum-table-regular-cell-padding-bottom); min-height: calc(var(--spectrum-table-regular-cell-min-height) - var(--spectrum-table-regular-cell-padding-top) - var(--spectrum-table-regular-cell-padding-bottom)); } .spectrum-Table-cell, .spectrum-Table-headCell { position: relative; } .spectrum-Table-cell.focus-ring, .spectrum-Table-cell.is-focused, .spectrum-Table-headCell.focus-ring, .spectrum-Table-headCell.is-focused { outline: none; } [dir="ltr"] .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table-headCell.is-focused::before { right: 0; } [dir="rtl"] .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="ltr"] .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="rtl"] .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table-headCell.is-focused::before { right: 0; } .spectrum-Table-cell.focus-ring::before, .spectrum-Table-cell.is-focused::before, .spectrum-Table-headCell.focus-ring::before, .spectrum-Table-headCell.is-focused::before { content: ''; z-index: 1; position: absolute; top: 0; bottom: 0; border-radius: calc(var(--spectrum-table-regular-cell-border-radius-key-focus) - 1px); } [dir="ltr"] .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-regular-border-size); } [dir="rtl"] .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-regular-border-size); } [dir="ltr"] .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-regular-border-size); } [dir="rtl"] .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-regular-border-size); } .spectrum-Table-headCell.focus-ring::before, .spectrum-Table-headCell.is-focused::before { top: var(--spectrum-table-regular-border-size); bottom: var(--spectrum-table-regular-border-size); } [dir="ltr"] .spectrum-Table-cell--divider { border-right-width: var(--spectrum-table-regular-divider-border-size); } [dir="rtl"] .spectrum-Table-cell--divider { border-left-width: var(--spectrum-table-regular-divider-border-size); } .spectrum-Table-row { position: relative; cursor: pointer; transition: background-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Table-row:focus { outline: 0; } .spectrum-Table > .spectrum-Table-body > .spectrum-Table-row:last-of-type { border-bottom-style: none; } .spectrum-Table--quiet .spectrum-Table-body { border-radius: var(--spectrum-table-regular-quiet-border-radius); } .spectrum-Table--quiet .spectrum-Table-body.is-drop-target::before, .spectrum-Table--quiet .spectrum-Table-row.is-drop-target::before { border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50)); } [dir="ltr"] .spectrum-Table-checkboxCell { padding-right: var(--spectrum-table-regular-cell-checkbox-padding-right); } [dir="rtl"] .spectrum-Table-checkboxCell { padding-left: var(--spectrum-table-regular-cell-checkbox-padding-right); } .spectrum-Table-checkboxCell { padding-top: 0px; padding-bottom: 0px; vertical-align: var(--spectrum-table-regular-cell-checkbox-vertical-alignment); } .spectrum-Table-checkbox { vertical-align: super; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-sortedIcon { margin-left: var(--spectrum-table-compact-header-sort-icon-gap); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-sortedIcon { margin-right: var(--spectrum-table-compact-header-sort-icon-gap); } .spectrum-Table--compact .spectrum-Table-sortedIcon { display: none; vertical-align: middle; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell { text-align: left; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell { text-align: right; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell { padding-left: var(--spectrum-table-compact-header-padding-left); padding-right: var(--spectrum-table-compact-header-padding-right); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell { padding-right: var(--spectrum-table-compact-header-padding-left); padding-left: var(--spectrum-table-compact-header-padding-right); } .spectrum-Table--compact .spectrum-Table-headCell { box-sizing: border-box; font-size: var(--spectrum-table-compact-header-text-size); font-weight: var(--spectrum-table-compact-header-text-font-weight); line-height: var(--spectrum-table-compact-header-text-line-height); min-height: var(--spectrum-table-compact-header-min-height); letter-spacing: var(--spectrum-table-compact-header-text-letter-spacing); text-transform: uppercase; padding-top: var(--spectrum-table-compact-header-padding-top); padding-bottom: var(--spectrum-table-compact-header-padding-bottom); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; cursor: default; outline: 0; border-radius: var(--spectrum-table-compact-header-border-radius); } .spectrum-Table--compact .spectrum-Table-headCell.is-sortable { cursor: pointer; } .spectrum-Table--compact .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon, .spectrum-Table--compact .spectrum-Table-headCell.is-sorted-desc .spectrum-Table-sortedIcon { display: inline-block; margin-top: calc(var(--spectrum-global-dimension-size-25) * -1); } .spectrum-Table--compact .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon { transform: rotateZ(-90deg); } .spectrum-Table--compact .spectrum-Table-cell--alignCenter { text-align: center; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell--alignRight { text-align: right; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell--alignRight { text-align: left; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before, .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before, .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before, .spectrum-Table--compact .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before, .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before, .spectrum-Table--compact .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; } .spectrum-Table--compact .spectrum-Table-body { position: relative; border-width: var(--spectrum-table-compact-border-size); border-radius: var(--spectrum-table-compact-border-radius); overflow: auto; vertical-align: var(--spectrum-table-compact-cell-vertical-alignment); } .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body { border-width: var(--spectrum-table-compact-border-size); border-radius: var(--spectrum-table-compact-border-radius); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-left-radius: var(--spectrum-table-compact-border-radius); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-right-radius: var(--spectrum-table-compact-border-radius); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-right-radius: var(--spectrum-table-compact-border-radius); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-left-radius: var(--spectrum-table-compact-border-radius); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-left-radius: var(--spectrum-table-compact-border-radius); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-right-radius: var(--spectrum-table-compact-border-radius); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-right-radius: var(--spectrum-table-compact-border-radius); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-left-radius: var(--spectrum-table-compact-border-radius); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell { padding-left: var(--spectrum-table-compact-cell-padding-left); padding-right: var(--spectrum-table-compact-cell-padding-right); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell { padding-right: var(--spectrum-table-compact-cell-padding-left); padding-left: var(--spectrum-table-compact-cell-padding-right); } .spectrum-Table--compact .spectrum-Table-cell { box-sizing: border-box; font-size: var(--spectrum-table-compact-cell-text-size); font-weight: var(--spectrum-table-compact-cell-text-font-weight); line-height: var(--spectrum-table-compact-cell-text-line-height); padding-top: var(--spectrum-table-compact-cell-padding-top); padding-bottom: var(--spectrum-table-compact-cell-padding-bottom); min-height: calc(var(--spectrum-table-compact-cell-min-height) - var(--spectrum-table-compact-cell-padding-top) - var(--spectrum-table-compact-cell-padding-bottom)); } .spectrum-Table--compact .spectrum-Table-cell, .spectrum-Table--compact .spectrum-Table-headCell { position: relative; } .spectrum-Table--compact .spectrum-Table-cell.focus-ring, .spectrum-Table--compact .spectrum-Table-cell.is-focused, .spectrum-Table--compact .spectrum-Table-headCell.focus-ring, .spectrum-Table--compact .spectrum-Table-headCell.is-focused { outline: none; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { right: 0; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { right: 0; } .spectrum-Table--compact .spectrum-Table-cell.focus-ring::before, .spectrum-Table--compact .spectrum-Table-cell.is-focused::before, .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before, .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { content: ''; z-index: 1; position: absolute; top: 0; bottom: 0; border-radius: calc(var(--spectrum-table-compact-cell-border-radius-key-focus) - 1px); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-compact-border-size); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-compact-border-size); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-compact-border-size); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-compact-border-size); } .spectrum-Table--compact .spectrum-Table-headCell.focus-ring::before, .spectrum-Table--compact .spectrum-Table-headCell.is-focused::before { top: var(--spectrum-table-compact-border-size); bottom: var(--spectrum-table-compact-border-size); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-cell--divider { border-right-width: var(--spectrum-table-compact-divider-border-size); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-cell--divider { border-left-width: var(--spectrum-table-compact-divider-border-size); } .spectrum-Table--compact .spectrum-Table-row { position: relative; cursor: pointer; transition: background-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Table--compact .spectrum-Table-row:focus { outline: 0; } .spectrum-Table--compact .spectrum-Table > .spectrum-Table-body > .spectrum-Table-row:last-of-type { border-bottom-style: none; } .spectrum-Table--compact .spectrum-Table--quiet .spectrum-Table-body { border-radius: var(--spectrum-table-compact-quiet-border-radius); } .spectrum-Table--compact .spectrum-Table--quiet .spectrum-Table-body.is-drop-target::before, .spectrum-Table--compact .spectrum-Table--quiet .spectrum-Table-row.is-drop-target::before { border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50)); } [dir="ltr"] .spectrum-Table--compact .spectrum-Table-checkboxCell { padding-right: var(--spectrum-table-compact-cell-checkbox-padding-right); } [dir="rtl"] .spectrum-Table--compact .spectrum-Table-checkboxCell { padding-left: var(--spectrum-table-compact-cell-checkbox-padding-right); } .spectrum-Table--compact .spectrum-Table-checkboxCell { padding-top: 0px; padding-bottom: 0px; vertical-align: var(--spectrum-table-compact-cell-checkbox-vertical-alignment); } .spectrum-Table--compact .spectrum-Table-checkbox { vertical-align: super; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-sortedIcon { margin-left: var(--spectrum-table-spacious-header-sort-icon-gap); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-sortedIcon { margin-right: var(--spectrum-table-spacious-header-sort-icon-gap); } .spectrum-Table--spacious .spectrum-Table-sortedIcon { display: none; vertical-align: middle; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell { text-align: left; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell { text-align: right; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell { padding-left: var(--spectrum-table-spacious-header-padding-left); padding-right: var(--spectrum-table-spacious-header-padding-right); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell { padding-right: var(--spectrum-table-spacious-header-padding-left); padding-left: var(--spectrum-table-spacious-header-padding-right); } .spectrum-Table--spacious .spectrum-Table-headCell { box-sizing: border-box; font-size: var(--spectrum-table-spacious-header-text-size); font-weight: var(--spectrum-table-spacious-header-text-font-weight); line-height: var(--spectrum-table-spacious-header-text-line-height); min-height: var(--spectrum-table-spacious-header-min-height); letter-spacing: var(--spectrum-table-spacious-header-text-letter-spacing); text-transform: uppercase; padding-top: var(--spectrum-table-spacious-header-padding-top); padding-bottom: var(--spectrum-table-spacious-header-padding-bottom); transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; cursor: default; outline: 0; border-radius: var(--spectrum-table-spacious-header-border-radius); } .spectrum-Table--spacious .spectrum-Table-headCell.is-sortable { cursor: pointer; } .spectrum-Table--spacious .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon, .spectrum-Table--spacious .spectrum-Table-headCell.is-sorted-desc .spectrum-Table-sortedIcon { display: inline-block; margin-top: calc(var(--spectrum-global-dimension-size-25) * -1); } .spectrum-Table--spacious .spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon { transform: rotateZ(-90deg); } .spectrum-Table--spacious .spectrum-Table-cell--alignCenter { text-align: center; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell--alignRight { text-align: right; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell--alignRight { text-align: left; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { right: 0; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { left: 0; } .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-body.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table--compact .spectrum-Table-row.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-body.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table--spacious .spectrum-Table-row.is-drop-target::before { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; } .spectrum-Table--spacious .spectrum-Table-body { position: relative; border-width: var(--spectrum-table-spacious-border-size); border-radius: var(--spectrum-table-spacious-border-radius); overflow: auto; vertical-align: var(--spectrum-table-spacious-cell-vertical-alignment); } .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body { border-width: var(--spectrum-table-spacious-border-size); border-radius: var(--spectrum-table-spacious-border-radius); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-left-radius: var(--spectrum-table-spacious-border-radius); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:first-child { border-top-right-radius: var(--spectrum-table-spacious-border-radius); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-right-radius: var(--spectrum-table-spacious-border-radius); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child { border-top-left-radius: var(--spectrum-table-spacious-border-radius); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-left-radius: var(--spectrum-table-spacious-border-radius); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:first-child { border-bottom-right-radius: var(--spectrum-table-spacious-border-radius); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-right-radius: var(--spectrum-table-spacious-border-radius); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell:last-child { border-bottom-left-radius: var(--spectrum-table-spacious-border-radius); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell { padding-left: var(--spectrum-table-spacious-cell-padding-left); padding-right: var(--spectrum-table-spacious-cell-padding-right); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell { padding-right: var(--spectrum-table-spacious-cell-padding-left); padding-left: var(--spectrum-table-spacious-cell-padding-right); } .spectrum-Table--spacious .spectrum-Table-cell { box-sizing: border-box; font-size: var(--spectrum-table-spacious-cell-text-size); font-weight: var(--spectrum-table-spacious-cell-text-font-weight); line-height: var(--spectrum-table-spacious-cell-text-line-height); padding-top: var(--spectrum-table-spacious-cell-padding-top); padding-bottom: var(--spectrum-table-spacious-cell-padding-bottom); min-height: calc(var(--spectrum-table-spacious-cell-min-height) - var(--spectrum-table-spacious-cell-padding-top) - var(--spectrum-table-spacious-cell-padding-bottom)); } .spectrum-Table--spacious .spectrum-Table-cell, .spectrum-Table--spacious .spectrum-Table-headCell { position: relative; } .spectrum-Table--spacious .spectrum-Table-cell.focus-ring, .spectrum-Table--spacious .spectrum-Table-cell.is-focused, .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring, .spectrum-Table--spacious .spectrum-Table-headCell.is-focused { outline: none; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { right: 0; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell.is-focused::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { left: 0; } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell.is-focused::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { right: 0; } .spectrum-Table--spacious .spectrum-Table-cell.focus-ring::before, .spectrum-Table--spacious .spectrum-Table-cell.is-focused::before, .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before, .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { content: ''; z-index: 1; position: absolute; top: 0; bottom: 0; border-radius: calc(var(--spectrum-table-spacious-cell-border-radius-key-focus) - 1px); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-spacious-border-size); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-spacious-border-size); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="ltr"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { left: var(--spectrum-table-spacious-border-size); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before,[dir="rtl"] .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { right: var(--spectrum-table-spacious-border-size); } .spectrum-Table--spacious .spectrum-Table-headCell.focus-ring::before, .spectrum-Table--spacious .spectrum-Table-headCell.is-focused::before { top: var(--spectrum-table-spacious-border-size); bottom: var(--spectrum-table-spacious-border-size); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-cell--divider { border-right-width: var(--spectrum-table-spacious-divider-border-size); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-cell--divider { border-left-width: var(--spectrum-table-spacious-divider-border-size); } .spectrum-Table--spacious .spectrum-Table-row { position: relative; cursor: pointer; transition: background-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out; } .spectrum-Table--spacious .spectrum-Table-row:focus { outline: 0; } .spectrum-Table--spacious .spectrum-Table > .spectrum-Table-body > .spectrum-Table-row:last-of-type { border-bottom-style: none; } .spectrum-Table--spacious .spectrum-Table--quiet .spectrum-Table-body { border-radius: var(--spectrum-table-spacious-quiet-border-radius); } .spectrum-Table--spacious .spectrum-Table--quiet .spectrum-Table-body.is-drop-target::before, .spectrum-Table--spacious .spectrum-Table--quiet .spectrum-Table-row.is-drop-target::before { border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50)); } [dir="ltr"] .spectrum-Table--spacious .spectrum-Table-checkboxCell { padding-right: var(--spectrum-table-spacious-cell-checkbox-padding-right); } [dir="rtl"] .spectrum-Table--spacious .spectrum-Table-checkboxCell { padding-left: var(--spectrum-table-spacious-cell-checkbox-padding-right); } .spectrum-Table--spacious .spectrum-Table-checkboxCell { padding-top: 0px; padding-bottom: 0px; vertical-align: var(--spectrum-table-spacious-cell-checkbox-vertical-alignment); } .spectrum-Table--spacious .spectrum-Table-checkbox { vertical-align: super; } .spectrum-Table-headCell { color: var(--spectrum-table-m-regular-header-text-color, var(--spectrum-alias-label-text-color)); background-color: var(--spectrum-table-m-regular-header-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Table-headCell.is-sortable .spectrum-Table-sortedIcon { color: var(--spectrum-table-m-regular-header-sort-icon-color, var(--spectrum-global-color-gray-600)); } .spectrum-Table-headCell.is-sortable:hover { color: var(--spectrum-table-m-regular-header-text-color-hover, var(--spectrum-alias-text-color-hover)); } .spectrum-Table-headCell.is-sortable:hover .spectrum-Table-sortedIcon { color: var(--spectrum-table-m-regular-header-sort-icon-color-hover, var(--spectrum-alias-icon-color-hover)); } .spectrum-Table-headCell.is-sortable.focus-ring, .spectrum-Table-headCell.is-sortable.is-focused { color: var(--spectrum-table-m-regular-header-text-color-key-focus, var(--spectrum-alias-text-color-hover)); } .spectrum-Table-headCell.is-sortable.focus-ring .spectrum-Table-sortedIcon, .spectrum-Table-headCell.is-sortable.is-focused .spectrum-Table-sortedIcon { color: var(--spectrum-table-m-regular-header-sort-icon-color-key-focus, var(--spectrum-alias-icon-color-key-focus)); } .spectrum-Table-headCell.is-sortable:active { color: var(--spectrum-table-m-regular-header-text-color-down, var(--spectrum-alias-text-color-down)); } .spectrum-Table-headCell.is-sortable:active .spectrum-Table-sortedIcon { color: var(--spectrum-table-m-regular-header-sort-icon-color-down, var(--spectrum-alias-icon-color-down)); } .spectrum-Table-cell.focus-ring::before, .spectrum-Table-cell.is-focused::before, .spectrum-Table-headCell.focus-ring::before, .spectrum-Table-headCell.is-focused::before { box-shadow: inset 0 0 0 2px var(--spectrum-table-m-regular-cell-border-color-key-focus, var(--spectrum-alias-border-color-key-focus)); } .spectrum-Table-body { border-style: solid; border-color: var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); background-color: var(--spectrum-table-m-regular-background-color, var(--spectrum-global-color-gray-50)); } .spectrum-Table-body.is-drop-target { border-color: var(--spectrum-alias-border-color-key-focus, var(--spectrum-global-color-blue-400)); box-shadow: 0 0 0 1px var(--spectrum-alias-border-color-key-focus, var(--spectrum-global-color-blue-400)); } .spectrum-Table-body.is-drop-target::before { background-color: var(--spectrum-alias-highlight-selected); } tbody.spectrum-Table-body { border: none; } tbody.spectrum-Table-body .spectrum-Table-row { border-top: none; } tbody.spectrum-Table-body .spectrum-Table-cell { border-top: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } [dir="ltr"] tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child { border-left: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } [dir="rtl"] tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child { border-right: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } [dir="ltr"] tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-right: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } [dir="rtl"] tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-left: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } tbody.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell { border-bottom: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); } .spectrum-Table-row { border-bottom: 1px solid var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid)); background-color: var(--spectrum-table-m-regular-row-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Table-row:hover { background-color: var(--spectrum-table-m-regular-row-background-color-hover, var(--spectrum-alias-highlight-hover)); } .spectrum-Table-row.focus-ring, .spectrum-Table-row.is-focused { background-color: var(--spectrum-table-m-regular-row-background-color-hover, var(--spectrum-alias-highlight-hover)); } .spectrum-Table-row:active { background-color: var(--spectrum-table-m-regular-row-background-color-down, var(--spectrum-alias-highlight-down)); } .spectrum-Table-row.is-selected { background-color: var(--spectrum-table-m-regular-row-background-color-selected, var(--spectrum-alias-highlight-selected)); } .spectrum-Table-row.is-selected:hover { background-color: var(--spectrum-table-m-regular-row-background-color-selected-hover, var(--spectrum-alias-highlight-selected-hover)); } .spectrum-Table-row.is-selected.focus-ring, .spectrum-Table-row.is-selected.is-focused { background-color: var(--spectrum-table-m-regular-row-background-color-selected-key-focus, var(--spectrum-alias-highlight-selected-hover)); } .spectrum-Table-row.is-drop-target::before { box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-key-focus, var(--spectrum-global-color-blue-400)); background-color: var(--spectrum-alias-highlight-selected); } .spectrum-Table-cell { color: var(--spectrum-table-m-regular-cell-text-color, var(--spectrum-alias-text-color)); background-color: var(--spectrum-table-m-regular-cell-background-color, var(--spectrum-alias-background-color-transparent)); } [dir="ltr"] .spectrum-Table-cell--divider { border-right-style: solid; } [dir="rtl"] .spectrum-Table-cell--divider { border-left-style: solid; } [dir="ltr"] .spectrum-Table-cell--divider { border-right-color: var(--spectrum-table-m-regular-divider-border-color, var(--spectrum-alias-border-color-mid)); } [dir="rtl"] .spectrum-Table-cell--divider { border-left-color: var(--spectrum-table-m-regular-divider-border-color, var(--spectrum-alias-border-color-mid)); } .spectrum-Table--quiet .spectrum-Table-body { border-width: 1px 0; background-color: var(--spectrum-table-m-regular-quiet-cell-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Table--quiet .spectrum-Table-body.is-drop-target { box-shadow: none; border-color: transparent; } .spectrum-Table--quiet .spectrum-Table-body.is-drop-target::before { box-shadow: inset 0 0 0 2px var(--spectrum-alias-border-color-key-focus, var(--spectrum-global-color-blue-400)); } .spectrum-Table--quiet .spectrum-Table-row { background-color: var(--spectrum-table-m-regular-quiet-row-background-color, var(--spectrum-alias-background-color-transparent)); } .spectrum-Table--quiet .spectrum-Table-row:hover { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-hover, var(--spectrum-alias-highlight-hover)); } .spectrum-Table--quiet .spectrum-Table-row.focus-ring, .spectrum-Table--quiet .spectrum-Table-row.is-focused { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-hover, var(--spectrum-alias-highlight-hover)); } .spectrum-Table--quiet .spectrum-Table-row:active { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-down, var(--spectrum-alias-highlight-down)); } .spectrum-Table--quiet .spectrum-Table-row.is-selected { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-selected, var(--spectrum-alias-highlight-selected)); } .spectrum-Table--quiet .spectrum-Table-row.is-selected:hover { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-selected-hover, var(--spectrum-alias-highlight-selected-hover)); } .spectrum-Table--quiet .spectrum-Table-row.is-selected.focus-ring, .spectrum-Table--quiet .spectrum-Table-row.is-selected.is-focused { background-color: var(--spectrum-table-m-regular-quiet-row-background-color-selected-key-focus, var(--spectrum-alias-highlight-selected-hover)); } [dir="ltr"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child,[dir="ltr"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-left: none; } [dir="rtl"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child,[dir="rtl"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-right: none; } [dir="ltr"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child,[dir="ltr"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-right: none; } [dir="rtl"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child,[dir="rtl"] .spectrum-Table--quiet tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child { border-left: none; } .spectrum-Toast { box-sizing: border-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: stretch; align-items: stretch; border-radius: var(--spectrum-toast-border-radius, var(--spectrum-global-dimension-static-size-50)); padding: var(--spectrum-toast-padding-y, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left, var(--spectrum-global-dimension-size-200)); font-size: var(--spectrum-toast-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-toast-text-font-weight, var(--spectrum-global-font-weight-bold)); -webkit-font-smoothing: antialiased; } .spectrum-Toast-typeIcon { -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-positive: 0; flex-grow: 0; margin: var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right, var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0; } .spectrum-Toast-content { -ms-flex: 1 1 auto; flex: 1 1 auto; display: inline-block; box-sizing: border-box; padding: var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right, var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0; text-align: left; } .spectrum-Toast-buttons { display: -ms-flexbox; display: flex; -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-align: start; align-items: flex-start; } .spectrum-Toast-buttons .spectrum-Button + .spectrum-Button, .spectrum-Toast-buttons .spectrum-Button + .spectrum-ClearButton, .spectrum-Toast-buttons .spectrum-ClearButton + .spectrum-Button, .spectrum-Toast-buttons .spectrum-ClearButton + .spectrum-ClearButton { margin-left: var(--spectrum-toast-button-gap, var(--spectrum-global-dimension-size-100)); } .spectrum-Toast-body { -ms-flex: 1 1 auto; flex: 1 1 auto; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .spectrum-Toast-body .spectrum-Button { float: right; margin-right: var(--spectrum-global-dimension-size-130); } .spectrum-Toast-body + .spectrum-Toast-buttons { padding-left: var(--spectrum-toast-padding-right, var(--spectrum-global-dimension-size-100)); border-left-width: 1px; border-left-style: solid; } .spectrum-Toast { background-color: var(--spectrum-toast-background-color, var(--spectrum-global-color-static-gray-700)); color: var(--spectrum-toast-background-color, var(--spectrum-global-color-static-gray-700)); } .spectrum-Toast-content { color: var(--spectrum-toast-text-color, var(--spectrum-global-color-static-white)); } .spectrum-Toast-typeIcon { color: white; } .spectrum-Toast-buttons { border-left-color: rgba(255, 255, 255, 0.2); } .spectrum-Toast--warning { background-color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700)); color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700)); } .spectrum-Toast--warning .spectrum-Toast-closeButton.focus-ring:not(:active) { color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700)); } .spectrum-Toast--negative, /** @deprecated */.spectrum-Toast--error { background-color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700)); color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700)); } .spectrum-Toast--negative .spectrum-Toast-closeButton.focus-ring:not(:active), .spectrum-Toast--error .spectrum-Toast-closeButton.focus-ring:not(:active) { color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700)); } .spectrum-Toast--info { background-color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700)); color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700)); } .spectrum-Toast--info .spectrum-Toast-closeButton.focus-ring:not(:active) { color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700)); } .spectrum-Toast--positive, /** @deprecated */.spectrum-Toast--success { background-color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700)); color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700)); } .spectrum-Toast--positive .spectrum-Toast-closeButton.focus-ring:not(:active), .spectrum-Toast--success .spectrum-Toast-closeButton.focus-ring:not(:active) { color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700)); } .spectrum-IllustratedMessage { height: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .spectrum-IllustratedMessage-illustration { margin-bottom: 24px; } .spectrum-IllustratedMessage-heading { max-width: 500px; margin: 0; } .spectrum-IllustratedMessage-description { max-width: 500px; margin: 4px 0 0 0; font-style: italic; } .spectrum-IllustratedMessage--cta .spectrum-IllustratedMessage-description { font-style: normal; } .spectrum-IllustratedMessage-illustration { color: var(--spectrum-global-color-gray-500); fill: currentColor; stroke: currentColor; } .spectrum { font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); font-size: var(--spectrum-alias-font-size-default, var(--spectrum-global-dimension-font-size-100)); } .spectrum:lang(ar) { font-family: var(--spectrum-alias-font-family-ar, myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif); } .spectrum:lang(he) { font-family: var(--spectrum-alias-font-family-he, myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif); } .spectrum:lang(zh-Hans) { font-family: var(--spectrum-alias-font-family-zhhans, adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'); } .spectrum:lang(zh-Hant) { font-family: var(--spectrum-alias-font-family-zh, adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light','sans-serif'); } .spectrum:lang(zh) { font-family: var(--spectrum-alias-font-family-zh, adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light','sans-serif'); } .spectrum:lang(ko) { font-family: var(--spectrum-alias-font-family-ko, adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'); } .spectrum:lang(ja) { font-family: var(--spectrum-alias-font-family-ja, adobe-clean-han-japanese, source-han-japanese, 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', 'sans-serif'); } .spectrum-Heading--sizeXXXL { font-size: var(--spectrum-heading-xxxl-text-size, var(--spectrum-alias-heading-xxxl-text-size)); font-weight: var(--spectrum-heading-xxxl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-xxxl-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-xxxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXXL { font-size: var(--spectrum-heading-xxl-text-size, var(--spectrum-alias-heading-xxl-text-size)); font-weight: var(--spectrum-heading-xxl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-xxl-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-xxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXL { font-size: var(--spectrum-heading-xl-text-size, var(--spectrum-alias-heading-xl-text-size)); font-weight: var(--spectrum-heading-xl-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-xl-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeL { font-size: var(--spectrum-heading-l-text-size, var(--spectrum-alias-heading-l-text-size)); font-weight: var(--spectrum-heading-l-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-l-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeM { font-size: var(--spectrum-heading-m-text-size, var(--spectrum-alias-heading-m-text-size)); font-weight: var(--spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-m-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeS { font-size: var(--spectrum-heading-s-text-size, var(--spectrum-alias-heading-s-text-size)); font-weight: var(--spectrum-heading-s-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-s-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXS { font-size: var(--spectrum-heading-xs-text-size, var(--spectrum-alias-heading-xs-text-size)); font-weight: var(--spectrum-heading-xs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-xs-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading--sizeXXS { font-size: var(--spectrum-heading-xxs-text-size, var(--spectrum-alias-heading-xxs-text-size)); font-weight: var(--spectrum-heading-xxs-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-xxs-text-line-height, var(--spectrum-alias-heading-text-line-height)); font-style: var(--spectrum-heading-xxs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-heading-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Heading { font-family: var(--spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family)); font-weight: var(--spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); } .spectrum-Heading em, .spectrum-Heading .spectrum-Heading-emphasis { font-style: var(--spectrum-heading-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Heading strong, .spectrum-Heading .spectrum-Heading-strong { font-weight: var(--spectrum-heading-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); } .spectrum-Heading--serif { font-family: var(--spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family)); } .spectrum-Heading--heavy { font-weight: var(--spectrum-heading-heavy-m-text-font-weight, var(--spectrum-global-font-weight-black)); } .spectrum-Heading--heavy em, .spectrum-Heading--heavy .spectrum-Heading-emphasis { font-style: var(--spectrum-heading-heavy-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Heading--heavy strong, .spectrum-Heading--heavy .spectrum-Heading-strong { font-weight: var(--spectrum-heading-heavy-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); } .spectrum-Heading--light { font-weight: var(--spectrum-heading-light-m-emphasis-text-font-weight, var(--spectrum-global-font-weight-light)); } .spectrum-Heading--light em, .spectrum-Heading--light .spectrum-Heading-emphasis { font-style: var(--spectrum-heading-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Heading--light strong, .spectrum-Heading--light .spectrum-Heading-strong { font-weight: var(--spectrum-heading-light-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold)); } .spectrum-Body--sizeXXXL { font-size: var(--spectrum-body-xxxl-text-size, var(--spectrum-global-dimension-font-size-600)); font-weight: var(--spectrum-body-xxxl-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-xxxl-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-xxxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXXL { font-size: var(--spectrum-body-xxl-text-size, var(--spectrum-global-dimension-font-size-500)); font-weight: var(--spectrum-body-xxl-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-xxl-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-xxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXL { font-size: var(--spectrum-body-xl-text-size, var(--spectrum-global-dimension-font-size-400)); font-weight: var(--spectrum-body-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-xl-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeL { font-size: var(--spectrum-body-l-text-size, var(--spectrum-global-dimension-font-size-300)); font-weight: var(--spectrum-body-l-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-l-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeM { font-size: var(--spectrum-body-m-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-body-m-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-m-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeS { font-size: var(--spectrum-body-s-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-body-s-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-s-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body--sizeXS { font-size: var(--spectrum-body-xs-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-body-xs-text-font-weight, var(--spectrum-alias-body-text-font-weight)); line-height: var(--spectrum-body-xs-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-body-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); text-transform: var(--spectrum-body-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum-Body { font-family: var(--spectrum-body-m-text-font-family, var(--spectrum-alias-body-text-font-family)); } .spectrum-Body strong, .spectrum-Body .spectrum-Body-strong { font-weight: var(--spectrum-body-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold)); } .spectrum-Body em, .spectrum-Body .spectrum-Body-emphasis { font-style: var(--spectrum-body-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Body--serif { font-family: var(--spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family)); } .spectrum-Detail { font-family: var(--spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family)); } .spectrum-Detail strong, .spectrum-Detail .spectrum-Detail-strong { font-weight: var(--spectrum-detail-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); } .spectrum-Detail em, .spectrum-Detail .spectrum-Detail-emphasis { font-style: var(--spectrum-detail-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Detail--light { font-style: var(--spectrum-detail-light-m-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-detail-light-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight-light)); } .spectrum-Detail--serif { font-family: var(--spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family)); } .spectrum-Detail--sizeXL { font-size: var(--spectrum-detail-xl-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-xl-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-xl-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-xl-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeXL em { font-size: var(--spectrum-detail-xl-emphasis-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-xl-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-xl-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-xl-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); letter-spacing: var(--spectrum-detail-xl-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-xl-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeXL strong { font-size: var(--spectrum-detail-xl-strong-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-xl-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-xl-strong-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-xl-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-xl-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL { font-size: var(--spectrum-detail-l-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-l-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-l-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-l-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL em { font-size: var(--spectrum-detail-l-emphasis-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-l-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-l-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-l-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); letter-spacing: var(--spectrum-detail-l-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-l-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeL strong { font-size: var(--spectrum-detail-l-strong-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-l-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-l-strong-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-l-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-l-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM { font-size: var(--spectrum-detail-m-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-m-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-m-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM em { font-size: var(--spectrum-detail-m-emphasis-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-m-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-m-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); letter-spacing: var(--spectrum-detail-m-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-m-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeM strong { font-size: var(--spectrum-detail-m-strong-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-m-strong-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-m-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-m-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS { font-size: var(--spectrum-detail-s-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-s-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-s-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-s-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS em { font-size: var(--spectrum-detail-s-emphasis-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-s-emphasis-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-s-emphasis-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-s-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); letter-spacing: var(--spectrum-detail-s-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-s-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Detail--sizeS strong { font-size: var(--spectrum-detail-s-strong-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-s-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-s-strong-text-line-height, var(--spectrum-alias-body-text-line-height)); font-style: var(--spectrum-detail-s-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-s-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-medium)); text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum-Code { font-family: var(--spectrum-heading-m-text-font-family, var(--spectrum-alias-body-text-font-family)); } .spectrum-Code strong, .spectrum-Code .spectrum-Code-strong { font-weight: var(--spectrum-code-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold)); } .spectrum-Code em, .spectrum-Code .spectrum-Code-emphasis { font-style: var(--spectrum-code-m-emphasis-text-font-style, var(--spectrum-global-font-style-italic)); } .spectrum-Code--serif { font-family: var(--spectrum-body-serif-m-text-font-family, var(--spectrum-alias-serif-text-font-family)); } .spectrum-Code--sizeXL { font-size: var(--spectrum-code-xl-text-size, var(--spectrum-global-dimension-font-size-400)); font-weight: var(--spectrum-code-xl-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular)); line-height: var(--spectrum-code-xl-text-line-height, var(--spectrum-alias-code-text-line-height)); font-style: var(--spectrum-code-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-xl-text-font-family, var(--spectrum-alias-code-text-font-family)); } .spectrum-Code--sizeL { font-size: var(--spectrum-code-l-text-size, var(--spectrum-global-dimension-font-size-300)); font-weight: var(--spectrum-code-l-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular)); line-height: var(--spectrum-code-l-text-line-height, var(--spectrum-alias-code-text-line-height)); font-style: var(--spectrum-code-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-l-text-font-family, var(--spectrum-alias-code-text-font-family)); } .spectrum-Code--sizeM { font-size: var(--spectrum-code-m-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-code-m-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular)); line-height: var(--spectrum-code-m-text-line-height, var(--spectrum-alias-code-text-line-height)); font-style: var(--spectrum-code-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-m-text-font-family, var(--spectrum-alias-code-text-font-family)); } .spectrum-Code--sizeS { font-size: var(--spectrum-code-s-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-code-s-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular)); line-height: var(--spectrum-code-s-text-line-height, var(--spectrum-alias-code-text-line-height)); font-style: var(--spectrum-code-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-s-text-font-family, var(--spectrum-alias-code-text-font-family)); } .spectrum-Code--sizeXS { font-size: var(--spectrum-code-xs-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-code-xs-text-font-weight, var(--spectrum-alias-code-text-font-weight-regular)); line-height: var(--spectrum-code-xs-text-line-height, var(--spectrum-alias-code-text-line-height)); font-style: var(--spectrum-code-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-none)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-xs-text-font-family, var(--spectrum-alias-code-text-font-family)); } .spectrum-Typography .spectrum-Heading--sizeXXXL { margin-top: var(--spectrum-heading-xxxl-margin-top, var(--spectrum-alias-heading-xxxl-margin-top)); margin-bottom: var(--spectrum-heading-xxxl-margin-bottom, var(--spectrum-global-dimension-size-130)); } .spectrum-Typography .spectrum-Heading--sizeXXL { margin-top: var(--spectrum-heading-xxl-margin-top, var(--spectrum-alias-heading-xxl-margin-top)); margin-bottom: var(--spectrum-heading-xxl-margin-bottom, var(--spectrum-global-dimension-size-125)); } .spectrum-Typography .spectrum-Heading--sizeXL { margin-top: var(--spectrum-heading-xl-margin-top, var(--spectrum-alias-heading-xl-margin-top)); margin-bottom: var(--spectrum-heading-xl-margin-bottom, var(--spectrum-global-dimension-size-115)); } .spectrum-Typography .spectrum-Heading--sizeL { margin-top: var(--spectrum-heading-l-margin-top, var(--spectrum-alias-heading-l-margin-top)); margin-bottom: var(--spectrum-heading-l-margin-bottom, var(--spectrum-global-dimension-size-85)); } .spectrum-Typography .spectrum-Heading--sizeM { margin-top: var(--spectrum-heading-m-margin-top, var(--spectrum-alias-heading-m-margin-top)); margin-bottom: var(--spectrum-heading-m-margin-bottom, var(--spectrum-global-dimension-size-75)); } .spectrum-Typography .spectrum-Heading--sizeS { margin-top: var(--spectrum-heading-s-margin-top, var(--spectrum-alias-heading-s-margin-top)); margin-bottom: var(--spectrum-heading-s-margin-bottom, var(--spectrum-global-dimension-size-65)); } .spectrum-Typography .spectrum-Heading--sizeXS { margin-top: var(--spectrum-heading-xs-margin-top, var(--spectrum-alias-heading-xs-margin-top)); margin-bottom: var(--spectrum-heading-xs-margin-bottom, var(--spectrum-global-dimension-size-50)); } .spectrum-Typography .spectrum-Heading--sizeXXS { margin-top: var(--spectrum-heading-xxs-margin-top, var(--spectrum-alias-heading-xxs-margin-top)); margin-bottom: var(--spectrum-heading-xxs-margin-bottom, var(--spectrum-global-dimension-size-40)); } .spectrum-Typography .spectrum-Body--sizeXXXL { margin-top: var(--spectrum-body-xxxl-margin-top, 0px); margin-bottom: var(--spectrum-body-xxxl-margin-bottom, var(--spectrum-global-dimension-size-400)); } .spectrum-Typography .spectrum-Body--sizeXXL { margin-top: var(--spectrum-body-xxl-margin-top, 0px); margin-bottom: var(--spectrum-body-xxl-margin-bottom, var(--spectrum-global-dimension-size-300)); } .spectrum-Typography .spectrum-Body--sizeXL { margin-top: var(--spectrum-body-xl-margin-top, 0px); margin-bottom: var(--spectrum-body-xl-margin-bottom, var(--spectrum-global-dimension-size-200)); } .spectrum-Typography .spectrum-Body--sizeL { margin-top: var(--spectrum-body-l-margin-top, 0px); margin-bottom: var(--spectrum-body-l-margin-bottom, var(--spectrum-global-dimension-size-160)); } .spectrum-Typography .spectrum-Body--sizeM { margin-top: var(--spectrum-body-m-margin-top, 0px); margin-bottom: var(--spectrum-body-m-margin-bottom, var(--spectrum-global-dimension-size-150)); } .spectrum-Typography .spectrum-Body--sizeS { margin-top: var(--spectrum-body-s-margin-top, 0px); margin-bottom: var(--spectrum-body-s-margin-bottom, var(--spectrum-global-dimension-size-125)); } .spectrum-Typography .spectrum-Body--sizeXS { margin-top: var(--spectrum-body-xs-margin-top, 0px); margin-bottom: var(--spectrum-body-xs-margin-bottom, var(--spectrum-global-dimension-size-115)); } .spectrum:lang(ja) .spectrum-Heading--sizeXXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXXL { font-size: var(--spectrum-heading-han-xxxl-text-size, var(--spectrum-alias-heading-xxxl-text-size)); font-weight: var(--spectrum-heading-han-xxxl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-xxxl-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXL { font-size: var(--spectrum-heading-han-xxl-text-size, var(--spectrum-alias-heading-han-xxl-text-size)); font-weight: var(--spectrum-heading-han-xxl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-xxl-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-xxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXL, .spectrum:lang(ko) .spectrum-Heading--sizeXL, .spectrum:lang(zh) .spectrum-Heading--sizeXL { font-size: var(--spectrum-heading-han-xl-text-size, var(--spectrum-alias-heading-han-xl-text-size)); font-weight: var(--spectrum-heading-han-xl-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-xl-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeL, .spectrum:lang(ko) .spectrum-Heading--sizeL, .spectrum:lang(zh) .spectrum-Heading--sizeL { font-size: var(--spectrum-heading-han-l-text-size, var(--spectrum-alias-heading-han-l-text-size)); font-weight: var(--spectrum-heading-han-l-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-l-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeM, .spectrum:lang(ko) .spectrum-Heading--sizeM, .spectrum:lang(zh) .spectrum-Heading--sizeM { font-size: var(--spectrum-heading-han-m-text-size, var(--spectrum-alias-heading-han-m-text-size)); font-weight: var(--spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-m-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeS, .spectrum:lang(ko) .spectrum-Heading--sizeS, .spectrum:lang(zh) .spectrum-Heading--sizeS { font-size: var(--spectrum-heading-han-s-text-size, var(--spectrum-alias-heading-s-text-size)); font-weight: var(--spectrum-heading-han-s-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-s-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXS, .spectrum:lang(ko) .spectrum-Heading--sizeXS, .spectrum:lang(zh) .spectrum-Heading--sizeXS { font-size: var(--spectrum-heading-han-xs-text-size, var(--spectrum-alias-heading-xs-text-size)); font-weight: var(--spectrum-heading-han-xs-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-xs-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--sizeXXS, .spectrum:lang(ko) .spectrum-Heading--sizeXXS, .spectrum:lang(zh) .spectrum-Heading--sizeXXS { font-size: var(--spectrum-heading-han-xxs-text-size, var(--spectrum-alias-heading-xxs-text-size)); font-weight: var(--spectrum-heading-han-xxs-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); line-height: var(--spectrum-heading-han-xxs-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-heading-han-xxs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-heading-han-xxs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-heading-han-xxs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Heading--heavy, .spectrum:lang(ko) .spectrum-Heading--heavy, .spectrum:lang(zh) .spectrum-Heading--heavy { font-weight: var(--spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); } .spectrum:lang(ja) .spectrum-Heading--heavy em, .spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--emphasis, .spectrum:lang(ko) .spectrum-Heading--heavy em, .spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--emphasis, .spectrum:lang(zh) .spectrum-Heading--heavy em, .spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--emphasis { font-style: var(--spectrum-heading-han-heavy-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-heading-han-heavy-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-heavy-emphasis)); } .spectrum:lang(ja) .spectrum-Heading--heavy strong, .spectrum:lang(ja) .spectrum-Heading--heavy .spectrum-Heading--strong, .spectrum:lang(ko) .spectrum-Heading--heavy strong, .spectrum:lang(ko) .spectrum-Heading--heavy .spectrum-Heading--strong, .spectrum:lang(zh) .spectrum-Heading--heavy strong, .spectrum:lang(zh) .spectrum-Heading--heavy .spectrum-Heading--strong { font-style: var(--spectrum-heading-heavy-m-strong-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-heading-heavy-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); } .spectrum:lang(ja) .spectrum-Heading--light, .spectrum:lang(ko) .spectrum-Heading--light, .spectrum:lang(zh) .spectrum-Heading--light { font-weight: var(--spectrum-heading-han-m-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular)); } .spectrum:lang(ja) .spectrum-Heading--light em, .spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--emphasis, .spectrum:lang(ko) .spectrum-Heading--light em, .spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--emphasis, .spectrum:lang(zh) .spectrum-Heading--light em, .spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--emphasis { font-style: var(--spectrum-heading-han-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-heading-han-light-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-light-emphasis)); } .spectrum:lang(ja) .spectrum-Heading--light strong, .spectrum:lang(ja) .spectrum-Heading--light .spectrum-Heading--strong, .spectrum:lang(ko) .spectrum-Heading--light strong, .spectrum:lang(ko) .spectrum-Heading--light .spectrum-Heading--strong, .spectrum:lang(zh) .spectrum-Heading--light strong, .spectrum:lang(zh) .spectrum-Heading--light .spectrum-Heading--strong { font-style: var(--spectrum-heading-han-light-m-strong-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-heading-han-light-m-strong-text-font-weight, var(--spectrum-global-font-weight-bold)); } .spectrum:lang(ja) .spectrum-Body--sizeXXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXXL { font-size: var(--spectrum-body-han-xxxl-text-size, var(--spectrum-global-dimension-font-size-600)); font-weight: var(--spectrum-body-han-xxxl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-xxxl-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-xxxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-xxxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-xxxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXL { font-size: var(--spectrum-body-han-xxl-text-size, var(--spectrum-global-dimension-font-size-500)); font-weight: var(--spectrum-body-han-xxl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-xxl-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-xxl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-xxl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-xxl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeXL, .spectrum:lang(ko) .spectrum-Body--sizeXL, .spectrum:lang(zh) .spectrum-Body--sizeXL { font-size: var(--spectrum-body-han-xl-text-size, var(--spectrum-global-dimension-font-size-400)); font-weight: var(--spectrum-body-han-xl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-xl-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-xl-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeL, .spectrum:lang(ko) .spectrum-Body--sizeL, .spectrum:lang(zh) .spectrum-Body--sizeL { font-size: var(--spectrum-body-han-l-text-size, var(--spectrum-global-dimension-font-size-300)); font-weight: var(--spectrum-body-han-l-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-l-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-l-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeM, .spectrum:lang(ko) .spectrum-Body--sizeM, .spectrum:lang(zh) .spectrum-Body--sizeM { font-size: var(--spectrum-body-han-m-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-body-han-m-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-m-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-m-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeS, .spectrum:lang(ko) .spectrum-Body--sizeS, .spectrum:lang(zh) .spectrum-Body--sizeS { font-size: var(--spectrum-body-han-s-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-body-han-s-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-s-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-s-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Body--sizeXS, .spectrum:lang(ko) .spectrum-Body--sizeXS, .spectrum:lang(zh) .spectrum-Body--sizeXS { font-size: var(--spectrum-body-han-xs-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-body-han-xs-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-body-han-xs-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-body-han-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-body-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-body-han-xs-text-transform, none); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeXL, .spectrum:lang(ko) .spectrum-Detail--sizeXL, .spectrum:lang(zh) .spectrum-Detail--sizeXL { font-size: var(--spectrum-detail-han-xl-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-han-xl-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-han-xl-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-xl-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeXL em, .spectrum:lang(ko) .spectrum-Detail--sizeXL em, .spectrum:lang(zh) .spectrum-Detail--sizeXL em { font-size: var(--spectrum-detail-han-xl-emphasis-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-han-xl-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis)); line-height: var(--spectrum-detail-han-xl-emphasis-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-xl-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-xl-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-xl-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeXL strong, .spectrum:lang(ko) .spectrum-Detail--sizeXL strong, .spectrum:lang(zh) .spectrum-Detail--sizeXL strong { font-size: var(--spectrum-detail-han-xl-strong-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-detail-han-xl-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-han-xl-strong-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-xl-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-xl-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-xl-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeL, .spectrum:lang(ko) .spectrum-Detail--sizeL, .spectrum:lang(zh) .spectrum-Detail--sizeL { font-size: var(--spectrum-detail-han-l-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-han-l-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-han-l-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-l-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeL em, .spectrum:lang(ko) .spectrum-Detail--sizeL em, .spectrum:lang(zh) .spectrum-Detail--sizeL em { font-size: var(--spectrum-detail-han-l-emphasis-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-han-l-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis)); line-height: var(--spectrum-detail-han-l-emphasis-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-l-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-l-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-l-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeL strong, .spectrum:lang(ko) .spectrum-Detail--sizeL strong, .spectrum:lang(zh) .spectrum-Detail--sizeL strong { font-size: var(--spectrum-detail-han-l-strong-text-size, var(--spectrum-global-dimension-font-size-100)); font-weight: var(--spectrum-detail-han-l-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-han-l-strong-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-l-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-l-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-l-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeM, .spectrum:lang(ko) .spectrum-Detail--sizeM, .spectrum:lang(zh) .spectrum-Detail--sizeM { font-size: var(--spectrum-detail-han-m-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-han-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-han-m-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-m-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeM em, .spectrum:lang(ko) .spectrum-Detail--sizeM em, .spectrum:lang(zh) .spectrum-Detail--sizeM em { font-size: var(--spectrum-detail-han-m-emphasis-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-han-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis)); line-height: var(--spectrum-detail-han-m-emphasis-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-m-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-m-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeM strong, .spectrum:lang(ko) .spectrum-Detail--sizeM strong, .spectrum:lang(zh) .spectrum-Detail--sizeM strong { font-size: var(--spectrum-detail-han-m-strong-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-detail-han-m-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-han-m-strong-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-m-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-m-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-m-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeS, .spectrum:lang(ko) .spectrum-Detail--sizeS, .spectrum:lang(zh) .spectrum-Detail--sizeS { font-size: var(--spectrum-detail-han-s-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-han-s-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); line-height: var(--spectrum-detail-han-s-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-s-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeS em, .spectrum:lang(ko) .spectrum-Detail--sizeS em, .spectrum:lang(zh) .spectrum-Detail--sizeS em { font-size: var(--spectrum-detail-han-s-emphasis-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-han-s-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-regular-emphasis)); line-height: var(--spectrum-detail-han-s-emphasis-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-s-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-s-emphasis-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-s-emphasis-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--sizeS strong, .spectrum:lang(ko) .spectrum-Detail--sizeS strong, .spectrum:lang(zh) .spectrum-Detail--sizeS strong { font-size: var(--spectrum-detail-han-s-strong-text-size, var(--spectrum-global-dimension-font-size-50)); font-weight: var(--spectrum-detail-han-s-strong-text-font-weight, var(--spectrum-global-font-weight-black)); line-height: var(--spectrum-detail-han-s-strong-text-line-height, var(--spectrum-alias-han-heading-text-line-height)); font-style: var(--spectrum-detail-han-s-strong-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-detail-han-s-strong-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); text-transform: var(--spectrum-detail-han-s-strong-text-transform, uppercase); margin-top: 0; margin-bottom: 0; } .spectrum:lang(ja) .spectrum-Detail--light, .spectrum:lang(ko) .spectrum-Detail--light, .spectrum:lang(zh) .spectrum-Detail--light { font-weight: var(--spectrum-detail-han-m-text-font-weight, var(--spectrum-alias-detail-text-font-weight)); } .spectrum:lang(ja) .spectrum-Detail--light em, .spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--emphasis, .spectrum:lang(ko) .spectrum-Detail--light em, .spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--emphasis, .spectrum:lang(zh) .spectrum-Detail--light em, .spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--emphasis { font-style: var(--spectrum-detail-han-light-m-emphasis-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-detail-han-light-m-emphasis-text-font-weight, var(--spectrum-alias-han-heading-text-font-weight-light-emphasis)); } .spectrum:lang(ja) .spectrum-Detail--light strong, .spectrum:lang(ja) .spectrum-Detail--light .spectrum-Detail--strong, .spectrum:lang(ko) .spectrum-Detail--light strong, .spectrum:lang(ko) .spectrum-Detail--light .spectrum-Detail--strong, .spectrum:lang(zh) .spectrum-Detail--light strong, .spectrum:lang(zh) .spectrum-Detail--light .spectrum-Detail--strong { font-style: var(--spectrum-detail-han-light-m-strong-text-font-style, var(--spectrum-global-font-style-regular)); font-weight: var(--spectrum-detail-han-light-m-strong-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); } .spectrum:lang(ja) .spectrum-Code--sizeXL, .spectrum:lang(ko) .spectrum-Code--sizeXL, .spectrum:lang(zh) .spectrum-Code--sizeXL { font-size: var(--spectrum-code-han-xl-text-size, var(--spectrum-global-dimension-font-size-400)); font-weight: var(--spectrum-code-han-xl-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-code-han-xl-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-code-han-xl-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-han-xl-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-han-xl-text-font-family, var(--spectrum-alias-font-family-zh)); } .spectrum:lang(ja) .spectrum-Code--sizeL, .spectrum:lang(ko) .spectrum-Code--sizeL, .spectrum:lang(zh) .spectrum-Code--sizeL { font-size: var(--spectrum-code-han-l-text-size, var(--spectrum-global-dimension-font-size-300)); font-weight: var(--spectrum-code-han-l-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-code-han-l-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-code-han-l-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-han-l-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-han-l-text-font-family, var(--spectrum-alias-font-family-zh)); } .spectrum:lang(ja) .spectrum-Code--sizeM, .spectrum:lang(ko) .spectrum-Code--sizeM, .spectrum:lang(zh) .spectrum-Code--sizeM { font-size: var(--spectrum-code-han-m-text-size, var(--spectrum-global-dimension-font-size-200)); font-weight: var(--spectrum-code-han-m-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-code-han-m-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-code-han-m-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-han-m-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-han-m-text-font-family, var(--spectrum-alias-font-family-zh)); } .spectrum:lang(ja) .spectrum-Code--sizeS, .spectrum:lang(ko) .spectrum-Code--sizeS, .spectrum:lang(zh) .spectrum-Code--sizeS { font-size: var(--spectrum-code-han-s-text-size, var(--spectrum-alias-font-size-default)); font-weight: var(--spectrum-code-han-s-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-code-han-s-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-code-han-s-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-han-s-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-han-s-text-font-family, var(--spectrum-alias-font-family-zh)); } .spectrum:lang(ja) .spectrum-Code--sizeXS, .spectrum:lang(ko) .spectrum-Code--sizeXS, .spectrum:lang(zh) .spectrum-Code--sizeXS { font-size: var(--spectrum-code-han-xs-text-size, var(--spectrum-global-dimension-font-size-75)); font-weight: var(--spectrum-code-han-xs-text-font-weight, var(--spectrum-alias-han-body-text-font-weight-regular)); line-height: var(--spectrum-code-han-xs-text-line-height, var(--spectrum-alias-han-body-text-line-height)); font-style: var(--spectrum-code-han-xs-text-font-style, var(--spectrum-global-font-style-regular)); letter-spacing: var(--spectrum-code-han-xs-text-letter-spacing, var(--spectrum-global-font-letter-spacing-han)); margin-top: 0; margin-bottom: 0; font-family: var(--spectrum-code-han-xs-text-font-family, var(--spectrum-alias-font-family-zh)); } .spectrum-Heading--sizeXXXL { color: var(--spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeXXL { color: var(--spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeXL { color: var(--spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeL { color: var(--spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeM { color: var(--spectrum-heading-m-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeS { color: var(--spectrum-heading-s-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeXS { color: var(--spectrum-heading-xs-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading--sizeXXS { color: var(--spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXXL--light { color: var(--spectrum-heading-light-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXL--light { color: var(--spectrum-heading-light-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXL--light { color: var(--spectrum-heading-light-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeL--light { color: var(--spectrum-heading-light-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXXL--heavy { color: var(--spectrum-heading-heavy-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXL--heavy { color: var(--spectrum-heading-heavy-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXL--heavy { color: var(--spectrum-heading-heavy-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeL--heavy { color: var(--spectrum-heading-heavy-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXXL--heading { color: var(--spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXXL--heading { color: var(--spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeXL--heading { color: var(--spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Heading-sizeL--heading { color: var(--spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Body--sizeXXXL { color: var(--spectrum-body-xxxl-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeXXL { color: var(--spectrum-body-xxl-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeXL { color: var(--spectrum-body-xl-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeL { color: var(--spectrum-body-l-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeM { color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeS { color: var(--spectrum-body-s-text-color, var(--spectrum-alias-text-color)); } .spectrum-Body--sizeXS { color: var(--spectrum-body-xs-text-color, var(--spectrum-alias-text-color)); } .spectrum-Detail--sizeXL { color: var(--spectrum-detail-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Detail--sizeL { color: var(--spectrum-detail-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Detail--sizeM { color: var(--spectrum-detail-m-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Detail--sizeS { color: var(--spectrum-detail-s-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum-Code--sizeXL { color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); } .spectrum-Code--sizeL { color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); } .spectrum-Code--sizeM { color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-Code--sizeS { color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); } .spectrum-Code--sizeXS { color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeXXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXXL { color: var(--spectrum-body-han-xxxl-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeXXL, .spectrum:lang(ko) .spectrum-Body--sizeXXL, .spectrum:lang(zh) .spectrum-Body--sizeXXL { color: var(--spectrum-body-han-xxl-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeXL, .spectrum:lang(ko) .spectrum-Body--sizeXL, .spectrum:lang(zh) .spectrum-Body--sizeXL { color: var(--spectrum-body-han-xl-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeL, .spectrum:lang(ko) .spectrum-Body--sizeL, .spectrum:lang(zh) .spectrum-Body--sizeL { color: var(--spectrum-body-han-l-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeM, .spectrum:lang(ko) .spectrum-Body--sizeM, .spectrum:lang(zh) .spectrum-Body--sizeM { color: var(--spectrum-body-han-m-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeS, .spectrum:lang(ko) .spectrum-Body--sizeS, .spectrum:lang(zh) .spectrum-Body--sizeS { color: var(--spectrum-body-han-s-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Body--sizeXS, .spectrum:lang(ko) .spectrum-Body--sizeXS, .spectrum:lang(zh) .spectrum-Body--sizeXS { color: var(--spectrum-body-han-xs-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeXXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXXL { color: var(--spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeXXL, .spectrum:lang(ko) .spectrum-Heading--sizeXXL, .spectrum:lang(zh) .spectrum-Heading--sizeXXL { color: var(--spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeXL, .spectrum:lang(ko) .spectrum-Heading--sizeXL, .spectrum:lang(zh) .spectrum-Heading--sizeXL { color: var(--spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeL, .spectrum:lang(ko) .spectrum-Heading--sizeL, .spectrum:lang(zh) .spectrum-Heading--sizeL { color: var(--spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeM, .spectrum:lang(ko) .spectrum-Heading--sizeM, .spectrum:lang(zh) .spectrum-Heading--sizeM { color: var(--spectrum-heading-m-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeS, .spectrum:lang(ko) .spectrum-Heading--sizeS, .spectrum:lang(zh) .spectrum-Heading--sizeS { color: var(--spectrum-heading-s-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeXS, .spectrum:lang(ko) .spectrum-Heading--sizeXS, .spectrum:lang(zh) .spectrum-Heading--sizeXS { color: var(--spectrum-heading-xs-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading--sizeXXS, .spectrum:lang(ko) .spectrum-Heading--sizeXXS, .spectrum:lang(zh) .spectrum-Heading--sizeXXS { color: var(--spectrum-heading-xxs-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXXL--light, .spectrum:lang(ko) .spectrum-Heading-sizeXXXL--light, .spectrum:lang(zh) .spectrum-Heading-sizeXXXL--light { color: var(--spectrum-heading-light-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXL--light, .spectrum:lang(ko) .spectrum-Heading-sizeXXL--light, .spectrum:lang(zh) .spectrum-Heading-sizeXXL--light { color: var(--spectrum-heading-light-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXL--light, .spectrum:lang(ko) .spectrum-Heading-sizeXL--light, .spectrum:lang(zh) .spectrum-Heading-sizeXL--light { color: var(--spectrum-heading-light-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeL--light, .spectrum:lang(ko) .spectrum-Heading-sizeL--light, .spectrum:lang(zh) .spectrum-Heading-sizeL--light { color: var(--spectrum-heading-light-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXXL--heavy, .spectrum:lang(ko) .spectrum-Heading-sizeXXXL--heavy, .spectrum:lang(zh) .spectrum-Heading-sizeXXXL--heavy { color: var(--spectrum-heading-heavy-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXL--heavy, .spectrum:lang(ko) .spectrum-Heading-sizeXXL--heavy, .spectrum:lang(zh) .spectrum-Heading-sizeXXL--heavy { color: var(--spectrum-heading-heavy-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXL--heavy, .spectrum:lang(ko) .spectrum-Heading-sizeXL--heavy, .spectrum:lang(zh) .spectrum-Heading-sizeXL--heavy { color: var(--spectrum-heading-heavy-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeL--heavy, .spectrum:lang(ko) .spectrum-Heading-sizeL--heavy, .spectrum:lang(zh) .spectrum-Heading-sizeL--heavy { color: var(--spectrum-heading-heavy-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXXL--heading, .spectrum:lang(ko) .spectrum-Heading-sizeXXXL--heading, .spectrum:lang(zh) .spectrum-Heading-sizeXXXL--heading { color: var(--spectrum-heading-xxxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXXL--heading, .spectrum:lang(ko) .spectrum-Heading-sizeXXL--heading, .spectrum:lang(zh) .spectrum-Heading-sizeXXL--heading { color: var(--spectrum-heading-xxl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeXL--heading, .spectrum:lang(ko) .spectrum-Heading-sizeXL--heading, .spectrum:lang(zh) .spectrum-Heading-sizeXL--heading { color: var(--spectrum-heading-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Heading-sizeL--heading, .spectrum:lang(ko) .spectrum-Heading-sizeL--heading, .spectrum:lang(zh) .spectrum-Heading-sizeL--heading { color: var(--spectrum-heading-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Detail--sizeXL, .spectrum:lang(ko) .spectrum-Detail--sizeXL, .spectrum:lang(zh) .spectrum-Detail--sizeXL { color: var(--spectrum-detail-xl-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Detail--sizeL, .spectrum:lang(ko) .spectrum-Detail--sizeL, .spectrum:lang(zh) .spectrum-Detail--sizeL { color: var(--spectrum-detail-l-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Detail--sizeM, .spectrum:lang(ko) .spectrum-Detail--sizeM, .spectrum:lang(zh) .spectrum-Detail--sizeM { color: var(--spectrum-detail-m-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Detail--sizeS, .spectrum:lang(ko) .spectrum-Detail--sizeS, .spectrum:lang(zh) .spectrum-Detail--sizeS { color: var(--spectrum-detail-s-text-color, var(--spectrum-alias-heading-text-color)); } .spectrum:lang(ja) .spectrum-Code--sizeXL, .spectrum:lang(ko) .spectrum-Code--sizeXL, .spectrum:lang(zh) .spectrum-Code--sizeXL { color: var(--spectrum-code-xl-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Code--sizeL, .spectrum:lang(ko) .spectrum-Code--sizeL, .spectrum:lang(zh) .spectrum-Code--sizeL { color: var(--spectrum-code-l-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Code--sizeM, .spectrum:lang(ko) .spectrum-Code--sizeM, .spectrum:lang(zh) .spectrum-Code--sizeM { color: var(--spectrum-code-m-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Code--sizeS, .spectrum:lang(ko) .spectrum-Code--sizeS, .spectrum:lang(zh) .spectrum-Code--sizeS { color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color)); } .spectrum:lang(ja) .spectrum-Code--sizeXS, .spectrum:lang(ko) .spectrum-Code--sizeXS, .spectrum:lang(zh) .spectrum-Code--sizeXS { color: var(--spectrum-code-xs-text-color, var(--spectrum-alias-text-color)); } .spectrum, .spectrum-Body { color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); } .spectrum-ProgressCircle--indeterminate-fill-submask-2 { animation: 1s infinite linear spectrum-fill-mask-2; } @keyframes spectrum-fill-mask-1 { 0% { transform: rotate(90deg); } 1.69% { transform: rotate(72.3deg); } 3.39% { transform: rotate(55.5deg); } 5.08% { transform: rotate(40.3deg); } 6.78% { transform: rotate(25deg); } 8.47% { transform: rotate(10.6deg); } 10.17% { transform: rotate(0deg); } 11.86% { transform: rotate(0deg); } 13.56% { transform: rotate(0deg); } 15.25% { transform: rotate(0deg); } 16.95% { transform: rotate(0deg); } 18.64% { transform: rotate(0deg); } 20.34% { transform: rotate(0deg); } 22.03% { transform: rotate(0deg); } 23.73% { transform: rotate(0deg); } 25.42% { transform: rotate(0deg); } 27.12% { transform: rotate(0deg); } 28.81% { transform: rotate(0deg); } 30.51% { transform: rotate(0deg); } 32.2% { transform: rotate(0deg); } 33.9% { transform: rotate(0deg); } 35.59% { transform: rotate(0deg); } 37.29% { transform: rotate(0deg); } 38.98% { transform: rotate(0deg); } 40.68% { transform: rotate(0deg); } 42.37% { transform: rotate(5.3deg); } 44.07% { transform: rotate(13.4deg); } 45.76% { transform: rotate(20.6deg); } 47.46% { transform: rotate(29deg); } 49.15% { transform: rotate(36.5deg); } 50.85% { transform: rotate(42.6deg); } 52.54% { transform: rotate(48.8deg); } 54.24% { transform: rotate(54.2deg); } 55.93% { transform: rotate(59.4deg); } 57.63% { transform: rotate(63.2deg); } 59.32% { transform: rotate(67.2deg); } 61.02% { transform: rotate(70.8deg); } 62.71% { transform: rotate(73.8deg); } 64.41% { transform: rotate(76.2deg); } 66.1% { transform: rotate(78.7deg); } 67.8% { transform: rotate(80.6deg); } 69.49% { transform: rotate(82.6deg); } 71.19% { transform: rotate(83.7deg); } 72.88% { transform: rotate(85deg); } 74.58% { transform: rotate(86.3deg); } 76.27% { transform: rotate(87deg); } 77.97% { transform: rotate(87.7deg); } 79.66% { transform: rotate(88.3deg); } 81.36% { transform: rotate(88.6deg); } 83.05% { transform: rotate(89.2deg); } 84.75% { transform: rotate(89.2deg); } 86.44% { transform: rotate(89.5deg); } 88.14% { transform: rotate(89.9deg); } 89.83% { transform: rotate(89.7deg); } 91.53% { transform: rotate(90.1deg); } 93.22% { transform: rotate(90.2deg); } 94.92% { transform: rotate(90.1deg); } 96.61% { transform: rotate(90deg); } 98.31% { transform: rotate(89.8deg); } 100% { transform: rotate(90deg); } } @keyframes spectrum-fill-mask-2 { 0% { transform: rotate(180deg); } 1.69% { transform: rotate(180deg); } 3.39% { transform: rotate(180deg); } 5.08% { transform: rotate(180deg); } 6.78% { transform: rotate(180deg); } 8.47% { transform: rotate(180deg); } 10.17% { transform: rotate(179.2deg); } 11.86% { transform: rotate(164deg); } 13.56% { transform: rotate(151.8deg); } 15.25% { transform: rotate(140.8deg); } 16.95% { transform: rotate(130.3deg); } 18.64% { transform: rotate(120.4deg); } 20.34% { transform: rotate(110.8deg); } 22.03% { transform: rotate(101.6deg); } 23.73% { transform: rotate(93.5deg); } 25.42% { transform: rotate(85.4deg); } 27.12% { transform: rotate(78.1deg); } 28.81% { transform: rotate(71.2deg); } 30.51% { transform: rotate(89.1deg); } 32.2% { transform: rotate(105.5deg); } 33.9% { transform: rotate(121.3deg); } 35.59% { transform: rotate(135.5deg); } 37.29% { transform: rotate(148.4deg); } 38.98% { transform: rotate(161deg); } 40.68% { transform: rotate(173.5deg); } 42.37% { transform: rotate(180deg); } 44.07% { transform: rotate(180deg); } 45.76% { transform: rotate(180deg); } 47.46% { transform: rotate(180deg); } 49.15% { transform: rotate(180deg); } 50.85% { transform: rotate(180deg); } 52.54% { transform: rotate(180deg); } 54.24% { transform: rotate(180deg); } 55.93% { transform: rotate(180deg); } 57.63% { transform: rotate(180deg); } 59.32% { transform: rotate(180deg); } 61.02% { transform: rotate(180deg); } 62.71% { transform: rotate(180deg); } 64.41% { transform: rotate(180deg); } 66.1% { transform: rotate(180deg); } 67.8% { transform: rotate(180deg); } 69.49% { transform: rotate(180deg); } 71.19% { transform: rotate(180deg); } 72.88% { transform: rotate(180deg); } 74.58% { transform: rotate(180deg); } 76.27% { transform: rotate(180deg); } 77.97% { transform: rotate(180deg); } 79.66% { transform: rotate(180deg); } 81.36% { transform: rotate(180deg); } 83.05% { transform: rotate(180deg); } 84.75% { transform: rotate(180deg); } 86.44% { transform: rotate(180deg); } 88.14% { transform: rotate(180deg); } 89.83% { transform: rotate(180deg); } 91.53% { transform: rotate(180deg); } 93.22% { transform: rotate(180deg); } 94.92% { transform: rotate(180deg); } 96.61% { transform: rotate(180deg); } 98.31% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } @keyframes spectrum-fills-rotate { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } } .spectrum-ProgressCircle { display: inline-block; width: var(--spectrum-progresscircle-m-width, var(--spectrum-global-dimension-size-400)); height: var(--spectrum-progresscircle-m-height, var(--spectrum-global-dimension-size-400)); position: relative; direction: ltr; transform: translate3d(0, 0, 0); } .spectrum-ProgressCircle-track { box-sizing: border-box; width: var(--spectrum-progresscircle-m-width, var(--spectrum-global-dimension-size-400)); height: var(--spectrum-progresscircle-m-height, var(--spectrum-global-dimension-size-400)); border-style: solid; border-width: var(--spectrum-progresscircle-m-border-size); border-radius: var(--spectrum-progresscircle-m-width, var(--spectrum-global-dimension-size-400)); } [dir="ltr"] .spectrum-ProgressCircle-fills { left: 0; } [dir="rtl"] .spectrum-ProgressCircle-fills { right: 0; } .spectrum-ProgressCircle-fills { position: absolute; top: 0; width: 100%; height: 100%; } .spectrum-ProgressCircle-fill { box-sizing: border-box; width: var(--spectrum-progresscircle-m-width, var(--spectrum-global-dimension-size-400)); height: var(--spectrum-progresscircle-m-height, var(--spectrum-global-dimension-size-400)); border-style: solid; border-width: var(--spectrum-progresscircle-m-border-size); border-radius: var(--spectrum-progresscircle-m-width, var(--spectrum-global-dimension-size-400)); } .spectrum-ProgressCircle-fillMask1, .spectrum-ProgressCircle-fillMask2 { width: 50%; height: 100%; transform-origin: 100% center; transform: rotate(180deg); overflow: hidden; position: absolute; } .spectrum-ProgressCircle-fillSubMask1, .spectrum-ProgressCircle-fillSubMask2 { width: 100%; height: 100%; transform-origin: 100% center; overflow: hidden; transform: rotate(-180deg); } .spectrum-ProgressCircle-fillMask2 { transform: rotate(0deg); } .spectrum-ProgressCircle--small { width: var(--spectrum-progresscircle-s-width, var(--spectrum-global-dimension-size-200)); height: var(--spectrum-progresscircle-s-height, var(--spectrum-global-dimension-size-200)); } .spectrum-ProgressCircle--small .spectrum-ProgressCircle-track { width: var(--spectrum-progresscircle-s-width, var(--spectrum-global-dimension-size-200)); height: var(--spectrum-progresscircle-s-height, var(--spectrum-global-dimension-size-200)); border-style: solid; border-width: var(--spectrum-progresscircle-s-border-size); border-radius: var(--spectrum-progresscircle-s-width, var(--spectrum-global-dimension-size-200)); } .spectrum-ProgressCircle--small .spectrum-ProgressCircle-fill { width: var(--spectrum-progresscircle-s-width, var(--spectrum-global-dimension-size-200)); height: var(--spectrum-progresscircle-s-height, var(--spectrum-global-dimension-size-200)); border-style: solid; border-width: var(--spectrum-progresscircle-s-border-size); border-radius: var(--spectrum-progresscircle-s-width, var(--spectrum-global-dimension-size-200)); } .spectrum-ProgressCircle--large { width: var(--spectrum-progresscircle-l-width, var(--spectrum-global-dimension-size-800)); height: var(--spectrum-progresscircle-l-height, var(--spectrum-global-dimension-size-800)); } .spectrum-ProgressCircle--large .spectrum-ProgressCircle-track { width: var(--spectrum-progresscircle-l-width, var(--spectrum-global-dimension-size-800)); height: var(--spectrum-progresscircle-l-height, var(--spectrum-global-dimension-size-800)); border-style: solid; border-width: var(--spectrum-progresscircle-l-border-size, var(--spectrum-global-dimension-size-50)); border-radius: var(--spectrum-progresscircle-l-width, var(--spectrum-global-dimension-size-800)); } .spectrum-ProgressCircle--large .spectrum-ProgressCircle-fill { width: var(--spectrum-progresscircle-l-width, var(--spectrum-global-dimension-size-800)); height: var(--spectrum-progresscircle-l-height, var(--spectrum-global-dimension-size-800)); border-style: solid; border-width: var(--spectrum-progresscircle-l-border-size, var(--spectrum-global-dimension-size-50)); border-radius: var(--spectrum-progresscircle-l-width, var(--spectrum-global-dimension-size-800)); } .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills { will-change: transform; transform: translateZ(0); animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) spectrum-fills-rotate; transform-origin: center; } .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1 { will-change: transform; transform: translateZ(0); animation: 1s infinite linear spectrum-fill-mask-1; } .spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2 { will-change: transform; transform: translateZ(0); animation: 1s infinite linear spectrum-fill-mask-2; } .spectrum-ProgressCircle-track { border-color: var(--spectrum-progresscircle-m-track-color, var(--spectrum-alias-track-color-default)); } .spectrum-ProgressCircle-fill { border-color: var(--spectrum-progresscircle-m-track-fill-color, var(--spectrum-semantic-informative-color-default)); } .spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track { border-color: var( --spectrum-progresscircle-m-over-background-track-color ); } .spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill { border-color: var( --spectrum-progresscircle-m-over-background-track-fill-color ); } .spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track { border-color: var( --spectrum-progresscircle-m-over-background-track-color ); } .spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill { border-color: var( --spectrum-progresscircle-m-over-background-track-fill-color ); } /* Copyright 2019 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ :root { --gradient-height-offset: 284px; --chartWrapperMaxWidth: calc(1000px - 48px); --gradient-height: calc(100vh - var(--gradient-height-offset)); --colors-height: var(--gradient-height); --color-size: 32px; --colors-wrapper-height: calc(100vh - var(--gradient-height-offset) - var(--color-size)); --gradient-slider-height: var(--gradient-height); --slider-thumb-size: 8px; --header-height: 58px; --panelBorder: var(--spectrum-global-color-gray-300, #e1e1e1); --panelBackground: var(--spectrum-global-color-gray-100, #f5f5f5); --theme-background: var(--spectrum-global-color-gray-100, #f5f5f5); --toast-offset: -16px; --toast-offset-bounce-up: calc(var(--toast-offset) - 5px); --toast-offset-bounce-up-light: calc(var(--toast-offset) - 4px); --toast-offset-bounce-down: -17px; --spectrum-ease-out: cubic-bezier(0, 0, 0.40, 1); --spectrum-ease-in-out: cubic-bezier(0.45, 0, 0.40, 1); --spectrum-ease-in: cubic-bezier(0.50, 0, 1, 1); --spectrum-fieldlabel-text-size: var(--spectrum-global-dimension-font-size-75, 12px); --spectrum-fieldlabel-text-font-weight: 400; --spectrum-fieldlabel-text-line-height: 1.3; --spectrum-global-font-weight-bold: 600; --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); --spectrum-heading-m-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); --spectrum-heading-l-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); --spectrum-heading-xl-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); --spectrum-heading-xxl-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); --spectrum-body-s-strong-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-body-m-strong-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-body-l-strong-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-body-xl-strong-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-global-font-weight-bold); --spectrum-alias-focus-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); --headerBackground: var(--spectrum-global-color-gray-50); --panelBackground: var(--spectrum-global-color-gray-75); --panelBorder: var(--spectrum-global-color-gray-300); } @media (prefers-color-scheme: light) { .spectrum { --theme-background: var(--spectrum-global-color-gray-100, #f5f5f5); --headerBackground: var(--spectrum-global-color-gray-50, #ffffff); --panelBackground: var(--spectrum-global-color-gray-75, #f5f5f5); --panelBorder: var(--spectrum-global-color-gray-300); --translucentBorder: rgba(0, 0, 0, 0.4); --translucentLightBorder: rgba(0, 0, 0, 0.1); --sliderThumbColor: rgba(0, 0, 0, 0.3); --transparentGray900: rgba(0, 0, 0, 0.5); } } @media (prefers-color-scheme: dark) { .spectrum { --theme-background: var(--spectrum-global-color-gray-50, #1d1d1d); --headerBackground: var(--spectrum-global-color-gray-100); --panelBackground: var(--spectrum-global-color-gray-100); --panelBorder: var(--spectrum-global-color-gray-50); --translucentBorder: rgba(255, 255, 255, 0.4); --translucentLightBorder: rgba(255, 255, 255, 0.15); --sliderThumbColor: rgba(255, 255, 255, 0.3); --transparentGray900: rgba(255, 255, 255, 0.5); } } body { margin: 0; padding: 0; } body, .spectrum, .spectrum-ActionButton, .spectrum-Textfield-input, .spectrum-LogicButton, .spectrum-ClearButton, .spectrum-Button, .spectrum-Picker, .spectrum-Heading, .spectrum-Body { font-family: source-sans-pro, source-sans, sans-serif; } .spectrum-Body--detail { color: var(--spectrum-global-color-gray-700); } .spectrum-Code { font-family: Menlo, Monaco, "Courier New", monospace; } .appFrame { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: auto; grid-template-rows: var(--header-height) auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "header" "default"; } .appFramePanels { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: 304px auto 388px; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "leftPanel main rightPanel"; } .appFramePanel { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "main"; } .appFramePanelLeft { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: 388px auto; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "leftPanel main"; } .appFramePanelLeft--large { grid-template-columns: 420px auto; } .appFramePanelRight { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: auto 388px; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "main rightPanel"; } .appFramePanelRight--large { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: auto; grid-template-rows: 1fr 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "main" "rightPanel"; } @media screen and (min-width: 1065px) { .appFramePanelRight--large { grid-template-columns: 50% 50%; grid-template-rows: auto; grid-template-areas: "main rightPanel"; } } .appFrameSideNav { margin: 0; padding: 0; height: calc(100vh - var(--header-height)); overflow: hidden; display: grid; grid-template-columns: 240px auto; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "leftPanel main"; } /* Tabs aren't inheriting all styles properly. Remapping here */ .spectrum-Tabs { padding: 0; } .spectrum-Tabs-item { color: var(--spectrum-tabs-text-color, var(--spectrum-alias-label-text-color)); } .spectrum-Tabs-item a.spectrum-Tabs-itemLabel { color: inherit; text-decoration: none; } .spectrum-Tabs-item a.spectrum-Tabs-itemLabel:hover, .spectrum-Tabs-item a.spectrum-Tabs-itemLabel:visited, .spectrum-Tabs-item a.spectrum-Tabs-itemLabel:active, .spectrum-Tabs-item a.spectrum-Tabs-itemLabel:focus { text-decoration: none; color: inherit; } .spectrum-Tabs-item.is-selected { color: var(--spectrum-tabs-text-color-selected, var(--spectrum-alias-heading-text-color)); border-bottom: 2px solid var(--spectrum-tabs-selection-indicator-color, var(--spectrum-global-color-gray-900)); } .spectrum-Tabs-selectionIndicator { display: none; /* simplifying design to speed up development */ } .spectrum-Tabs--compact .spectrum-Tabs-item { height: 32px; } .sideNavContent { flex-direction: column; align-items: flex-start; max-width: 1000px; width: 100%; margin: 0 auto; top: 0; } .sortIcon { transform: rotate(90deg); width: 10px; height: 10px; } .spectrum-Panel { position: relative; display: flex; flex-direction: column; background-color: var(--panelBackground); min-width: calc(var(--spectrum-global-dimension-size-3000) + 32px); border-right: 2px solid var(--panelBorder); padding: 0; overflow: auto; } .spectrum-Panel--small { width: var(--spectrum-global-dimension-size-3000); min-width: var(--spectrum-global-dimension-size-3000); } .spectrum-Panel--right { max-height: calc(100vh - 56px); grid-area: rightPanel; border-right: 0; border-left: 2px solid var(--panelBorder); } .spectrum-Panel--custom { flex-direction: row; min-width: 160px; } .spectrum-Panel--spaced { justify-content: space-between; } .spectrum-Panel-Item { padding: var(--spectrum-global-dimension-size-200); } .spectrum-Panel-Item--overflow { overflow: auto; flex-grow: 2; } .spectrum-Panel-Item--overflow ~ .spectrum-Panel-Item--overflow { max-height: 50%; } .spectrum-Panel-Item--bottomPadding { padding-bottom: 32px; } .spectrum-Panel-Item--row { display: flex; flex-direction: row; } .spectrum-Panel-Item--noPadding { padding: 0; overflow-y: auto; } .spectrum-Panel-Item--noPadding ~ .spectrum-Panel-Item--noPadding { flex-shrink: 0; } .spectrum-Panel-Item--subItem { padding: 0 2px; width: 100%; } .spectrum-Panel-Item--subItem ~ .spectrum-Panel-Item.spectrum-Panel-Item--subItem { border-top: 1px solid var(--panelBorder); } .spectrum-Panel-Item .spectrum-Panel-Item-Title { display: flex; padding-bottom: var(--spectrum-global-dimension-size-150); } .spectrum-Panel-ContentWrapper { height: 100%; justify-content: space-between; display: flex; flex-direction: column; } .spectrum-Panel-Title { display: flex; justify-content: space-between; align-items: center; } .spectrum-Panel-Title--spaced { margin-bottom: var(--spectrum-global-dimension-size-100); } .spectrum-Panel-Title + .spectrum-Form-item, .spectrum-Panel-Title + .spectrum-Form { margin-top: 8px; } .spectrum-Panel-Title + .spectrum-Panel-Item { padding-top: 0px; } .spectrum-Panel-Item ~ .spectrum-Panel-Item { border-top: 2px solid var(--panelBorder); } .spectrum-Panel-Item--row { display: flex; flex-direction: row; } .spectrum-Panel-Item--custom { border: 0; display: flex; flex-direction: row; min-width: 140px; } .spectrum-Panel-Title ~ #colorOutputs { margin-top: 8px; } .spectrum-Panel-Title .spectrum-Form-item { margin-top: -7px; } #colorConfigPanel { display: none; flex-direction: column; justify-content: space-between; position: absolute; background-color: var(--panelBackground); width: 100%; height: calc(100vh - 58px); z-index: 2; } #inputs { margin-bottom: 1em; } .wrapper { display: flex; flex-direction: row; width: 100%; height: calc(100vh - var(--spectrum-global-dimension-size-400)); overflow: hidden; } #colorScale-wrapper { margin-top: 8px; margin-right: 18px; margin-bottom: 8px; width: 100%; height: 56px; display: block; position: relative; } #colorScale { display: flex; flex-direction: column; height: 56px; width: 100%; border-radius: var(--spectrum-alias-border-radius-regular); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.25); background-image: linear-gradient(0deg, black, white); background-repeat: no-repeat; } .colorScale-Item { height: 100%; width: 100%; align-self: stretch; } #colorWrapper { display: none; height: var(--colors-wrapper-height); width: 48px; margin-left: 8px; align-self: flex-end; position: relative; } #colorSlider-wrapper { /* temporarily until getting this to work */ display: none; position: relative; padding: 0px 0px; margin-top: -1px; justify-content: center; align-items: center; width: 54px; height: var(--gradient-slider-height); left: 0; bottom: var(--gradient-slider-height); } .colorSlider { -webkit-appearance: none; width: var(--gradient-slider-height); height: 55px; transform: rotate(-90deg); padding: 0; margin: 0; background-color: transparent; position: absolute; border: none; box-shadow: none; border-radius: 3px; } .colorSlider::-webkit-slider-thumb { width: var(--slider-thumb-size); height: var(--slider-thumb-size); background: #ffffff; border-radius: 32px; box-shadow: 0 0 1px 1px var(--sliderThumbColor); -webkit-appearance: none; appearance: none; } .colorSlider::-moz-range-thumb { width: var(--slider-thumb-size); height: var(--slider-thumb-size); background: #ffffff; border-radius: 32px; box-shadow: 0 0 1px 1px var(--sliderThumbColor); } .spectrum-Slider { /* THUMB */ /* All the same stuff for Firefox */ /* All the same stuff for IE */ /* TRACK */ } .spectrum-Slider input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } .spectrum-Slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } .spectrum-Slider input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } .spectrum-Slider input[type=range]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } .spectrum-Slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 16px; background-color: var(--spectrum-global-color-gray-100); margin: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) 0 0 calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2); border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick)); border-style: solid; border-color: var(--spectrum-slider-m-handle-border-color, var(--spectrum-global-color-gray-700)); border-radius: var(--spectrum-slider-handle-border-radius, var(--spectrum-alias-border-radius-medium)); transition: border-width var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; outline: none; cursor: grab; margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ } .spectrum-Slider input[type=range]:focus::-webkit-slider-thumb { background-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); border-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; } .spectrum-Slider input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; background-color: var(--spectrum-global-color-gray-100); margin: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) 0 0 calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2); border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick)); border-style: solid; border-color: var(--spectrum-slider-m-handle-border-color, var(--spectrum-global-color-gray-700)); border-radius: var(--spectrum-slider-handle-border-radius, var(--spectrum-alias-border-radius-medium)); transition: border-width var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; outline: none; cursor: grab; } .spectrum-Slider input[type=range]:focus::-moz-range-thumb { background-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); border-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; } .spectrum-Slider input[type=range]::-ms-thumb { box-sizing: border-box; width: 16px; height: 16px; background-color: var(--spectrum-global-color-gray-100); margin: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) 0 0 calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2); border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick)); border-style: solid; border-color: var(--spectrum-slider-m-handle-border-color, var(--spectrum-global-color-gray-700)); border-radius: var(--spectrum-slider-handle-border-radius, var(--spectrum-alias-border-radius-medium)); transition: border-width var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; outline: none; cursor: grab; } .spectrum-Slider input[type=range]:focus::-ms-thumb { background-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); border-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; } .spectrum-Slider input[type=range]::-webkit-slider-runnable-track { width: 100%; height: var(--spectrum-slider-track-height, var(--spectrum-alias-border-size-thick)); box-sizing: border-box; z-index: 1; background-color: var(--spectrum-global-color-gray-300); top: calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2); margin-top: calc(var(--spectrum-slider-fill-track-height, var(--spectrum-alias-border-size-thick)) / -2); pointer-events: none; padding: 0 var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) 0 0; margin-left: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2 * -1); } .spectrum-Slider input[type=range]:focus::-webkit-slider-runnable-track { background: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); } .spectrum-Slider input[type=range]::-moz-range-track { width: 100%; height: var(--spectrum-slider-track-height, var(--spectrum-alias-border-size-thick)); box-sizing: border-box; z-index: 1; background-color: var(--spectrum-global-color-gray-300); top: calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2); margin-top: calc(var(--spectrum-slider-fill-track-height, var(--spectrum-alias-border-size-thick)) / -2); pointer-events: none; padding: 0 var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) 0 0; margin-left: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2 * -1); } .spectrum-Slider input[type=range]::-ms-track { width: 100%; height: var(--spectrum-slider-track-height, var(--spectrum-alias-border-size-thick)); box-sizing: border-box; z-index: 1; background-color: var(--spectrum-global-color-gray-300); top: calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2); margin-top: calc(var(--spectrum-slider-fill-track-height, var(--spectrum-alias-border-size-thick)) / -2); pointer-events: none; padding: 0 var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) 0 0; margin-left: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2 * -1); background: transparent; border-color: transparent; border-width: 2px 0; color: transparent; } .spectrum-Slider input[type=range]::-ms-fill-lower { background-color: var(--spectrum-global-color-gray-300); } .spectrum-Slider input[type=range]:focus::-ms-fill-lower { background-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); } .spectrum-Slider input[type=range]::-ms-fill-upper { background-color: var(--spectrum-global-color-gray-300); } .spectrum-Slider input[type=range]:focus::-ms-fill-upper { background-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); } .spectrum-Form, .spectrum-Form-item { position: relative; } .spectrum-Form { display: flex; flex-direction: column; margin: 0; } .spectrum-Form .spectrum-Slider { padding-right: 8px; } .spectrum-Form--row { display: flex; flex-direction: row; align-items: flex-end; } .spectrum-Form--row .spectrum-Form-item ~ .spectrum-Form-item { margin-left: 16px; } .spectrum-Form--row + .spectrum-Form--row { margin-top: 6px; } .spectrum-Form--spaced .spectrum-Form-item + .spectrum-Form-item { margin-top: 8px; } .spectrum-Form--spacious { margin-bottom: var(--spectrum-global-dimension-size-200); } .spectrum-Form--topAlign { align-items: flex-start; } .spectrum-Form-item { display: flex; flex-direction: column; } .spectrum-Form-item--row { display: flex; flex-direction: row; } .spectrum-Form-item--row .spectrum-Slider + .spectrum-Slider { margin-left: 24px; } main { grid-area: main; display: flex; flex-direction: column; height: calc(100vh - 56px); overflow: hidden; } main#main_diverging, main#main_sequential { overflow: auto; } #contentTabWrapper { display: flex; height: 47px; min-height: fit-content; padding: 0 16px; border-bottom: 2px solid var(--panelBorder); } #contentTabWrapper .spectrum-Tabs { margin-bottom: -4px; } #demoWrapper { padding: 0; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: calc(100vh - 56px); overflow: auto; } #parameterWrapper, #cssWrapper, #tokensWrapper { flex-direction: column; padding: var(--spectrum-global-dimension-size-200); align-items: flex-end; max-height: calc(100vh - 150px); justify-content: flex-start; } .a11y-Tabs-content { flex-direction: column; padding: var(--spectrum-global-dimension-size-200); align-items: flex-start; max-height: calc(100vh - 136px); justify-content: flex-start; } .spectrum-Code { line-height: 1.3; } h1 { margin-bottom: 0px; } p { margin-top: 0px; } .demo, .demoInverted { width: 100%; padding: 8px 40px 32px; align-self: center; } .spectrum-Heading1 { color: inherit; } .spectrum-Textfield--readonly, .spectrum-Textfield .is-readonly { padding-left: var(--spectrum-global-dimension-size-400); background-color: var(--spectrum-alias-background-color-default); border: none; color: var(--spectrum-global-color-gray-700); } .colorOutput-field { position: relative; margin-bottom: 16px; } #colorOutput { height: 74px; width: 100%; resize: none; } #colorOutputs { max-height: calc(100vh - var(--header-height) - 258px); overflow: auto; } .ratio-Swatch { position: absolute; z-index: 20; margin-top: var(--spectrum-global-dimension-size-100); margin-left: var(--spectrum-global-dimension-size-100); border-radius: 2px; height: var(--spectrum-global-dimension-size-200); width: var(--spectrum-global-dimension-size-200); } .colorField { display: flex; flex-direction: row; align-items: center; min-width: 40px; margin-bottom: 8px; } .colorField input[type=color] { margin-right: 8px; } .colorField textarea { height: 64px; } .colorField--horizontal { flex-direction: row; } .colorField--horizontal .spectrum-FieldLabel { margin-top: 4px; margin-left: 8px; } .spectrum-Fieldlabel--sizeM { font-size: 12px; } #variableColorField { margin-left: 24px; } .variableColor-wrapper { display: flex; flex-direction: row; } #keyColor-wrapper { position: relative; display: flex; flex-direction: row; padding: 2px; /* To ensure focus rings are visible */ margin: -2px; flex-wrap: wrap; min-height: 40px; max-height: 88px; overflow: auto; } #bulkColors { width: 100%; height: 80px; resize: none; margin-bottom: 16px; } a:focus { outline: none; box-shadow: 0 0 0 2px var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); border-radius: var(--spectrum-alias-border-radius-regular); } .spectrum-Button.demoButton, .spectrum-Button.demoButtonInverted { background-color: transparent; } .spacing-100 { margin-top: 8px; } .keyColor, .ratio-Item { position: relative; display: flex; flex-direction: row; min-height: fit-content; margin-bottom: var(--spectrum-global-dimension-size-100); margin-right: var(--spectrum-global-dimension-size-100); } .ratio-Field { padding-left: var(--spectrum-global-dimension-size-400); width: 13ch; } .luminosity-Field { width: 10ch; } #toggleMetrics { margin-top: -8px; margin-right: -8px; } .colorOutputBlock { display: flex; justify-content: space-between; padding: 10px 16px 2px; min-height: var(--spectrum-global-dimension-size-400); border-radius: 0px; } .colorOutputBlock:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; } .colorOutputBlock:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .w3c-guideline { margin-top: 8px; } .w3c-guideline + .w3c-guideline { margin-top: 12px; margin-bottom: 4px; } .spectrum-Subheading { color: var(--spectrum-global-color-gray-700); } .colorTabsWrapper { flex-direction: column; padding: var(--spectrum-global-dimension-size-200); overflow: auto; } .sequentialTabsWrapper, .divergingTabsWrapper, .qualitativeTabsWrapper { padding-top: var(--spectrum-global-dimension-size-200); } #functionParams, .themeOutputParams { background-color: var(--spectrum-global-color-gray-50); border: 1px solid var(--spectrum-global-color-gray-200); border-radius: var(--spectrum-alias-border-radius-medium); padding: var(--spectrum-global-dimension-size-200); margin: 0; overflow: auto; } #functionParams pre, .themeOutputParams pre { margin: 0; border: none; padding: 0; } .themeOutputParams { max-height: calc(100vh - 198px); overflow: auto; display: block; margin-top: var(--spectrum-global-dimension-size-100); width: calc(100% - var(--spectrum-global-dimension-size-400)); justify-self: flex-start; } .themeOutputParams + .themeOutputParams { margin-top: var(--spectrum-global-dimension-size-200); } .spectrum-Panel-Item .themeOutputParams, #sequentialOutputWrapper .themeOutputParams, #divergingOutputWrapper .themeOutputParams { border-radius: var(--spectrum-alias-border-radius-regular); } #panelColorScaleOutput { max-height: calc(100vh - 568px); } #contrastConfigs, #ratioInput-wrapper { flex-direction: column; width: 100%; } #contrastConfigs, #sequentialConfigs { max-height: 100%; margin-top: 6px; padding: 2px; /* This ensures focus rings are visible */ overflow: auto; } #sequentialConfigs { display: none; } #ratioInput-wrapper { overflow: auto; padding-left: var(--spectrum-global-dimension-size-50); display: flex; margin-bottom: var(--spectrum-global-dimension-size-100); height: calc(100vh - 200px); min-height: 280px; transition: 0.1s ease-out opacity; } .demoItem { display: flex; flex-direction: row; justify-content: center; min-height: fit-content; } .demoItem:first-of-type { margin-top: auto; } .demoItem:last-of-type { margin-bottom: auto; } #libraryDropdown { width: 116px; } #modeDropdown { width: 120px; } #modeDropdown ~ .spectrum-ActionButton { margin-left: 8px; } #themeBaseDropdown { width: 200px; } #addRatio, #addColor { justify-content: center; } #addRatio > .spectrum-ActionButton-label, #addColor > .spectrum-ActionButton-label { width: auto; } #colorspaceLabel { text-transform: capitalize; } #scaleConfigs { display: flex; flex-direction: column; padding-top: 8px; } .tabcontent { display: none; } .paneltabcontent { flex-direction: column; height: calc(100% - 47px); overflow-y: auto; } .tabDetailContent { display: none; flex-direction: column; padding: var(--spectrum-global-dimension-size-200) 0; overflow-y: auto; overflow-x: clip; width: var(--chartWrapperMaxWidth); } .tabHeader { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #chart3dAlert { position: absolute; bottom: 16px; width: calc(100vw - 624px); } .spectrum-Picker--quiet { min-width: var(--spectrum-dropdown-quiet-min-width, 200px); } #themeWrapper { display: grid; margin: 0; padding: 0; overflow: hidden; grid-template-columns: auto; grid-template-rows: 128px calc(100vh - var(--header-height) - 128px); grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "themeConfig" "themeDefault"; background-color: var(--panelBackground); } .themeConfigWrapper { padding: 8px 16px 16px; grid-area: themeConfig; border-bottom: 2px solid var(--panelBorder); } .themeTitle { display: flex; justify-content: space-between; padding: 8px 0; } .themeTitle .spectrum-Form--row { margin-top: -7px; margin-bottom: 4px; } .themeTitle .spectrum-Form-item + .spectrum-ButtonGroup { margin-left: 8px; } .themeConfig { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } .themeConfig .spectrum-Form ~ .spectrum-ButtonGroup { margin-left: 16px; border-left: 1px solid #e1e1e1; padding-left: 16px; } #themeColorWrapper { padding: 0 16px 16px; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; max-height: calc(100vh - 154px); align-items: center; overflow-y: auto; overflow-x: hidden; transition: opacity 0.2s ease-in-out; } .themeColor_item { display: inline-flex; align-items: center; border-radius: var(--spectrum-alias-border-radius-regular); width: 100%; background-color: var(--spectrum-global-color-gray-50); border: 1px solid var(--spectrum-global-color-gray-300); overflow: hidden; padding: 0 var(--spectrum-global-dimension-size-200) 0 0; flex-shrink: 0; } .themeColor_item .spectrum-Picker { width: 120px; } .themeColor_item > .spectrum-Form-item--row { justify-content: space-between; width: 100%; } .panelBackButtonLabel { display: inline-flex; margin-top: calc(var(--spectrum-global-dimension-size-50) + 1px); margin-left: var(--spectrum-global-dimension-size-100); } .pickerMode { width: 16ch; } .pickerCompliance { width: 10ch; } .pickerCvdSim { width: 20ch; } .spectrum-Textfield--fullwidth { width: 100%; } .spectrum-Picker#themeBase { width: 104px; } .spectrum-Picker#themeWCAG { width: 150px; } [dir=ltr] .spectrum-Picker { padding: 0 8px; height: 32px; border-width: 1px; border-radius: var(--spectrum-alias-border-radius-regular); } .spectrum-Picker-icon { position: absolute; right: var(--spectrum-global-dimension-size-150); top: 4px; margin-top: calc(var(--spectrum-icon-chevron-down-medium-height, var(--spectrum-global-dimension-size-75)) / -2); } .themeColor_item ~ .themeColor_item { margin-top: var(--spectrum-global-dimension-size-100); } .themeColor_subheading { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 0 8px; } .gradientSwatch { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; border-top-left-radius: var(--spectrum-global-dimension-size-50); border-bottom-left-radius: var(--spectrum-global-dimension-size-50); margin-right: var(--spectrum-global-dimension-size-100); overflow: clip; } .gradientSwatch .gradient { height: 100%; width: 100%; } .themeColor_gradient { position: relative; display: flex; align-items: center; flex-direction: row; flex-shrink: 0; border-radius: var(--spectrum-alias-border-radius-regular); height: 72px; margin: 8px 0; width: calc(100% - var(--spectrum-global-dimension-size-400)); max-width: var(--chartWrapperMaxWidth); -webkit-transition: height 200ms; transition: height 200ms; } .themeColor_gradient .gradient { height: 100%; width: 100%; border-radius: var(--spectrum-alias-border-radius-medium); } .themeColor_gradient.is-large { height: 64px; -webkit-transition: height 200ms; transition: height 200ms; } .themeColor_gradient.is-hidden .gradient { display: none; } .themeColor_configs { display: flex; height: auto; flex-direction: column; align-items: flex-start; -webkit-transition: height 100ms, padding 100ms; transition: height 100ms, padding 100ms; } .themeColor_configs .spectrum-Form-item { opacity: 1; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .themeColor_configs .spectrum-Form-item.is-hidden { opacity: 0; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .themeColor_configs .spectrum-ButtonGroup { justify-content: flex-end; flex-grow: 1; } .themeColor_configs .labelSpacer { padding-top: 16px; margin-top: 8px; } .themeColor_configs--row { flex-direction: row; padding-top: var(--spectrum-global-dimension-size-100); } .themeColor_configs--row .themeColor_subheading { width: 76px; flex-shrink: 0; } .themeColor_configs--row .keyColorsWrapper { margin-bottom: -2px; flex-grow: 1; } .themeColor_configs--row .keyColorActions { width: 107px; flex-grow: 0; } .keyColorsWrapper { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding: 2px; /* To ensure focus rings are visible */ margin: -2px -2px 8px -2px; flex-wrap: wrap; min-height: 32px; width: 100%; overflow: auto; } .themeColor_item .colorNameInput { width: 196px; margin-right: var(--spectrum-global-dimension-size-200); } #swatchesOutputs { width: 100%; } #themeOutputs { flex-direction: column; background-color: var(--theme-background); border-radius: var(--spectrum-alias-border-radius-medium); padding: 16px; overflow: auto; border: 1px solid var(--translucentLightBorder); width: auto; } #themeParams { white-space: break-spaces; } #colorMainContent-Wrapper { position: relative; width: 100%; } #colorMainContent { padding: var(--spectrum-global-dimension-size-200); } #colorDetails { display: none; flex-direction: column; padding: var(--spectrum-global-dimension-size-200); position: absolute; width: calc(100vw - 420px); align-items: center; height: 100%; background-color: var(--theme-background); z-index: 10; } #colorDetails .spectrum-Heading { width: 100%; max-width: var(--chartWrapperMaxWidth); } #colorMainContent-Wrapper { background-color: var(--theme-background); } .outputHeader { width: 100%; display: flex; justify-content: space-between; align-items: center; } #cvdModeDropdown { width: 30ch; } .spectrum-Tabs--fluid { height: calc(var(--spectrum-global-dimension-size-400) + 2px); margin-bottom: -2px; } .spectrum-Tabs--fluid .spectrum-Tabs-item { height: 100%; } .spectrum-Tabs--fluid .spectrum-Tabs-item.is-selected { margin-bottom: -2px; } .spectrum-Tabs--fluid .spectrum-Tabs-itemLabel { display: inline-flex; align-items: center; height: 100%; } .spectrum-Slider-controls:disabled::-webkit-slider-thumb { border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Slider-controls:disabled::-moz-range-thumb { border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-Slider-controls:disabled::-ms-thumb { border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } .spectrum-IllustratedMessage.is-hidden { display: none; } .gradientColorSwatchWrapper { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; height: 32px; -webkit-transition: height 200ms; transition: height 200ms; } .gradientColorSwatchWrapper.is-large { height: 64px; -webkit-transition: height 200ms; transition: height 200ms; } .gradientColorSwatchWrapper.is-hidden { display: none; } .gradientColorSwatch { height: 100%; width: 64px; margin-right: 8px; display: inline-flex; border-radius: var(--spectrum-alias-border-radius-regular); } #addFromURLinput { width: 100%; } .spectrum-Divider { -webkit-appearnce: none; -moz-appearance: none; appearance: none; outline: none; box-shadow: none; flex-shrink: 0; display: block; width: 100%; margin: 12px 0; } .spectrum-Divider--medium { height: 2px; border-radius: 2px; background-color: var(--spectrum-global-color-gray-300); } #contrastMethodDropdown { width: 116px; } /* Style formatting templates for columns of each Ratio Item and the labels above the ratio inputs */ .ratioGrid { display: grid; grid-template-columns: 90px 70px 58px 32px; column-gap: 8px; grid-template-areas: "ratio luminosity status actions"; } .ratioGrid .spectrum-Textfield { width: 100%; } .ratioGrid--fontSize { grid-area: fontSize; } .ratioGrid--fontWeight { grid-area: fontWeight; } .ratioGrid--ratio { grid-area: ratio; } .ratioGrid--luminosity { grid-area: luminosity; } .ratioGrid--status { grid-area: status; } .ratioGrid--swatchName { grid-area: swatchName; } .ratioGrid--actions { grid-area: actions; } .spectrum-Panel-Tabs { padding: 0 16px; height: 44px; border-bottom: 2px solid var(--panelBorder); } .spectrum-Content-Tabs { padding: 8px 16px 8px; height: 44px; display: flex; justify-content: space-between; align-items: center; } .spectrum-Content-Tabs--noPadding { padding: 0; } .spectrum-Detail-Tabs { height: 44px; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 32px); max-width: var(--chartWrapperMaxWidth); } .spectrum-Panel-SubTabs { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .spectrum-Panel-SubTabs .spectrum-Heading--sizeXXS { margin-bottom: 7px; } #typeScaleBase, #fontWeight, #typeScaleRatio, #typeScaleDecrement, #typeScaleIncrement, .typographyField { width: 10ch; } #sampleText { width: 360px; } #themeTitleInput { width: 360px; } #typeScaleSampleWrapper { white-space: nowrap; overflow: auto; color: var(--spectrum-global-color-gray-700); padding: var(--spectrum-global-dimension-size-200); } .typeScaleFontSize { display: inline-flex; width: 92px; } .sampleTextItem { color: var(--spectrum-global-color-gray-800); line-height: 1.3; margin-left: 12px; } .typeScale-Item { padding: var(--spectrum-global-dimension-size-200) 0; } .typeScale-Item + .typeScale-Item { border-top: 1px solid var(--panelBorder); } .spectrum-ColorCard { margin: 16px; background-color: var(--spectrum-global-color-gray-50); border: 1px solid var(--spectrum-global-color-gray-300); border-radius: var(--spectrum-alias-border-radius-regular); } .spectrum-ColorCard-content { padding: 16px; } #outputWrapper { flex-direction: column; overflow: auto; padding: 2px 16px; } #colorOutputWrapper { margin-top: 2px; } .spectrum-Picker-trigger { padding-right: 24px; text-overflow: ellipsis; } .spectrum-ActionButton { flex-shrink: 0; } .spectrum-ActionButton > .spectrum-Icon { transition: transform, 150ms; } .spectrum-ActionGroup--LeftAligned { align-items: flex-start; } .spectrum-ActionGroup--spaced { margin-bottom: var(--spectrum-global-dimension-size-200); } .spectrum-Panel-ActionGroup { margin-top: var(--spectrum-global-dimension-size-100); margin-bottom: var(--spectrum-global-dimension-size-100); } .themeSettingsSlider { width: 258px; } .is-hidden { display: none; } #colorWheelWrapper { display: flex; justify-content: center; flex-direction: column; padding: var(--spectrum-global-dimension-size-200); height: calc(100% - 160px); min-height: 514px; } #colorWheelWrapper, #colorScaleColorWheelWrapper, #sequentialColorWheelWrapper, #divergingColorWheelWrapper, #qualitativeColorWheelWrapper { position: relative; } .polarPathsWrapper { position: absolute; width: 100%; display: flex; top: 0; left: 0; justify-content: center; } .polarPathsWrapper svg { position: absolute; } /* Theme paths are hidden by default */ #colorWheelPaths { opacity: 0; transition: opacity 0.125s ease-in-out; } #colorWheel--controlsWrapper { width: 100%; display: flex; flex-direction: column; } #colorWheel { position: relative; margin: 0 auto var(--spectrum-global-dimension-size-200); } #sequentialColorWheel, #colorScaleColorWheel, #divergingColorWheel, #qualitativeColorWheel { position: relative; } #colorWheelLines, #colorScaleColorWheelLines, #sequentialColorWheelLines, #divergingColorWheelLines, #qualitativeColorWheelLines { position: absolute; left: 0; top: 0; } /* Hide the harmony lines in color detail panels because it adds more noise than value */ #colorScaleColorWheelLines { opacity: 0; } #colorWheelLinesWrapper { opacity: 1; transition: opacity 0.125s ease-in-out; } .colorDot, .colorScaleColorDot, .sequentialColorDot, .divergingColorDot, .qualitativeColorDot { width: 16px; height: 16px; border-radius: 100%; border: 2px solid #ffffff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(0, 0, 0, 0.5); position: absolute; } .luminosityDot { width: 8px; height: 8px; border-radius: 100%; background: #ffffff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 1px black; position: absolute; left: calc(50% - 6px); transition: top 0.2s ease-in-out; } #paletteChartsWrapper { display: flex; flex-direction: column; overflow: auto; } .paletteChartsGrid { width: 100%; max-width: 1000px; display: flex; flex-direction: row; justify-content: center; margin: 0 auto; } .paletteChartsGrid .chartsColumn--left { width: 320px; flex-shrink: 0; flex-grow: 0; justify-content: center; } .paletteChartsGrid .chartsColumn--right { margin-left: 32px; } #contrastChartsWrapper { display: flex; flex-direction: column; } .paletteContrastChartsGrid { width: calc(100% - 32px); max-width: 800px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; } #home { background-color: var(--spectrum-global-color-gray-75); } .sideNav-Wrapper { grid-area: leftPanel; } .home-Wrapper { grid-area: main; } .sideNav-Wrapper, .home-Wrapper { padding: var(--spectrum-global-dimension-size-600); } .sideNav-Wrapper .spectrum-Heading--sizeXXL, .home-Wrapper .spectrum-Heading--sizeXXL { margin-bottom: var(--spectrum-global-dimension-size-500); } .sideNav-Wrapper .spectrum-Body, .home-Wrapper .spectrum-Body { max-width: 70ch; } .home-Wrapper { overflow: auto; } .sideNav-toggle { display: none; gap: var(--spectrum-global-dimension-size-75); align-items: center; padding: var(--spectrum-global-dimension-size-100) var(--spectrum-global-dimension-size-200); } .sideNav-toggleIcon { display: inline-flex; flex-direction: column; justify-content: center; width: 20px; height: 16px; } .sideNav-toggleIcon span { display: block; height: 2px; background-color: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .sideNav-toggleIcon span:not(:last-child) { margin-bottom: 4px; } .sideNav-panel[hidden] { display: none !important; } .sideNav-Wrapper[data-collapsed=false] .sideNav-toggleIcon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sideNav-Wrapper[data-collapsed=false] .sideNav-toggleIcon span:nth-child(2) { opacity: 0; } .sideNav-Wrapper[data-collapsed=false] .sideNav-toggleIcon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media screen and (max-width: 959px) { .appFrame { height: auto; overflow: visible; } .appFrameSideNav { height: auto; overflow: visible; grid-template-columns: 1fr; grid-template-areas: "nav" "main"; } .sideNav-Wrapper { position: relative; padding: var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-400); grid-area: nav; } .home-Wrapper { overflow: visible; padding: var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-600); height: auto; } .sideNav-toggle { display: inline-flex; } .sideNav-panel { position: absolute; top: calc(100% + var(--spectrum-global-dimension-size-125)); left: 0; right: 0; background-color: var(--spectrum-global-color-gray-75); border-radius: var(--spectrum-global-dimension-size-75); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); padding: var(--spectrum-global-dimension-size-200) var(--spectrum-global-dimension-size-300); z-index: 50; } .sideNav-Wrapper[data-collapsed=true] .sideNav-panel { display: none; } .sideNav-panel .spectrum-SideNav-item + .spectrum-SideNav-item { margin-top: var(--spectrum-global-dimension-size-150); } } .home-Wrapper--float { display: flex; align-content: center; } .home-Wrapper--right { padding-top: 0; overflow-y: auto; } @media screen and (min-width: 1065px) { .home-Wrapper--right { padding-top: 52px; max-height: calc(100vh - 120px); } } .floating-wrapper { width: fit-content; margin: 0 auto 12vh; } .sideNavContent { display: none; } #homeButtonGroup { margin-bottom: var(--spectrum-global-dimension-size-400); } .spectrum-ButtonGroup .spectrum-Button + .spectrum-Button { margin-left: var(--spectrum-global-dimension-size-200); } .themeRampDot { width: 12px; height: 12px; background-color: #ffffff; position: absolute; z-index: 10; border-radius: 100%; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3); } .sideNavContent--splitView { display: grid; grid-template-columns: auto 160px; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "main aside"; position: relative; } .sideNavContent_main { grid-area: main; position: relative; } @media screen and (min-width: 800px) { .sideNavContent_main { margin-right: 32px; } } .sideNavContent_aside { grid-area: aside; position: relative; } .sideNavContent_aside .aside_links { position: fixed; margin: 0; padding: 16px; list-style: none; } .sideNavContent_aside .aside_links--sublist { list-style: none; display: flex; flex-direction: column; padding-left: var(--spectrum-global-dimension-size-150); } .sideNavContent_aside li { display: flex; flex-direction: column; } .sideNavContent_aside .spectrum-Link { padding-top: 2px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; margin-bottom: 0px; } .flex-row { display: flex; width: 100%; flex-grow: 2; flex-direction: row; } #chartsControls { margin: 0 auto; padding: 8px 0 16px; width: 100%; max-width: 500px; } .chartsMode { width: 32ch; } #luminosityGradient { position: relative; width: 64px; height: calc(100vh - 200px); min-height: 280px; background-image: linear-gradient(0deg, black, white); margin-right: var(--spectrum-global-dimension-size-100); flex-shrink: 0; border-radius: var(--spectrum-global-dimension-size-50); box-shadow: inset 0px 0px 1px var(--spectrum-global-color-gray-900); } #distribute { width: 14ch; display: inline-flex; } #swatchMainContent-Wrapper { overflow: auto; padding: 0; } .swatch-Tabs-content { width: calc(100% - 32px); flex-grow: 1; margin: 0 16px; } #swatchAttributeSwitch-Wrapper { margin-bottom: var(--spectrum-global-dimension-size-150); } .colorScaleType-badge { height: var(--spectrum-global-dimension-size-175); align-self: center; margin-right: var(--spectrum-global-dimension-size-100); } .typeSample { display: table-row; } .typeSample .themeOutputItem--Heading { vertical-align: middle; } .typeSample-Row { display: flex; flex-direction: row; align-items: baseline; } .typeSample-Row .typeSample-Swatch + .typeSample-Swatch { margin-left: 16px; } .scaleMainContent-Wrapper { padding: var(--spectrum-global-dimension-size-200); width: calc(100% - var(--spectrum-global-dimension-size-400)); max-width: var(--chartWrapperMaxWidth); margin: 0 auto; /* Temporarily hide these. Might add them back, might just remove */ } .scaleMainContent-Wrapper .themeColor_gradient { width: 100%; } .demoVisualizationWrapper { display: flex; flex-direction: column; max-height: calc(100vh - 260px); overflow-y: auto; } .demoVisualization--row { display: flex; flex-direction: row; flex-wrap: wrap; } .demoVisualization--row .demoVisualization { width: 260px; } .demoVisualization { position: relative; height: 272px; flex-shrink: 0; max-width: 600px; } .demoVisualization svg { position: absolute; } .demoVisualization--large { width: 600px; height: 310px; } #sequentialScatter { width: 350px; } .panel-ColorWheel { display: flex; justify-content: center; margin: var(--spectrum-global-dimension-size-200); } .panel-ColorWheel canvas { margin: 0 auto; } .tab-ColorWheel { display: flex; justify-content: center; margin-top: 32px; margin-bottom: 48px; } .tab-ColorWheel canvas { margin: 0 auto; } #pageLoader { height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; background-color: var(--spectrum-global-color-gray-100); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 1; transition: opacity 0.125s ease-in; } #ModelExampleImage { position: absolute; bottom: 16px; display: flex; justify-content: flex-end; align-items: flex-end; right: 8px; height: 200px; width: 200px; } #ModelExampleImage img.ModelImage { object-fit: contain; width: 100%; height: auto; } #distributeLightness, #diverging_mode { width: 18ch; } #divergingShift { width: 230px; } #qualitative_sampleColors-Wrapper { width: 378px; } #qualitative_sampleColors-Wrapper textfield { width: 100%; height: 90px; } #keepers { display: none; } .saveColorToKeepers { position: absolute; width: 100%; height: 100%; top: 0; left: 0; appearance: none; border: none; background: none; cursor: pointer; } .saveColorToKeepers svg { opacity: 0; transition: opacity ease-in 0.2s; fill: currentColor; } .saveColorToKeepers.showSvg svg { opacity: 1; } .saveColorToKeepers:hover svg, .saveColorToKeepers:focus svg, .saveColorToKeepers:active svg { transition: opacity ease-in 0.2s; opacity: 1; } #qualitative_selectedColors { display: flex; height: 64px; flex-shrink: 0; color: var(--spectrum-global-color-gray-700); } #qualitative_selectedColors.isEmpty { background-color: var(--spectrum-global-color-gray-200); border: 1px solid var(--spectrum-global-color-gray-300); align-items: center; justify-content: center; border-radius: 8px; } .emptyColorsGroup { display: flex; height: 64px; margin: 4px 12px 8px 0; flex-shrink: 0; color: var(--spectrum-global-color-gray-700); background-color: var(--spectrum-global-color-gray-200); border: 1px solid var(--spectrum-global-color-gray-300); align-items: center; justify-content: center; border-radius: 8px; } #qualitative_generatedColors { margin-bottom: 6px; margin-top: 4px; } .colorScaleHeaderWrapper { min-height: 32px; display: flex; align-items: center; justify-content: space-between; } .qualitativeTabsWrapper { max-height: calc(100vh - 288px); overflow-y: auto; overflow-x: hidden; padding-left: 4px; padding-right: 4px; } #simulatedColors .spectrum-Heading { margin-top: 8px; } #simulatedColors .spectrum-Heading:first-of-type { margin-top: 0; } #qualitativeDemoWrapper { /* Default fill for when no CVD colors are selected */ fill: var(--spectrum-global-color-gray-100); } #colorCompareForm, #colorConvertForm { margin-top: var(--spectrum-global-dimension-size-500); } #colorCompareForm .spectrum-Form-item ~ .spectrum-Form-item, #colorConvertForm .spectrum-Form-item ~ .spectrum-Form-item { margin-left: var(--spectrum-global-dimension-size-400); } #colorCompareForm { margin-bottom: var(--spectrum-global-dimension-size-500); } .compare-Tabs-content { flex-direction: column; } #contrastContentRow { display: flex; width: calc(100% - 16px); flex-direction: row; margin-top: 32px; margin-bottom: 24px; justify-content: space-between; } #contrastOutput { display: flex; flex-direction: row; gap: var(--spectrum-global-dimension-size-300); } #contrastReport .spectrum-Table { width: 100%; } #colorDifferenceReport { padding-top: 24px; } #colorDifferenceReport .spectrum-Table-body { vertical-align: middle; } #colorDifferenceReport .spectrum-Table, #contrastReport .spectrum-Table, #sequential_a11yTable .spectrum-Table, #diverging_a11yTable .spectrum-Table { width: 100%; } #colorDifferenceReport .spectrum-Table-body, #contrastReport .spectrum-Table-body, #sequential_a11yTable .spectrum-Table-body, #diverging_a11yTable .spectrum-Table-body { vertical-align: middle; } .deltaE-meter { width: 150px; } .deltaE-meter--panel { width: 80px; } .spectrum-Detail.spectrum-Panel-Item-Title { color: var(--spectrum-global-color-gray-700); padding-bottom: var(--spectrum-global-dimension-size-50); } .is-disabled { transition: 0.1s ease-out opacity; opacity: 0.4; cursor: none; } pre { display: block; background-color: var(--spectrum-global-color-gray-50); padding: 12px 12px 0px 12px; border: 1px solid var(--spectrum-global-color-gray-200); border-radius: var(--spectrum-alias-border-radius-regular); } .table-cell-item { display: block; } .articleCards-Wrapper { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--spectrum-global-dimension-size-200); } .articleCard { display: flex; flex-direction: column; align-items: flex-start; border-radius: var(--spectrum-alias-border-radius-medium); border-width: 1px; border-style: solid; border-color: var(--spectrum-global-color-gray-300); background-color: var(--spectrum-global-color-gray-75); flex-shrink: 1; min-width: 240px; width: 100%; max-width: 360px; text-decoration: none; transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .articleCard:hover { border-color: var(--spectrum-global-color-gray-400); background-color: var(--spectrum-global-color-gray-50); } .articleCard:active { border-color: var(--spectrum-global-color-gray-500); background-color: var(--spectrum-global-color-gray-50); } .articleCard_content { padding: 0 var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300); } .articleCard_image { width: 100%; height: 100px; margin: 0; border-top-left-radius: var(--spectrum-alias-border-radius-medium); border-top-right-radius: var(--spectrum-alias-border-radius-medium); object-fit: cover; } .spectrum-Body.articleCard_ref { margin-bottom: 0; font-style: italic; color: var(--spectrum-global-color-gray-700); } .colorPicker { height: 32px; width: 32px; overflow: visible; border-radius: var(--spectrum-alias-border-radius-regular); background-color: rgba(0, 0, 0, 0.15); position: relative; z-index: 1; } input[type=color].colorPicker-Input { display: none; z-index: -1; } .colorPicker-Popover { padding: var(--spectrum-global-dimension-size-150); top: 38px; left: 0; width: 200px; } /** Need this CSS to account for Spectrum styling for native Slider **/ .spectrum-ColorSlider { --spectrum-colorslider-handle-hitarea-border-radius: 0%; --spectrum-colorslider-handle-hitarea-width: var( --spectrum-global-dimension-size-300 ); --spectrum-colorslider-handle-hitarea-height: var( --spectrum-global-dimension-size-300 ); } .spectrum-ColorSlider { position: relative; display: block; width: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400)); height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300)); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .spectrum-ColorSlider { --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color); } .spectrum-ColorSlider-slider { opacity: 0.0001; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; margin: 0; } .spectrum-ColorSlider-checkerboard { background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px); background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px), var(--spectrum-global-dimension-static-size-100, 8px) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0; } .spectrum-ColorSlider-gradient, .spectrum-ColorSlider-checkerboard { width: 100%; height: 100%; border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular)); } .spectrum-ColorSlider-checkerboard { background-color: var(--spectrum-global-color-static-white, white); background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%); } .spectrum-ColorSlider-handle { left: 0; top: 50%; } .spectrum-ColorHandle { --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)); --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px); --spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100, 130ms); --spectrum-colorhandle-animation-easing: ease-in-out; --spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300); } .spectrum-ColorHandle { border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white)); box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color)); background-color: var(--spectrum-global-color-static-white, white); background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%); } .spectrum-ColorHandle { --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)); --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px); --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42); } .spectrum-ColorHandle, .spectrum-ColorHandle:after { border-radius: 100%; } .spectrum-ColorHandle-color { box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color)); } .spectrum-ColorHandle-color { border-radius: 100%; width: 100%; height: 100%; } .spectrum-ColorHandle { display: block; position: absolute; z-index: 1; box-sizing: border-box; width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)); height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)); margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2); margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2); border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)); border-style: solid; background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px); background-position: var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset), var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset); transition: width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing); } .spectrum-ColorSlider-gradient, .spectrum-ColorSlider-checkerboard { width: 100%; height: 100%; border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular)); } #alphaSlider { margin-top: 8px; width: 166px; } .spectrum-Dialog { background: var(--spectrum-dialog-background-color, var(--spectrum-alias-background-color-default)); } .spectrum-Dialog { position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) translateY(var(--spectrum-dialog-entry-animation-distance, var(--spectrum-global-dimension-size-250))); z-index: 20; border-radius: var(--spectrum-dialog-border-radius, 4px); transition: opacity var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100)) var(--spectrum-global-animation-ease-in, cubic-bezier(0.5, 0, 1, 1)) 0ms, visibility 0ms linear calc(0ms + var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100))), transform 0ms linear calc(0ms + var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100))); } .spectrum-Dialog { visibility: hidden; opacity: 0; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms); pointer-events: none; } .spectrum-Dialog.is-open { transition: transform var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200)), opacity var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200)); transform: translate(-50%, calc(-50% + -2vh)); } .spectrum-Dialog.is-open { visibility: visible; opacity: 1; transition-delay: 0ms; pointer-events: auto; } #dialogOverlay { background-color: rgba(0, 0, 0, 0.4); position: fixed; display: none; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 15; } .spectrum-AppHeader { grid-area: header; display: flex; flex-direction: row; max-height: var(--spectrum-global-dimension-size-400); border-bottom: 2px solid var(--panelBorder); background-color: var(--headerBackground); margin: 0; padding: var(--spectrum-global-dimension-size-150) var(--spectrum-global-dimension-size-200); align-items: center; justify-content: space-between; } .spectrum-AppHeader .spectrum-ActionGroup { flex-shrink: 0; } .spectrum-AppHeader .spectrum-Form--row { margin-right: 8px; } .spectrum-AppHeader_item { display: flex; flex-direction: row; align-items: center; } .spectrum-AppHeader_item .spectrum-Tabs { height: 57px; margin-left: 48px; } .spectrum-AppHeader_item--last { width: auto; justify-content: flex-end; } @media screen and (min-width: 1160px) { .spectrum-AppHeader_item--last { width: 350px; } } .spectrum-AppHeader-Title { margin: 0; font-weight: 400; cursor: default; } #headerLogo { height: 24px; width: 24px; } #logoTitle { display: inline-flex; text-decoration: none; } #headerLogo ~ .spectrum-AppHeader-Title { margin-left: 8px; } .headerMenuButton { display: inline-flex; align-items: center; gap: var(--spectrum-global-dimension-size-75); } .headerMenuLabel { display: inline; } @media screen and (min-width: 960px) { .headerMenuButton { display: none; } .headerMenuLabel { display: none; } } /* Code syntax highlighting aliases */ .hljs-keyword { color: var(--spectrum-global-color-fuchsia-600); } .hljs-section { color: var(--spectrum-global-color-red-600); } .hljs-literal, .hljs-number { color: var(--spectrum-global-color-purple-600); } .hljs-attr { color: var(--spectrum-global-color-seafoam-600); } .hljs-title { color: var(--spectrum-global-color-indigo-600); } .hljs-title.class_ { color: var(--spectrum-global-color-blue-600); } .hljs-variable { color: var(--spectrum-global-color-magenta-600); } .hljs-string { color: var(--spectrum-global-color-fuchsia-600); } .hljs-function { color: var(--spectrum-global-color-blue-600); } .hljs-comment { color: var(--spectrum-global-color-gray-500); } #image-preview { display: flex; flex-direction: row; align-items: center; } #image-preview img { object-fit: scale-down; height: 112px; margin-top: var(--spectrum-global-dimension-size-200); border-radius: var(--spectrum-alias-border-radius-regular); } #image-preview .image-preview_text { margin-top: var(--spectrum-global-dimension-size-200); margin-left: var(--spectrum-global-dimension-size-100); size: var(--spectrum-global-dimension-font-size-50, 12px); } #swatchesOutputs, #detailSwatchesOutputs { display: flex; flex-direction: column; padding: 0; margin: 8px 14px 16px 32px; } .themeOutputItem { display: table-row; } .themeOutputItem--Heading { display: table-cell; min-width: 120px; vertical-align: top; padding-right: var(--spectrum-global-dimension-size-200); } .themeOutputColor { display: table-cell; flex-wrap: wrap; flex-direction: row; margin-bottom: 8px; } .themeOutputSwatch, .simulationSwatch { display: inline-flex; flex-direction: column; position: relative; justify-content: flex-end; width: 66px; height: 70px; border-radius: 8px; border: 1px solid transparent; margin: 0 16px 32px 0; cursor: pointer; transition: border 0.25s ease-out, box-shadow 0.25s ease-out; padding: 4px 6px; } .themeOutputSwatch:focus, .simulationSwatch:focus { border-color: var(--spectrum-alias-background-color-default); box-shadow: 0 0 0 2px var(--spectrum-alias-border-color-focus); outline: none; } .themeOutputSwatch:active, .simulationSwatch:active { border-color: var(--spectrum-alias-background-color-default); box-shadow: 0 0 0 2px var(--spectrum-alias-border-color-focus); transition: border 0.075s ease-out, box-shadow 0.075s ease-out; } .simulationSwatch { margin: 4px 12px 8px 0; height: 56px; width: 56px; cursor: default; } #qualitative_selectedColors .simulationSwatch { height: 64px; width: 64px; padding: 0; margin: 0 8px 0 0; } .themeOutputSwatch_contrast { font-size: 12px; } #justifiedWrapper .themeOutputSwatch, #detailJustifiedWrapper .themeOutputSwatch { justify-content: space-between; border-radius: 0; margin: 0; border: none; } #justifiedWrapper .themeOutputItem:first-of-type .themeOutputSwatch:first-of-type, #detailJustifiedWrapper .themeOutputItem:first-of-type .themeOutputSwatch:first-of-type { border-top-left-radius: var(--spectrum-alias-border-radius-regular); } #justifiedWrapper .themeOutputItem:first-of-type .themeOutputSwatch:last-of-type, #detailJustifiedWrapper .themeOutputItem:first-of-type .themeOutputSwatch:last-of-type { border-top-right-radius: var(--spectrum-alias-border-radius-regular); } #justifiedWrapper .themeOutputItem:last-of-type .themeOutputSwatch:first-of-type, #detailJustifiedWrapper .themeOutputItem:last-of-type .themeOutputSwatch:first-of-type { border-bottom-left-radius: var(--spectrum-alias-border-radius-regular); } #justifiedWrapper .themeOutputItem:last-of-type .themeOutputSwatch:last-of-type, #detailJustifiedWrapper .themeOutputItem:last-of-type .themeOutputSwatch:last-of-type { border-bottom-right-radius: var(--spectrum-alias-border-radius-regular); } #justifiedWrapper .themeOutputSwatch_luminosity, #justifiedWrapper .themeOutputSwatch_contrast, #detailJustifiedWrapper .themeOutputSwatch_luminosity, #detailJustifiedWrapper .themeOutputSwatch_contrast { font-size: 14px; white-space: nowrap; } #justifiedWrapper #swatchesOutputs .themeOutputItem, #justifiedWrapper #detailSwatchesOutputs .themeOutputItem, #detailJustifiedWrapper #swatchesOutputs .themeOutputItem, #detailJustifiedWrapper #detailSwatchesOutputs .themeOutputItem { display: flex; flex-direction: row; /* for fluid heights */ height: 100%; max-height: 150px; } #justifiedWrapper #swatchesOutputs .themeOutputColor, #justifiedWrapper #detailSwatchesOutputs .themeOutputColor, #detailJustifiedWrapper #swatchesOutputs .themeOutputColor, #detailJustifiedWrapper #detailSwatchesOutputs .themeOutputColor { display: inline-flex; width: calc(100% - 24px); flex-direction: row; flex-wrap: nowrap; flex-shrink: 0; min-width: 280px; } #justifiedWrapper #swatchesOutputs .themeOutputSwatch, #justifiedWrapper #detailSwatchesOutputs .themeOutputSwatch, #detailJustifiedWrapper #swatchesOutputs .themeOutputSwatch, #detailJustifiedWrapper #detailSwatchesOutputs .themeOutputSwatch { width: 100%; min-width: 36px; height: 100%; min-height: 72px; } .themeOutputSwatch_index { position: absolute; top: -22px; left: 0; } .themeOutputSwatch_luminosity, .themeOutputSwatch_contrast { opacity: 1; transition: opacity 0.125s ease-in-out; } .hideSwatchContrast .themeOutputSwatch_contrast { opacity: 0; transition: opacity 0.125s ease-in-out; } .hideSwatchLuminosity .themeOutputSwatch_luminosity { opacity: 0; transition: opacity 0.125s ease-in-out; } #swatchControls { margin-bottom: var(--spectrum-global-dimension-size-200); } #originalColors { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; max-height: 90px; overflow: auto; } .panelSwatch { display: inline-flex; flex-shrink: 0; height: 16px; width: 16px; margin: 2px; border-radius: 2px; } .tinySwatch { width: 16px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 2px #f5f5f5; position: absolute; bottom: -4px; left: -4px; } .sampleSwatches { display: flex; flex-direction: row; width: 100%; margin-bottom: var(--spectrum-global-dimension-size-100); } .sampleSwatch { height: 64px; display: inline-flex; flex-grow: 1; } .sampleSwatch:first-of-type { border-top-left-radius: var(--spectrum-alias-border-radius-medium); border-bottom-left-radius: var(--spectrum-alias-border-radius-medium); } .sampleSwatch:last-of-type { border-top-right-radius: var(--spectrum-alias-border-radius-medium); border-bottom-right-radius: var(--spectrum-alias-border-radius-medium); } .swatch--large, input[type=color].swatch--large { margin-top: var(--spectrum-global-dimension-size-100); height: 164px; width: 164px; border-radius: var(--spectrum-alias-border-radius-medium); border: 1px solid var(--translucentLightBorder); } input[type=color].swatch--large { opacity: 0; position: absolute; top: 0; left: 0; } .contrastSwatch--outer { display: flex; justify-content: center; align-items: center; width: 72px; height: 72px; border-radius: var(--spectrum-alias-border-radius-medium); border: 1px solid var(--translucentLightBorder); } .contrastSwatch--inner { border-radius: 3px; width: 38px; height: 38px; } .dualSwatch { height: 32px; display: flex; flex-direction: row; } .dualSwatch .swatch { border: 1px solid var(--translucentLightBorder); width: 32px; height: 32px; } .dualSwatch .swatch:first-of-type { border-top-left-radius: var(--spectrum-alias-border-radius-medium); border-bottom-left-radius: var(--spectrum-alias-border-radius-medium); } .dualSwatch .swatch:last-of-type { border-top-right-radius: var(--spectrum-alias-border-radius-medium); border-bottom-right-radius: var(--spectrum-alias-border-radius-medium); } .spectrum-Panel-Item--accordion { height: 16px; overflow: hidden; display: flex; flex-direction: column; transition: height ease-out 0.1s; } .spectrum-Panel-Item--accordion .spectrum-Accordion-Header .spectrum-Icon { transform: rotate(-90deg); } .spectrum-Panel-Item--accordion.is-open { height: auto; transition: height ease-out 0.1s; } .spectrum-Panel-Item--accordion.is-open .spectrum-Accordion-Header .spectrum-Icon { transform: rotate(0deg); } .spectrum-Accordion-Header { position: relative; display: flex; flex-direction: row; cursor: pointer; } .spectrum-Accordion-Body .spectrum-Panel-Item { padding-left: 0; padding-right: 0; border-width: 1px; } .spectrum-Accordion-Body .spectrum-Panel-Item:first-of-type { padding-top: 0; } .spectrum-Popover--padded { padding: var(--spectrum-global-dimension-size-300); } .spectrum-Popover--paddedSmall { padding-left: var(--spectrum-global-dimension-size-100); padding-right: var(--spectrum-global-dimension-size-100); padding-bottom: var(--spectrum-global-dimension-size-200); } .spectrum-Popover { z-index: 100; } .spectrum-Popover .spectrum-Body { margin-top: 0.25rem; margin-bottom: 0.75rem; } #popoverShareOptions { top: 50px; right: 72px; width: auto; } #popoverShareOptions .spectrum-ActionGroup--vertical { margin-top: var(--spectrum-global-dimension-size-100); margin-bottom: var(--spectrum-global-dimension-size-100); } #popoverAdaptiveControls { top: 50px; right: 152px; width: 336px; } #popoverAnalysisColorSpace { top: 50px; right: 190px; width: 336px; } section { margin-top: 32px; } .section--centered { margin: 72px auto; text-align: center; } .section--split { display: grid; width: 100%; grid-template-rows: auto; grid-template-columns: 50% 50%; grid-column-gap: var(--spectrum-global-dimension-size-200); grid-template-areas: "sectionLeft sectionRight"; } .section--left, .section--right { display: flex; flex-direction: column; justify-content: center; } .section--left .spectrum-Body, .section--right .spectrum-Body { max-width: 50ch; } .section--left { grid-area: sectionLeft; } .section--right { grid-area: sectionRight; } .section--image { background-color: var(--spectrum-global-color-gray-200); height: 320px; width: auto; overflow: hidden; object-fit: cover; } @media screen and (min-width: 1270px) { .section--image { height: calc(70vh - 58px); min-height: 400px; max-height: 650px; } } #homeMainSection { margin-top: 0; width: 100%; } .selectBox--row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--spectrum-global-dimension-size-200); width: 100%; } .selectBox { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300); border-radius: var(--spectrum-alias-border-radius-medium); border-width: 1px; border-style: solid; border-color: var(--spectrum-global-color-gray-300); background-color: var(--spectrum-global-color-gray-50); min-width: 180px; width: calc(33% - 58px); text-decoration: none; transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out; } .selectBox:hover { border-color: var(--spectrum-global-color-gray-400); background-color: var(--spectrum-global-color-gray-50); } .selectBox:active { border-color: var(--spectrum-global-color-gray-500); background-color: var(--spectrum-global-color-gray-50); } .selectBox_Content { display: flex; flex-direction: column; align-items: center; } .selectBox_Button { margin-top: var(--spectrum-global-dimension-size-150); } .selectBox_image { width: 100px; height: 100px; } .spectrum-Body--sizeS.selectBox_content { margin-bottom: 0; text-align: center; line-height: 1.3; color: var(--spectrum-global-color-gray-700); } .statusLabel { display: flex; flex-direction: row; height: 32px; grid-area: status; align-items: center; cursor: default; } .statusLabel .statusLabel-text { margin-left: 4px; color: var(--spectrum-global-color-gray-700); } .statusLabel--fail .statusLabel-validationIcon { color: var(--spectrum-global-color-red-600); } .statusLabel--fail .statusLabel-text { color: var(--spectrum-global-color-red-700); } .statusLabel--pass .statusLabel-validationIcon { color: var(--spectrum-global-color-green-600); } .spectrum-Textfield--custom { width: auto; } .spectrum-Textfield--custom .spectrum-Textfield-input { border-color: transparent; font-weight: var(--spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); } .spectrum-Toast { position: absolute; left: 50%; transform: translate(-50%, 100%); bottom: 0; display: none; } .spectrum-Toast.is-visible { display: inline-flex; transform: translate(-50%, var(--toast-offset)); } .spectrum-Toast.hidden { display: none; } .spectrum-Bounce { animation-duration: 250ms; animation-iteration-count: 1; animation-name: spectrum-Bounce; animation-timing-function: var(--spectrum-ease-in-out); } @keyframes spectrum-Bounce { 0% { transform: translate(-50%, 50%); opacity: 0; } 50% { transform: translate(-50%, var(--toast-offset-bounce-up-light)); opacity: 1; } 75% { transform: translate(-50%, var(--toast-offset)); opacity: 1; } 100% { transform: translate(-50%, var(--toast-offset)); opacity: 1; } } .spectrum-Exit { animation-duration: 220ms; animation-iteration-count: 1; animation-name: spectrum-Exit; animation-timing-function: var(--spectrum-ease-in-out); } @keyframes spectrum-Exit { 0% { transform: translate(-50%, var(--toast-offset)); opacity: 1; } 100% { transform: translate(-50%, 50%); opacity: 0; } } #BackgroundScaleTooltip.spectrum-Tooltip--top .spectrum-Tooltip-tip { right: 24px; left: auto; } #BackgroundScaleTooltip.spectrum-Tooltip--top { position: absolute; max-width: 30ch; } #BackgroundScaleTooltip.spectrum-Tooltip--top { transform: translate(94px, -48px); } /*# sourceMappingURL=src.ea11cb99.css.map */