/* ! * @salesforce-ux/design-system-2 2.264.0 (2d864ff3598781989845457cac2fc71aff107f9c) * Built with @salesforce-ux/design-tokens 4.0.0 * * This file is automatically generated. * Please do not edit or check in changes to this file. * If you need changes made, please contact the Design Systems Engineering team. */ @layer theme{ :where(html){ --slds-r-color-brand-5:#000314; --slds-r-color-brand-10:#001642; --slds-r-color-brand-15:#001e5b; --slds-r-color-brand-20:#002775; --slds-r-color-brand-30:#022ac0; --slds-r-color-brand-35:#003ecd; --slds-r-color-brand-40:#0250d9; --slds-r-color-brand-45:#045dec; --slds-r-color-brand-50:#066afe; --slds-r-color-brand-55:#287efe; --slds-r-color-brand-60:#4992fe; --slds-r-color-brand-65:#5f9ffe; --slds-r-color-brand-70:#7cb1fe; --slds-r-color-brand-80:#a8cbff; --slds-r-color-brand-85:#c2daff; --slds-r-color-brand-90:#d6e6ff; --slds-r-color-brand-95:#edf4ff; --slds-r-color-info-5:#000310; --slds-r-color-info-10:#001639; --slds-r-color-info-15:#03234d; --slds-r-color-info-20:#032d60; --slds-r-color-info-30:#014486; --slds-r-color-info-35:#044f98; --slds-r-color-info-40:#0b5cab; --slds-r-color-info-45:#0469c1; --slds-r-color-info-50:#0176d3; --slds-r-color-info-55:#0684ef; --slds-r-color-info-60:#1b96ff; --slds-r-color-info-65:#57a3fd; --slds-r-color-info-70:#78b0fd; --slds-r-color-info-80:#aacbff; --slds-r-color-info-85:#c2d8ff; --slds-r-color-info-90:#d8e6fe; --slds-r-color-info-95:#eef4ff; --slds-r-color-success-5:#010502; --slds-r-color-success-10:#071b12; --slds-r-color-success-15:#072825; --slds-r-color-success-20:#023434; --slds-r-color-success-30:#024d4c; --slds-r-color-success-35:#035a58; --slds-r-color-success-40:#056764; --slds-r-color-success-45:#087570; --slds-r-color-success-50:#0b827c; --slds-r-color-success-55:#09948b; --slds-r-color-success-60:#06a59a; --slds-r-color-success-65:#03b4a7; --slds-r-color-success-70:#01c3b3; --slds-r-color-success-80:#04e1cb; --slds-r-color-success-85:#76ead9; --slds-r-color-success-90:#acf3e4; --slds-r-color-success-95:#def9f3; --slds-r-color-error-5:#0f0003; --slds-r-color-error-10:#370114; --slds-r-color-error-15:#4b0620; --slds-r-color-error-20:#61022a; --slds-r-color-error-30:#8a033e; --slds-r-color-error-35:#a00449; --slds-r-color-error-40:#b60554; --slds-r-color-error-45:#ce055f; --slds-r-color-error-50:#e3066a; --slds-r-color-error-55:#f42f7c; --slds-r-color-error-60:#ff538a; --slds-r-color-error-65:#fe7298; --slds-r-color-error-70:#fe8aa7; --slds-r-color-error-80:#fdb6c5; --slds-r-color-error-85:#fec8d4; --slds-r-color-error-90:#fddde3; --slds-r-color-error-95:#fef0f3; --slds-r-color-warning-5:#090200; --slds-r-color-warning-10:#281202; --slds-r-color-warning-15:#371e03; --slds-r-color-warning-20:#4f2100; --slds-r-color-warning-30:#6f3400; --slds-r-color-warning-35:#824308; --slds-r-color-warning-40:#8c4b02; --slds-r-color-warning-45:#9a5803; --slds-r-color-warning-50:#a96504; --slds-r-color-warning-55:#ba7503; --slds-r-color-warning-60:#ca8501; --slds-r-color-warning-65:#da9401; --slds-r-color-warning-70:#e4a201; --slds-r-color-warning-80:#fcc003; --slds-r-color-warning-85:#f8d462; --slds-r-color-warning-90:#f9e3b6; --slds-r-color-warning-95:#fbf3e0; } :where(html){ --slds-g-duration-immediately:0.05s; --slds-g-duration-instantly:0s; --slds-g-duration-paused:3.2s; --slds-g-duration-promptly:0.2s; --slds-g-duration-quickly:0.1s; --slds-g-duration-slowly:0.4s; --slds-g-duration-toast-medium:9.6s; --slds-g-duration-toast-short:4.8s; --slds-g-ratio-square:1; --slds-g-ratio-landscape:4/3; --slds-g-ratio-portrait:3/4; --slds-g-ratio-wide:16/9; --slds-g-ratio-ultrawide:18/5; --slds-g-sizing-1:0.125rem; --slds-g-sizing-2:0.25rem; --slds-g-sizing-3:0.5rem; --slds-g-sizing-4:0.75rem; --slds-g-sizing-5:1rem; --slds-g-sizing-6:1.25rem; --slds-g-sizing-7:1.5rem; --slds-g-sizing-8:1.75rem; --slds-g-sizing-9:2rem; --slds-g-sizing-10:3rem; --slds-g-sizing-11:4rem; --slds-g-sizing-12:5rem; --slds-g-sizing-13:10rem; --slds-g-sizing-14:15rem; --slds-g-sizing-15:20rem; --slds-g-sizing-16:30rem; --slds-g-sizing-base:1rem; --slds-g-sizing-border-1:1px; --slds-g-sizing-border-2:2px; --slds-g-sizing-border-3:3px; --slds-g-sizing-border-4:4px; --slds-g-sizing-content-1:20ch; --slds-g-sizing-content-2:45ch; --slds-g-sizing-content-3:60ch; --slds-g-sizing-heading-1:20ch; --slds-g-sizing-heading-2:25ch; --slds-g-sizing-heading-3:35ch; --slds-g-spacing-1:0.25rem; --slds-g-spacing-2:0.5rem; --slds-g-spacing-3:0.75rem; --slds-g-spacing-4:1rem; --slds-g-spacing-5:1.5rem; --slds-g-spacing-6:2rem; --slds-g-spacing-7:2.5rem; --slds-g-spacing-8:3rem; --slds-g-spacing-9:3.5rem; --slds-g-spacing-10:4rem; --slds-g-spacing-11:4.5rem; --slds-g-spacing-12:5rem; --slds-g-spacing-var-1:var(--slds-g-spacing-1); --slds-g-spacing-var-2:var(--slds-g-spacing-2); --slds-g-spacing-var-3:var(--slds-g-spacing-3); --slds-g-spacing-var-4:var(--slds-g-spacing-4); --slds-g-spacing-var-5:var(--slds-g-spacing-5); --slds-g-spacing-var-6:var(--slds-g-spacing-6); --slds-g-spacing-var-7:var(--slds-g-spacing-7); --slds-g-spacing-var-8:var(--slds-g-spacing-8); --slds-g-spacing-var-9:var(--slds-g-spacing-9); --slds-g-spacing-var-10:var(--slds-g-spacing-10); --slds-g-spacing-var-11:var(--slds-g-spacing-11); --slds-g-spacing-var-12:var(--slds-g-spacing-12); --slds-g-spacing-var-block-1:var(--slds-g-spacing-1); --slds-g-spacing-var-block-2:var(--slds-g-spacing-2); --slds-g-spacing-var-block-3:var(--slds-g-spacing-3); --slds-g-spacing-var-block-4:var(--slds-g-spacing-4); --slds-g-spacing-var-block-5:var(--slds-g-spacing-5); --slds-g-spacing-var-block-6:var(--slds-g-spacing-6); --slds-g-spacing-var-block-7:var(--slds-g-spacing-7); --slds-g-spacing-var-block-8:var(--slds-g-spacing-8); --slds-g-spacing-var-block-9:var(--slds-g-spacing-9); --slds-g-spacing-var-block-10:var(--slds-g-spacing-10); --slds-g-spacing-var-block-11:var(--slds-g-spacing-11); --slds-g-spacing-var-block-12:var(--slds-g-spacing-12); --slds-g-spacing-var-inline-1:var(--slds-g-spacing-1); --slds-g-spacing-var-inline-2:var(--slds-g-spacing-2); --slds-g-spacing-var-inline-3:var(--slds-g-spacing-3); --slds-g-spacing-var-inline-4:var(--slds-g-spacing-4); --slds-g-spacing-var-inline-5:var(--slds-g-spacing-5); --slds-g-spacing-var-inline-6:var(--slds-g-spacing-6); --slds-g-spacing-var-inline-7:var(--slds-g-spacing-7); --slds-g-spacing-var-inline-8:var(--slds-g-spacing-8); --slds-g-spacing-var-inline-9:var(--slds-g-spacing-9); --slds-g-spacing-var-inline-10:var(--slds-g-spacing-10); --slds-g-spacing-var-inline-11:var(--slds-g-spacing-11); --slds-g-spacing-var-inline-12:var(--slds-g-spacing-12); --slds-g-radius-border-1:0.25rem; --slds-g-radius-border-2:0.5rem; --slds-g-radius-border-3:0.75rem; --slds-g-radius-border-4:1.25rem; --slds-g-radius-border-pill:15rem; --slds-g-radius-border-circle:100%; --slds-g-font-family:var(--slds-g-font-family-base); --slds-g-font-family-base:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --slds-g-font-family-monospace:Consolas, Menlo, Monaco, Courier, monospace; --slds-g-font-weight-1:100; --slds-g-font-weight-2:200; --slds-g-font-weight-3:300; --slds-g-font-weight-4:400; --slds-g-font-weight-5:500; --slds-g-font-weight-6:600; --slds-g-font-weight-7:700; --slds-g-font-weight-bold:bold; --slds-g-font-line-height-1:1; --slds-g-font-line-height-2:1.25; --slds-g-font-line-height-3:1.375; --slds-g-font-line-height-4:1.5; --slds-g-font-line-height-5:1.75; --slds-g-font-line-height-6:2; --slds-g-font-line-height-base:1.5; --slds-g-font-line-height-var-base:var(--slds-g-font-line-height-base); --slds-g-font-lineheight-1:var(--slds-g-font-line-height-1); --slds-g-font-lineheight-2:var(--slds-g-font-line-height-2); --slds-g-font-lineheight-3:var(--slds-g-font-line-height-3); --slds-g-font-lineheight-4:var(--slds-g-font-line-height-4); --slds-g-font-lineheight-5:var(--slds-g-font-line-height-5); --slds-g-font-lineheight-6:var(--slds-g-font-line-height-6); --slds-g-font-lineheight-base:var(--slds-g-font-line-height-base); --slds-g-font-lineheight-var-base:var(--slds-g-font-line-height-var-base); --slds-g-font-scale-1:0.875rem; --slds-g-font-scale-2:1rem; --slds-g-font-scale-3:1.25rem; --slds-g-font-scale-4:1.5rem; --slds-g-font-scale-5:1.75rem; --slds-g-font-scale-6:2rem; --slds-g-font-scale-7:2.5rem; --slds-g-font-scale-8:3rem; --slds-g-font-scale-9:var(--slds-g-font-scale-8); --slds-g-font-scale-10:var(--slds-g-font-scale-8); --slds-g-font-scale-base:0.8125rem; --slds-g-font-scale-ratio:1.15; --slds-g-font-scale-neg-1:0.75rem; --slds-g-font-scale-neg-2:0.625rem; --slds-g-font-scale-neg-3:var(--slds-g-font-scale-neg-2); --slds-g-font-scale-neg-4:var(--slds-g-font-scale-neg-3); --slds-g-font-scale-var-1:var(--slds-g-font-scale-1); --slds-g-font-scale-var-2:var(--slds-g-font-scale-2); --slds-g-font-scale-var-3:var(--slds-g-font-scale-3); --slds-g-font-scale-var-4:var(--slds-g-font-scale-4); --slds-g-font-scale-var-5:var(--slds-g-font-scale-5); --slds-g-font-scale-var-6:var(--slds-g-font-scale-6); --slds-g-font-scale-var-7:var(--slds-g-font-scale-7); --slds-g-font-scale-var-8:var(--slds-g-font-scale-8); --slds-g-font-scale-var-9:var(--slds-g-font-scale-var-8); --slds-g-font-scale-var-10:var(--slds-g-font-scale-var-8); --slds-g-font-scale-var-base:var(--slds-g-font-scale-base); --slds-g-font-scale-var-neg-1:var(--slds-g-font-scale-neg-1); --slds-g-font-scale-var-neg-2:var(--slds-g-font-scale-neg-2); --slds-g-font-scale-var-neg-3:var(--slds-g-font-scale-var-neg-2); --slds-g-font-scale-var-neg-4:var(--slds-g-font-scale-var-neg-3); --slds-g-font-size-base:var(--slds-g-font-scale-base); --slds-g-font-line-clamp:3; --slds-g-color-palette-neutral-0:light-dark(#000, #fff); --slds-g-color-palette-neutral-10:light-dark(#181818, #e5e5e5); --slds-g-color-palette-neutral-15:light-dark(#242424, #d7d7d7); --slds-g-color-palette-neutral-20:light-dark(#2e2e2e, #c9c9c9); --slds-g-color-palette-neutral-30:light-dark(#444, #aeaeae); --slds-g-color-palette-neutral-40:light-dark(#5c5c5c, #939393); --slds-g-color-palette-neutral-50:#757575; --slds-g-color-palette-neutral-60:light-dark(#939393, #5c5c5c); --slds-g-color-palette-neutral-65:light-dark(#a0a0a0, #515151); --slds-g-color-palette-neutral-70:light-dark(#aeaeae, #444); --slds-g-color-palette-neutral-80:light-dark(#c9c9c9, #2e2e2e); --slds-g-color-palette-neutral-90:light-dark(#e5e5e5, #181818); --slds-g-color-palette-neutral-95:light-dark(#f3f3f3, #020202); --slds-g-color-palette-neutral-100:light-dark(#fff, #000); --slds-g-color-palette-blue-10:light-dark(#001639, #d8e6fe); --slds-g-color-palette-blue-15:light-dark(#03234d, #c2d8ff); --slds-g-color-palette-blue-20:light-dark(#032d60, #aacbff); --slds-g-color-palette-blue-30:light-dark(#014486, #78b0fd); --slds-g-color-palette-blue-40:light-dark(#0b5cab, #1b96ff); --slds-g-color-palette-blue-50:#0176d3; --slds-g-color-palette-blue-60:light-dark(#1b96ff, #0b5cab); --slds-g-color-palette-blue-65:light-dark(#57a3fd, #044f98); --slds-g-color-palette-blue-70:light-dark(#78b0fd, #014486); --slds-g-color-palette-blue-80:light-dark(#aacbff, #032d60); --slds-g-color-palette-blue-90:light-dark(#d8e6fe, #001639); --slds-g-color-palette-blue-95:light-dark(#eef4ff, #000310); --slds-g-color-palette-cloud-blue-10:light-dark(#001a28, #cfe9fe); --slds-g-color-palette-cloud-blue-15:light-dark(#0a2636, #aeddfe); --slds-g-color-palette-cloud-blue-20:light-dark(#023248, #90d0fe); --slds-g-color-palette-cloud-blue-30:light-dark(#084968, #1ab9ff); --slds-g-color-palette-cloud-blue-40:light-dark(#05628a, #0d9dda); --slds-g-color-palette-cloud-blue-50:#107cad; --slds-g-color-palette-cloud-blue-60:light-dark(#0d9dda, #05628a); --slds-g-color-palette-cloud-blue-65:light-dark(#08abed, #075579); --slds-g-color-palette-cloud-blue-70:light-dark(#1ab9ff, #084968); --slds-g-color-palette-cloud-blue-80:light-dark(#90d0fe, #023248); --slds-g-color-palette-cloud-blue-90:light-dark(#cfe9fe, #001a28); --slds-g-color-palette-cloud-blue-95:light-dark(#eaf5fe, #000409); --slds-g-color-palette-electric-blue-10:light-dark(#001642, #d6e6ff); --slds-g-color-palette-electric-blue-15:light-dark(#001e5b, #c2daff); --slds-g-color-palette-electric-blue-20:light-dark(#002775, #a8cbff); --slds-g-color-palette-electric-blue-30:light-dark(#022ac0, #7cb1fe); --slds-g-color-palette-electric-blue-40:light-dark(#0250d9, #4992fe); --slds-g-color-palette-electric-blue-50:#066afe; --slds-g-color-palette-electric-blue-60:light-dark(#4992fe, #0250d9); --slds-g-color-palette-electric-blue-65:light-dark(#5f9ffe, #003ecd); --slds-g-color-palette-electric-blue-70:light-dark(#7cb1fe, #022ac0); --slds-g-color-palette-electric-blue-80:light-dark(#a8cbff, #002775); --slds-g-color-palette-electric-blue-90:light-dark(#d6e6ff, #001642); --slds-g-color-palette-electric-blue-95:light-dark(#edf4ff, #000314); --slds-g-color-palette-green-10:light-dark(#071b12, #cdefc4); --slds-g-color-palette-green-15:light-dark(#0c2912, #aee4a9); --slds-g-color-palette-green-20:light-dark(#143b25, #91db8b); --slds-g-color-palette-green-30:light-dark(#194e31, #45c65a); --slds-g-color-palette-green-40:light-dark(#396547, #3ba755); --slds-g-color-palette-green-50:#2e844a; --slds-g-color-palette-green-60:light-dark(#3ba755, #396547); --slds-g-color-palette-green-65:light-dark(#41b658, #1e5c39); --slds-g-color-palette-green-70:light-dark(#45c65a, #194e31); --slds-g-color-palette-green-80:light-dark(#91db8b, #143b25); --slds-g-color-palette-green-90:light-dark(#cdefc4, #071b12); --slds-g-color-palette-green-95:light-dark(#ebf7e6, #010502); --slds-g-color-palette-hot-orange-10:light-dark(#281202, #ffded5); --slds-g-color-palette-hot-orange-15:light-dark(#421604, #feccbd); --slds-g-color-palette-hot-orange-20:light-dark(#4a2413, #feb9a5); --slds-g-color-palette-hot-orange-30:light-dark(#7e2600, #ff906e); --slds-g-color-palette-hot-orange-40:light-dark(#aa3001, #ff5d2d); --slds-g-color-palette-hot-orange-50:#d83a00; --slds-g-color-palette-hot-orange-60:light-dark(#ff5d2d, #aa3001); --slds-g-color-palette-hot-orange-65:light-dark(#ff784f, #942b00); --slds-g-color-palette-hot-orange-70:light-dark(#ff906e, #7e2600); --slds-g-color-palette-hot-orange-80:light-dark(#feb9a5, #4a2413); --slds-g-color-palette-hot-orange-90:light-dark(#ffded5, #281202); --slds-g-color-palette-hot-orange-95:light-dark(#fef1ed, #090200); --slds-g-color-palette-indigo-10:light-dark(#17094e, #e0e5f8); --slds-g-color-palette-indigo-15:light-dark(#1f0974, #cfd4f7); --slds-g-color-palette-indigo-20:light-dark(#270c92, #bec7f6); --slds-g-color-palette-indigo-30:light-dark(#2f2cb7, #9ea9f1); --slds-g-color-palette-indigo-40:light-dark(#3a49da, #7f8ced); --slds-g-color-palette-indigo-50:#5867e8; --slds-g-color-palette-indigo-60:light-dark(#7f8ced, #3a49da); --slds-g-color-palette-indigo-65:light-dark(#8e9bef, #343bc8); --slds-g-color-palette-indigo-70:light-dark(#9ea9f1, #2f2cb7); --slds-g-color-palette-indigo-80:light-dark(#bec7f6, #270c92); --slds-g-color-palette-indigo-90:light-dark(#e0e5f8, #17094e); --slds-g-color-palette-indigo-95:light-dark(#f1f3fb, #060116); --slds-g-color-palette-orange-10:light-dark(#201600, #fedfd0); --slds-g-color-palette-orange-15:light-dark(#2e2204, #ffccad); --slds-g-color-palette-orange-20:light-dark(#3e2b02, #ffba90); --slds-g-color-palette-orange-30:light-dark(#5f3e02, #fe9339); --slds-g-color-palette-orange-40:light-dark(#825101, #dd7a01); --slds-g-color-palette-orange-50:#a96404; --slds-g-color-palette-orange-60:light-dark(#dd7a01, #825101); --slds-g-color-palette-orange-65:light-dark(#f38303, #704801); --slds-g-color-palette-orange-70:light-dark(#fe9339, #5f3e02); --slds-g-color-palette-orange-80:light-dark(#ffba90, #3e2b02); --slds-g-color-palette-orange-90:light-dark(#fedfd0, #201600); --slds-g-color-palette-orange-95:light-dark(#fff1ea, #060300); --slds-g-color-palette-pink-10:light-dark(#370114, #fddde3); --slds-g-color-palette-pink-15:light-dark(#4b0620, #fec8d4); --slds-g-color-palette-pink-20:light-dark(#61022a, #fdb6c5); --slds-g-color-palette-pink-30:light-dark(#8a033e, #fe8aa7); --slds-g-color-palette-pink-40:light-dark(#b60554, #ff538a); --slds-g-color-palette-pink-50:#e3066a; --slds-g-color-palette-pink-60:light-dark(#ff538a, #b60554); --slds-g-color-palette-pink-65:light-dark(#fe7298, #a00449); --slds-g-color-palette-pink-70:light-dark(#fe8aa7, #8a033e); --slds-g-color-palette-pink-80:light-dark(#fdb6c5, #61022a); --slds-g-color-palette-pink-90:light-dark(#fddde3, #370114); --slds-g-color-palette-pink-95:light-dark(#fef0f3, #0f0003); --slds-g-color-palette-purple-10:light-dark(#240643, #ece1f9); --slds-g-color-palette-purple-15:light-dark(#300b60, #e2d0f6); --slds-g-color-palette-purple-20:light-dark(#401075, #d7bff2); --slds-g-color-palette-purple-30:light-dark(#5a1ba9, #c29ef1); --slds-g-color-palette-purple-40:light-dark(#7526e3, #ad7bee); --slds-g-color-palette-purple-50:#9050e9; --slds-g-color-palette-purple-60:light-dark(#ad7bee, #7526e3); --slds-g-color-palette-purple-65:light-dark(#b78def, #681dc9); --slds-g-color-palette-purple-70:light-dark(#c29ef1, #5a1ba9); --slds-g-color-palette-purple-80:light-dark(#d7bff2, #401075); --slds-g-color-palette-purple-90:light-dark(#ece1f9, #240643); --slds-g-color-palette-purple-95:light-dark(#f6f2fb, #070114); --slds-g-color-palette-red-10:light-dark(#300c01, #feded8); --slds-g-color-palette-red-15:light-dark(#4a0c04, #feccc3); --slds-g-color-palette-red-20:light-dark(#640103, #feb8ab); --slds-g-color-palette-red-30:light-dark(#8e030f, #fe8f7d); --slds-g-color-palette-red-40:light-dark(#ba0517, #fe5c4c); --slds-g-color-palette-red-50:#ea001e; --slds-g-color-palette-red-60:light-dark(#fe5c4c, #ba0517); --slds-g-color-palette-red-65:light-dark(#fe7765, #a40413); --slds-g-color-palette-red-70:light-dark(#fe8f7d, #8e030f); --slds-g-color-palette-red-80:light-dark(#feb8ab, #640103); --slds-g-color-palette-red-90:light-dark(#feded8, #300c01); --slds-g-color-palette-red-95:light-dark(#fef1ee, #0c0200); --slds-g-color-palette-teal-10:light-dark(#071b12, #acf3e4); --slds-g-color-palette-teal-15:light-dark(#072825, #76ead9); --slds-g-color-palette-teal-20:light-dark(#023434, #04e1cb); --slds-g-color-palette-teal-30:light-dark(#024d4c, #01c3b3); --slds-g-color-palette-teal-40:light-dark(#056764, #06a59a); --slds-g-color-palette-teal-50:#0b827c; --slds-g-color-palette-teal-60:light-dark(#06a59a, #056764); --slds-g-color-palette-teal-65:light-dark(#03b4a7, #035a58); --slds-g-color-palette-teal-70:light-dark(#01c3b3, #024d4c); --slds-g-color-palette-teal-80:light-dark(#04e1cb, #023434); --slds-g-color-palette-teal-90:light-dark(#acf3e4, #071b12); --slds-g-color-palette-teal-95:light-dark(#def9f3, #010502); --slds-g-color-palette-violet-10:light-dark(#2e0039, #f2defe); --slds-g-color-palette-violet-15:light-dark(#3d0157, #eccdfe); --slds-g-color-palette-violet-20:light-dark(#580276, #e5b9fe); --slds-g-color-palette-violet-30:light-dark(#730394, #d892fe); --slds-g-color-palette-violet-40:light-dark(#9602c7, #cb65ff); --slds-g-color-palette-violet-50:#ba01ff; --slds-g-color-palette-violet-60:light-dark(#cb65ff, #9602c7); --slds-g-color-palette-violet-65:light-dark(#d17dfe, #8402ad); --slds-g-color-palette-violet-70:light-dark(#d892fe, #730394); --slds-g-color-palette-violet-80:light-dark(#e5b9fe, #580276); --slds-g-color-palette-violet-90:light-dark(#f2defe, #2e0039); --slds-g-color-palette-violet-95:light-dark(#f9f0ff, #060300); --slds-g-color-palette-yellow-10:light-dark(#281202, #f9e3b6); --slds-g-color-palette-yellow-15:light-dark(#371e03, #f8d462); --slds-g-color-palette-yellow-20:light-dark(#4f2100, #fcc003); --slds-g-color-palette-yellow-30:light-dark(#6f3400, #e4a201); --slds-g-color-palette-yellow-40:light-dark(#8c4b02, #ca8501); --slds-g-color-palette-yellow-50:#a96504; --slds-g-color-palette-yellow-60:light-dark(#ca8501, #8c4b02); --slds-g-color-palette-yellow-65:light-dark(#da9401, #824308); --slds-g-color-palette-yellow-70:light-dark(#e4a201, #6f3400); --slds-g-color-palette-yellow-80:light-dark(#fcc003, #4f2100); --slds-g-color-palette-yellow-90:light-dark(#f9e3b6, #281202); --slds-g-color-palette-yellow-95:light-dark(#fbf3e0, #090200); --slds-g-color-surface-1:light-dark(#fff, #242424); --slds-g-color-surface-2:light-dark(#f3f3f3, #181818); --slds-g-color-surface-3:light-dark(#f3f3f3, #2e2e2e); --slds-g-color-surface-container-1:light-dark(#fff, #242424); --slds-g-color-surface-container-2:light-dark(#f3f3f3, #181818); --slds-g-color-surface-container-3:light-dark(#e5e5e5, #2e2e2e); --slds-g-color-surface-container-inverse-1:light-dark(#032d60, #aacbff); --slds-g-color-surface-container-inverse-2:light-dark(#03234d, #78b0fd); --slds-g-color-surface-inverse-1:light-dark(#032d60, #aacbff); --slds-g-color-surface-inverse-2:light-dark(#03234d, #d8e6fe); --slds-g-color-on-accent-1:#fff; --slds-g-color-on-accent-2:light-dark(#fff, var(--slds-r-color-brand-40)); --slds-g-color-on-accent-3:light-dark(#fff, var(--slds-r-color-brand-30)); --slds-g-color-on-surface-1:light-dark(#5c5c5c, #aeaeae); --slds-g-color-on-surface-2:light-dark(#2e2e2e, #e5e5e5); --slds-g-color-on-surface-3:light-dark(#03234d, #d8e6fe); --slds-g-color-on-surface-inverse-1:light-dark(#fff, #181818); --slds-g-color-on-surface-inverse-2:light-dark(#a8cbff, #002775); --slds-g-color-on-info-1:light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-90)); --slds-g-color-on-success-1:light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-90)); --slds-g-color-on-success-2:light-dark(var(--slds-r-color-success-30), var(--slds-r-color-success-95)); --slds-g-color-on-warning-1:light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-90)); --slds-g-color-on-error-1:light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-90)); --slds-g-color-on-error-2:light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-95)); --slds-g-color-on-disabled-1:#757575; --slds-g-color-on-disabled-2:light-dark(#757575, #939393); --slds-g-color-border-1:light-dark(#c9c9c9, #444); --slds-g-color-border-2:light-dark(#5c5c5c, #757575); --slds-g-color-border-accent-1:var(--slds-r-color-brand-50); --slds-g-color-border-accent-2:light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-70)); --slds-g-color-border-accent-3:light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); --slds-g-color-border-inverse-1:light-dark(#f3f3f3, #181818); --slds-g-color-border-inverse-2:light-dark(#032d60, #aacbff); --slds-g-color-border-success-1:var(--slds-g-color-success-base-40); --slds-g-color-border-success-2:var(--slds-g-color-success-base-30); --slds-g-color-border-warning-1:light-dark(var(--slds-r-color-warning-60), var(--slds-r-color-warning-70)); --slds-g-color-border-error-1:light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-70)); --slds-g-color-border-error-2:light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-80)); --slds-g-color-border-disabled-1:var(--slds-g-color-neutral-base-50); --slds-g-color-border-disabled-2:var(--slds-g-color-neutral-base-40); --slds-g-color-accent-1:var(--slds-r-color-brand-50); --slds-g-color-accent-2:light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-70)); --slds-g-color-accent-3:light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); --slds-g-color-accent-container-1:var(--slds-r-color-brand-50); --slds-g-color-accent-container-2:light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-90)); --slds-g-color-accent-container-3:light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); --slds-g-color-accent-light-1:#edf4ff; --slds-g-color-accent-light-2:#d6e6ff; --slds-g-color-accent-dark-1:#002775; --slds-g-color-accent-dark-2:#001642; --slds-g-color-error-1:light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-70)); --slds-g-color-error-container-1:light-dark(var(--slds-r-color-error-90), var(--slds-r-color-error-30)); --slds-g-color-error-container-2:light-dark(var(--slds-r-color-error-80), var(--slds-r-color-error-40)); --slds-g-color-error-base-10:light-dark(var(--slds-r-color-error-10), var(--slds-r-color-error-90)); --slds-g-color-error-base-15:light-dark(var(--slds-r-color-error-15), var(--slds-r-color-error-85)); --slds-g-color-error-base-20:light-dark(var(--slds-r-color-error-20), var(--slds-r-color-error-80)); --slds-g-color-error-base-30:light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-70)); --slds-g-color-error-base-40:light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-60)); --slds-g-color-error-base-45:light-dark(var(--slds-r-color-error-45), var(--slds-r-color-error-55)); --slds-g-color-error-base-50:var(--slds-r-color-error-50); --slds-g-color-error-base-55:light-dark(var(--slds-r-color-error-55), var(--slds-r-color-error-45)); --slds-g-color-error-base-60:light-dark(var(--slds-r-color-error-60), var(--slds-r-color-error-40)); --slds-g-color-error-base-65:light-dark(var(--slds-r-color-error-65), var(--slds-r-color-error-35)); --slds-g-color-error-base-70:light-dark(var(--slds-r-color-error-70), var(--slds-r-color-error-30)); --slds-g-color-error-base-80:light-dark(var(--slds-r-color-error-80), var(--slds-r-color-error-20)); --slds-g-color-error-base-90:light-dark(var(--slds-r-color-error-90), var(--slds-r-color-error-10)); --slds-g-color-error-base-95:light-dark(var(--slds-r-color-error-95), var(--slds-r-color-error-5)); --slds-g-color-error-base-100:var(--slds-g-color-neutral-base-100); --slds-g-color-warning-1:light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-70)); --slds-g-color-warning-container-1:light-dark(var(--slds-r-color-warning-90), var(--slds-r-color-warning-30)); --slds-g-color-warning-base-10:light-dark(var(--slds-r-color-warning-10), var(--slds-r-color-warning-90)); --slds-g-color-warning-base-15:light-dark(var(--slds-r-color-warning-15), var(--slds-r-color-warning-85)); --slds-g-color-warning-base-20:light-dark(var(--slds-r-color-warning-20), var(--slds-r-color-warning-80)); --slds-g-color-warning-base-30:light-dark(var(--slds-r-color-warning-30), var(--slds-r-color-warning-70)); --slds-g-color-warning-base-40:light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-60)); --slds-g-color-warning-base-45:light-dark(var(--slds-r-color-warning-45), var(--slds-r-color-warning-55)); --slds-g-color-warning-base-50:var(--slds-r-color-warning-50); --slds-g-color-warning-base-55:light-dark(var(--slds-r-color-warning-55), var(--slds-r-color-warning-45)); --slds-g-color-warning-base-60:light-dark(var(--slds-r-color-warning-60), var(--slds-r-color-warning-40)); --slds-g-color-warning-base-65:light-dark(var(--slds-r-color-warning-65), var(--slds-r-color-warning-35)); --slds-g-color-warning-base-70:light-dark(var(--slds-r-color-warning-70), var(--slds-r-color-warning-30)); --slds-g-color-warning-base-80:light-dark(var(--slds-r-color-warning-80), var(--slds-r-color-warning-20)); --slds-g-color-warning-base-90:light-dark(var(--slds-r-color-warning-90), var(--slds-r-color-warning-10)); --slds-g-color-warning-base-95:light-dark(var(--slds-r-color-warning-95), var(--slds-r-color-warning-5)); --slds-g-color-warning-base-100:var(--slds-g-color-neutral-base-100); --slds-g-color-success-1:light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-70)); --slds-g-color-success-container-1:light-dark(var(--slds-r-color-success-90), var(--slds-r-color-success-30)); --slds-g-color-success-container-2:light-dark(var(--slds-r-color-success-80), var(--slds-r-color-success-40)); --slds-g-color-success-base-10:light-dark(var(--slds-r-color-success-10), var(--slds-r-color-success-90)); --slds-g-color-success-base-15:light-dark(var(--slds-r-color-success-15), var(--slds-r-color-success-85)); --slds-g-color-success-base-20:light-dark(var(--slds-r-color-success-20), var(--slds-r-color-success-80)); --slds-g-color-success-base-30:light-dark(var(--slds-r-color-success-30), var(--slds-r-color-success-70)); --slds-g-color-success-base-40:light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-60)); --slds-g-color-success-base-45:light-dark(var(--slds-r-color-success-45), var(--slds-r-color-success-55)); --slds-g-color-success-base-50:var(--slds-r-color-success-50); --slds-g-color-success-base-55:light-dark(var(--slds-r-color-success-55), var(--slds-r-color-success-45)); --slds-g-color-success-base-60:light-dark(var(--slds-r-color-success-60), var(--slds-r-color-success-40)); --slds-g-color-success-base-65:light-dark(var(--slds-r-color-success-65), var(--slds-r-color-success-35)); --slds-g-color-success-base-70:light-dark(var(--slds-r-color-success-70), var(--slds-r-color-success-30)); --slds-g-color-success-base-80:light-dark(var(--slds-r-color-success-80), var(--slds-r-color-success-20)); --slds-g-color-success-base-90:light-dark(var(--slds-r-color-success-90), var(--slds-r-color-success-10)); --slds-g-color-success-base-95:light-dark(var(--slds-r-color-success-95), var(--slds-r-color-success-5)); --slds-g-color-success-base-100:var(--slds-g-color-neutral-base-100); --slds-g-color-info-1:light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-70)); --slds-g-color-info-container-1:light-dark(var(--slds-r-color-info-90), var(--slds-r-color-info-30)); --slds-g-color-info-base-10:light-dark(var(--slds-r-color-info-10), var(--slds-r-color-info-90)); --slds-g-color-info-base-15:light-dark(var(--slds-r-color-info-15), var(--slds-r-color-info-85)); --slds-g-color-info-base-20:light-dark(var(--slds-r-color-info-20), var(--slds-r-color-info-80)); --slds-g-color-info-base-30:light-dark(var(--slds-r-color-info-30), var(--slds-r-color-info-70)); --slds-g-color-info-base-35:light-dark(var(--slds-r-color-info-35), var(--slds-r-color-info-65)); --slds-g-color-info-base-40:light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-60)); --slds-g-color-info-base-45:light-dark(var(--slds-r-color-info-45), var(--slds-r-color-info-55)); --slds-g-color-info-base-50:var(--slds-r-color-info-50); --slds-g-color-info-base-55:light-dark(var(--slds-r-color-info-55), var(--slds-r-color-info-45)); --slds-g-color-info-base-60:light-dark(var(--slds-r-color-info-60), var(--slds-r-color-info-40)); --slds-g-color-info-base-65:light-dark(var(--slds-r-color-info-65), var(--slds-r-color-info-35)); --slds-g-color-info-base-70:light-dark(var(--slds-r-color-info-70), var(--slds-r-color-info-30)); --slds-g-color-info-base-80:light-dark(var(--slds-r-color-info-80), var(--slds-r-color-info-20)); --slds-g-color-info-base-90:light-dark(var(--slds-r-color-info-90), var(--slds-r-color-info-10)); --slds-g-color-info-base-95:light-dark(var(--slds-r-color-info-95), var(--slds-r-color-info-5)); --slds-g-color-info-base-100:var(--slds-g-color-neutral-base-100); --slds-g-color-disabled-1:var(--slds-g-color-neutral-base-50); --slds-g-color-disabled-2:var(--slds-g-color-neutral-base-40); --slds-g-color-disabled-container-1:light-dark(#e5e5e5, #2e2e2e); --slds-g-color-disabled-container-2:light-dark(#c9c9c9, #444); --slds-g-color-neutral-base-0:light-dark(#000, #fff); --slds-g-color-neutral-base-10:light-dark(#181818, #e5e5e5); --slds-g-color-neutral-base-15:light-dark(#242424, #d7d7d7); --slds-g-color-neutral-base-20:light-dark(#2e2e2e, #c9c9c9); --slds-g-color-neutral-base-30:light-dark(#444, #aeaeae); --slds-g-color-neutral-base-40:light-dark(#5c5c5c, #939393); --slds-g-color-neutral-base-45:light-dark(#696969, #848484); --slds-g-color-neutral-base-50:#757575; --slds-g-color-neutral-base-55:light-dark(#848484, #696969); --slds-g-color-neutral-base-60:light-dark(#939393, #5c5c5c); --slds-g-color-neutral-base-65:light-dark(#a0a0a0, #515151); --slds-g-color-neutral-base-70:light-dark(#aeaeae, #444); --slds-g-color-neutral-base-80:light-dark(#c9c9c9, #2e2e2e); --slds-g-color-neutral-base-90:light-dark(#e5e5e5, #181818); --slds-g-color-neutral-base-95:light-dark(#f3f3f3, #020202); --slds-g-color-neutral-base-100:light-dark(#fff, #000); --slds-g-color-brand-base-10:light-dark(var(--slds-r-color-brand-10), var(--slds-r-color-brand-90)); --slds-g-color-brand-base-15:light-dark(var(--slds-r-color-brand-15), var(--slds-r-color-brand-85)); --slds-g-color-brand-base-20:light-dark(var(--slds-r-color-brand-20), var(--slds-r-color-brand-80)); --slds-g-color-brand-base-30:light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-70)); --slds-g-color-brand-base-40:light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-60)); --slds-g-color-brand-base-45:light-dark(var(--slds-r-color-brand-45), var(--slds-r-color-brand-55)); --slds-g-color-brand-base-50:var(--slds-r-color-brand-50); --slds-g-color-brand-base-55:light-dark(var(--slds-r-color-brand-55), var(--slds-r-color-brand-45)); --slds-g-color-brand-base-60:light-dark(var(--slds-r-color-brand-60), var(--slds-r-color-brand-40)); --slds-g-color-brand-base-65:light-dark(var(--slds-r-color-brand-65), var(--slds-r-color-brand-35)); --slds-g-color-brand-base-70:light-dark(var(--slds-r-color-brand-70), var(--slds-r-color-brand-30)); --slds-g-color-brand-base-80:light-dark(var(--slds-r-color-brand-80), var(--slds-r-color-brand-20)); --slds-g-color-brand-base-90:light-dark(var(--slds-r-color-brand-90), var(--slds-r-color-brand-10)); --slds-g-color-brand-base-95:light-dark(var(--slds-r-color-brand-95), var(--slds-r-color-brand-5)); --slds-g-color-brand-base-100:var(--slds-g-color-neutral-base-100); --slds-g-shadow-1:0px 0px 2px 0px light-dark(#0000002e, #0000005c), 0px 2px 2px 0px light-dark(#0000002e, #0000005c), 0px -1px 2px 0px light-dark(#0000001a, #00000033); --slds-g-shadow-2:0px 0px 5px 0px light-dark(#00000029, #00000052), 0px 3px 3px 0px light-dark(#00000029, #00000052), 0px -1px 2px 0px light-dark(#00000017, #0000002e); --slds-g-shadow-3:0px 0px 7px 0px light-dark(#00000024, #00000047), 0px 5px 5px 0px light-dark(#00000024, #00000047), 0px -1px 2px 0px light-dark(#00000014, #00000029); --slds-g-shadow-4:0px 0px 10px 0px light-dark(#0000001f, #0000003d), 0px 7px 7px 0px light-dark(#0000001f, #0000003d), 0px -1px 3px 0px light-dark(#00000012, #00000024); --slds-g-shadow-5:var(--slds-g-shadow-4); --slds-g-shadow-6:var(--slds-g-shadow-4); --slds-g-shadow-outline-focus-1:0px 0px 0px 2px var(--slds-g-color-brand-base-15); --slds-g-shadow-outset-focus-1:0px 0px 0px 2px var(--slds-g-color-neutral-base-100), 0px 0px 0px 4px var(--slds-g-color-brand-base-15); --slds-g-shadow-inset-focus-1:0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset; --slds-g-shadow-inset-inverse-focus-1:0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset, 0px 0px 0px 4px var(--slds-g-color-neutral-base-100) inset; --slds-g-shadow-inverse-1:0 0 3px #f3f3f3; --slds-g-shadow-insetinverse-focus-1:var(--slds-g-shadow-inset-inverse-focus-1); --slds-g-shadow-block-start-1:0px 0px 2px 0px light-dark(#0000002e, #0000005c), 0px -2px 2px 0px light-dark(#0000002e, #0000005c), 0px 1px 2px 0px light-dark(#0000001a, #00000033); --slds-g-shadow-block-start-2:0px 0px 5px 0px light-dark(#00000029, #00000052), 0px -3px 3px 0px light-dark(#00000029, #00000052), 0px 1px 2px 0px light-dark(#00000017, #0000002e); --slds-g-shadow-block-start-3:0px 0px 7px 0px light-dark(#00000024, #00000047), 0px -5px 5px 0px light-dark(#00000024, #00000047), 0px 1px 2px 0px light-dark(#00000014, #00000029); --slds-g-shadow-block-start-4:0px 0px 10px 0px light-dark(#0000001f, #0000003d), 0px -7px 7px 0px light-dark(#0000001f, #0000003d), 0px 1px 3px 0px light-dark(#00000012, #00000024); --slds-g-shadow-block-end-1:var(--slds-g-shadow-1); --slds-g-shadow-block-end-2:var(--slds-g-shadow-2); --slds-g-shadow-block-end-3:var(--slds-g-shadow-3); --slds-g-shadow-block-end-4:var(--slds-g-shadow-4); --slds-g-shadow-blockstart-1:var(--slds-g-shadow-block-start-1); --slds-g-shadow-blockstart-2:var(--slds-g-shadow-block-start-2); --slds-g-shadow-blockstart-3:var(--slds-g-shadow-block-start-3); --slds-g-shadow-blockstart-4:var(--slds-g-shadow-block-start-4); --slds-g-shadow-blockend-1:var(--slds-g-shadow-block-end-1); --slds-g-shadow-blockend-2:var(--slds-g-shadow-block-end-2); --slds-g-shadow-blockend-3:var(--slds-g-shadow-block-end-3); --slds-g-shadow-blockend-4:var(--slds-g-shadow-block-end-4); --slds-g-shadow-inline-start-1:0px 0px 2px 0px light-dark(#0000002e, #0000005c), -2px 0px 2px 0px light-dark(#0000002e, #0000005c), 1px 0px 2px 0px light-dark(#0000001a, #00000033); --slds-g-shadow-inline-start-2:0px 0px 5px 0px light-dark(#00000029, #00000052), -3px 0px 3px 0px light-dark(#00000029, #00000052), 1px 0px 2px 0px light-dark(#00000017, #0000002e); --slds-g-shadow-inline-start-3:0px 0px 7px 0px light-dark(#00000024, #00000047), -5px 0px 5px 0px light-dark(#00000024, #00000047), 1px 0px 2px 0px light-dark(#00000014, #00000029); --slds-g-shadow-inline-start-4:0px 0px 10px 0px light-dark(#0000001f, #0000003d), -7px 0px 7px 0px light-dark(#0000001f, #0000003d), 1px 0px 3px 0px light-dark(#00000012, #00000024); --slds-g-shadow-inline-end-1:0px 0px 2px 0px light-dark(#0000002e, #0000005c), 2px 0px 2px 0px light-dark(#0000002e, #0000005c), -1px 0 2px 0 light-dark(#0000001a, #00000033); --slds-g-shadow-inline-end-2:0px 0px 5px 0px light-dark(#00000029, #00000052), 3px 0px 3px 0px light-dark(#00000029, #00000052), -1px 0px 2px 0px light-dark(#00000017, #0000002e); --slds-g-shadow-inline-end-3:0px 0px 7px 0px light-dark(#00000024, #00000047), 5px 0px 5px 0px light-dark(#00000024, #00000047), -1px 0px 3px 0px light-dark(#00000014, #00000029); --slds-g-shadow-inline-end-4:0px 0px 10px 0px light-dark(#0000001f, #0000003d), 7px 0px 7px 0px light-dark(#0000001f, #0000003d), -1px 0px 3px 0px light-dark(#00000012, #00000024); --slds-g-shadow-inlinestart-1:var(--slds-g-shadow-inline-start-1); --slds-g-shadow-inlinestart-2:var(--slds-g-shadow-inline-start-2); --slds-g-shadow-inlinestart-3:var(--slds-g-shadow-inline-start-3); --slds-g-shadow-inlinestart-4:var(--slds-g-shadow-inline-start-4); --slds-g-shadow-inlineend-1:var(--slds-g-shadow-inline-end-1); --slds-g-shadow-inlineend-2:var(--slds-g-shadow-inline-end-2); --slds-g-shadow-inlineend-3:var(--slds-g-shadow-inline-end-3); --slds-g-shadow-inlineend-4:var(--slds-g-shadow-inline-end-4); } :where(html){ --slds-s-alert-font-weight:var(--slds-g-font-weight-6); --slds-s-alert-close-button-hover:var(--slds-g-color-on-surface-3); --slds-s-avatar-radius-border:var(--slds-g-radius-border-circle); --slds-s-backdrop-color-background:light-dark(color-mix(in oklab, var(--slds-g-color-palette-neutral-20),transparent 20%), color-mix(in oklab, var(--slds-g-color-palette-neutral-95),transparent 20%)); --slds-s-button-color:var(--slds-g-color-accent-2); --slds-s-button-shadow-focus:0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --slds-s-button-shadow-focus-inverse:0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1); --slds-s-button-shadow-active:2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset; --slds-s-button-brand-shadow-hover:0 2px 0 0 light-dark(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-70)); --slds-s-button-brand-transform-hover:translateY(-2px); --slds-s-button-bordered-shadow-hover:0 1.5px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-70)); --slds-s-button-bordered-transform-hover:translateY(-1.5px); --slds-s-button-radius-border:var(--slds-g-radius-border-pill); --slds-s-button-spacing-inline:var(--slds-g-spacing-4); --slds-s-button-color-background:var(--slds-g-color-surface-container-1); --slds-s-button-color-background-hover:var(--slds-g-color-brand-base-90); --slds-s-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-s-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-s-button-color-border:var(--slds-g-color-border-2); --slds-s-button-color-hover:var(--slds-g-color-on-surface-3); --slds-s-container-color:var(--slds-g-color-on-surface-1); --slds-s-container-shadow:none; --slds-s-container-footer-sizing-border:var(--slds-g-sizing-border-1); --slds-s-container-footer-color-background:var(--slds-g-color-surface-container-1); --slds-s-container-footer-font-align:right; --slds-s-container-footer-font-color:var(--slds-g-color-on-surface-2); --slds-s-container-sizing-border:0; --slds-s-container-radius-border:var(--slds-g-radius-border-4); --slds-s-container-heading-font-color:var(--slds-g-color-on-surface-3); --slds-s-container-heading-font-size:var(--slds-g-font-scale-3); --slds-s-container-heading-font-weight:var(--slds-g-font-weight-4); --slds-s-container-heading-font-align:left; --slds-s-container-content-color:var(--slds-g-color-on-surface-1); --slds-s-container-color-border:transparent; --slds-s-container-heading-var-font-size:var(--slds-g-font-scale-var-3); --slds-s-header-sizing-height:3.125rem; --slds-s-helptext-color:var(--slds-g-color-on-surface-1); --slds-s-helptext-font-size:var(--slds-g-font-scale-neg-1); --slds-s-helptext-spacing:var(--slds-g-spacing-1); --slds-s-icon-color-foreground:var(--slds-g-color-on-surface-1); --slds-s-icon-radius-border:var(--slds-g-radius-border-circle); --slds-s-input-radius-border:var(--slds-g-radius-border-2); --slds-s-input-color-background:var(--slds-g-color-surface-container-1); --slds-s-input-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-s-input-color-background-invalid:var(--slds-g-color-error-container-1); --slds-s-input-color-border:var(--slds-g-color-border-2); --slds-s-input-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-s-input-color-border-focus:var(--slds-g-color-border-2); --slds-s-input-spacing:var(--slds-g-spacing-2); --slds-s-input-shadow-focus:2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --slds-s-input-shadow-invalid:none; --slds-s-input-color:var(--slds-g-color-on-surface-2); --slds-s-input-color-disabled:var(--slds-g-color-on-disabled-1); --slds-s-input-color-invalid:var(--slds-g-color-error-1); --slds-s-label-color:var(--slds-g-color-on-surface-2); --slds-s-label-font-size:var(--slds-g-font-size-base); --slds-s-label-font-weight:var(--slds-g-font-weight-6); --slds-s-label-spacing:var(--slds-g-spacing-2); --slds-s-label-spacing-gap:var(--slds-g-spacing-1); --slds-s-link-color:var(--slds-g-color-accent-2); --slds-s-link-color-hover:var(--slds-g-color-accent-3); --slds-s-link-color-focus:var(--slds-g-color-accent-3); --slds-s-link-color-active:var(--slds-g-color-accent-3); --slds-s-link-outline-color:var(--slds-g-color-brand-base-15); --slds-s-mark-color-foreground-checked:var(--slds-g-color-on-accent-1); --slds-s-mark-color-background:var(--slds-g-color-surface-container-1); --slds-s-mark-color-background-checked:var(--slds-g-color-accent-container-1); --slds-s-mark-color-foreground-invalid:var(--slds-g-color-error-base-100); --slds-s-mark-color-background-invalid:var(--slds-g-color-error-base-40); --slds-s-mark-shadow-focus:0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15); --slds-s-mark-shadow-checked:0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset; --slds-s-menu-item-color-background-active:var(--slds-g-color-brand-base-90); --slds-s-menu-item-color-active:var(--slds-g-color-accent-1); --slds-s-navigation-color:var(--slds-g-color-on-surface-1); --slds-s-navigation-color-active:var(--slds-g-color-accent-3); --slds-s-navigation-color-hover:var(--slds-g-color-brand-base-15); --slds-s-navigation-color-background:var(--slds-g-color-surface-container-1); --slds-s-navigation-color-background-active:var(--slds-g-color-surface-container-1); --slds-s-navigation-color-background-hover:var(--slds-g-color-brand-base-90); --slds-s-navigation-color-border:var(--slds-g-color-border-1); --slds-s-navigation-color-border-hover:var(--slds-g-color-brand-base-15); --slds-s-navigation-sizing-border-hover:3px; --slds-s-navigation-sizing-border-active:3px; --slds-s-navigation-sizing-height:2.5rem; --slds-s-navigation-font-weight:600; --slds-s-navigation-font-weight-active:600; --slds-s-navigation-font-lineheight:2.5rem; --slds-s-pageheader-color-background:var(--slds-g-color-surface-container-2); --slds-s-pageheader-row-color-background:var(--slds-g-color-surface-container-2); --slds-s-pageheader-radius-border:0; --slds-s-pageheader-title-font-size:var(--slds-g-font-scale-5); --slds-s-pageheader-title-font-weight:var(--slds-g-font-weight-4); --slds-s-pageheader-sizing-border:0; --slds-s-pageheader-shadow:none; --slds-s-pageheader-action-bottom-spacing:var(--slds-g-spacing-1); --slds-s-pill-color-background-hover:var(--slds-g-color-brand-base-90); --slds-s-table-color:var(--slds-g-color-neutral-base-0); --slds-s-table-header-color-background:var(--slds-g-color-surface-container-2); --slds-s-table-header-color-background-hover:var(--slds-g-color-surface-container-3); --slds-s-table-header-color-background-selected:var(--slds-g-color-surface-container-1); --slds-s-table-header-font-weight:var(--slds-g-font-weight-6); --slds-s-table-resize-color:var(--slds-g-color-border-1); --slds-s-table-resize-color-active:var(--slds-g-color-accent-3); --slds-s-table-row-color-background-selected:var(--slds-g-color-brand-base-90); --slds-s-table-row-color-border-selected-hover:var(--slds-g-color-border-accent-2); --slds-s-table-cell-shadow-selected:var(--slds-g-color-brand-base-15) 0 0 0 2px inset; --slds-s-table-header-color:var(--slds-g-color-on-surface-1); } .slds-badge{ --slds-c-badge-gap:var(--slds-g-spacing-1); --slds-c-badge-spacing-block:var(--slds-g-spacing-1); --slds-c-badge-spacing-inline:var(--slds-g-spacing-2); --slds-c-badge-font-size:var(--slds-g-font-scale-neg-1); --slds-c-badge-font-weight:var(--slds-g-font-weight-4); --slds-c-badge-font-line-height:normal; --slds-c-badge-sizing-border:var(--slds-g-sizing-border-1); --slds-c-badge-radius-border:var(--slds-g-radius-border-1); --slds-c-badge-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-badge-color-background:var(--slds-g-color-surface-container-3); --slds-c-badge-icon-size:var(--slds-g-sizing-4); --slds-c-badge-icon-color-foreground:currentcolor; --slds-c-badge-margin-inline-start-adjacent:var(--slds-g-spacing-2); } lightning-badge{ --slds-c-badge-gap:var(--slds-g-spacing-1); --slds-c-badge-spacing-block:var(--slds-g-spacing-1); --slds-c-badge-spacing-inline:var(--slds-g-spacing-2); --slds-c-badge-font-size:var(--slds-g-font-scale-neg-1); --slds-c-badge-font-weight:var(--slds-g-font-weight-4); --slds-c-badge-font-line-height:normal; --slds-c-badge-sizing-border:var(--slds-g-sizing-border-1); --slds-c-badge-radius-border:var(--slds-g-radius-border-1); --slds-c-badge-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-badge-color-background:var(--slds-g-color-surface-container-3); --slds-c-badge-icon-size:var(--slds-g-sizing-4); --slds-c-badge-icon-color-foreground:currentcolor; --slds-c-badge-margin-inline-start-adjacent:var(--slds-g-spacing-2); } lightning-badge .slds-badge{ --slds-c-badge-gap:unset; --slds-c-badge-spacing-block:unset; --slds-c-badge-spacing-inline:unset; --slds-c-badge-font-size:unset; --slds-c-badge-font-weight:unset; --slds-c-badge-font-line-height:unset; --slds-c-badge-sizing-border:unset; --slds-c-badge-radius-border:unset; --slds-c-badge-color-foreground:unset; --slds-c-badge-color-background:unset; --slds-c-badge-icon-size:unset; --slds-c-badge-icon-color-foreground:unset; --slds-c-badge-margin-inline-start-adjacent:unset; } .slds-badge.slds-badge_inverse,.slds-badge.slds-badge--inverse{ --slds-c-badge-color-background:var(--slds-g-color-neutral-base-50); --slds-c-badge-color-foreground:var(--slds-g-color-on-surface-inverse-1); } lightning-badge.slds-badge_inverse,lightning-badge.slds-badge--inverse,.slds-badge.slds-badge--inverse{ --slds-c-badge-color-background:var(--slds-g-color-neutral-base-50); --slds-c-badge-color-foreground:var(--slds-g-color-on-surface-inverse-1); } lightning-badge .slds-badge.slds-badge_inverse,lightning-badge .slds-badge.slds-badge--inverse,.slds-badge.slds-badge--inverse{ --slds-c-badge-color-background:unset; --slds-c-badge-color-foreground:unset; } .slds-badge.slds-badge_lightest,.slds-badge.slds-badge--lightest{ --slds-c-badge-color-background:var(--slds-g-color-surface-container-1); --slds-c-badge-color-border:var(--slds-g-color-border-1); } lightning-badge.slds-badge_lightest,lightning-badge.slds-badge--lightest,.slds-badge.slds-badge--lightest{ --slds-c-badge-color-background:var(--slds-g-color-surface-container-1); --slds-c-badge-color-border:var(--slds-g-color-border-1); } lightning-badge .slds-badge.slds-badge_lightest,lightning-badge .slds-badge.slds-badge--lightest,.slds-badge.slds-badge--lightest{ --slds-c-badge-color-background:unset; --slds-c-badge-color-border:unset; } .slds-badge .slds-icon{ --slds-c-icon-size:var(--slds-c-badge-icon-size); --slds-c-icon-color-foreground:var(--slds-c-badge-icon-color-foreground); } lightning-badge .slds-icon{ --slds-c-icon-size:var(--slds-c-badge-icon-size); --slds-c-icon-color-foreground:var(--slds-c-badge-icon-color-foreground); } .slds-breadcrumb{ --slds-c-breadcrumbs-spacing-gap:var(--slds-g-spacing-1); --slds-c-breadcrumbs-separator-content:'>'; --slds-c-breadcrumbs-separator-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-breadcrumbs-font-size:var(--slds-g-font-size-base); --slds-c-breadcrumbs-font-weight:var(--slds-g-font-weight-4); --slds-c-breadcrumbs-color-foreground:var(--slds-s-link-color); --slds-c-breadcrumbs-color-foreground-hover:var(--slds-s-link-color-hover); --slds-c-breadcrumbs-color-foreground-focus:var(--slds-s-link-color-focus); --slds-c-breadcrumbs-color-foreground-active:var(--slds-s-link-color-active); --slds-c-breadcrumbs-color-foreground-disabled:var(--slds-g-color-disabled-1); } lightning-breadcrumbs{ --slds-c-breadcrumbs-spacing-gap:var(--slds-g-spacing-1); --slds-c-breadcrumbs-separator-content:'>'; --slds-c-breadcrumbs-separator-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-breadcrumbs-font-size:var(--slds-g-font-size-base); --slds-c-breadcrumbs-font-weight:var(--slds-g-font-weight-4); --slds-c-breadcrumbs-color-foreground:var(--slds-s-link-color); --slds-c-breadcrumbs-color-foreground-hover:var(--slds-s-link-color-hover); --slds-c-breadcrumbs-color-foreground-focus:var(--slds-s-link-color-focus); --slds-c-breadcrumbs-color-foreground-active:var(--slds-s-link-color-active); --slds-c-breadcrumbs-color-foreground-disabled:var(--slds-g-color-disabled-1); } lightning-breadcrumbs .slds-breadcrumb{ --slds-c-breadcrumbs-spacing-gap:unset; --slds-c-breadcrumbs-separator-content:unset; --slds-c-breadcrumbs-separator-color-foreground:unset; --slds-c-breadcrumbs-font-size:unset; --slds-c-breadcrumbs-font-weight:unset; --slds-c-breadcrumbs-color-foreground:unset; --slds-c-breadcrumbs-color-foreground-hover:unset; --slds-c-breadcrumbs-color-foreground-focus:unset; --slds-c-breadcrumbs-color-foreground-active:unset; --slds-c-breadcrumbs-color-foreground-disabled:unset; } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a{ position:relative; will-change:color, transform; transition:transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1); margin-inline-end:var(--slds-g-spacing-2); margin-inline-start:var(--slds-g-spacing-2); padding-inline-end:0; padding-inline-start:0; } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active{ transform:scale(0.95); } @media (prefers-reduced-motion: reduce){ [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active{ transform:none; } } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a::after{ will-change:transform-origin, transform; isolation:isolate; content:''; position:absolute; inset-block-start:80%; inset-inline-start:0%; height:0.0625rem; width:100%; background:var(--slds-g-color-accent-2); background-position:left top; transform-origin:var(--slds-kx-breadcrumbs-pointer-position-x, 50%) 0; transition:transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1); } [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:hover::after{ transform:scaleX(1); } [kx-scope='breadcrumbs-item'][kx-type='underline']:first-child > a{ margin-inline-start:0; } .slds-button{ --slds-c-button-radius-border:var(--slds-s-button-radius-border); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-font-weight:var(--slds-g-font-weight-6); --slds-c-button-font-line-height:1.875rem; --slds-c-button-spacing-gap:var(--slds-g-spacing-2); --slds-c-icon-size:0.875rem; --slds-c-button-color-foreground:var(--slds-g-color-accent-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-3); --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); --slds-c-button-color-foreground-disabled:var(--slds-g-color-disabled-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } lightning-button{ --slds-c-button-radius-border:var(--slds-s-button-radius-border); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-font-weight:var(--slds-g-font-weight-6); --slds-c-button-font-line-height:1.875rem; --slds-c-button-spacing-gap:var(--slds-g-spacing-2); --slds-c-icon-size:0.875rem; --slds-c-button-color-foreground:var(--slds-g-color-accent-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-3); --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); --slds-c-button-color-foreground-disabled:var(--slds-g-color-disabled-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } lightning-button .slds-button{ --slds-c-button-radius-border:unset; --slds-c-button-sizing-border:unset; --slds-c-button-font-weight:unset; --slds-c-button-font-line-height:unset; --slds-c-button-spacing-gap:unset; --slds-c-icon-size:unset; --slds-c-button-color-foreground:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-foreground-disabled:unset; --slds-c-button-shadow-focus:unset; } .slds-button:not([disabled]){ transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button:focus-visible{ box-shadow:var(--slds-c-button-shadow-focus); outline:0; background-clip:padding-box; } .slds-button.slds-button_reset:focus-visible,.slds-button.slds-button--reset:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outset-focus-1); box-shadow:var(--slds-c-button-shadow-focus); } .slds-button_neutral,.slds-button--neutral{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-2); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-2); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-2); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-2); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-1); } lightning-button[variant='neutral'],.slds-button--neutral{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-2); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-2); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-2); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-2); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-1); } lightning-button[variant='neutral'] .slds-button_neutral,lightning-button[variant='neutral'] .slds-button--neutral,.slds-button--neutral{ --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_neutral:hover,.slds-button--neutral:hover{ transform:var(--slds-s-button-bordered-transform-hover); box-shadow:var(--slds-s-button-bordered-shadow-hover); } .slds-button_neutral:active,.slds-button--neutral:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_brand,.slds-button--brand{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); --slds-c-button-color-background-focus:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-on-accent-2); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-2); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='brand'],.slds-button--brand{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); --slds-c-button-color-background-focus:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-on-accent-2); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-2); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='brand'] .slds-button_brand,lightning-button[variant='brand'] .slds-button--brand,.slds-button--brand{ --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-color-foreground:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-color-foreground-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_brand:hover,.slds-button--brand:hover{ transform:var(--slds-s-button-brand-transform-hover); box-shadow:var(--slds-s-button-brand-shadow-hover); } .slds-button_brand:active,.slds-button--brand:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_outline-brand,.slds-button--outline-brand{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-accent-1); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-accent-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-accent-1); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); } lightning-button[variant='brand-outline'],.slds-button--outline-brand{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-accent-1); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-accent-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-accent-1); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); } lightning-button[variant='brand-outline'] .slds-button_outline-brand,lightning-button[variant='brand-outline'] .slds-button--outline-brand,.slds-button--outline-brand{ --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; } .slds-button_outline-brand:hover,.slds-button--outline-brand:hover{ transform:var(--slds-s-button-bordered-transform-hover); box-shadow:var(--slds-s-button-brand-shadow-hover); } .slds-button_outline-brand:active,.slds-button--outline-brand:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_destructive,.slds-button--destructive{ --slds-c-button-color-foreground:#fff; --slds-c-button-color-background:var(--slds-g-color-error-base-50); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-foreground-hover:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-hover:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-hover:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-foreground-focus:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-focus:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-focus:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-foreground-active:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-active:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-active:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='destructive'],.slds-button--destructive{ --slds-c-button-color-foreground:#fff; --slds-c-button-color-background:var(--slds-g-color-error-base-50); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-foreground-hover:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-hover:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-hover:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-foreground-focus:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-focus:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-focus:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-foreground-active:light-dark(#fff, var(--slds-g-color-error-base-40)); --slds-c-button-color-background-active:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-border-active:light-dark( var(--slds-g-color-error-base-40), var(--slds-g-color-error-base-90) ); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='destructive'] .slds-button_destructive,lightning-button[variant='destructive'] .slds-button--destructive,.slds-button--destructive{ --slds-c-button-color-foreground:unset; --slds-c-button-color-background:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-foreground-focus:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_destructive:hover,.slds-button--destructive:hover{ transform:var(--slds-s-button-brand-transform-hover); box-shadow:0 2px 0 0 light-dark(var(--slds-g-color-error-base-20), var(--slds-g-color-error-base-40)); } .slds-button_destructive:active,.slds-button--destructive:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_text-destructive,.slds-button--text-destructive{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-error-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-error-1); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-error-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-active:var(--slds-g-color-error-1); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-1); } lightning-button[variant='destructive-text'],.slds-button--text-destructive{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-error-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-error-1); --slds-c-button-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-focus:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-error-1); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:var(--slds-g-color-border-error-2); --slds-c-button-color-foreground-active:var(--slds-g-color-error-1); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-1); } lightning-button[variant='destructive-text'] .slds-button_text-destructive,lightning-button[variant='destructive-text'] .slds-button--text-destructive,.slds-button--text-destructive{ --slds-c-button-color-foreground:unset; --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-color-foreground-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_text-destructive:hover,.slds-button--text-destructive:hover{ transform:var(--slds-s-button-bordered-transform-hover); box-shadow:0 2px 0 0 light-dark(var(--slds-g-color-error-base-20), var(--slds-g-color-error-base-40)); } .slds-button_text-destructive:active,.slds-button--text-destructive:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_success,.slds-button--success{ --slds-c-button-color-foreground:#fff; --slds-c-button-color-background:var(--slds-g-color-success-base-50); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-foreground-hover:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-hover:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-hover:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-foreground-focus:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-focus:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-focus:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-foreground-active:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-active:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-active:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='success'],.slds-button--success{ --slds-c-button-color-foreground:#fff; --slds-c-button-color-background:var(--slds-g-color-success-base-50); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-foreground-hover:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-hover:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-hover:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-foreground-focus:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-focus:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-focus:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-foreground-active:light-dark(#fff, var(--slds-g-color-success-base-40)); --slds-c-button-color-background-active:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-border-active:light-dark( var(--slds-g-color-success-base-40), var(--slds-g-color-success-base-90) ); --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } lightning-button[variant='success'] .slds-button_success,lightning-button[variant='success'] .slds-button--success,.slds-button--success{ --slds-c-button-color-foreground:unset; --slds-c-button-color-background:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-foreground-focus:unset; --slds-c-button-color-background-focus:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-background-disabled:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_success:hover,.slds-button--success:hover{ transform:var(--slds-s-button-brand-transform-hover); box-shadow:0 2px 0 0 light-dark(var(--slds-g-color-success-base-20), var(--slds-g-color-success-base-40)); } .slds-button_success:active,.slds-button--success:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button_full-width:hover,.slds-button--full-width:hover{ box-shadow:none; transform:none; } .slds-button_full-width:focus-visible,.slds-button--full-width:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outset-focus-1); box-shadow:var(--slds-c-button-shadow-focus); } .slds-button_inverse,.slds-button--inverse{ --slds-c-button-color-background:transparent; --slds-c-button-color-border:var(--slds-g-color-border-inverse-1); --slds-c-button-color-foreground:var(--slds-g-color-on-surface-inverse-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-inverse-1); --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-3); --slds-c-button-color-border-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-on-surface-3); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); --slds-c-button-color-border-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 50% ); --slds-c-button-color-foreground-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 50% ); } lightning-button[variant='inverse'],.slds-button--inverse{ --slds-c-button-color-background:transparent; --slds-c-button-color-border:var(--slds-g-color-border-inverse-1); --slds-c-button-color-foreground:var(--slds-g-color-on-surface-inverse-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline); --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-border-inverse-1); --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-3); --slds-c-button-color-border-focus:var(--slds-g-color-surface-container-2); --slds-c-button-color-foreground-focus:var(--slds-g-color-on-surface-3); --slds-c-button-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); --slds-c-button-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); --slds-c-button-color-border-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 50% ); --slds-c-button-color-foreground-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 50% ); } lightning-button[variant='inverse'] .slds-button_inverse,lightning-button[variant='inverse'] .slds-button--inverse,.slds-button--inverse{ --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-color-foreground:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-color-border-hover:unset; --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-border-focus:unset; --slds-c-button-color-foreground-focus:unset; --slds-c-button-shadow-focus:unset; --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-color-border-disabled:unset; --slds-c-button-color-foreground-disabled:unset; } .slds-button_inverse:hover,.slds-button--inverse:hover{ transform:var(--slds-s-button-brand-transform-hover); box-shadow:0 2px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-40)); } .slds-button_inverse:not(:hover):focus-visible,.slds-button--inverse:not(:hover):focus-visible{ --slds-c-button-shadow-focus:0px 0px 0px 2px var(--slds-g-color-neutral-base-95) inset; --slds-c-button-color-foreground-focus:var(--slds-g-color-on-surface-inverse-1); } lightning-button[variant='inverse']:not(:hover):focus-visible,.slds-button--inverse:not(:hover):focus-visible{ --slds-c-button-shadow-focus:0px 0px 0px 2px var(--slds-g-color-neutral-base-95) inset; --slds-c-button-color-foreground-focus:var(--slds-g-color-on-surface-inverse-1); } lightning-button[variant='inverse'] .slds-button_inverse:not(:hover):focus-visible,lightning-button[variant='inverse'] .slds-button--inverse:not(:hover):focus-visible,.slds-button--inverse:not(:hover):focus-visible{ --slds-c-button-shadow-focus:unset; --slds-c-button-color-foreground-focus:unset; } .slds-button_inverse:active,.slds-button--inverse:active{ transform:none; box-shadow:var(--slds-s-button-shadow-active); } .slds-button .slds-button__icon_large,.slds-button .slds-button__icon--large{ --slds-c-button-icon-size:var(--slds-g-sizing-7); } lightning-button .slds-button__icon_large,lightning-button .slds-button__icon--large,.slds-button .slds-button__icon--large{ --slds-c-button-icon-size:var(--slds-g-sizing-7); } .slds-button .slds-button__icon_small,.slds-button .slds-button__icon--small{ --slds-c-button-icon-size:var(--slds-g-sizing-4); } lightning-button .slds-button__icon_small,lightning-button .slds-button__icon--small,.slds-button .slds-button__icon--small{ --slds-c-button-icon-size:var(--slds-g-sizing-4); } .slds-button .slds-button__icon_x-small,.slds-button .slds-button__icon--x-small{ --slds-c-button-icon-size:var(--slds-g-sizing-3); } lightning-button .slds-button__icon_x-small,lightning-button .slds-button__icon--x-small,.slds-button .slds-button__icon--x-small{ --slds-c-button-icon-size:var(--slds-g-sizing-3); } .slds-button_stateful,.slds-button--stateful{ --slds-c-button-stateful-gap:var(--slds-g-spacing-2); } lightning-button-stateful,.slds-button--stateful{ --slds-c-button-stateful-gap:var(--slds-g-spacing-2); } lightning-button-stateful .slds-button_stateful,lightning-button-stateful .slds-button--stateful,.slds-button--stateful{ --slds-c-button-stateful-gap:unset; } .slds-button_stateful.slds-button_reset,.slds-button--stateful.slds-button--reset{ --slds-c-button-color-foreground:var(--slds-s-link-color); } lightning-button-stateful.slds-button_reset,lightning-button-stateful.slds-button--reset,.slds-button--stateful.slds-button--reset{ --slds-c-button-color-foreground:var(--slds-s-link-color); } lightning-button-stateful .slds-button_stateful.slds-button_reset,lightning-button-stateful .slds-button--stateful.slds-button--reset,.slds-button--stateful.slds-button--reset{ --slds-c-button-color-foreground:unset; } .slds-button_dual-stateful,.slds-button--dual-stateful{ --slds-c-button-dual-stateful-gap:var(--slds-g-spacing-2); } lightning-button-stateful,.slds-button--dual-stateful{ --slds-c-button-dual-stateful-gap:var(--slds-g-spacing-2); } lightning-button-stateful .slds-button_dual-stateful,lightning-button-stateful .slds-button--dual-stateful,.slds-button--dual-stateful{ --slds-c-button-dual-stateful-gap:unset; } .slds-button_dual-stateful.slds-is-pressed,.slds-button--dual-stateful.slds-is-pressed{ --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)); } lightning-button-stateful.slds-is-pressed,.slds-button--dual-stateful.slds-is-pressed{ --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-button-spacing-inline:var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)); } lightning-button-stateful .slds-button_dual-stateful.slds-is-pressed,lightning-button-stateful .slds-button--dual-stateful.slds-is-pressed,.slds-button--dual-stateful.slds-is-pressed{ --slds-c-button-sizing-border:unset; --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-color-foreground:unset; --slds-c-button-spacing-inline:unset; } .slds-button_dual-stateful.slds-is-pressed:hover,.slds-button--dual-stateful.slds-is-pressed:hover, .slds-button_dual-stateful.slds-is-pressed:focus-visible, .slds-button--dual-stateful.slds-is-pressed:focus-visible{ --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); } lightning-button-stateful.slds-is-pressed:hover,.slds-button--dual-stateful.slds-is-pressed:hover, .slds-button_dual-stateful.slds-is-pressed:focus-visible, .slds-button--dual-stateful.slds-is-pressed:focus-visible, .slds-button--dual-stateful.slds-is-pressed:focus-visible{ --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); } .slds-button_dual-stateful.slds-is-pressed:hover,.slds-button--dual-stateful.slds-is-pressed:hover{ --slds-c-button-shadow-hover:var(--slds-s-button-brand-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-brand-transform-hover); } lightning-button-stateful.slds-is-pressed:hover,.slds-button--dual-stateful.slds-is-pressed:hover{ --slds-c-button-shadow-hover:var(--slds-s-button-brand-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-brand-transform-hover); } lightning-button-stateful .slds-button_dual-stateful.slds-is-pressed:hover,lightning-button-stateful .slds-button--dual-stateful.slds-is-pressed:hover,.slds-button--dual-stateful.slds-is-pressed:hover{ --slds-c-button-shadow-hover:unset; --slds-c-button-transform-hover:unset; } .slds-button_dual-stateful.slds-is-pressed:focus-visible,.slds-button--dual-stateful.slds-is-pressed:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } lightning-button-stateful.slds-is-pressed:focus-visible,.slds-button--dual-stateful.slds-is-pressed:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } lightning-button-stateful .slds-button_dual-stateful.slds-is-pressed:focus-visible,lightning-button-stateful .slds-button--dual-stateful.slds-is-pressed:focus-visible,.slds-button--dual-stateful.slds-is-pressed:focus-visible{ --slds-c-button-shadow-focus:unset; } .slds-button_dual-stateful.slds-is-pressed:active,.slds-button--dual-stateful.slds-is-pressed:active{ --slds-c-button-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-2); --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); --slds-c-button-transform-hover:none; } lightning-button-stateful.slds-is-pressed:active,.slds-button--dual-stateful.slds-is-pressed:active{ --slds-c-button-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-active:transparent; --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-2); --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); --slds-c-button-transform-hover:none; } lightning-button-stateful .slds-button_dual-stateful.slds-is-pressed:active,lightning-button-stateful .slds-button--dual-stateful.slds-is-pressed:active,.slds-button--dual-stateful.slds-is-pressed:active{ --slds-c-button-color-background-active:unset; --slds-c-button-color-border-active:unset; --slds-c-button-color-foreground-active:unset; --slds-c-button-shadow-active:unset; --slds-c-button-transform-hover:unset; } .slds-button.slds-button_icon,.slds-button.slds-button--icon{ --slds-c-button-spacing-gap:0; } .slds-buttonlightning-button-icon,.slds-button.slds-button--icon{ --slds-c-button-spacing-gap:0; } lightning-button-icon .slds-button.slds-button_icon,lightning-button-icon .slds-button.slds-button--icon,.slds-button.slds-button--icon{ --slds-c-button-spacing-gap:unset; } .slds-button .slds-button__icon{ --slds-c-icon-color-foreground:var(--slds-c-button-icon-color-foreground); } lightning-button .slds-button__icon{ --slds-c-icon-color-foreground:var(--slds-c-button-icon-color-foreground); } .slds-button.slds-button_icon,.slds-button.slds-button--icon, .slds-button.slds-button_icon-inverse, .slds-button.slds-button--icon-inverse, .slds-button.slds-button_icon-container, .slds-button.slds-button--icon-container, .slds-button.slds-button_icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button_icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button_icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button_icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button_icon-error, .slds-button.slds-button--icon-error, .slds-button.slds-button_icon-warning, .slds-button.slds-button--icon-warning{ --slds-c-button-color-background-hover:transparent; --slds-c-button-color-border:transparent; } .slds-buttonlightning-button-icon,.slds-button.slds-button--icon, .slds-button.slds-button_icon-inverse, .slds-button.slds-button--icon-inverse, .slds-button.slds-button--icon-inverse, .slds-button.slds-button_icon-container, .slds-button.slds-button--icon-container, .slds-button.slds-button--icon-container, .slds-button.slds-button_icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button_icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button_icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button_icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button_icon-error, .slds-button.slds-button--icon-error, .slds-button.slds-button--icon-error, .slds-button.slds-button_icon-warning, .slds-button.slds-button--icon-warning, .slds-button.slds-button--icon-warning{ --slds-c-button-color-background-hover:transparent; --slds-c-button-color-border:transparent; } .slds-button.slds-button_icon:hover,.slds-button.slds-button--icon:hover{ --slds-c-button-color-border-hover:transparent; } .slds-buttonlightning-button-icon:hover,.slds-button.slds-button--icon:hover{ --slds-c-button-color-border-hover:transparent; } lightning-button-icon .slds-button.slds-button_icon:hover,lightning-button-icon .slds-button.slds-button--icon:hover,.slds-button.slds-button--icon:hover{ --slds-c-button-color-border-hover:unset; } .slds-button.slds-button_icon[disabled],.slds-button.slds-button--icon[disabled], .slds-button.slds-button_icon:disabled, .slds-button.slds-button--icon:disabled{ --slds-c-button-color-border-disabled:transparent; } .slds-buttonlightning-button-icon[disabled],.slds-button.slds-button--icon[disabled], .slds-button.slds-button_icon:disabled, .slds-button.slds-button--icon:disabled, .slds-button.slds-button--icon:disabled{ --slds-c-button-color-border-disabled:transparent; } .slds-button.slds-button_icon:focus-visible,.slds-button.slds-button--icon:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } .slds-buttonlightning-button-icon:focus-visible,.slds-button.slds-button--icon:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } lightning-button-icon .slds-button.slds-button_icon:focus-visible,lightning-button-icon .slds-button.slds-button--icon:focus-visible,.slds-button.slds-button--icon:focus-visible{ --slds-c-button-shadow-focus:unset; } .slds-button.slds-button_icon-inverse:focus-visible,.slds-button.slds-button--icon-inverse:focus-visible, .slds-button.slds-button_icon-container:focus-visible, .slds-button.slds-button--icon-container:focus-visible, .slds-button.slds-button_icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible, .slds-button.slds-button_icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button_icon-border-inverse:focus-visible, .slds-button.slds-button--icon-border-inverse:focus-visible, .slds-button.slds-button_icon-more:focus-visible, .slds-button.slds-button--icon-more:focus-visible, .slds-button.slds-button_icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button_icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } .slds-buttonlightning-button-icon[variant='bare-inverse']:focus-visible,.slds-button.slds-button--icon-inverse:focus-visible, .slds-button.slds-button_icon-container:focus-visible, .slds-button.slds-button--icon-container:focus-visible, .slds-button.slds-button--icon-container:focus-visible, .slds-button.slds-button_icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible, .slds-button.slds-button_icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button_icon-border-inverse:focus-visible, .slds-button.slds-button--icon-border-inverse:focus-visible, .slds-button.slds-button--icon-border-inverse:focus-visible, .slds-button.slds-button_icon-more:focus-visible, .slds-button.slds-button--icon-more:focus-visible, .slds-button.slds-button--icon-more:focus-visible, .slds-button.slds-button_icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button_icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } .slds-button.slds-button_icon-container,.slds-button.slds-button--icon-container, .slds-button.slds-button_icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button_icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button_icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button_icon-brand, .slds-button.slds-button--icon-brand, .slds-button.slds-button_icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button_icon-container-more, .slds-button.slds-button--icon-container-more{ --slds-c-button-icon-container-size:var(--slds-g-sizing-9); } .slds-buttonlightning-button-icon[variant='container'],.slds-button.slds-button--icon-container, .slds-button.slds-button_icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button--icon-border, .slds-button.slds-button_icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button--icon-border-filled, .slds-button.slds-button_icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button--icon-border-inverse, .slds-button.slds-button_icon-brand, .slds-button.slds-button--icon-brand, .slds-button.slds-button--icon-brand, .slds-button.slds-button_icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button--icon-more, .slds-button.slds-button_icon-container-more, .slds-button.slds-button--icon-container-more, .slds-button.slds-button--icon-container-more{ --slds-c-button-icon-container-size:var(--slds-g-sizing-9); } .slds-button.slds-button_icon-border-filled,.slds-button.slds-button--icon-border-filled, .slds-button.slds-button_icon-border, .slds-button.slds-button--icon-border{ --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-2); transition:border 0.15s linear; } .slds-button.slds-button_icon-border-filled:hover,.slds-button.slds-button--icon-border-filled:hover, .slds-button.slds-button_icon-border:hover, .slds-button.slds-button--icon-border:hover{ --slds-c-button-shadow-hover:var(--slds-s-button-bordered-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-bordered-transform-hover); --slds-c-button-color-border-hover:var(--slds-g-color-border-2); transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-border-filled:focus-visible,.slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button_icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible{ --slds-c-button-color-border-focus:var(--slds-g-color-border-2); } .slds-buttonlightning-button-icon[variant='border-filled']:focus-visible,.slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button_icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible, .slds-button.slds-button--icon-border:focus-visible{ --slds-c-button-color-border-focus:var(--slds-g-color-border-2); } .slds-button.slds-button_icon-border-filled:active,.slds-button.slds-button--icon-border-filled:active, .slds-button.slds-button_icon-border:active, .slds-button.slds-button--icon-border:active{ transform:none; --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); --slds-c-button-color-border-active:var(--slds-g-color-border-2); transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-border-filled[disabled],.slds-button.slds-button--icon-border-filled[disabled], .slds-button.slds-button_icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled, .slds-button.slds-button_icon-border[disabled], .slds-button.slds-button--icon-border[disabled], .slds-button.slds-button_icon-border:disabled, .slds-button.slds-button--icon-border:disabled{ --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-buttonlightning-button-icon[variant='border-filled'][disabled],.slds-button.slds-button--icon-border-filled[disabled], .slds-button.slds-button_icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled, .slds-button.slds-button_icon-border[disabled], .slds-button.slds-button--icon-border[disabled], .slds-button.slds-button--icon-border[disabled], .slds-button.slds-button_icon-border:disabled, .slds-button.slds-button--icon-border:disabled, .slds-button.slds-button--icon-border:disabled{ --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-button.slds-button_icon-border-inverse,.slds-button.slds-button--icon-border-inverse{ --slds-c-button-color-background:transparent; --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-inverse-1); --slds-c-button-color-foreground:var(--slds-g-color-on-surface-inverse-1); transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-border-inverse:hover,.slds-button.slds-button--icon-border-inverse:hover{ --slds-c-button-color-foreground-hover:var( --slds-c-button-inverse-color-foreground-hover, var(--slds-g-color-accent-3) ); --slds-c-button-color-background-hover:var( --slds-c-button-inverse-color-background-hover, var(--slds-g-color-surface-container-2) ); --slds-c-button-shadow-hover:var(--slds-c-button-inverse-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-bordered-transform-hover); } .slds-buttonlightning-button-icon[variant='border-inverse']:hover,.slds-button.slds-button--icon-border-inverse:hover{ --slds-c-button-color-foreground-hover:var( --slds-c-button-inverse-color-foreground-hover, var(--slds-g-color-accent-3) ); --slds-c-button-color-background-hover:var( --slds-c-button-inverse-color-background-hover, var(--slds-g-color-surface-container-2) ); --slds-c-button-shadow-hover:var(--slds-c-button-inverse-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-bordered-transform-hover); } lightning-button-icon[variant='border-inverse'] .slds-button.slds-button_icon-border-inverse:hover,lightning-button-icon[variant='border-inverse'] .slds-button.slds-button--icon-border-inverse:hover,.slds-button.slds-button--icon-border-inverse:hover{ --slds-c-button-color-foreground-hover:unset; --slds-c-button-color-background-hover:unset; --slds-c-button-shadow-hover:unset; --slds-c-button-transform-hover:unset; } .slds-button.slds-button_icon-border-inverse:active,.slds-button.slds-button--icon-border-inverse:active{ --slds-c-button-color-foreground-active:var( --slds-c-button-inverse-color-foreground-hover, var(--slds-g-color-accent-3) ); --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); transform:none; } .slds-button.slds-button_icon-border-inverse[disabled],.slds-button.slds-button--icon-border-inverse[disabled], .slds-button.slds-button_icon-border-inverse:disabled, .slds-button.slds-button--icon-border-inverse:disabled{ --slds-c-button-color-background-disabled:transparent; --slds-c-button-color-border-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 75% ); --slds-c-button-color-foreground-disabled:color-mix( in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75% ); } .slds-buttonlightning-button-icon[variant='border-inverse'][disabled],.slds-button.slds-button--icon-border-inverse[disabled], .slds-button.slds-button_icon-border-inverse:disabled, .slds-button.slds-button--icon-border-inverse:disabled, .slds-button.slds-button--icon-border-inverse:disabled{ --slds-c-button-color-background-disabled:transparent; --slds-c-button-color-border-disabled:color-mix( in oklab, var(--slds-g-color-neutral-base-100), transparent 75% ); --slds-c-button-color-foreground-disabled:color-mix( in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 75% ); } .slds-button.slds-button_icon-brand,.slds-button.slds-button--icon-brand{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); } .slds-buttonlightning-button-icon[variant='brand'],.slds-button.slds-button--icon-brand{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); } lightning-button-icon[variant='brand'] .slds-button.slds-button_icon-brand,lightning-button-icon[variant='brand'] .slds-button.slds-button--icon-brand,.slds-button.slds-button--icon-brand{ --slds-c-button-color-background:unset; --slds-c-button-sizing-border:unset; --slds-c-button-color-border:unset; --slds-c-button-color-foreground:unset; } .slds-button.slds-button_icon-brand:visited,.slds-button.slds-button--icon-brand:visited, .slds-button.slds-button_icon-brand:active, .slds-button.slds-button--icon-brand:active{ --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-1); } .slds-buttonlightning-button-icon[variant='brand']:visited,.slds-button.slds-button--icon-brand:visited, .slds-button.slds-button_icon-brand:active, .slds-button.slds-button--icon-brand:active, .slds-button.slds-button--icon-brand:active{ --slds-c-button-color-foreground-active:var(--slds-g-color-on-accent-1); } .slds-button.slds-button_icon-brand:hover,.slds-button.slds-button--icon-brand:hover{ --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); --slds-c-button-shadow-hover:var(--slds-s-button-brand-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-brand-transform-hover); transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-brand:focus-visible,.slds-button.slds-button--icon-brand:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } .slds-buttonlightning-button-icon[variant='brand']:focus-visible,.slds-button.slds-button--icon-brand:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } lightning-button-icon[variant='brand'] .slds-button.slds-button_icon-brand:focus-visible,lightning-button-icon[variant='brand'] .slds-button.slds-button--icon-brand:focus-visible,.slds-button.slds-button--icon-brand:focus-visible{ --slds-c-button-shadow-focus:unset; } .slds-button.slds-button_icon-brand:active,.slds-button.slds-button--icon-brand:active{ --slds-c-button-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-active:var(--slds-g-color-accent-container-3); --slds-c-button-sizing-border:0; --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); transform:none; transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-brand[disabled],.slds-button.slds-button--icon-brand[disabled], .slds-button.slds-button_icon-brand:disabled, .slds-button.slds-button--icon-brand:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-buttonlightning-button-icon[variant='brand'][disabled],.slds-button.slds-button--icon-brand[disabled], .slds-button.slds-button_icon-brand:disabled, .slds-button.slds-button--icon-brand:disabled, .slds-button.slds-button--icon-brand:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-button.slds-button_icon-border-filled,.slds-button.slds-button--icon-border-filled{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); } .slds-buttonlightning-button-icon[variant='border-filled'],.slds-button.slds-button--icon-border-filled{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); } lightning-button-icon[variant='border-filled'] .slds-button.slds-button_icon-border-filled,lightning-button-icon[variant='border-filled'] .slds-button.slds-button--icon-border-filled,.slds-button.slds-button--icon-border-filled{ --slds-c-button-color-background:unset; } .slds-button.slds-button_icon-border-filled:hover,.slds-button.slds-button--icon-border-filled:hover, .slds-button.slds-button_icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible{ --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); } .slds-buttonlightning-button-icon[variant='border-filled']:hover,.slds-button.slds-button--icon-border-filled:hover, .slds-button.slds-button_icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible, .slds-button.slds-button--icon-border-filled:focus-visible{ --slds-c-button-color-background-hover:var(--slds-g-color-surface-container-2); } .slds-button.slds-button_icon-border-filled[disabled],.slds-button.slds-button--icon-border-filled[disabled], .slds-button.slds-button_icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); } .slds-buttonlightning-button-icon[variant='border-filled'][disabled],.slds-button.slds-button--icon-border-filled[disabled], .slds-button.slds-button_icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled, .slds-button.slds-button--icon-border-filled:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-1); } .slds-button.slds-button_icon-inverse,.slds-button.slds-button--icon-inverse{ --slds-c-button-color-foreground:var(--slds-g-color-on-surface-inverse-1); } .slds-buttonlightning-button-icon[variant='bare-inverse'],.slds-button.slds-button--icon-inverse{ --slds-c-button-color-foreground:var(--slds-g-color-on-surface-inverse-1); } lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button_icon-inverse,lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button--icon-inverse,.slds-button.slds-button--icon-inverse{ --slds-c-button-color-foreground:unset; } .slds-button.slds-button_icon-inverse:hover,.slds-button.slds-button--icon-inverse:hover{ --slds-c-button-color-background-hover:transparent; } .slds-buttonlightning-button-icon[variant='bare-inverse']:hover,.slds-button.slds-button--icon-inverse:hover{ --slds-c-button-color-background-hover:transparent; } lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button_icon-inverse:hover,lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button--icon-inverse:hover,.slds-button.slds-button--icon-inverse:hover{ --slds-c-button-color-background-hover:unset; } .slds-button.slds-button_icon-inverse:focus-visible,.slds-button.slds-button--icon-inverse:focus-visible{ --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); } .slds-buttonlightning-button-icon[variant='bare-inverse']:focus-visible,.slds-button.slds-button--icon-inverse:focus-visible{ --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); } lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button_icon-inverse:focus-visible,lightning-button-icon[variant='bare-inverse'] .slds-button.slds-button--icon-inverse:focus-visible,.slds-button.slds-button--icon-inverse:focus-visible{ --slds-c-button-sizing-border:unset; } .slds-button.slds-button_icon-error,.slds-button.slds-button--icon-error{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-error-1); } .slds-buttonlightning-button-icon[variant='border'],.slds-button.slds-button--icon-error{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-error-1); } lightning-button-icon[variant='border'] .slds-button.slds-button_icon-error,lightning-button-icon[variant='border'] .slds-button.slds-button--icon-error,.slds-button.slds-button--icon-error{ --slds-c-button-color-foreground:unset; --slds-c-button-icon-color-foreground:unset; } .slds-button.slds-button_icon-error:hover,.slds-button.slds-button--icon-error:hover, .slds-button.slds-button_icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button_icon-error:active, .slds-button.slds-button--icon-error:active{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-error-2); } .slds-buttonlightning-button-icon[variant='border']:hover,.slds-button.slds-button--icon-error:hover, .slds-button.slds-button_icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button--icon-error:focus-visible, .slds-button.slds-button_icon-error:active, .slds-button.slds-button--icon-error:active, .slds-button.slds-button--icon-error:active{ --slds-c-button-color-foreground:var(--slds-g-color-error-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-error-2); } .slds-button.slds-button_icon-error:focus-visible,.slds-button.slds-button--icon-error:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } .slds-buttonlightning-button-icon[variant='border']:focus-visible,.slds-button.slds-button--icon-error:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } lightning-button-icon[variant='border'] .slds-button.slds-button_icon-error:focus-visible,lightning-button-icon[variant='border'] .slds-button.slds-button--icon-error:focus-visible,.slds-button.slds-button--icon-error:focus-visible{ --slds-c-button-shadow-focus:unset; } .slds-button.slds-button_icon-error[disabled],.slds-button.slds-button--icon-error[disabled], .slds-button.slds-button_icon-error:disabled, .slds-button.slds-button--icon-error:disabled{ --slds-c-button-icon-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-buttonlightning-button-icon[variant='border'][disabled],.slds-button.slds-button--icon-error[disabled], .slds-button.slds-button_icon-error:disabled, .slds-button.slds-button--icon-error:disabled, .slds-button.slds-button--icon-error:disabled{ --slds-c-button-icon-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-button.slds-button_icon-warning,.slds-button.slds-button--icon-warning{ --slds-c-button-color-foreground:var(--slds-g-color-warning-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-warning-1); } .slds-buttonlightning-button-icon-warning,.slds-button.slds-button--icon-warning{ --slds-c-button-color-foreground:var(--slds-g-color-warning-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-warning-1); } lightning-button-icon .slds-button.slds-button_icon-warning,lightning-button-icon .slds-button.slds-button--icon-warning,.slds-button.slds-button--icon-warning{ --slds-c-button-color-foreground:unset; --slds-c-button-icon-color-foreground:unset; } .slds-button.slds-button_icon-warning:hover,.slds-button.slds-button--icon-warning:hover, .slds-button.slds-button_icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible, .slds-button.slds-button_icon-warning:active, .slds-button.slds-button--icon-warning:active{ --slds-c-button-color-foreground:var(--slds-g-color-warning-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-warning-2); } .slds-buttonlightning-button-icon-warning:hover,.slds-button.slds-button--icon-warning:hover, .slds-button.slds-button_icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible, .slds-button.slds-button--icon-warning:focus-visible, .slds-button.slds-button_icon-warning:active, .slds-button.slds-button--icon-warning:active, .slds-button.slds-button--icon-warning:active{ --slds-c-button-color-foreground:var(--slds-g-color-warning-1); --slds-c-button-icon-color-foreground:var(--slds-g-color-warning-2); } .slds-button.slds-button_icon-warning:focus-visible,.slds-button.slds-button--icon-warning:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } .slds-buttonlightning-button-icon-warning:focus-visible,.slds-button.slds-button--icon-warning:focus-visible{ --slds-c-button-shadow-focus:var(--slds-g-shadow-outline-focus-1); } lightning-button-icon .slds-button.slds-button_icon-warning:focus-visible,lightning-button-icon .slds-button.slds-button--icon-warning:focus-visible,.slds-button.slds-button--icon-warning:focus-visible{ --slds-c-button-shadow-focus:unset; } .slds-button.slds-button_icon-warning[disabled],.slds-button.slds-button--icon-warning[disabled], .slds-button.slds-button_icon-warning:disabled, .slds-button.slds-button--icon-warning:disabled{ --slds-c-button-icon-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-buttonlightning-button-icon-warning[disabled],.slds-button.slds-button--icon-warning[disabled], .slds-button.slds-button_icon-warning:disabled, .slds-button.slds-button--icon-warning:disabled, .slds-button.slds-button--icon-warning:disabled{ --slds-c-button-icon-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-button.slds-button_icon-more,.slds-button.slds-button--icon-more{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-2); --slds-c-button-spacing-inline:var(--slds-g-spacing-2); --slds-c-button-icon-more-font-line-height:1.875rem; --slds-c-button-icon-more-spacing-inline:var(--slds-g-spacing-2); } .slds-buttonlightning-button-icon[variant='border'],.slds-button.slds-button--icon-more{ --slds-c-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-button-color-border:var(--slds-g-color-border-2); --slds-c-button-spacing-inline:var(--slds-g-spacing-2); --slds-c-button-icon-more-font-line-height:1.875rem; --slds-c-button-icon-more-spacing-inline:var(--slds-g-spacing-2); } lightning-button-icon[variant='border'] .slds-button.slds-button_icon-more,lightning-button-icon[variant='border'] .slds-button.slds-button--icon-more,.slds-button.slds-button--icon-more{ --slds-c-button-color-background:unset; --slds-c-button-color-border:unset; --slds-c-button-spacing-inline:unset; --slds-c-button-icon-more-font-line-height:unset; --slds-c-button-icon-more-spacing-inline:unset; } .slds-button.slds-button_icon-more:hover,.slds-button.slds-button--icon-more:hover{ --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-2); } .slds-buttonlightning-button-icon[variant='border']:hover,.slds-button.slds-button--icon-more:hover{ --slds-c-button-color-foreground-hover:var(--slds-g-color-accent-2); } lightning-button-icon[variant='border'] .slds-button.slds-button_icon-more:hover,lightning-button-icon[variant='border'] .slds-button.slds-button--icon-more:hover,.slds-button.slds-button--icon-more:hover{ --slds-c-button-color-foreground-hover:unset; } .slds-button.slds-button_icon-more:active,.slds-button.slds-button--icon-more:active{ --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); } .slds-buttonlightning-button-icon[variant='border']:active,.slds-button.slds-button--icon-more:active{ --slds-c-button-color-foreground-active:var(--slds-g-color-accent-3); } lightning-button-icon[variant='border'] .slds-button.slds-button_icon-more:active,lightning-button-icon[variant='border'] .slds-button.slds-button--icon-more:active,.slds-button.slds-button--icon-more:active{ --slds-c-button-color-foreground-active:unset; } .slds-button.slds-button_icon-more[disabled],.slds-button.slds-button--icon-more[disabled], .slds-button.slds-button_icon-more:disabled, .slds-button.slds-button--icon-more:disabled{ --slds-c-button-color-foreground-disabled:var(--slds-g-color-disabled-1); } .slds-buttonlightning-button-icon[variant='border'][disabled],.slds-button.slds-button--icon-more[disabled], .slds-button.slds-button_icon-more:disabled, .slds-button.slds-button--icon-more:disabled, .slds-button.slds-button--icon-more:disabled{ --slds-c-button-color-foreground-disabled:var(--slds-g-color-disabled-1); } .slds-button.slds-button_icon-container-more,.slds-button.slds-button--icon-container-more{ --slds-c-button-icon-more-font-line-height:1.875rem; --slds-c-button-icon-more-spacing-inline:var(--slds-g-spacing-2); --slds-c-button-spacing-inline:var(--slds-g-spacing-2); } .slds-buttonlightning-button-icon[variant='container']-more,.slds-button.slds-button--icon-container-more{ --slds-c-button-icon-more-font-line-height:1.875rem; --slds-c-button-icon-more-spacing-inline:var(--slds-g-spacing-2); --slds-c-button-spacing-inline:var(--slds-g-spacing-2); } lightning-button-icon[variant='container'] .slds-button.slds-button_icon-container-more,lightning-button-icon[variant='container'] .slds-button.slds-button--icon-container-more,.slds-button.slds-button--icon-container-more{ --slds-c-button-icon-more-font-line-height:unset; --slds-c-button-icon-more-spacing-inline:unset; --slds-c-button-spacing-inline:unset; } .slds-button .slds-button__icon_hint,.slds-button .slds-button__icon--hint{ --slds-c-button-icon-hint-color-foreground:var(--slds-g-color-on-surface-1); } lightning-button .slds-button__icon_hint,lightning-button .slds-button__icon--hint,.slds-button .slds-button__icon--hint{ --slds-c-button-icon-hint-color-foreground:var(--slds-g-color-on-surface-1); } .slds-button .slds-button__icon_inverse-hint,.slds-button .slds-button__icon--inverse-hint{ --slds-c-button-icon-inverse-hint-color-foreground:color-mix( in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50% ); } lightning-button .slds-button__icon_inverse-hint,lightning-button .slds-button__icon--inverse-hint,.slds-button .slds-button__icon--inverse-hint{ --slds-c-button-icon-inverse-hint-color-foreground:color-mix( in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 50% ); } .slds-hint-parent .slds-button.slds-button_icon-border-inverse,.slds-hint-parent .slds-button.slds-button--icon-border-inverse{ --slds-c-button-color-border:color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 50%); } .slds-hint-parent .slds-button.slds-button_icon-border-inverse:focus,.slds-hint-parent .slds-button.slds-button--icon-border-inverse:focus{ --slds-c-button-color-border:color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%); } .slds-hint-parent:hover .slds-button.slds-button_icon-border-inverse,.slds-hint-parent:hover .slds-button.slds-button--icon-border-inverse, .slds-hint-parent:focus .slds-button.slds-button_icon-border-inverse, .slds-hint-parent:focus .slds-button.slds-button--icon-border-inverse{ --slds-c-button-color-border:color-mix(in oklab, var(--slds-g-color-border-inverse-1), transparent 25%); } .slds-hint-parent:hover .slds-button .slds-button__icon_hint,.slds-hint-parent:hover .slds-button .slds-button__icon--hint, .slds-hint-parent:focus .slds-button .slds-button__icon_hint, .slds-hint-parent:focus .slds-button .slds-button__icon--hint{ --slds-c-button-icon-hint-color-foreground:var(--slds-g-color-on-surface-2); } .slds-hint-parent:hover .slds-button .slds-button__icon_inverse-hint,.slds-hint-parent:hover .slds-button .slds-button__icon--inverse-hint, .slds-hint-parent:focus .slds-button .slds-button__icon_inverse-hint, .slds-hint-parent:focus .slds-button .slds-button__icon--inverse-hint{ --slds-c-button-icon-inverse-hint-color-foreground:color-mix( in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25% ); } .slds-button.slds-button_icon-container.slds-is-selected,.slds-button.slds-button--icon-container.slds-is-selected, .slds-button.slds-button_icon-border.slds-is-selected, .slds-button.slds-button--icon-border.slds-is-selected, .slds-button.slds-button_icon-border-filled.slds-is-selected, .slds-button.slds-button--icon-border-filled.slds-is-selected, .slds-button.slds-button_icon-border-inverse.slds-is-selected, .slds-button.slds-button--icon-border-inverse.slds-is-selected{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); } .slds-buttonlightning-button-icon[variant='container'].slds-is-selected,.slds-button.slds-button--icon-container.slds-is-selected, .slds-button.slds-button_icon-border.slds-is-selected, .slds-button.slds-button--icon-border.slds-is-selected, .slds-button.slds-button--icon-border.slds-is-selected, .slds-button.slds-button_icon-border-filled.slds-is-selected, .slds-button.slds-button--icon-border-filled.slds-is-selected, .slds-button.slds-button--icon-border-filled.slds-is-selected, .slds-button.slds-button_icon-border-inverse.slds-is-selected, .slds-button.slds-button--icon-border-inverse.slds-is-selected, .slds-button.slds-button--icon-border-inverse.slds-is-selected{ --slds-c-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-button-color-border:var(--slds-g-color-border-accent-1); --slds-c-button-color-foreground:var(--slds-g-color-on-accent-1); } .slds-button.slds-button_icon-container.slds-is-selected:not([disabled]):hover,.slds-button.slds-button--icon-container.slds-is-selected:not([disabled]):hover, .slds-button.slds-button_icon-border.slds-is-selected:not([disabled]):hover, .slds-button.slds-button--icon-border.slds-is-selected:not([disabled]):hover, .slds-button.slds-button_icon-border-filled.slds-is-selected:not([disabled]):hover, .slds-button.slds-button--icon-border-filled.slds-is-selected:not([disabled]):hover, .slds-button.slds-button_icon-border-inverse.slds-is-selected:not([disabled]):hover, .slds-button.slds-button--icon-border-inverse.slds-is-selected:not([disabled]):hover{ --slds-c-button-shadow-hover:var(--slds-s-button-brand-shadow-hover); --slds-c-button-transform-hover:var(--slds-s-button-brand-transform-hover); transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-container.slds-is-selected:not([disabled]):active,.slds-button.slds-button--icon-container.slds-is-selected:not([disabled]):active, .slds-button.slds-button_icon-border.slds-is-selected:not([disabled]):active, .slds-button.slds-button--icon-border.slds-is-selected:not([disabled]):active, .slds-button.slds-button_icon-border-filled.slds-is-selected:not([disabled]):active, .slds-button.slds-button--icon-border-filled.slds-is-selected:not([disabled]):active, .slds-button.slds-button_icon-border-inverse.slds-is-selected:not([disabled]):active, .slds-button.slds-button--icon-border-inverse.slds-is-selected:not([disabled]):active{ --slds-c-button-shadow-active:var(--slds-s-button-shadow-active); transform:none; transition:transform 150ms ease-in-out, box-shadow 150ms ease-in-out; } .slds-button.slds-button_icon-container.slds-is-selected:hover,.slds-button.slds-button--icon-container.slds-is-selected:hover, .slds-button.slds-button_icon-container.slds-is-selected:focus, .slds-button.slds-button--icon-container.slds-is-selected:focus, .slds-button.slds-button_icon-border.slds-is-selected:hover, .slds-button.slds-button--icon-border.slds-is-selected:hover, .slds-button.slds-button_icon-border.slds-is-selected:focus, .slds-button.slds-button--icon-border.slds-is-selected:focus, .slds-button.slds-button_icon-border-filled.slds-is-selected:hover, .slds-button.slds-button--icon-border-filled.slds-is-selected:hover, .slds-button.slds-button_icon-border-filled.slds-is-selected:focus, .slds-button.slds-button--icon-border-filled.slds-is-selected:focus, .slds-button.slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button.slds-button--icon-border-inverse.slds-is-selected:hover, .slds-button.slds-button_icon-border-inverse.slds-is-selected:focus, .slds-button.slds-button--icon-border-inverse.slds-is-selected:focus{ --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); } .slds-buttonlightning-button-icon[variant='container'].slds-is-selected:hover,.slds-button.slds-button--icon-container.slds-is-selected:hover, .slds-button.slds-button_icon-container.slds-is-selected:focus, .slds-button.slds-button--icon-container.slds-is-selected:focus, .slds-button.slds-button--icon-container.slds-is-selected:focus, .slds-button.slds-button_icon-border.slds-is-selected:hover, .slds-button.slds-button--icon-border.slds-is-selected:hover, .slds-button.slds-button--icon-border.slds-is-selected:hover, .slds-button.slds-button_icon-border.slds-is-selected:focus, .slds-button.slds-button--icon-border.slds-is-selected:focus, .slds-button.slds-button--icon-border.slds-is-selected:focus, .slds-button.slds-button_icon-border-filled.slds-is-selected:hover, .slds-button.slds-button--icon-border-filled.slds-is-selected:hover, .slds-button.slds-button--icon-border-filled.slds-is-selected:hover, .slds-button.slds-button_icon-border-filled.slds-is-selected:focus, .slds-button.slds-button--icon-border-filled.slds-is-selected:focus, .slds-button.slds-button--icon-border-filled.slds-is-selected:focus, .slds-button.slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button.slds-button--icon-border-inverse.slds-is-selected:hover, .slds-button.slds-button--icon-border-inverse.slds-is-selected:hover, .slds-button.slds-button_icon-border-inverse.slds-is-selected:focus, .slds-button.slds-button--icon-border-inverse.slds-is-selected:focus, .slds-button.slds-button--icon-border-inverse.slds-is-selected:focus{ --slds-c-button-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-border-hover:var(--slds-g-color-accent-container-2); --slds-c-button-color-foreground-hover:var(--slds-g-color-on-accent-2); } .slds-button.slds-button_icon-container.slds-is-selected[disabled],.slds-button.slds-button--icon-container.slds-is-selected[disabled], .slds-button.slds-button_icon-container.slds-is-selected:disabled, .slds-button.slds-button--icon-container.slds-is-selected:disabled, .slds-button.slds-button_icon-border.slds-is-selected[disabled], .slds-button.slds-button--icon-border.slds-is-selected[disabled], .slds-button.slds-button_icon-border.slds-is-selected:disabled, .slds-button.slds-button--icon-border.slds-is-selected:disabled, .slds-button.slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button.slds-button--icon-border-filled.slds-is-selected[disabled], .slds-button.slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button.slds-button--icon-border-filled.slds-is-selected:disabled, .slds-button.slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button.slds-button--icon-border-inverse.slds-is-selected[disabled], .slds-button.slds-button_icon-border-inverse.slds-is-selected:disabled, .slds-button.slds-button--icon-border-inverse.slds-is-selected:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-buttonlightning-button-icon[variant='container'].slds-is-selected[disabled],.slds-button.slds-button--icon-container.slds-is-selected[disabled], .slds-button.slds-button_icon-container.slds-is-selected:disabled, .slds-button.slds-button--icon-container.slds-is-selected:disabled, .slds-button.slds-button--icon-container.slds-is-selected:disabled, .slds-button.slds-button_icon-border.slds-is-selected[disabled], .slds-button.slds-button--icon-border.slds-is-selected[disabled], .slds-button.slds-button--icon-border.slds-is-selected[disabled], .slds-button.slds-button_icon-border.slds-is-selected:disabled, .slds-button.slds-button--icon-border.slds-is-selected:disabled, .slds-button.slds-button--icon-border.slds-is-selected:disabled, .slds-button.slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button.slds-button--icon-border-filled.slds-is-selected[disabled], .slds-button.slds-button--icon-border-filled.slds-is-selected[disabled], .slds-button.slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button.slds-button--icon-border-filled.slds-is-selected:disabled, .slds-button.slds-button--icon-border-filled.slds-is-selected:disabled, .slds-button.slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button.slds-button--icon-border-inverse.slds-is-selected[disabled], .slds-button.slds-button--icon-border-inverse.slds-is-selected[disabled], .slds-button.slds-button_icon-border-inverse.slds-is-selected:disabled, .slds-button.slds-button--icon-border-inverse.slds-is-selected:disabled, .slds-button.slds-button--icon-border-inverse.slds-is-selected:disabled{ --slds-c-button-color-background-disabled:var(--slds-g-color-disabled-container-2); --slds-c-button-color-border-disabled:var(--slds-g-color-border-disabled-1); --slds-c-button-color-foreground-disabled:var(--slds-g-color-on-disabled-2); } .slds-button.slds-button_icon-large,.slds-button.slds-button--icon-large{ --slds-c-button-icon-container-size:var(--slds-g-sizing-10); --slds-c-button-icon-size:var(--slds-g-sizing-7); } .slds-buttonlightning-button-icon-large,.slds-button.slds-button--icon-large{ --slds-c-button-icon-container-size:var(--slds-g-sizing-10); --slds-c-button-icon-size:var(--slds-g-sizing-7); } lightning-button-icon .slds-button.slds-button_icon-large,lightning-button-icon .slds-button.slds-button--icon-large,.slds-button.slds-button--icon-large{ --slds-c-button-icon-container-size:unset; --slds-c-button-icon-size:unset; } .slds-button.slds-button_icon-small,.slds-button.slds-button--icon-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-7); } .slds-buttonlightning-button-icon-small,.slds-button.slds-button--icon-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-7); } lightning-button-icon .slds-button.slds-button_icon-small,lightning-button-icon .slds-button.slds-button--icon-small,.slds-button.slds-button--icon-small{ --slds-c-button-icon-container-size:unset; } .slds-button.slds-button_icon-x-small,.slds-button.slds-button--icon-x-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-6); --slds-c-button-icon-size:var(--slds-g-sizing-4); } .slds-buttonlightning-button-icon-x-small,.slds-button.slds-button--icon-x-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-6); --slds-c-button-icon-size:var(--slds-g-sizing-4); } lightning-button-icon .slds-button.slds-button_icon-x-small,lightning-button-icon .slds-button.slds-button--icon-x-small,.slds-button.slds-button--icon-x-small{ --slds-c-button-icon-container-size:unset; --slds-c-button-icon-size:unset; } .slds-button.slds-button_icon-xx-small,.slds-button.slds-button--icon-xx-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-5); --slds-c-button-icon-size:var(--slds-g-sizing-3); } .slds-buttonlightning-button-icon-xx-small,.slds-button.slds-button--icon-xx-small{ --slds-c-button-icon-container-size:var(--slds-g-sizing-5); --slds-c-button-icon-size:var(--slds-g-sizing-3); } lightning-button-icon .slds-button.slds-button_icon-xx-small,lightning-button-icon .slds-button.slds-button--icon-xx-small,.slds-button.slds-button--icon-xx-small{ --slds-c-button-icon-container-size:unset; --slds-c-button-icon-size:unset; } .slds-has-error .slds-button .slds-button__icon{ --slds-c-button-icon-error-color-foreground:var(--slds-g-color-error-1); } .slds-color-picker .slds-form-error{ --slds-c-colorpicker-form-error-spacing-block-start:var(--slds-g-spacing-2); --slds-c-colorpicker-form-error-color-foreground:var( --slds-g-color-error-base-40, var(--slds-g-color-error-1) ); --slds-c-colorpicker-form-error-font-size:var(--slds-g-font-scale-neg-1); } lightning-color-picker-panel .slds-form-error{ --slds-c-colorpicker-form-error-spacing-block-start:var(--slds-g-spacing-2); --slds-c-colorpicker-form-error-color-foreground:var( --slds-g-color-error-base-40, var(--slds-g-color-error-1) ); --slds-c-colorpicker-form-error-font-size:var(--slds-g-font-scale-neg-1); } .slds-color-picker__summary-button{ --slds-c-colorpicker-summary-button-spacing-block:0.3rem; --slds-c-colorpicker-summary-button-spacing-inline:var(--slds-g-spacing-2); --slds-c-colorpicker-summary-button-color-background:var( --slds-g-color-neutral-base-100, var(--slds-g-color-surface-container-1) ); --slds-c-colorpicker-summary-button-spacing-inline-end:var(--slds-g-spacing-1); --slds-c-colorpicker-summary-button-radius-border:var( --slds-s-input-radius-border, var(--slds-g-radius-border-4) ); } lightning-color-picker-panel__summary-button{ --slds-c-colorpicker-summary-button-spacing-block:0.3rem; --slds-c-colorpicker-summary-button-spacing-inline:var(--slds-g-spacing-2); --slds-c-colorpicker-summary-button-color-background:var( --slds-g-color-neutral-base-100, var(--slds-g-color-surface-container-1) ); --slds-c-colorpicker-summary-button-spacing-inline-end:var(--slds-g-spacing-1); --slds-c-colorpicker-summary-button-radius-border:var( --slds-s-input-radius-border, var(--slds-g-radius-border-4) ); } lightning-color-picker-panel .slds-color-picker__summary-button{ --slds-c-colorpicker-summary-button-spacing-block:unset; --slds-c-colorpicker-summary-button-spacing-inline:unset; --slds-c-colorpicker-summary-button-color-background:unset; --slds-c-colorpicker-summary-button-spacing-inline-end:unset; --slds-c-colorpicker-summary-button-radius-border:unset; } .slds-color-picker__summary-input .slds-input{ --slds-c-colorpicker-summary-input-sizing-inline:6rem; } lightning-color-picker-panel__summary-input .slds-input{ --slds-c-colorpicker-summary-input-sizing-inline:6rem; } .slds-color-picker__selector{ --slds-c-colorpicker-selector-spacing-block-start:var(--slds-g-spacing-2); } lightning-color-picker-panel__selector{ --slds-c-colorpicker-selector-spacing-block-start:var(--slds-g-spacing-2); } lightning-color-picker-panel .slds-color-picker__selector{ --slds-c-colorpicker-selector-spacing-block-start:unset; } .slds-color-picker__selector .slds-popover__footer{ --slds-c-colorpicker-selector-footer-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-selector-footer-color-border:var( --slds-s-container-color-border, var(--slds-g-color-neutral-base-90) ); } lightning-color-picker-panel__selector .slds-popover__footer{ --slds-c-colorpicker-selector-footer-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-selector-footer-color-border:var( --slds-s-container-color-border, var(--slds-g-color-neutral-base-90) ); } .slds-color-picker__selector.slds-popover{ --slds-c-colorpicker-selector-sizing-inline:14rem; --slds-c-colorpicker-selector-shadow:var(--slds-g-shadow-2); } lightning-color-picker-panel__selector.slds-popover{ --slds-c-colorpicker-selector-sizing-inline:14rem; --slds-c-colorpicker-selector-shadow:var(--slds-g-shadow-2); } lightning-color-picker-panel .slds-color-picker__selector.slds-popover{ --slds-c-colorpicker-selector-sizing-inline:unset; --slds-c-colorpicker-selector-shadow:unset; } .slds-color-picker__selector .slds-tabs_default__content,.slds-color-picker__selector .slds-tabs--default__content{ --slds-c-colorpicker-selector-tabs-spacing-block:var(--slds-g-spacing-2); } lightning-color-picker-panel__selector .slds-tabs_default__content,lightning-color-picker-panel__selector .slds-tabs--default__content,.slds-color-picker__selector .slds-tabs--default__content{ --slds-c-colorpicker-selector-tabs-spacing-block:var(--slds-g-spacing-2); } .slds-color-picker__swatch{ --slds-c-colorpicker-swatch-item-spacing-block:var(--slds-g-spacing-1); --slds-c-colorpicker-swatch-item-spacing-inline:var(--slds-g-spacing-1); } lightning-color-picker-panel__swatch{ --slds-c-colorpicker-swatch-item-spacing-block:var(--slds-g-spacing-1); --slds-c-colorpicker-swatch-item-spacing-inline:var(--slds-g-spacing-1); } lightning-color-picker-panel .slds-color-picker__swatch{ --slds-c-colorpicker-swatch-item-spacing-block:unset; --slds-c-colorpicker-swatch-item-spacing-inline:unset; } .slds-color-picker__swatch-trigger{ --slds-c-colorpicker-swatch-trigger-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-colorpicker-swatch-trigger-radius-border-focus:var(--slds-g-radius-border-2); } lightning-color-picker-panel__swatch-trigger{ --slds-c-colorpicker-swatch-trigger-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-colorpicker-swatch-trigger-radius-border-focus:var(--slds-g-radius-border-2); } lightning-color-picker-panel .slds-color-picker__swatch-trigger{ --slds-c-colorpicker-swatch-trigger-shadow-focus:unset; --slds-c-colorpicker-swatch-trigger-radius-border-focus:unset; } .slds-color-picker__custom{ --slds-c-colorpicker-custom-spacing-block:var(--slds-g-spacing-1); } lightning-color-picker-panel__custom{ --slds-c-colorpicker-custom-spacing-block:var(--slds-g-spacing-1); } lightning-color-picker-panel .slds-color-picker__custom{ --slds-c-colorpicker-custom-spacing-block:unset; } .slds-color-picker__custom-range{ --slds-c-colorpicker-custom-range-spacing-block-end:var(--slds-g-spacing-1); --slds-c-colorpicker-custom-range-sizing-block:var(--slds-g-sizing-12); --slds-c-colorpicker-custom-range-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-custom-range-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-custom-range-radius-border:var(--slds-g-radius-border-2); } lightning-color-picker-panel__custom-range{ --slds-c-colorpicker-custom-range-spacing-block-end:var(--slds-g-spacing-1); --slds-c-colorpicker-custom-range-sizing-block:var(--slds-g-sizing-12); --slds-c-colorpicker-custom-range-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-custom-range-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-custom-range-radius-border:var(--slds-g-radius-border-2); } lightning-color-picker-panel .slds-color-picker__custom-range{ --slds-c-colorpicker-custom-range-spacing-block-end:unset; --slds-c-colorpicker-custom-range-sizing-block:unset; --slds-c-colorpicker-custom-range-sizing-border:unset; --slds-c-colorpicker-custom-range-color-border:unset; --slds-c-colorpicker-custom-range-radius-border:unset; } .slds-color-picker__range-indicator{ --slds-c-colorpicker-range-indicator-sizing:var(--slds-g-sizing-4); --slds-c-colorpicker-range-indicator-sizing-border:var(--slds-g-sizing-border-2); --slds-c-colorpicker-range-indicator-color-border:var(--slds-g-color-surface-container-1); --slds-c-colorpicker-range-indicator-radius-border:var(--slds-g-radius-border-circle); --slds-c-colorpicker-range-indicator-shadow:0 2px 4px 4px rgb(0, 0, 0, 0.16), inset 0 2px 4px 4px rgb(0, 0, 0, 0.16); --slds-c-colorpicker-range-indicator-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-color-picker-panel__range-indicator{ --slds-c-colorpicker-range-indicator-sizing:var(--slds-g-sizing-4); --slds-c-colorpicker-range-indicator-sizing-border:var(--slds-g-sizing-border-2); --slds-c-colorpicker-range-indicator-color-border:var(--slds-g-color-surface-container-1); --slds-c-colorpicker-range-indicator-radius-border:var(--slds-g-radius-border-circle); --slds-c-colorpicker-range-indicator-shadow:0 2px 4px 4px rgb(0, 0, 0, 0.16), inset 0 2px 4px 4px rgb(0, 0, 0, 0.16); --slds-c-colorpicker-range-indicator-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-color-picker-panel .slds-color-picker__range-indicator{ --slds-c-colorpicker-range-indicator-sizing:unset; --slds-c-colorpicker-range-indicator-sizing-border:unset; --slds-c-colorpicker-range-indicator-color-border:unset; --slds-c-colorpicker-range-indicator-radius-border:unset; --slds-c-colorpicker-range-indicator-shadow:unset; --slds-c-colorpicker-range-indicator-shadow-focus:unset; } .slds-color-picker__hue-and-preview .slds-swatch{ --slds-c-colorpicker-preview-swatch-spacing-inline-start:var(--slds-g-spacing-1); --slds-c-colorpicker-preview-swatch-sizing:var(--slds-g-spacing-5); --slds-c-colorpicker-preview-swatch-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-preview-swatch-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-preview-swatch-radius-border:var(--slds-g-radius-border-1); } lightning-color-picker-panel__hue-and-preview .slds-swatch{ --slds-c-colorpicker-preview-swatch-spacing-inline-start:var(--slds-g-spacing-1); --slds-c-colorpicker-preview-swatch-sizing:var(--slds-g-spacing-5); --slds-c-colorpicker-preview-swatch-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-preview-swatch-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-preview-swatch-radius-border:var(--slds-g-radius-border-1); } .slds-color-picker__hue-slider{ --slds-c-colorpicker-hue-slider-sizing-block:var(--slds-g-sizing-7); --slds-c-colorpicker-hue-slider-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-hue-slider-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-hue-slider-radius-border:var(--slds-g-radius-border-1); --slds-c-colorpicker-hue-thumb-sizing-block:calc( var(--slds-c-colorpicker-hue-slider-sizing-block) - var(--slds-c-colorpicker-hue-slider-sizing-border) * 2 ); --slds-c-colorpicker-hue-thumb-sizing-inline:0.375rem; --slds-c-colorpicker-hue-thumb-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-hue-thumb-color-border:var(--slds-g-color-neutral-base-30); --slds-c-colorpicker-hue-thumb-radius-border:var(--slds-g-radius-border-1); --slds-c-colorpicker-hue-thumb-color-background:var( --slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95) ); --slds-c-colorpicker-hue-thumb-color-border-focus:var( --slds-g-color-brand-base-60, var(--slds-g-color-accent-1) ); --slds-c-colorpicker-hue-thumb-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-color-picker-panel__hue-slider{ --slds-c-colorpicker-hue-slider-sizing-block:var(--slds-g-sizing-7); --slds-c-colorpicker-hue-slider-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-hue-slider-color-border:var(--slds-g-color-border-1); --slds-c-colorpicker-hue-slider-radius-border:var(--slds-g-radius-border-1); --slds-c-colorpicker-hue-thumb-sizing-block:calc( var(--slds-c-colorpicker-hue-slider-sizing-block) - var(--slds-c-colorpicker-hue-slider-sizing-border) * 2 ); --slds-c-colorpicker-hue-thumb-sizing-inline:0.375rem; --slds-c-colorpicker-hue-thumb-sizing-border:var(--slds-g-sizing-border-1); --slds-c-colorpicker-hue-thumb-color-border:var(--slds-g-color-neutral-base-30); --slds-c-colorpicker-hue-thumb-radius-border:var(--slds-g-radius-border-1); --slds-c-colorpicker-hue-thumb-color-background:var( --slds-g-color-surface-container-1, var(--slds-g-color-neutral-base-95) ); --slds-c-colorpicker-hue-thumb-color-border-focus:var( --slds-g-color-brand-base-60, var(--slds-g-color-accent-1) ); --slds-c-colorpicker-hue-thumb-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-color-picker-panel .slds-color-picker__hue-slider{ --slds-c-colorpicker-hue-slider-sizing-block:unset; --slds-c-colorpicker-hue-slider-sizing-border:unset; --slds-c-colorpicker-hue-slider-color-border:unset; --slds-c-colorpicker-hue-slider-radius-border:unset; --slds-c-colorpicker-hue-thumb-sizing-block:unset; --slds-c-colorpicker-hue-thumb-sizing-inline:unset; --slds-c-colorpicker-hue-thumb-sizing-border:unset; --slds-c-colorpicker-hue-thumb-color-border:unset; --slds-c-colorpicker-hue-thumb-radius-border:unset; --slds-c-colorpicker-hue-thumb-color-background:unset; --slds-c-colorpicker-hue-thumb-color-border-focus:unset; --slds-c-colorpicker-hue-thumb-shadow-focus:unset; } .slds-color-picker__custom-inputs{ --slds-c-colorpicker-custom-inputs-spacing-block-start:var(--slds-g-spacing-2); } lightning-color-picker-panel__custom-inputs{ --slds-c-colorpicker-custom-inputs-spacing-block-start:var(--slds-g-spacing-2); } lightning-color-picker-panel .slds-color-picker__custom-inputs{ --slds-c-colorpicker-custom-inputs-spacing-block-start:unset; } .slds-color-picker__custom-inputs .slds-form-element:not(:first-child){ --slds-c-colorpicker-custom-inputs-item-spacing-inline-start:var(--slds-g-spacing-1); } lightning-color-picker-panel__custom-inputs .slds-form-element:not(:first-child){ --slds-c-colorpicker-custom-inputs-item-spacing-inline-start:var(--slds-g-spacing-1); } .slds-color-picker__custom-inputs input{ --slds-c-colorpicker-custom-inputs-input-spacing-inline:var(--slds-g-spacing-1); } lightning-color-picker-panel__custom-inputs input{ --slds-c-colorpicker-custom-inputs-input-spacing-inline:var(--slds-g-spacing-1); } .slds-color-picker__custom-inputs .slds-form-element.slds-color-picker__input-custom-hex{ --slds-c-colorpicker-hex-input-sizing-inline:4.2rem; --slds-c-colorpicker-hex-input-font-size:var(--slds-g-spacing-3); } lightning-color-picker-panel__custom-inputs .slds-form-element.slds-color-picker__input-custom-hex{ --slds-c-colorpicker-hex-input-sizing-inline:4.2rem; --slds-c-colorpicker-hex-input-font-size:var(--slds-g-spacing-3); } .slds-swatch{ --slds-c-colorpicker-swatch-sizing:var(--slds-g-sizing-6); --slds-c-colorpicker-swatch-radius-border:var(--slds-g-radius-border-1); --slds-c-colorpicker-swatch-shadow:inset 0 0 1px rgb(0, 0, 0, 0.4); } .slds-color-picker.slds-color-picker_swatches-only,.slds-color-picker.slds-color-picker--swatches-only{ --slds-c-colorpicker-swatches-only-sizing-inline:13.3rem; --slds-c-colorpicker-swatches-only-spacing-block:var(--slds-g-spacing-2); --slds-c-colorpicker-swatches-only-spacing-inline:var(--slds-g-spacing-2); } lightning-color-picker-panel.slds-color-picker_swatches-only,lightning-color-picker-panel.slds-color-picker--swatches-only,.slds-color-picker.slds-color-picker--swatches-only{ --slds-c-colorpicker-swatches-only-sizing-inline:13.3rem; --slds-c-colorpicker-swatches-only-spacing-block:var(--slds-g-spacing-2); --slds-c-colorpicker-swatches-only-spacing-inline:var(--slds-g-spacing-2); } lightning-color-picker-panel .slds-color-picker.slds-color-picker_swatches-only,lightning-color-picker-panel .slds-color-picker.slds-color-picker--swatches-only,.slds-color-picker.slds-color-picker--swatches-only{ --slds-c-colorpicker-swatches-only-sizing-inline:unset; --slds-c-colorpicker-swatches-only-spacing-block:unset; --slds-c-colorpicker-swatches-only-spacing-inline:unset; } .slds-icon_container,.slds-icon--container{ --slds-c-icon-radius-border:var(--slds-g-radius-border-circle); } lightning-icon,.slds-icon--container{ --slds-c-icon-radius-border:var(--slds-g-radius-border-circle); } lightning-icon .slds-icon_container,lightning-icon .slds-icon--container,.slds-icon--container{ --slds-c-icon-radius-border:unset; } .slds-icon_container_circle,.slds-icon_container--circle{ --slds-c-icon-radius-border:var(--slds-g-radius-border-circle); --slds-c-icon-spacing-block:var(--slds-g-spacing-2); --slds-c-icon-spacing-inline:var(--slds-g-spacing-2); } lightning-icon_circle,lightning-icon--circle,.slds-icon_container--circle,.slds-icon_container--circle{ --slds-c-icon-radius-border:var(--slds-g-radius-border-circle); --slds-c-icon-spacing-block:var(--slds-g-spacing-2); --slds-c-icon-spacing-inline:var(--slds-g-spacing-2); } lightning-icon .slds-icon_container_circle,lightning-icon .slds-icon_container--circle,.slds-icon_container--circle,.slds-icon_container--circle{ --slds-c-icon-radius-border:unset; --slds-c-icon-spacing-block:unset; --slds-c-icon-spacing-inline:unset; } .slds-icon{ --slds-c-icon-size:var(--slds-g-sizing-9); --slds-c-icon-color-foreground:var(--slds-g-color-neutral-base-100); } .slds-icon_xxx-small,.slds-icon--xxx-small{ --slds-c-icon-size:var(--slds-g-sizing-3); } .slds-icon_xx-small,.slds-icon--xx-small{ --slds-c-icon-size:calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4)); } .slds-icon_x-small,.slds-icon--x-small{ --slds-c-icon-size:var(--slds-g-sizing-5); } .slds-icon_small,.slds-icon--small{ --slds-c-icon-size:var(--slds-g-sizing-7); } .slds-icon_large,.slds-icon--large{ --slds-c-icon-size:var(--slds-g-sizing-10); } .slds-icon-text-warning{ --slds-c-icon-color-foreground:var(--slds-g-color-warning-1); } .slds-icon-text-success{ --slds-c-icon-color-foreground:var(--slds-g-color-success-1); } .slds-icon-text-error{ --slds-c-icon-color-foreground:var(--slds-g-color-error-1); } .slds-icon-text-light{ --slds-c-icon-color-foreground:var(--slds-g-color-neutral-base-70); } .slds-icon-text-default{ --slds-c-icon-color-foreground:var(--slds-s-icon-color-foreground); } .slds-icon-text-default.slds-is-disabled{ --slds-c-icon-color-foreground:var(--slds-g-color-disabled-1); } .slds-accordion{ --slds-c-accordion-sizing-border:0; --slds-c-accordion-color-border:transparent; --slds-c-accordion-section-sizing-border:var(--slds-g-sizing-border-1); --slds-c-accordion-section-color-border:var(--slds-g-color-border-1); --slds-c-accordion-summary-color-background:transparent; --slds-c-accordion-summary-spacing-block:var(--slds-g-spacing-3); --slds-c-accordion-summary-radius-border:var(--slds-g-radius-border-pill); --slds-c-accordion-summary-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-accordion-summary-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-accordion-summary-color-foreground-hover:var(--slds-g-color-accent-container-3); --slds-c-accordion-summary-icon-color-foreground:var(--slds-s-icon-color-foreground); --slds-c-accordion-summary-font-size:var(--slds-s-container-heading-var-font-size); --slds-c-accordion-summary-font-weight:var(--slds-s-container-heading-font-weight); --slds-c-accordion-summary-font-line-height:var(--slds-g-font-line-height-2); --slds-c-accordion-section-spacing-block:var(--slds-g-spacing-3); --slds-c-accordion-section-spacing-inline:var(--slds-g-spacing-2); --slds-c-accordion-summary-spacing-inline:var(--slds-g-spacing-1); --slds-c-accordion-content-color-foreground:var(--slds-g-color-on-surface-1); } lightning-accordion{ --slds-c-accordion-sizing-border:0; --slds-c-accordion-color-border:transparent; --slds-c-accordion-section-sizing-border:var(--slds-g-sizing-border-1); --slds-c-accordion-section-color-border:var(--slds-g-color-border-1); --slds-c-accordion-summary-color-background:transparent; --slds-c-accordion-summary-spacing-block:var(--slds-g-spacing-3); --slds-c-accordion-summary-radius-border:var(--slds-g-radius-border-pill); --slds-c-accordion-summary-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-accordion-summary-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-accordion-summary-color-foreground-hover:var(--slds-g-color-accent-container-3); --slds-c-accordion-summary-icon-color-foreground:var(--slds-s-icon-color-foreground); --slds-c-accordion-summary-font-size:var(--slds-s-container-heading-var-font-size); --slds-c-accordion-summary-font-weight:var(--slds-s-container-heading-font-weight); --slds-c-accordion-summary-font-line-height:var(--slds-g-font-line-height-2); --slds-c-accordion-section-spacing-block:var(--slds-g-spacing-3); --slds-c-accordion-section-spacing-inline:var(--slds-g-spacing-2); --slds-c-accordion-summary-spacing-inline:var(--slds-g-spacing-1); --slds-c-accordion-content-color-foreground:var(--slds-g-color-on-surface-1); } lightning-accordion .slds-accordion{ --slds-c-accordion-sizing-border:unset; --slds-c-accordion-color-border:unset; --slds-c-accordion-section-sizing-border:unset; --slds-c-accordion-section-color-border:unset; --slds-c-accordion-summary-color-background:unset; --slds-c-accordion-summary-spacing-block:unset; --slds-c-accordion-summary-radius-border:unset; --slds-c-accordion-summary-shadow-focus:unset; --slds-c-accordion-summary-color-foreground:unset; --slds-c-accordion-summary-color-foreground-hover:unset; --slds-c-accordion-summary-icon-color-foreground:unset; --slds-c-accordion-summary-font-size:unset; --slds-c-accordion-summary-font-weight:unset; --slds-c-accordion-summary-font-line-height:unset; --slds-c-accordion-section-spacing-block:unset; --slds-c-accordion-section-spacing-inline:unset; --slds-c-accordion-summary-spacing-inline:unset; --slds-c-accordion-content-color-foreground:unset; } .slds-carousel{ --slds-c-carousel-color-foreground:var(--slds-g-color-on-surface-2); } lightning-carousel{ --slds-c-carousel-color-foreground:var(--slds-g-color-on-surface-2); } lightning-carousel .slds-carousel{ --slds-c-carousel-color-foreground:unset; } .slds-carousel__panel-action{ --slds-c-carousel-panel-sizing-border:var(--slds-g-sizing-border-1); --slds-c-carousel-panel-color-border:var(--slds-g-color-border-1); --slds-c-carousel-panel-radius-border:var( --slds-s-container-radius-border, var(--slds-g-radius-border-4) ); --slds-c-carousel-panel-spacing-block:var(--slds-g-spacing-1); --slds-c-carousel-panel-spacing-inline:var(--slds-g-spacing-1); --slds-c-carousel-panel-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-carousel__panel-action{ --slds-c-carousel-panel-sizing-border:var(--slds-g-sizing-border-1); --slds-c-carousel-panel-color-border:var(--slds-g-color-border-1); --slds-c-carousel-panel-radius-border:var( --slds-s-container-radius-border, var(--slds-g-radius-border-4) ); --slds-c-carousel-panel-spacing-block:var(--slds-g-spacing-1); --slds-c-carousel-panel-spacing-inline:var(--slds-g-spacing-1); --slds-c-carousel-panel-shadow-focus:var(--slds-g-shadow-outset-focus-1); } lightning-carousel .slds-carousel__panel-action{ --slds-c-carousel-panel-sizing-border:unset; --slds-c-carousel-panel-color-border:unset; --slds-c-carousel-panel-radius-border:unset; --slds-c-carousel-panel-spacing-block:unset; --slds-c-carousel-panel-spacing-inline:unset; --slds-c-carousel-panel-shadow-focus:unset; } .slds-carousel__content{ --slds-c-carousel-content-color-background:var(--slds-g-color-surface-1); --slds-c-carousel-content-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-carousel-content-spacing-block:var(--slds-g-spacing-4); --slds-c-carousel-content-spacing-inline:var(--slds-g-spacing-4); --slds-c-carousel-content-sizing-block:6.625rem; } lightning-carousel__content{ --slds-c-carousel-content-color-background:var(--slds-g-color-surface-1); --slds-c-carousel-content-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-carousel-content-spacing-block:var(--slds-g-spacing-4); --slds-c-carousel-content-spacing-inline:var(--slds-g-spacing-4); --slds-c-carousel-content-sizing-block:6.625rem; } lightning-carousel .slds-carousel__content{ --slds-c-carousel-content-color-background:unset; --slds-c-carousel-content-color-foreground:unset; --slds-c-carousel-content-spacing-block:unset; --slds-c-carousel-content-spacing-inline:unset; --slds-c-carousel-content-sizing-block:unset; } .slds-carousel__content-title{ --slds-c-carousel-content-title-font-size:var(--slds-g-font-scale-2); --slds-c-carousel-content-title-font-weight:var(--slds-g-font-weight-6); } lightning-carousel__content-title{ --slds-c-carousel-content-title-font-size:var(--slds-g-font-scale-2); --slds-c-carousel-content-title-font-weight:var(--slds-g-font-weight-6); } lightning-carousel .slds-carousel__content-title{ --slds-c-carousel-content-title-font-size:unset; --slds-c-carousel-content-title-font-weight:unset; } .slds-carousel__indicators{ --slds-c-carousel-indicators-spacing-block:var(--slds-g-spacing-2); } lightning-carousel__indicators{ --slds-c-carousel-indicators-spacing-block:var(--slds-g-spacing-2); } lightning-carousel .slds-carousel__indicators{ --slds-c-carousel-indicators-spacing-block:unset; } .slds-carousel__indicator{ --slds-c-carousel-indicator-spacing-inline:var(--slds-g-spacing-1); } lightning-carousel__indicator{ --slds-c-carousel-indicator-spacing-inline:var(--slds-g-spacing-1); } lightning-carousel .slds-carousel__indicator{ --slds-c-carousel-indicator-spacing-inline:unset; } .slds-carousel__indicator-action{ --slds-c-carousel-indicator-sizing:var(--slds-g-sizing-5); --slds-c-carousel-indicator-color-background:var(--slds-g-color-surface-1); --slds-c-carousel-indicator-sizing-border:var(--slds-g-sizing-border-1); --slds-c-carousel-indicator-color-border:var(--slds-g-color-border-2); --slds-c-carousel-indicator-color-background-active:var(--slds-g-color-brand-base-45); --slds-c-carousel-indicator-color-border-active:var(--slds-g-color-brand-base-45); --slds-c-carousel-indicator-shadow-active:var(--slds-s-mark-shadow-checked); --slds-c-carousel-indicator-color-background-hover:var(--slds-g-color-surface-2); --slds-c-carousel-indicator-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-carousel-indicator-color-background-focus:var(--slds-g-color-accent-container-3); --slds-c-carousel-indicator-color-border-focus:var(--slds-g-color-border-accent-3); } lightning-carousel__indicator-action{ --slds-c-carousel-indicator-sizing:var(--slds-g-sizing-5); --slds-c-carousel-indicator-color-background:var(--slds-g-color-surface-1); --slds-c-carousel-indicator-sizing-border:var(--slds-g-sizing-border-1); --slds-c-carousel-indicator-color-border:var(--slds-g-color-border-2); --slds-c-carousel-indicator-color-background-active:var(--slds-g-color-brand-base-45); --slds-c-carousel-indicator-color-border-active:var(--slds-g-color-brand-base-45); --slds-c-carousel-indicator-shadow-active:var(--slds-s-mark-shadow-checked); --slds-c-carousel-indicator-color-background-hover:var(--slds-g-color-surface-2); --slds-c-carousel-indicator-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-carousel-indicator-color-background-focus:var(--slds-g-color-accent-container-3); --slds-c-carousel-indicator-color-border-focus:var(--slds-g-color-border-accent-3); } lightning-carousel .slds-carousel__indicator-action{ --slds-c-carousel-indicator-sizing:unset; --slds-c-carousel-indicator-color-background:unset; --slds-c-carousel-indicator-sizing-border:unset; --slds-c-carousel-indicator-color-border:unset; --slds-c-carousel-indicator-color-background-active:unset; --slds-c-carousel-indicator-color-border-active:unset; --slds-c-carousel-indicator-shadow-active:unset; --slds-c-carousel-indicator-color-background-hover:unset; --slds-c-carousel-indicator-shadow-focus:unset; --slds-c-carousel-indicator-color-background-focus:unset; --slds-c-carousel-indicator-color-border-focus:unset; } .slds-carousel__autoplay{ --slds-c-carousel-autoplay-inset-block-end:var(--slds-g-spacing-1); --slds-c-carousel-autoplay-spacing-block:var(--slds-g-spacing-1); --slds-c-carousel-autoplay-spacing-inline:var(--slds-g-spacing-1); } lightning-carousel__autoplay{ --slds-c-carousel-autoplay-inset-block-end:var(--slds-g-spacing-1); --slds-c-carousel-autoplay-spacing-block:var(--slds-g-spacing-1); --slds-c-carousel-autoplay-spacing-inline:var(--slds-g-spacing-1); } lightning-carousel .slds-carousel__autoplay{ --slds-c-carousel-autoplay-inset-block-end:unset; --slds-c-carousel-autoplay-spacing-block:unset; --slds-c-carousel-autoplay-spacing-inline:unset; } .slds-card{ --slds-c-card-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-color-foreground:var(--slds-s-container-color); --slds-c-card-radius-border:var(--slds-s-container-radius-border); --slds-c-card-shadow:var(--slds-s-container-shadow); --slds-c-card-margin-block-start-adjacent:var(--slds-g-spacing-4); --slds-c-card-header-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-header-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-card-header-font-size:var(--slds-s-container-heading-var-font-size); --slds-c-card-header-font-weight:var(--slds-g-font-weight-4); --slds-c-card-header-line-height:var(--slds-g-font-lineheight-2); --slds-c-card-header-spacing-block-start:var(--slds-g-spacing-3); --slds-c-card-header-spacing-block-end:0; --slds-c-card-header-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-header-margin-block:0; --slds-c-card-body-spacing-block:var(--slds-g-spacing-3); --slds-c-card-body-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-footer-color-border:var(--slds-g-color-border-1); --slds-c-card-footer-font-size:var(--slds-g-font-size-base); --slds-c-card-footer-sizing-border:var(--slds-g-sizing-border-1); --slds-c-card-footer-spacing-block:var(--slds-g-spacing-3); --slds-c-card-footer-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-footer-margin-block-start:var(--slds-g-spacing-3); --slds-c-card-footer-margin-block-end:0; --slds-c-card-tile-margin-block-start:var(--slds-g-spacing-3); --slds-c-card-tile-margin-block-end:0; } lightning-card{ --slds-c-card-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-color-foreground:var(--slds-s-container-color); --slds-c-card-radius-border:var(--slds-s-container-radius-border); --slds-c-card-shadow:var(--slds-s-container-shadow); --slds-c-card-margin-block-start-adjacent:var(--slds-g-spacing-4); --slds-c-card-header-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-header-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-card-header-font-size:var(--slds-s-container-heading-var-font-size); --slds-c-card-header-font-weight:var(--slds-g-font-weight-4); --slds-c-card-header-line-height:var(--slds-g-font-lineheight-2); --slds-c-card-header-spacing-block-start:var(--slds-g-spacing-3); --slds-c-card-header-spacing-block-end:0; --slds-c-card-header-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-header-margin-block:0; --slds-c-card-body-spacing-block:var(--slds-g-spacing-3); --slds-c-card-body-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-footer-color-border:var(--slds-g-color-border-1); --slds-c-card-footer-font-size:var(--slds-g-font-size-base); --slds-c-card-footer-sizing-border:var(--slds-g-sizing-border-1); --slds-c-card-footer-spacing-block:var(--slds-g-spacing-3); --slds-c-card-footer-spacing-inline:var(--slds-g-spacing-4); --slds-c-card-footer-margin-block-start:var(--slds-g-spacing-3); --slds-c-card-footer-margin-block-end:0; --slds-c-card-tile-margin-block-start:var(--slds-g-spacing-3); --slds-c-card-tile-margin-block-end:0; } lightning-card .slds-card{ --slds-c-card-color-background:unset; --slds-c-card-color-foreground:unset; --slds-c-card-radius-border:unset; --slds-c-card-shadow:unset; --slds-c-card-margin-block-start-adjacent:unset; --slds-c-card-header-color-background:unset; --slds-c-card-header-color-foreground:unset; --slds-c-card-header-font-size:unset; --slds-c-card-header-font-weight:unset; --slds-c-card-header-line-height:unset; --slds-c-card-header-spacing-block-start:unset; --slds-c-card-header-spacing-block-end:unset; --slds-c-card-header-spacing-inline:unset; --slds-c-card-header-margin-block:unset; --slds-c-card-body-spacing-block:unset; --slds-c-card-body-spacing-inline:unset; --slds-c-card-footer-color-border:unset; --slds-c-card-footer-font-size:unset; --slds-c-card-footer-sizing-border:unset; --slds-c-card-footer-spacing-block:unset; --slds-c-card-footer-spacing-inline:unset; --slds-c-card-footer-margin-block-start:unset; --slds-c-card-footer-margin-block-end:unset; --slds-c-card-tile-margin-block-start:unset; --slds-c-card-tile-margin-block-end:unset; } .slds-card-wrapper{ --slds-c-card-wrapper-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-wrapper-radius-border:var(--slds-s-container-radius-border); --slds-c-card-wrapper-shadow:var(--slds-s-container-shadow); --slds-c-card-wrapper-spacing-block:var(--slds-g-spacing-4); --slds-c-card-wrapper-spacing-inline:var(--slds-g-spacing-4); } lightning-card-wrapper{ --slds-c-card-wrapper-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-wrapper-radius-border:var(--slds-s-container-radius-border); --slds-c-card-wrapper-shadow:var(--slds-s-container-shadow); --slds-c-card-wrapper-spacing-block:var(--slds-g-spacing-4); --slds-c-card-wrapper-spacing-inline:var(--slds-g-spacing-4); } lightning-card .slds-card-wrapper{ --slds-c-card-wrapper-color-background:unset; --slds-c-card-wrapper-radius-border:unset; --slds-c-card-wrapper-shadow:unset; --slds-c-card-wrapper-spacing-block:unset; --slds-c-card-wrapper-spacing-inline:unset; } .slds-card .slds-card, .slds-card-wrapper .slds-card{ --slds-c-card-sizing-border:0; --slds-c-card-color-border:transparent; --slds-c-card-shadow:none; } lightning-card .slds-card, .slds-card-wrapper .slds-card{ --slds-c-card-sizing-border:0; --slds-c-card-color-border:transparent; --slds-c-card-shadow:none; } .slds-card .slds-card-wrapper, .slds-card-wrapper .slds-card-wrapper{ --slds-c-card-wrapper-sizing-border:0; --slds-c-card-wrapper-color-border:transparent; --slds-c-card-wrapper-shadow:none; } lightning-card .slds-card-wrapper, .slds-card-wrapper .slds-card-wrapper{ --slds-c-card-wrapper-sizing-border:0; --slds-c-card-wrapper-color-border:transparent; --slds-c-card-wrapper-shadow:none; } .slds-card .slds-card_boundary,.slds-card .slds-card--boundary, .slds-card-wrapper .slds-card_boundary, .slds-card-wrapper .slds-card--boundary{ --slds-c-card-sizing-border:var(--slds-g-sizing-border-1); --slds-c-card-color-border:var(--slds-g-color-border-1); --slds-c-card-shadow:var(--slds-s-container-shadow); } lightning-card .slds-card_boundary,lightning-card .slds-card--boundary,.slds-card .slds-card--boundary, .slds-card-wrapper .slds-card_boundary, .slds-card-wrapper .slds-card--boundary, .slds-card-wrapper .slds-card--boundary{ --slds-c-card-sizing-border:var(--slds-g-sizing-border-1); --slds-c-card-color-border:var(--slds-g-color-border-1); --slds-c-card-shadow:var(--slds-s-container-shadow); } .slds-tabs_card,.slds-tabs--card{ --slds-c-card-color-background:var(--slds-g-color-surface-container-1); --slds-c-card-radius-border:var(--slds-s-container-radius-border); --slds-c-card-shadow:var(--slds-s-container-shadow); } .slds-input, .slds-input_faux, .slds-input--faux{ --slds-c-input-color-background:var(--slds-g-color-surface-container-1); --slds-c-input-color-background-disabled:var(--slds-s-input-color-background-disabled); --slds-c-input-color-foreground:var(--slds-s-input-color); --slds-c-input-color-foreground-disabled:var(--slds-s-input-color-disabled); --slds-c-input-color-border:var(--slds-s-input-color-border); --slds-c-input-color-border-focus:var(--slds-s-input-color-border-focus); --slds-c-input-color-border-disabled:var(--slds-s-input-color-border-disabled); --slds-c-input-sizing-border:var(--slds-g-sizing-border-1); --slds-c-input-radius-border:var(--slds-s-input-radius-border); --slds-c-input-shadow-focus:var(--slds-g-shadow-outline-focus-1); --slds-c-input-shadow-focus-bare:var(--slds-g-shadow-inset-focus-1); --slds-c-input-font-line-height:1.875rem; --slds-c-input-font-size-coarse:var(--slds-g-font-scale-2); --slds-c-input-spacing-block:0; --slds-c-input-spacing-inline:var(--slds-s-input-spacing); --slds-c-input-sizing-height-min:calc(1.875rem + 2px); } .slds-input-has-icon{ --slds-c-input-icon-size:0.875rem; --slds-c-input-icon-spacing-inline:var(--slds-g-spacing-2); --slds-c-input-icon-color-foreground-disabled:var(--slds-g-color-disabled-1); --slds-c-input-icon-group-size:var(--slds-g-sizing-5); --slds-c-input-icon-group-spinner-spacing-inline:var(--slds-g-spacing-5); } .slds-input.slds-input_bare,.slds-input.slds-input--bare{ --slds-c-input-color-background:transparent; --slds-c-input-color-border:transparent; --slds-c-input-spacing-inline-start:var(--slds-s-input-spacing); --slds-c-input-spacing-inline-end:0; } .slds-input[readonly]{ --slds-c-input-color-background:transparent; --slds-c-input-color-border:transparent; --slds-c-input-spacing-inline-start:0; --slds-c-input-spacing-inline-end:var(--slds-s-input-spacing); } .slds-input.slds-input_borders[readonly],.slds-input.slds-input--borders[readonly]{ --slds-c-input-color-background:var(--slds-g-color-surface-container-1); --slds-c-input-color-border:var(--slds-s-input-color-border); --slds-c-input-spacing-inline:var(--slds-s-input-spacing); } .slds-input-has-icon_left .slds-input,.slds-input-has-icon--left .slds-input, .slds-input-has-icon_left .slds-input_faux, .slds-input-has-icon--left .slds-input--faux, .slds-input-has-icon_left .slds-input_bare, .slds-input-has-icon--left .slds-input--bare{ --slds-c-input-spacing-inline-start:var(--slds-g-spacing-6); --slds-c-input-spacing-inline-end:var(--slds-s-input-spacing); } .slds-input-has-icon_right .slds-input,.slds-input-has-icon--right .slds-input, .slds-input-has-icon_right .slds-input_faux, .slds-input-has-icon--right .slds-input--faux, .slds-input-has-icon_right .slds-input_bare, .slds-input-has-icon--right .slds-input--bare{ --slds-c-input-spacing-inline-start:var(--slds-s-input-spacing); --slds-c-input-spacing-inline-end:var(--slds-g-spacing-6); } .slds-input-has-icon_left-right .slds-input,.slds-input-has-icon--left-right .slds-input, .slds-input-has-icon_left-right .slds-input_faux, .slds-input-has-icon--left-right .slds-input--faux, .slds-input-has-icon_left-right .slds-input_bare, .slds-input-has-icon--left-right .slds-input--bare{ --slds-c-input-spacing-inline:var(--slds-g-spacing-6); } .slds-input-has-icon_group-right .slds-input,.slds-input-has-icon--group-right .slds-input, .slds-input-has-icon_group-right .slds-input_faux, .slds-input-has-icon--group-right .slds-input--faux, .slds-input-has-icon_group-right .slds-input_bare, .slds-input-has-icon--group-right .slds-input--bare{ --slds-c-input-spacing-inline-start:var(--slds-s-input-spacing); --slds-c-input-spacing-inline-end:calc(var(--slds-g-spacing-6) + var(--slds-g-spacing-2)); } .slds-has-error .slds-input{ --slds-c-input-color-background:var(--slds-s-input-color-background-invalid); --slds-c-input-color-border:var(--slds-g-color-border-error-1); --slds-c-input-color-foreground:var(--slds-s-input-color-invalid); } .slds-has-error .slds-input__icon{ --slds-c-input-icon-color-foreground:var(--slds-g-color-error-1); } .slds-textarea{ --slds-c-textarea-sizing-min-height:2.5rem; --slds-c-textarea-sizing-border:var(--slds-g-sizing-border-1); --slds-c-textarea-radius-border:var(--slds-s-input-radius-border); --slds-c-textarea-color-background:var(--slds-g-color-surface-container-1); --slds-c-textarea-color-background-focus:var(--slds-g-color-surface-container-1); --slds-c-textarea-color-foreground:var(--slds-s-input-color); --slds-c-textarea-color-border:var(--slds-s-input-color-border); --slds-c-textarea-color-border-focus:var(--slds-s-input-color-border-focus); --slds-c-textarea-shadow:var(--slds-s-input-shadow); --slds-c-textarea-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-textarea-spacing-block-start:var(--slds-g-spacing-2); --slds-c-textarea-spacing-block-end:var(--slds-g-spacing-2); --slds-c-textarea-spacing-inline-start:var(--slds-g-spacing-3); --slds-c-textarea-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-textarea-font-size-coarse:var(--slds-g-font-scale-2); } .slds-textarea:required{ --slds-c-textarea-shadow:none; } .slds-textarea[readonly]{ --slds-c-textarea-color-border:var(--slds-g-color-border-1); } .slds-textarea[disabled], .slds-textarea.slds-is-disabled{ --slds-c-textarea-color-background:var(--slds-s-input-color-background-disabled); --slds-c-textarea-color-border:var(--slds-s-input-color-border-disabled); --slds-c-textarea-color-foreground:var(--slds-s-input-color-disabled); --slds-c-textarea-shadow:none; } .slds-has-error .slds-textarea{ --slds-c-textarea-color-border:var(--slds-g-color-border-error-1); --slds-c-textarea-color-background:var(--slds-s-input-color-background-invalid); --slds-c-textarea-color-background-focus:var(--slds-g-color-surface-container-1); --slds-c-textarea-color-foreground:var(--slds-s-input-color-invalid); } .slds-checkbox{ --slds-c-checkbox-size:var(--slds-g-sizing-5); --slds-c-checkbox-sizing-border:var(--slds-s-mark-sizing-border); --slds-c-checkbox-radius-border:var(--slds-g-radius-border-1); --slds-c-checkbox-color-background:var(--slds-s-mark-color-background); --slds-c-checkbox-color-border:var(--slds-s-mark-color-border); --slds-c-checkbox-shadow-checked:var(--slds-s-mark-shadow-checked); --slds-c-checkbox-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-checkbox-mark-color-foreground:var(--slds-s-mark-color-foreground-checked); --slds-c-checkbox-mark-sizing-block:var(--slds-g-sizing-2); --slds-c-checkbox-mark-sizing-inline:var(--slds-g-sizing-3); --slds-c-checkbox-mark-sizing-border:var(--slds-g-sizing-border-2); --slds-c-checkbox-label-font-size:var(--slds-s-label-font-size); --slds-c-checkbox-label-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-checkbox-margin-inline-end:var(--slds-g-sizing-3); } .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,.slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox--faux, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox--faux{ --slds-c-checkbox-color-background:var(--slds-s-mark-color-background-checked); --slds-c-checkbox-color-border:var(--slds-s-input-color-border-checked); } .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux,.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox--faux{ --slds-c-checkbox-color-background:var(--slds-g-color-disabled-container-2); --slds-c-checkbox-color-border:var(--slds-g-color-border-disabled-1); --slds-c-checkbox-mark-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-has-error .slds-checkbox{ --slds-c-checkbox-color-border:var(--slds-g-color-border-error-1); --slds-c-checkbox-sizing-border:var(--slds-g-sizing-border-2); } .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,.slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox--faux{ --slds-c-checkbox-color-background:var(--slds-s-mark-color-background-invalid); --slds-c-checkbox-mark-color-foreground:var(--slds-s-mark-color-foreground-invalid); } .slds-checkbox_toggle,.slds-checkbox--toggle{ --slds-c-checkboxtoggle-sizing-width:var(--slds-g-sizing-10); --slds-c-checkboxtoggle-sizing-height:var(--slds-g-sizing-7); --slds-c-checkboxtoggle-sizing-border:var(--slds-g-sizing-border-1); --slds-c-checkboxtoggle-radius-border:var(--slds-g-radius-border-pill); --slds-c-checkboxtoggle-spacing:var(--slds-g-spacing-1); --slds-c-checkboxtoggle-color-background:var(--slds-g-color-neutral-base-60); --slds-c-checkboxtoggle-color-border:var(--slds-g-color-neutral-base-60); --slds-c-checkboxtoggle-shadow:var(--slds-s-mark-shadow-checked); --slds-c-checkboxtoggle-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-checkboxtoggle-switch-size:var(--slds-g-sizing-6); --slds-c-checkboxtoggle-switch-color-background:var(--slds-g-color-on-accent-1); --slds-c-checkboxtoggle-mark-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-checkboxtoggle-mark-sizing-border:var(--slds-g-sizing-border-2); --slds-c-checkboxtoggle-label-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-checkboxtoggle-label-font-size:var(--slds-g-font-scale-neg-2); } .slds-checkbox_toggle .slds-checkbox_faux:hover,.slds-checkbox--toggle .slds-checkbox--faux:hover, .slds-checkbox_toggle .slds-checkbox_faux:focus, .slds-checkbox--toggle .slds-checkbox--faux:focus{ --slds-c-checkboxtoggle-color-background:var(--slds-g-color-neutral-base-50); --slds-c-checkboxtoggle-color-border:var(--slds-g-color-neutral-base-50); } .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux,.slds-checkbox--toggle [type='checkbox']:focus-visible + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:focus-visible ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:focus-visible ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:focus-visible + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:focus-visible + .slds-checkbox--faux_container .slds-checkbox--faux{ --slds-c-checkboxtoggle-shadow:var(--slds-c-checkboxtoggle-shadow-focus); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux,.slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux{ --slds-c-checkboxtoggle-color-background:var(--slds-g-color-accent-container-1); --slds-c-checkboxtoggle-color-border:var(--slds-g-color-border-accent-1); } .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:hover,.slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:hover, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux:focus, .slds-checkbox_toggle [type='checkbox']:checked ~ .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked ~ .slds-checkbox--faux:focus, .slds-checkbox_toggle [type='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus, .slds-checkbox--toggle [type='checkbox']:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus{ --slds-c-checkboxtoggle-color-background:var(--slds-g-color-accent-container-2); --slds-c-checkboxtoggle-color-border:var(--slds-g-color-border-accent-2); --slds-c-checkboxtoggle-switch-color-background:var(--slds-g-color-on-accent-2); --slds-c-checkboxtoggle-mark-color-foreground:var(--slds-g-color-on-accent-2); } .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux,.slds-checkbox--toggle [type='checkbox']:checked:focus + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked:focus ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked:focus ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox']:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox']:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux{ --slds-c-checkboxtoggle-color-background:var(--slds-g-color-accent-container-2); --slds-c-checkboxtoggle-switch-color-background:var(--slds-g-color-on-accent-2); --slds-c-checkboxtoggle-mark-color-foreground:var(--slds-g-color-on-accent-2); } .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux,.slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox'][disabled] ~ .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox_toggle [type='checkbox'][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type='checkbox'][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux{ --slds-c-checkboxtoggle-color-background:var(--slds-g-color-disabled-container-2); --slds-c-checkboxtoggle-color-border:var(--slds-g-color-border-disabled-1); --slds-c-checkboxtoggle-switch-color-background:var(--slds-g-color-on-disabled-2); --slds-c-checkboxtoggle-mark-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-checkbox_toggle [type='checkbox']:checked[disabled] + .slds-checkbox_faux_container .slds-checkbox_faux,.slds-checkbox--toggle [type='checkbox']:checked[disabled] + .slds-checkbox--faux_container .slds-checkbox--faux{ --slds-c-checkboxtoggle-mark-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-checkbox_add-button,.slds-checkbox--add-button{ --slds-c-checkboxbutton-add-button-size:var(--slds-g-spacing-6); --slds-c-checkboxbutton-add-button-sizing-border:var(--slds-g-sizing-border-1); --slds-c-checkboxbutton-add-button-radius-border:var(--slds-s-button-radius-border); --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-surface-container-1); --slds-c-checkboxbutton-add-button-color-border:var(--slds-g-color-border-2); --slds-c-checkboxbutton-add-button-color-foreground:var(--slds-s-button-color); --slds-c-checkboxbutton-add-button-shadow-hover:var(--slds-s-button-bordered-shadow-hover); --slds-c-checkboxbutton-add-button-shadow-active:var(--slds-s-button-shadow-active); --slds-c-checkboxbutton-add-button-shadow-checked:var(--slds-s-mark-shadow-checked); --slds-c-checkboxbutton-add-button-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); --slds-c-checkboxbutton-add-button-transform-hover:var(--slds-s-button-bordered-transform-hover); } .slds-checkbox_add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox_faux:hover,.slds-checkbox--add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:not([disabled]) + .slds-checkbox_faux:hover, .slds-checkbox--add-button [type='checkbox']:not([disabled]) + .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox_faux:focus, .slds-checkbox--add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox--faux:focus, .slds-checkbox_add-button [type='checkbox']:not([disabled]) + .slds-checkbox_faux:focus, .slds-checkbox--add-button [type='checkbox']:not([disabled]) + .slds-checkbox--faux:focus, .slds-checkbox_add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox_faux:active, .slds-checkbox--add-button [type='checkbox']:not([disabled]) ~ .slds-checkbox--faux:active, .slds-checkbox_add-button [type='checkbox']:not([disabled]) + .slds-checkbox_faux:active, .slds-checkbox--add-button [type='checkbox']:not([disabled]) + .slds-checkbox--faux:active{ --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-surface-container-2); } .slds-checkbox_add-button [type='checkbox']:checked ~ .slds-checkbox_faux,.slds-checkbox--add-button [type='checkbox']:checked ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox']:checked + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked + .slds-checkbox--faux{ --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-accent-container-1); --slds-c-checkboxbutton-add-button-color-border:transparent; --slds-c-checkboxbutton-add-button-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-checkboxbutton-add-button-transform-hover:var(--slds-s-button-brand-transform-hover); --slds-c-checkboxbutton-add-button-shadow-hover:var(--slds-s-button-brand-shadow-hover); } .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox_faux:hover,.slds-checkbox--add-button [type='checkbox']:checked:not([disabled]) ~ .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox_faux:hover, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]) + .slds-checkbox--faux:hover, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]):focus-visible ~ .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]):focus-visible ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox']:checked:not([disabled]):focus-visible + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox']:checked:not([disabled]):focus-visible + .slds-checkbox--faux{ --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-accent-container-2); --slds-c-checkboxbutton-add-button-color-foreground:var(--slds-g-color-on-accent-2); } .slds-checkbox_add-button [type='checkbox'][disabled] ~ .slds-checkbox_faux,.slds-checkbox--add-button [type='checkbox'][disabled] ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox'][disabled] + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled] + .slds-checkbox--faux{ --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-disabled-container-1); --slds-c-checkboxbutton-add-button-color-border:var(--slds-g-color-border-disabled-1); --slds-c-checkboxbutton-add-button-color-foreground:var(--slds-g-color-on-disabled-1); } .slds-checkbox_add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux,.slds-checkbox--add-button [type='checkbox'][disabled]:checked ~ .slds-checkbox--faux, .slds-checkbox_add-button [type='checkbox'][disabled]:checked + .slds-checkbox_faux, .slds-checkbox--add-button [type='checkbox'][disabled]:checked + .slds-checkbox--faux{ --slds-c-checkboxbutton-add-button-color-background:var(--slds-g-color-disabled-container-2); --slds-c-checkboxbutton-add-button-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-checkbox-button{ --slds-c-checkboxbutton-size:var(--slds-g-sizing-9); --slds-c-checkboxbutton-sizing-border:var(--slds-g-sizing-border-1); --slds-c-checkboxbutton-radius-border:var(--slds-s-button-radius-border); --slds-c-checkboxbutton-color-background:transparent; --slds-c-checkboxbutton-color-border:var(--slds-g-color-border-2); --slds-c-checkboxbutton-color-foreground:var(--slds-s-button-color); --slds-c-checkboxbutton-shadow-checked:var(--slds-s-mark-shadow-checked); --slds-c-checkboxbutton-shadow-focus:var(--slds-g-shadow-insetinverse-focus-1); } .slds-checkbox-button.slds-checkbox-button_is-checked,.slds-checkbox-button.slds-checkbox-button--is-checked{ --slds-c-checkboxbutton-color-background:var(--slds-g-color-accent-container-1); --slds-c-checkboxbutton-color-border:transparent; --slds-c-checkboxbutton-color-foreground:var(--slds-g-color-on-accent-1); } .slds-checkbox-button.slds-checkbox-button_is-disabled,.slds-checkbox-button.slds-checkbox-button--is-disabled{ --slds-c-checkboxbutton-color-background:var(--slds-g-color-disabled-container-1); --slds-c-checkboxbutton-color-border:var(--slds-g-color-border-disabled-1); --slds-c-checkboxbutton-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-checkbox-button.slds-checkbox-button_is-disabled.slds-checkbox-button_is-checked,.slds-checkbox-button.slds-checkbox-button--is-disabled.slds-checkbox-button--is-checked{ --slds-c-checkboxbutton-color-background:var(--slds-g-color-disabled-container-2); --slds-c-checkboxbutton-color-border:var(--slds-g-color-border-disabled-1); --slds-c-checkboxbutton-color-foreground:var(--slds-g-color-on-disabled-2); } .slds-slider{ --slds-c-slider-radius-border:var(--slds-g-radius-border-1); --slds-c-slider-thumb-size:var(--slds-g-sizing-5); --slds-c-slider-thumb-radius-border:var(--slds-g-radius-border-circle); --slds-c-slider-thumb-color-background:var(--slds-g-color-accent-container-1); --slds-c-slider-thumb-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-focus:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-disabled:var(--slds-g-color-on-disabled-1); --slds-c-slider-thumb-shadow:0 2px 3px rgb(0 0 0 / 16%); --slds-c-slider-thumb-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-slider-track-size:var(--slds-g-sizing-2); --slds-c-slider-track-radius-border:var(--slds-g-radius-border-1); --slds-c-slider-track-color-background:var(--slds-g-color-border-1); --slds-c-slider-track-color-background-disabled:var(--slds-g-color-border-disabled-1); --slds-c-slider-value-spacing-inline:var(--slds-g-spacing-2); } lightning-slider{ --slds-c-slider-radius-border:var(--slds-g-radius-border-1); --slds-c-slider-thumb-size:var(--slds-g-sizing-5); --slds-c-slider-thumb-radius-border:var(--slds-g-radius-border-circle); --slds-c-slider-thumb-color-background:var(--slds-g-color-accent-container-1); --slds-c-slider-thumb-color-background-hover:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-focus:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-active:var(--slds-g-color-accent-container-2); --slds-c-slider-thumb-color-background-disabled:var(--slds-g-color-on-disabled-1); --slds-c-slider-thumb-shadow:0 2px 3px rgb(0 0 0 / 16%); --slds-c-slider-thumb-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-slider-track-size:var(--slds-g-sizing-2); --slds-c-slider-track-radius-border:var(--slds-g-radius-border-1); --slds-c-slider-track-color-background:var(--slds-g-color-border-1); --slds-c-slider-track-color-background-disabled:var(--slds-g-color-border-disabled-1); --slds-c-slider-value-spacing-inline:var(--slds-g-spacing-2); } lightning-slider .slds-slider{ --slds-c-slider-radius-border:unset; --slds-c-slider-thumb-size:unset; --slds-c-slider-thumb-radius-border:unset; --slds-c-slider-thumb-color-background:unset; --slds-c-slider-thumb-color-background-hover:unset; --slds-c-slider-thumb-color-background-focus:unset; --slds-c-slider-thumb-color-background-active:unset; --slds-c-slider-thumb-color-background-disabled:unset; --slds-c-slider-thumb-shadow:unset; --slds-c-slider-thumb-shadow-focus:unset; --slds-c-slider-track-size:unset; --slds-c-slider-track-radius-border:unset; --slds-c-slider-track-color-background:unset; --slds-c-slider-track-color-background-disabled:unset; --slds-c-slider-value-spacing-inline:unset; } .slds-slider.slds-slider_vertical,.slds-slider.slds-slider--vertical{ --slds-c-slider-vertical-sizing-height:var(--slds-g-sizing-14); } lightning-slider.slds-slider_vertical,lightning-slider.slds-slider--vertical,.slds-slider.slds-slider--vertical{ --slds-c-slider-vertical-sizing-height:var(--slds-g-sizing-14); } lightning-slider .slds-slider.slds-slider_vertical,lightning-slider .slds-slider.slds-slider--vertical,.slds-slider.slds-slider--vertical{ --slds-c-slider-vertical-sizing-height:unset; } .slds-popover{ --slds-c-popover-sizing-width:var(--slds-g-sizing-15); --slds-c-popover-sizing-border:var(--slds-s-container-sizing-border); --slds-c-popover-radius-border:var(--slds-g-radius-border-2); --slds-c-popover-color-background:var(--slds-g-color-surface-container-1); --slds-c-popover-color-border:var(--slds-g-color-border-1); --slds-c-popover-shadow:var(--slds-g-shadow-3); --slds-c-popover-shadow-focus:var(--slds-g-shadow-outline-focus-1); --slds-c-popover-body-color-foreground:var(--slds-s-container-color); --slds-c-popover-body-spacing-block-start:var(--slds-g-spacing-3); --slds-c-popover-body-spacing-block-end:var(--slds-g-spacing-2); --slds-c-popover-body-spacing-inline:var(--slds-g-spacing-3); --slds-c-popover-body-sizing-max-height:var(--slds-g-sizing-14); --slds-c-popover-header-footer-spacing-block:var(--slds-g-spacing-2); --slds-c-popover-header-footer-spacing-inline:var(--slds-g-spacing-3); --slds-c-popover-header-color-foreground:var(--slds-s-container-heading-font-color); --slds-c-popover-header-font-weight:var(--slds-s-container-heading-font-weight); --slds-c-popover-header-font-size:var(--slds-g-font-scale-3); --slds-c-popover-footer-color-foreground:var(--slds-s-container-footer-font-color); --slds-c-popover-footer-color-background:var(--slds-g-color-surface-container-2); --slds-c-popover-footer-color-border:var(--slds-g-color-neutral-base-90); --slds-c-popover-footer-sizing-border-block-start:var(--slds-g-sizing-border-1); --slds-c-popover-close-color-foreground:var(--slds-s-icon-color-foreground); --slds-c-popover-close-spacing:var(--slds-g-spacing-1); --slds-c-popover-meta-spacing-block-end:var(--slds-g-spacing-3); --slds-c-popover-sizing-max-width:var(--slds-g-sizing-14); --slds-c-popover-sizing-min-width:var(--slds-g-sizing-15); --slds-c-popover-nubbin-spacing-inline-start:var(--slds-g-spacing-5); --slds-c-popover-nubbin-spacing-inline-end:var(--slds-g-spacing-5); --slds-c-popover-nubbin-spacing-block-start:var(--slds-g-spacing-5); --slds-c-popover-nubbin-spacing-block-end:var(--slds-g-spacing-4); --slds-c-popover-nubbin-corner-radius-border:var(--slds-g-radius-border-1); --slds-c-popover-nubbin-corner-spacing-inline-start:var(--slds-g-spacing-3); --slds-c-popover-nubbin-corner-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-popover-nubbin-corner-spacing-block-start:var(--slds-g-spacing-3); --slds-c-popover-nubbin-corner-spacing-block-end:var(--slds-g-spacing-1); } .slds-popover .slds-popover__close .slds-icon-text-default{ --slds-c-icon-color-foreground:var(--slds-c-popover-close-color-foreground); } .slds-popover_tooltip,.slds-popover--tooltip{ --slds-c-tooltip-sizing-max-width:var(--slds-g-sizing-15); --slds-c-tooltip-color-background:var(--slds-g-color-surface-inverse-1); --slds-c-tooltip-color-foreground:var(--slds-g-color-on-surface-inverse-1); --slds-c-tooltip-shadow:var(--slds-g-shadow-3); --slds-c-tooltip-font-size:var(--slds-g-font-scale-neg-1); } .slds-popover_tooltip .slds-icon-text-default,.slds-popover--tooltip .slds-icon-text-default{ --slds-c-icon-color-foreground:var(--slds-g-color-on-surface-inverse-1); } .slds-dropdown{ --slds-c-dropdown-color-background:var(--slds-g-color-surface-container-1); --slds-c-dropdown-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-dropdown-radius-border:var(--slds-g-radius-border-2); --slds-c-dropdown-spacing-block:var(--slds-g-spacing-1); --slds-c-dropdown-shadow:var(--slds-g-shadow-2); --slds-c-dropdown-shadow-focus:var(--slds-g-shadow-outline-focus-1); --slds-c-dropdown-item-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-dropdown-item-color-foreground-hover:var(--slds-g-color-on-surface-2); --slds-c-dropdown-item-color-foreground-active:var(--slds-g-color-on-surface-2); --slds-c-dropdown-item-color-foreground-disabled:var(--slds-g-color-disabled-1); --slds-c-dropdown-item-color-background:transparent; --slds-c-dropdown-item-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-dropdown-item-color-background-active:var(--slds-g-color-surface-container-2); --slds-c-dropdown-item-spacing-block:var(--slds-g-spacing-2); --slds-c-dropdown-item-spacing-inline:var(--slds-g-spacing-3); --slds-c-dropdown-item-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-dropdown-divider-sizing-border:calc(var(--slds-g-sizing-1) / 2); --slds-c-dropdown-divider-color-border:var(--slds-g-color-border-1); min-width:calc(var(--slds-g-sizing-5) * 6); max-width:var(--slds-g-sizing-15); margin-block-start:calc(var(--slds-g-spacing-1) / 2); margin-block-end:calc(var(--slds-g-spacing-1) / 2); font-size:var(--slds-g-font-scale-neg-1); } .slds-dropdown mark{ font-weight:var(--slds-g-font-weight-7); } .slds-dropdown .slds-dropdown__item{ line-height:var(--slds-g-font-line-height-base); font-weight:var(--slds-g-font-weight-4); } .slds-dropdown .slds-dropdown__header{ font-size:var(--slds-g-font-scale-neg-1); font-weight:var(--slds-g-font-weight-6); padding-block:var(--slds-g-spacing-2); padding-inline:var(--slds-g-spacing-3); } .slds-dropdown .slds-dropdown__header:focus-visible{ box-shadow:var(--slds-g-shadow-inset-focus-1); outline:0; border-radius:6px; } .slds-dropdown .slds-dropdown__item.slds-has-notification .slds-indicator_unsaved,.slds-dropdown .slds-dropdown__item.slds-has-notification .slds-indicator--unsaved{ inset-block-start:-0.375rem; } .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],.slds-dropdown-trigger > [class*='slds-button--icon'] ~ .slds-dropdown--left[class*='slds-nubbin']{ inset-inline-start:calc(var(--slds-g-spacing-2) * -1); } .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],.slds-dropdown-trigger > [class*='slds-button--icon'] ~ .slds-dropdown--right[class*='slds-nubbin']{ inset-inline-end:calc(var(--slds-g-spacing-2) * -1); } .slds-dropdown[class*='slds-nubbin_top'],.slds-dropdown[class*='slds-nubbin--top']{ margin-block-start:var(--slds-g-spacing-2); } .slds-dropdown[class*='slds-nubbin_bottom'],.slds-dropdown[class*='slds-nubbin--bottom']{ margin-block-end:var(--slds-g-spacing-2); } .slds-dropdown_xx-small,.slds-dropdown--xx-small{ min-width:calc(var(--slds-g-sizing-5) * 6); } .slds-dropdown_x-small,.slds-dropdown--x-small{ min-width:calc(var(--slds-g-sizing-9) * 6); } .slds-dropdown_small,.slds-dropdown--small{ min-width:var(--slds-g-sizing-14); } .slds-dropdown_medium,.slds-dropdown--medium{ min-width:var(--slds-g-sizing-15); } .slds-dropdown_large,.slds-dropdown--large{ min-width:calc(var(--slds-g-sizing-12) * 5); } .slds-dropdown_fluid,.slds-dropdown--fluid{ min-width:calc(var(--slds-g-sizing-5) * 12); } .slds-dropdown_length-5,.slds-dropdown--length-5{ max-height:calc( (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 5 ); overflow-y:auto; } .slds-dropdown_length-7,.slds-dropdown--length-7{ max-height:calc( (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 7 ); overflow-y:auto; } .slds-dropdown_length-10,.slds-dropdown--length-10{ max-height:calc( (var(--slds-g-sizing-5) * var(--slds-g-font-line-height-base) + var(--slds-g-spacing-4)) * 10 ); overflow-y:auto; } .slds-dropdown_length-with-icon-5,.slds-dropdown--length-with-icon-5{ max-height:calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 5); overflow-y:auto; } .slds-dropdown_length-with-icon-7,.slds-dropdown--length-with-icon-7{ max-height:calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 7); overflow-y:auto; } .slds-dropdown_length-with-icon-10,.slds-dropdown--length-with-icon-10{ max-height:calc((var(--slds-g-sizing-7) + var(--slds-g-spacing-4)) * 10); overflow-y:auto; } .slds-has-submenu .slds-dropdown_submenu-left,.slds-has-submenu .slds-dropdown--submenu-left{ margin-inline-end:var(--slds-g-spacing-1); } .slds-has-submenu .slds-dropdown_submenu-right,.slds-has-submenu .slds-dropdown--submenu-right{ margin-inline-start:var(--slds-g-spacing-1); } .slds-has-submenu .slds-dropdown_submenu-bottom,.slds-has-submenu .slds-dropdown--submenu-bottom{ margin-block-end:calc(var(--slds-g-spacing-1) * -1); } .slds-dropdown_inverse,.slds-dropdown--inverse{ --slds-c-dropdown-color-background:var(--slds-g-color-surface-inverse-2); --slds-c-dropdown-color-foreground:var(--slds-g-color-surface-container-1); --slds-c-dropdown-item-color-foreground:var(--slds-g-color-surface-container-1); --slds-c-dropdown-item-color-foreground-hover:var(--slds-g-color-on-surface-inverse-2); --slds-c-dropdown-item-color-foreground-active:var(--slds-g-color-neutral-base-80); --slds-c-dropdown-item-color-foreground-disabled:var(--slds-g-color-palette-blue-20); --slds-c-dropdown-item-color-background-hover:transparent; --slds-c-dropdown-item-color-background-active:transparent; } .slds-dropdown .slds-dropdown__item > a.slds-has-error{ --slds-c-dropdown-item-color-foreground:var(--slds-g-color-on-error-1); --slds-c-dropdown-item-color-foreground-hover:var(--slds-g-color-on-error-1); --slds-c-dropdown-item-color-foreground-active:var(--slds-g-color-on-error-1); --slds-c-dropdown-item-color-background:var(--slds-g-color-error-container-1); --slds-c-dropdown-item-color-background-hover:var(--slds-g-color-error-container-1); --slds-c-dropdown-item-color-background-active:var(--slds-g-color-error-container-1); } .slds-dropdown .slds-dropdown__item > a.slds-has-error .slds-icon{ --slds-c-icon-color-foreground:var(--slds-g-color-on-error-1); } .slds-dropdown .slds-dropdown__item > a.slds-has-success{ --slds-c-dropdown-item-color-foreground:var(--slds-g-color-on-success-1); --slds-c-dropdown-item-color-foreground-hover:var(--slds-g-color-on-success-1); --slds-c-dropdown-item-color-foreground-active:var(--slds-g-color-on-success-1); --slds-c-dropdown-item-color-background:var(--slds-g-color-success-container-1); --slds-c-dropdown-item-color-background-hover:var(--slds-g-color-success-container-1); --slds-c-dropdown-item-color-background-active:var(--slds-g-color-success-container-1); } .slds-dropdown .slds-dropdown__item > a.slds-has-success .slds-icon{ --slds-c-icon-color-foreground:var(--slds-g-color-on-success-1); } .slds-dropdown .slds-dropdown__item > a.slds-has-warning{ --slds-c-dropdown-item-color-foreground:var(--slds-g-color-on-warning-1); --slds-c-dropdown-item-color-foreground-hover:var(--slds-g-color-on-warning-1); --slds-c-dropdown-item-color-foreground-active:var(--slds-g-color-on-warning-1); --slds-c-dropdown-item-color-background:var(--slds-g-color-warning-container-1); --slds-c-dropdown-item-color-background-hover:var(--slds-g-color-warning-container-1); --slds-c-dropdown-item-color-background-active:var(--slds-g-color-warning-container-1); } .slds-dropdown .slds-dropdown__item > a.slds-has-warning .slds-icon{ --slds-c-icon-color-foreground:var(--slds-g-color-on-warning-1); } .slds-dropdown__item > a.slds-has-error:hover, .slds-dropdown__item > a.slds-has-error:focus, .slds-dropdown__item > a.slds-has-success:hover, .slds-dropdown__item > a.slds-has-success:focus, .slds-dropdown__item > a.slds-has-warning:hover, .slds-dropdown__item > a.slds-has-warning:focus{ text-decoration:underline; } .slds-dropdown__item > a.slds-has-error:focus-visible, .slds-dropdown__item > a.slds-has-success:focus-visible, .slds-dropdown__item > a.slds-has-warning:focus-visible{ box-shadow:var(--slds-g-shadow-inset-inverse-focus-1); } .slds-dropdown_actions,.slds-dropdown--actions{ --slds-c-dropdown-item-color-foreground:var(--slds-g-color-neutral-base-10); } .slds-modal{ --slds-c-modal-color-background:var(--slds-g-color-surface-container-1); --slds-c-modal-radius-border:var(--slds-g-radius-border-4); --slds-c-modal-shadow:var(--slds-g-shadow-4); --slds-c-modal-header-sizing-border:var(--slds-g-sizing-border-2); --slds-c-modal-header-color-border:var(--slds-g-color-border-1); --slds-c-modal-footer-sizing-border:var(--slds-g-sizing-border-2); --slds-c-modal-footer-color-border:var(--slds-g-color-border-1); --slds-c-modal-header-font-weight:var(--slds-g-font-weight-4); --slds-c-modal-header-font-size:var(--slds-g-font-scale-3); --slds-c-modal-header-font-line-height:var(--slds-g-font-line-height-2); --slds-c-modal-header-font-align:center; --slds-c-modal-header-color-background:var(--slds-g-color-surface-container-1); --slds-c-modal-header-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-modal-header-spacing-block:var(--slds-g-spacing-4); --slds-c-modal-header-spacing-inline:var(--slds-g-spacing-4); --slds-c-modal-content-color-background:var(--slds-g-color-surface-container-1); --slds-c-modal-content-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-modal-footer-color-background:var(--slds-g-color-surface-container-1); --slds-c-modal-footer-color-foreground:var(--slds-g-color-on-surface-3); --slds-c-modal-footer-spacing-block:var(--slds-g-spacing-3); --slds-c-modal-footer-spacing-inline:var(--slds-g-spacing-4); --slds-c-modal-footer-button-spacing-gap:var(--slds-g-spacing-2); --slds-c-modal-footer-font-align:right; --slds-c-modal-close-size:var(--slds-g-sizing-9); --slds-c-modal-close-color-background:var(--slds-g-color-surface-container-1); --slds-c-modal-close-color-background-hover:var(--slds-g-color-surface-container-2); --slds-c-modal-close-color-border:var(--slds-g-color-border-2); --slds-c-modal-close-sizing-border:var(--slds-g-sizing-border-1); --slds-c-modal-close-sizing-outline:var(--slds-g-sizing-border-2); --slds-c-modal-close-shadow-focus:var(--slds-g-shadow-inset-inverse-focus-1); } .slds-modal .slds-modal__header .slds-modal__close{ inset-block-start:calc(var(--slds-g-spacing-6) * -1.25); inset-inline-end:0; } .slds-modal .slds-modal__close{ inset-block-end:var(--slds-g-spacing-2); } .slds-modal.slds-modal_full .slds-modal__header .slds-modal__close,.slds-modal.slds-modal--full .slds-modal__header .slds-modal__close{ inset-inline-end:var(--slds-g-spacing-4); } .slds-backdrop{ --slds-c-backdrop-color-background:var(--slds-s-backdrop-color-background); } .slds-modal .slds-modal__header_empty,.slds-modal .slds-modal__header--empty{ --slds-c-modal-header-spacing-block:0; --slds-c-modal-header-spacing-inline:0; --slds-c-modal-header-sizing-border:0; } .slds-modal .slds-modal__container{ padding-block-start:var(--slds-g-spacing-8); padding-block-end:var(--slds-g-spacing-12); padding-inline-start:0; padding-inline-end:0; } @media (max-width: 47.9375em){ .slds-modal .slds-modal__container{ margin-inline:var(--slds-g-spacing-6); } } .slds-modal.slds-modal_full,.slds-modal.slds-modal--full{ --slds-c-modal-radius-border:0; } .slds-modal.slds-modal_full .slds-modal__container,.slds-modal.slds-modal--full .slds-modal__container{ padding-block-start:var(--slds-g-spacing-4); padding-block-end:0; padding-inline-start:0; padding-inline-end:0; } .slds-pill{ --slds-c-pill-color-background:var(--slds-g-color-surface-container-1); --slds-c-pill-color-background-hover:var(--slds-s-pill-color-background-hover); --slds-c-pill-color-border:var(--slds-g-color-border-2); --slds-c-pill-color-border-focus:var(--slds-g-color-border-2); --slds-c-pill-sizing-border:var(--slds-g-sizing-border-1); --slds-c-pill-radius-border:var(--slds-g-radius-border-pill); --slds-c-pill-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-pill-font-size:var(--slds-g-font-scale-neg-1); --slds-c-pill-font-line-height:var(--slds-g-font-line-height-2); --slds-c-pill-font-weight:var(--slds-g-font-weight-3); --slds-c-pill-spacing-block:var(--slds-g-spacing-1); --slds-c-pill-spacing-inline:var(--slds-g-spacing-2); --slds-c-pill-margin-inline-start-adjacent:var(--slds-g-spacing-1); --slds-c-pill-action-spacing-block:var(--slds-c-pill-spacing-block); --slds-c-pill-action-spacing-inline:var(--slds-c-pill-spacing-inline); --slds-c-pill-label-radius-border:var(--slds-g-radius-border-1); --slds-c-pill-label-shadow-focus:var(--slds-g-shadow-outline-focus-1); --slds-c-pill-icon-size:var(--slds-g-sizing-5); --slds-c-pill-icon-font-size:var(--slds-g-font-scale-neg-2); --slds-c-pill-icon-spacing-inline:var(--slds-g-spacing-1); --slds-c-pill-remove-size:var(--slds-g-sizing-5); --slds-c-pill-remove-icon-size:var(--slds-g-sizing-4); --slds-c-pill-remove-icon-font-size:var(--slds-g-sizing-3); --slds-c-pill-remove-icon-line-height:var(--slds-g-font-line-height-1); --slds-c-pill-remove-spacing:var(--slds-g-spacing-1); --slds-c-pill-remove-color-foreground:var(--slds-g-color-accent-2); } .slds-pill.slds-pill_link,.slds-pill.slds-pill--link{ --slds-c-pill-action-spacing-inline-start:var(--slds-g-spacing-2); --slds-c-pill-action-spacing-inline-end:var(--slds-g-spacing-5); --slds-c-pill-action-spacing-inline-start-with-icon:calc( var(--slds-g-spacing-2) + var(--slds-g-sizing-5) + var(--slds-g-spacing-2) ); } .slds-pill.slds-pill_bare,.slds-pill.slds-pill--bare{ --slds-c-pill-color-background:transparent; --slds-c-pill-sizing-border:0; } .slds-pill.slds-has-error{ --slds-c-pill-color-foreground:var(--slds-g-color-error-1); --slds-c-pill-color-border:var(--slds-g-color-border-error-1); --slds-c-pill-font-weight:var(--slds-g-font-weight-4); } .slds-pill.slds-pill_container,.slds-pill.slds-pill--container{ --slds-c-pill-container-color-background:var(--slds-g-color-surface-1); --slds-c-pill-container-color-border:var(--slds-s-input-color-border); --slds-c-pill-container-sizing-border:var(--slds-g-sizing-border-1); --slds-c-pill-container-radius-border:var(--slds-g-radius-border-4); --slds-c-pill-container-spacing-block:var(--slds-g-spacing-1); --slds-c-pill-container-spacing-inline:var(--slds-g-spacing-1); } .slds-progress-bar{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-3); --slds-c-progressbar-color-foreground:var(--slds-g-color-accent-1); --slds-c-progressbar-color-background:var(--slds-g-color-surface-container-3); } lightning-progress-bar{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-3); --slds-c-progressbar-color-foreground:var(--slds-g-color-accent-1); --slds-c-progressbar-color-background:var(--slds-g-color-surface-container-3); } lightning-progress-bar .slds-progress-bar{ --slds-c-progressbar-sizing-block:unset; --slds-c-progressbar-color-foreground:unset; --slds-c-progressbar-color-background:unset; } .slds-progress-bar_x-small,.slds-progress-bar--x-small{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-1); } lightning-progress-bar_x-small,lightning-progress-bar--x-small,.slds-progress-bar--x-small{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-1); } lightning-progress-bar .slds-progress-bar_x-small,lightning-progress-bar .slds-progress-bar--x-small,.slds-progress-bar--x-small{ --slds-c-progressbar-sizing-block:unset; } .slds-progress-bar_small,.slds-progress-bar--small{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-2); } lightning-progress-bar_small,lightning-progress-bar--small,.slds-progress-bar--small{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-2); } lightning-progress-bar .slds-progress-bar_small,lightning-progress-bar .slds-progress-bar--small,.slds-progress-bar--small{ --slds-c-progressbar-sizing-block:unset; } .slds-progress-bar_medium,.slds-progress-bar--medium{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-3); } lightning-progress-bar_medium,lightning-progress-bar--medium,.slds-progress-bar--medium{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-3); } lightning-progress-bar .slds-progress-bar_medium,lightning-progress-bar .slds-progress-bar--medium,.slds-progress-bar--medium{ --slds-c-progressbar-sizing-block:unset; } .slds-progress-bar_large,.slds-progress-bar--large{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-4); } lightning-progress-bar_large,lightning-progress-bar--large,.slds-progress-bar--large{ --slds-c-progressbar-sizing-block:var(--slds-g-sizing-4); } lightning-progress-bar .slds-progress-bar_large,lightning-progress-bar .slds-progress-bar--large,.slds-progress-bar--large{ --slds-c-progressbar-sizing-block:unset; } .slds-progress-bar_circular,.slds-progress-bar--circular{ --slds-c-progressbar-radius-border:var(--slds-g-radius-border-pill); } lightning-progress-bar_circular,lightning-progress-bar--circular,.slds-progress-bar--circular{ --slds-c-progressbar-radius-border:var(--slds-g-radius-border-pill); } lightning-progress-bar .slds-progress-bar_circular,lightning-progress-bar .slds-progress-bar--circular,.slds-progress-bar--circular{ --slds-c-progressbar-radius-border:unset; } .slds-progress-bar__value_success,.slds-progress-bar__value--success{ --slds-c-progressbar-color-foreground:var(--slds-g-color-success-1); } lightning-progress-bar__value_success,lightning-progress-bar__value--success,.slds-progress-bar__value--success{ --slds-c-progressbar-color-foreground:var(--slds-g-color-success-1); } lightning-progress-bar .slds-progress-bar__value_success,lightning-progress-bar .slds-progress-bar__value--success,.slds-progress-bar__value--success{ --slds-c-progressbar-color-foreground:unset; } .slds-progress{ --slds-c-progress-sizing-inline-max:70%; --slds-c-progress-surface-color-background:var(--slds-g-color-surface-container-1); --slds-c-progress-bar-margin-block-start:-0.0625rem; --slds-c-progress-connector-color-background:var(--slds-g-color-neutral-base-50); --slds-c-progress-marker-sizing:var(--slds-g-sizing-5); --slds-c-progress-marker-sizing-border:var(--slds-g-sizing-2); --slds-c-progress-marker-color-border:var(--slds-g-color-on-accent-1); --slds-c-progress-marker-radius-border:var(--slds-g-radius-border-circle); --slds-c-progress-marker-color-background:var(--slds-g-color-neutral-base-50); --slds-c-progress-marker-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-progress-connector-sizing-inline:var(--slds-g-sizing-1); --slds-c-progress-marker-spacing-inline-end:var(--slds-g-spacing-4); --slds-c-progress-item-content-spacing-block-start:var(--slds-g-spacing-3); --slds-c-progress-item-content-spacing-block-end:var(--slds-g-spacing-3); --slds-c-progress-item-content-sizing-border:var(--slds-g-sizing-border-1); --slds-c-progress-item-content-color-border:var(--slds-g-color-border-1); --slds-c-progress-connector-opacity-success:0.3; } lightning-progress-indicator{ --slds-c-progress-sizing-inline-max:70%; --slds-c-progress-surface-color-background:var(--slds-g-color-surface-container-1); --slds-c-progress-bar-margin-block-start:-0.0625rem; --slds-c-progress-connector-color-background:var(--slds-g-color-neutral-base-50); --slds-c-progress-marker-sizing:var(--slds-g-sizing-5); --slds-c-progress-marker-sizing-border:var(--slds-g-sizing-2); --slds-c-progress-marker-color-border:var(--slds-g-color-on-accent-1); --slds-c-progress-marker-radius-border:var(--slds-g-radius-border-circle); --slds-c-progress-marker-color-background:var(--slds-g-color-neutral-base-50); --slds-c-progress-marker-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-progress-connector-sizing-inline:var(--slds-g-sizing-1); --slds-c-progress-marker-spacing-inline-end:var(--slds-g-spacing-4); --slds-c-progress-item-content-spacing-block-start:var(--slds-g-spacing-3); --slds-c-progress-item-content-spacing-block-end:var(--slds-g-spacing-3); --slds-c-progress-item-content-sizing-border:var(--slds-g-sizing-border-1); --slds-c-progress-item-content-color-border:var(--slds-g-color-border-1); --slds-c-progress-connector-opacity-success:0.3; } lightning-progress-indicator .slds-progress{ --slds-c-progress-sizing-inline-max:unset; --slds-c-progress-surface-color-background:unset; --slds-c-progress-bar-margin-block-start:unset; --slds-c-progress-connector-color-background:unset; --slds-c-progress-marker-sizing:unset; --slds-c-progress-marker-sizing-border:unset; --slds-c-progress-marker-color-border:unset; --slds-c-progress-marker-radius-border:unset; --slds-c-progress-marker-color-background:unset; --slds-c-progress-marker-shadow-focus:unset; --slds-c-progress-connector-sizing-inline:unset; --slds-c-progress-marker-spacing-inline-end:unset; --slds-c-progress-item-content-spacing-block-start:unset; --slds-c-progress-item-content-spacing-block-end:unset; --slds-c-progress-item-content-sizing-border:unset; --slds-c-progress-item-content-color-border:unset; --slds-c-progress-connector-opacity-success:unset; } .slds-progress__item.slds-is-completed .slds-progress__marker, .slds-progress__item.slds-is-active .slds-progress__marker{ --slds-c-progress-marker-color-border:var(--slds-g-color-accent-container-1); } lightning-progress-indicator__item.slds-is-completed .slds-progress__marker, .slds-progress__item.slds-is-active .slds-progress__marker{ --slds-c-progress-marker-color-border:var(--slds-g-color-accent-container-1); } .slds-progress__item.slds-is-completed .slds-progress__marker_icon,.slds-progress__item.slds-is-completed .slds-progress__marker--icon{ --slds-c-progress-marker-color-border:transparent; --slds-c-progress-marker-color-foreground:var(--slds-g-color-accent-container-1); } lightning-progress-indicator__item.slds-is-completed .slds-progress__marker_icon,lightning-progress-indicator__item.slds-is-completed .slds-progress__marker--icon,.slds-progress__item.slds-is-completed .slds-progress__marker--icon{ --slds-c-progress-marker-color-border:transparent; --slds-c-progress-marker-color-foreground:var(--slds-g-color-accent-container-1); } .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success,.slds-progress__item.slds-is-completed .slds-progress__marker--icon-success{ --slds-c-progress-marker-color-foreground:var(--slds-g-color-success-1); } lightning-progress-indicator__item.slds-is-completed .slds-progress__marker_icon-success,lightning-progress-indicator__item.slds-is-completed .slds-progress__marker--icon-success,.slds-progress__item.slds-is-completed .slds-progress__marker--icon-success{ --slds-c-progress-marker-color-foreground:var(--slds-g-color-success-1); } .slds-progress__item.slds-is-active .slds-progress__marker{ --slds-c-progress-marker-shadow:var(--slds-c-progress-surface-color-background) 0 0 0 var(--slds-g-sizing-2); } lightning-progress-indicator__item.slds-is-active .slds-progress__marker{ --slds-c-progress-marker-shadow:var(--slds-c-progress-surface-color-background) 0 0 0 var(--slds-g-sizing-2); } .slds-progress__item.slds-is-active .slds-progress__marker:hover, .slds-progress__item.slds-is-active .slds-progress__marker:focus{ --slds-c-progress-marker-color-border:var(--slds-g-color-border-accent-2); } lightning-progress-indicator__item.slds-is-active .slds-progress__marker:hover, .slds-progress__item.slds-is-active .slds-progress__marker:focus{ --slds-c-progress-marker-color-border:var(--slds-g-color-border-accent-2); } .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress__item.slds-has-error .slds-progress__marker:focus{ --slds-c-progress-marker-color-foreground:var(--slds-g-color-error-1); --slds-c-progress-marker-color-border:transparent; --slds-c-progress-marker-shadow:none; } lightning-progress-indicator__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress__item.slds-has-error .slds-progress__marker:focus{ --slds-c-progress-marker-color-foreground:var(--slds-g-color-error-1); --slds-c-progress-marker-color-border:transparent; --slds-c-progress-marker-shadow:none; } .slds-progress__item.slds-is-completed::before, .slds-progress__item.slds-is-completed::after, .slds-progress__item.slds-is-active::before, .slds-progress__item.slds-has-error::before{ --slds-c-progress-connector-color-background:var(--slds-g-color-accent-container-1); } lightning-progress-indicator__item.slds-is-completed::before, .slds-progress__item.slds-is-completed::after, .slds-progress__item.slds-is-active::before, .slds-progress__item.slds-has-error::before{ --slds-c-progress-connector-color-background:var(--slds-g-color-accent-container-1); } .slds-progress_success .slds-progress__item.slds-is-completed::before,.slds-progress--success .slds-progress__item.slds-is-completed::before, .slds-progress_success .slds-progress__item.slds-is-completed::after, .slds-progress--success .slds-progress__item.slds-is-completed::after, .slds-progress_success .slds-progress__item.slds-is-active::before, .slds-progress--success .slds-progress__item.slds-is-active::before, .slds-progress_success .slds-progress__item.slds-has-error::before, .slds-progress--success .slds-progress__item.slds-has-error::before{ --slds-c-progress-connector-color-background:var(--slds-g-color-success-1); opacity:var(--slds-c-progress-connector-opacity-success); } .slds-progress_shade,.slds-progress--shade{ --slds-c-progress-surface-color-background:var(--slds-g-color-surface-container-2); --slds-c-progress-marker-color-border:var(--slds-c-progress-surface-color-background); } lightning-progress-indicator_shade,lightning-progress-indicator--shade,.slds-progress--shade{ --slds-c-progress-surface-color-background:var(--slds-g-color-surface-container-2); --slds-c-progress-marker-color-border:var(--slds-c-progress-surface-color-background); } lightning-progress-indicator .slds-progress_shade,lightning-progress-indicator .slds-progress--shade,.slds-progress--shade{ --slds-c-progress-surface-color-background:unset; --slds-c-progress-marker-color-border:unset; } .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon,.slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon{ --slds-c-progress-marker-color-border:var(--slds-c-progress-surface-color-background); } lightning-progress-indicator_shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon,lightning-progress-indicator--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon,.slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon{ --slds-c-progress-marker-color-border:var(--slds-c-progress-surface-color-background); } .slds-progress-ring{ --slds-c-progressring-size:var(--slds-g-sizing-7); --slds-c-progressring-radius-border:var(--slds-g-sizing-7); --slds-c-progressring-color-background:var(--slds-g-color-surface-container-3); --slds-c-progressring-content-color-background:var(--slds-g-color-surface-container-1); --slds-c-progressring-color-foreground:var(--slds-g-color-success-1); --slds-c-progressring-icon-size:var(--slds-g-sizing-4); --slds-c-progressring-icon-color-foreground:currentcolor; } lightning-progress-indicator-ring{ --slds-c-progressring-size:var(--slds-g-sizing-7); --slds-c-progressring-radius-border:var(--slds-g-sizing-7); --slds-c-progressring-color-background:var(--slds-g-color-surface-container-3); --slds-c-progressring-content-color-background:var(--slds-g-color-surface-container-1); --slds-c-progressring-color-foreground:var(--slds-g-color-success-1); --slds-c-progressring-icon-size:var(--slds-g-sizing-4); --slds-c-progressring-icon-color-foreground:currentcolor; } lightning-progress-indicator .slds-progress-ring{ --slds-c-progressring-size:unset; --slds-c-progressring-radius-border:unset; --slds-c-progressring-color-background:unset; --slds-c-progressring-content-color-background:unset; --slds-c-progressring-color-foreground:unset; --slds-c-progressring-icon-size:unset; --slds-c-progressring-icon-color-foreground:unset; } .slds-progress-ring.slds-progress-ring_large,.slds-progress-ring.slds-progress-ring--large{ --slds-c-progressring-size:var(--slds-g-sizing-9); --slds-c-progressring-icon-size:var(--slds-g-sizing-5); } lightning-progress-indicator-ring.slds-progress-ring_large,lightning-progress-indicator-ring.slds-progress-ring--large,.slds-progress-ring.slds-progress-ring--large{ --slds-c-progressring-size:var(--slds-g-sizing-9); --slds-c-progressring-icon-size:var(--slds-g-sizing-5); } lightning-progress-indicator .slds-progress-ring.slds-progress-ring_large,lightning-progress-indicator .slds-progress-ring.slds-progress-ring--large,.slds-progress-ring.slds-progress-ring--large{ --slds-c-progressring-size:unset; --slds-c-progressring-icon-size:unset; } .slds-progress-ring.slds-progress-ring_warning,.slds-progress-ring.slds-progress-ring--warning{ --slds-c-progressring-color-foreground:var(--slds-g-color-warning-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-warning-1); } lightning-progress-indicator-ring.slds-progress-ring_warning,lightning-progress-indicator-ring.slds-progress-ring--warning,.slds-progress-ring.slds-progress-ring--warning{ --slds-c-progressring-color-foreground:var(--slds-g-color-warning-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-warning-1); } lightning-progress-indicator .slds-progress-ring.slds-progress-ring_warning,lightning-progress-indicator .slds-progress-ring.slds-progress-ring--warning,.slds-progress-ring.slds-progress-ring--warning{ --slds-c-progressring-color-foreground:unset; --slds-c-progressring-icon-color-foreground:unset; } .slds-progress-ring.slds-progress-ring_expired,.slds-progress-ring.slds-progress-ring--expired{ --slds-c-progressring-color-foreground:var(--slds-g-color-error-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-error-1); } lightning-progress-indicator-ring.slds-progress-ring_expired,lightning-progress-indicator-ring.slds-progress-ring--expired,.slds-progress-ring.slds-progress-ring--expired{ --slds-c-progressring-color-foreground:var(--slds-g-color-error-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-error-1); } lightning-progress-indicator .slds-progress-ring.slds-progress-ring_expired,lightning-progress-indicator .slds-progress-ring.slds-progress-ring--expired,.slds-progress-ring.slds-progress-ring--expired{ --slds-c-progressring-color-foreground:unset; --slds-c-progressring-icon-color-foreground:unset; } .slds-progress-ring.slds-progress-ring_complete,.slds-progress-ring.slds-progress-ring--complete{ --slds-c-progressring-color-foreground:var(--slds-g-color-success-1); --slds-c-progressring-content-color-background:var(--slds-g-color-success-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-surface-container-1); } lightning-progress-indicator-ring.slds-progress-ring_complete,lightning-progress-indicator-ring.slds-progress-ring--complete,.slds-progress-ring.slds-progress-ring--complete{ --slds-c-progressring-color-foreground:var(--slds-g-color-success-1); --slds-c-progressring-content-color-background:var(--slds-g-color-success-1); --slds-c-progressring-icon-color-foreground:var(--slds-g-color-surface-container-1); } lightning-progress-indicator .slds-progress-ring.slds-progress-ring_complete,lightning-progress-indicator .slds-progress-ring.slds-progress-ring--complete,.slds-progress-ring.slds-progress-ring--complete{ --slds-c-progressring-color-foreground:unset; --slds-c-progressring-content-color-background:unset; --slds-c-progressring-icon-color-foreground:unset; } .slds-progress-ring.slds-progress-ring_active-step,.slds-progress-ring.slds-progress-ring--active-step{ --slds-c-progressring-color-foreground:var(--slds-g-color-accent-1); } lightning-progress-indicator-ring.slds-progress-ring_active-step,lightning-progress-indicator-ring.slds-progress-ring--active-step,.slds-progress-ring.slds-progress-ring--active-step{ --slds-c-progressring-color-foreground:var(--slds-g-color-accent-1); } lightning-progress-indicator .slds-progress-ring.slds-progress-ring_active-step,lightning-progress-indicator .slds-progress-ring.slds-progress-ring--active-step,.slds-progress-ring.slds-progress-ring--active-step{ --slds-c-progressring-color-foreground:unset; } .slds-spinner_container,.slds-spinner--container{ --slds-c-spinner-color-background:var(--slds-g-color-surface-container-1); } .slds-spinner{ --slds-c-spinner-color-foreground:var(--slds-g-color-neutral-base-50); --slds-c-spinner-radius-border:var(--slds-g-radius-border-circle); } .slds-spinner.slds-spinner_brand,.slds-spinner.slds-spinner--brand{ --slds-c-spinner-color-foreground:var(--slds-g-color-accent-1); } .slds-spinner.slds-spinner_inverse,.slds-spinner.slds-spinner--inverse{ --slds-c-spinner-color-foreground:var(--slds-g-color-surface-container-1); } .slds-spinner.slds-spinner_xx-small,.slds-spinner.slds-spinner--xx-small{ --slds-c-spinner-size:var(--slds-g-sizing-3); --slds-c-spinner-dot-size:0.125rem; } .slds-spinner.slds-spinner_x-small,.slds-spinner.slds-spinner--x-small{ --slds-c-spinner-size:var(--slds-g-sizing-5); --slds-c-spinner-dot-size:var(--slds-g-sizing-2); } .slds-spinner.slds-spinner_small,.slds-spinner.slds-spinner--small{ --slds-c-spinner-size:var(--slds-g-sizing-6); --slds-c-spinner-dot-size:var(--slds-g-sizing-2); } .slds-spinner.slds-spinner_medium,.slds-spinner.slds-spinner--medium{ --slds-c-spinner-size:var(--slds-g-sizing-9); --slds-c-spinner-dot-size:var(--slds-g-sizing-3); } .slds-spinner.slds-spinner_large,.slds-spinner.slds-spinner--large{ --slds-c-spinner-size:calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4)); --slds-c-spinner-dot-size:calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1)); } .slds-tile{ --slds-c-tile-margin-block-start-adjacent:var(--slds-g-spacing-2); --slds-c-tile-title-link-color-foreground:var(--slds-s-link-color); --slds-c-tile-meta-color-foreground:var(--slds-g-color-on-surface-3); } .slds-tile_board,.slds-tile--board{ --slds-c-tile-board-spacing-inline-end:var(--slds-g-spacing-5); } .slds-tile_board__icon,.slds-tile--board__icon{ --slds-c-tile-board-icon-sizing:var(--slds-g-spacing-4); --slds-c-tile-board-icon-inset-block-end:var(--slds-g-spacing-1); --slds-c-tile-board-icon-inset-inline-end:var(--slds-g-spacing-1); } .slds-tabs_default,.slds-tabs--default, .slds-tabs_scoped, .slds-tabs--scoped, .slds-vertical-tabs{ --slds-c-tabs-item-sizing-height:var(--slds-s-navigation-sizing-height, 2.5rem); --slds-c-tabs-item-font-lineheight:var(--slds-s-navigation-font-lineheight, 2.5rem); --slds-c-tabs-item-font-size:var(--slds-g-font-scale-var-1); --slds-c-tabs-item-font-weight:var(--slds-s-navigation-font-weight); --slds-c-tabs-item-font-weight-active:var(--slds-s-navigation-font-weight-active); --slds-c-tabs-item-color-foreground:var(--slds-s-navigation-color, var(--slds-g-color-on-surface-2)); --slds-c-tabs-item-color-foreground-active:var( --slds-s-navigation-color-active, var(--slds-g-color-on-surface-3) ); --slds-c-tabs-item-color-foreground-hover:var(--slds-s-navigation-color-hover); --slds-c-tabs-item-sizing-outline:var(--slds-g-sizing-border-2); --slds-c-tabs-item-color-outline:var(--slds-s-link-outline-color); --slds-c-tabs-item-outline-offset:-6px; } lightning-tabset,.slds-tabs--default, .slds-tabs_scoped, .slds-tabs--scoped, .slds-tabs--scoped, .slds-vertical-tabs{ --slds-c-tabs-item-sizing-height:var(--slds-s-navigation-sizing-height, 2.5rem); --slds-c-tabs-item-font-lineheight:var(--slds-s-navigation-font-lineheight, 2.5rem); --slds-c-tabs-item-font-size:var(--slds-g-font-scale-var-1); --slds-c-tabs-item-font-weight:var(--slds-s-navigation-font-weight); --slds-c-tabs-item-font-weight-active:var(--slds-s-navigation-font-weight-active); --slds-c-tabs-item-color-foreground:var(--slds-s-navigation-color, var(--slds-g-color-on-surface-2)); --slds-c-tabs-item-color-foreground-active:var( --slds-s-navigation-color-active, var(--slds-g-color-on-surface-3) ); --slds-c-tabs-item-color-foreground-hover:var(--slds-s-navigation-color-hover); --slds-c-tabs-item-sizing-outline:var(--slds-g-sizing-border-2); --slds-c-tabs-item-color-outline:var(--slds-s-link-outline-color); --slds-c-tabs-item-outline-offset:-6px; } .slds-tabs_default,.slds-tabs--default{ --slds-c-tabs-list-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-list-color-border:var(--slds-s-navigation-color-border, var(--slds-g-color-border-1)); --slds-c-tabs-item-spacing-inline:var(--slds-g-spacing-3); --slds-c-tabs-item-indicator-sizing-height-active:var(--slds-c-tabs-list-sizing-border); --slds-c-tabs-item-indicator-sizing-height-hover:var(--slds-c-tabs-list-sizing-border); --slds-c-tabs-item-color-border-active:var(--slds-g-color-accent-2); --slds-c-tabs-item-color-border-hover:var( --slds-s-navigation-color-border-hover, var(--slds-g-color-accent-3) ); --slds-c-tabs-item-color-background-notification:var(--slds-g-color-surface-container-2); --slds-c-tabs-item-color-border-notification:var(--slds-g-color-border-1); --slds-c-tabs-indicator-unread-sizing:0.375rem; --slds-c-tabs-indicator-unsaved-offset-block-start:calc(var(--slds-g-spacing-1) * -1); --slds-c-tabs-indicator-unsaved-color-foreground:var(--slds-g-color-accent-3); --slds-c-tabs-panel-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-icon-left-spacing-inline-end:var(--slds-g-spacing-2); --slds-c-tabs-icon-right-spacing-inline-start:var(--slds-g-spacing-2); --slds-c-tabs-overflow-color-foreground-status:var(--slds-g-color-neutral-base-100); } lightning-tabset,.slds-tabs--default{ --slds-c-tabs-list-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-list-color-border:var(--slds-s-navigation-color-border, var(--slds-g-color-border-1)); --slds-c-tabs-item-spacing-inline:var(--slds-g-spacing-3); --slds-c-tabs-item-indicator-sizing-height-active:var(--slds-c-tabs-list-sizing-border); --slds-c-tabs-item-indicator-sizing-height-hover:var(--slds-c-tabs-list-sizing-border); --slds-c-tabs-item-color-border-active:var(--slds-g-color-accent-2); --slds-c-tabs-item-color-border-hover:var( --slds-s-navigation-color-border-hover, var(--slds-g-color-accent-3) ); --slds-c-tabs-item-color-background-notification:var(--slds-g-color-surface-container-2); --slds-c-tabs-item-color-border-notification:var(--slds-g-color-border-1); --slds-c-tabs-indicator-unread-sizing:0.375rem; --slds-c-tabs-indicator-unsaved-offset-block-start:calc(var(--slds-g-spacing-1) * -1); --slds-c-tabs-indicator-unsaved-color-foreground:var(--slds-g-color-accent-3); --slds-c-tabs-panel-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-icon-left-spacing-inline-end:var(--slds-g-spacing-2); --slds-c-tabs-icon-right-spacing-inline-start:var(--slds-g-spacing-2); --slds-c-tabs-overflow-color-foreground-status:var(--slds-g-color-neutral-base-100); } lightning-tabset .slds-tabs_default,lightning-tabset .slds-tabs--default,.slds-tabs--default{ --slds-c-tabs-list-sizing-border:unset; --slds-c-tabs-list-color-border:unset; --slds-c-tabs-item-spacing-inline:unset; --slds-c-tabs-item-indicator-sizing-height-active:unset; --slds-c-tabs-item-indicator-sizing-height-hover:unset; --slds-c-tabs-item-color-border-active:unset; --slds-c-tabs-item-color-border-hover:unset; --slds-c-tabs-item-color-background-notification:unset; --slds-c-tabs-item-color-border-notification:unset; --slds-c-tabs-indicator-unread-sizing:unset; --slds-c-tabs-indicator-unsaved-offset-block-start:unset; --slds-c-tabs-indicator-unsaved-color-foreground:unset; --slds-c-tabs-panel-spacing-block:unset; --slds-c-tabs-icon-left-spacing-inline-end:unset; --slds-c-tabs-icon-right-spacing-inline-start:unset; --slds-c-tabs-overflow-color-foreground-status:unset; } .slds-tabs_scoped,.slds-tabs--scoped{ --slds-c-tabs-scoped-nav-color-background:var(--slds-s-navigation-color-background); --slds-c-tabs-scoped-nav-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-scoped-nav-color-border:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-nav-radius-border:var(--slds-s-navigation-radius-border); --slds-c-tabs-scoped-content-color-background:var(--slds-s-navigation-color-background-active); --slds-c-tabs-scoped-content-color-border:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-content-spacing-block:var(--slds-g-spacing-4); --slds-c-tabs-scoped-content-spacing-inline:var(--slds-g-spacing-4); --slds-c-tabs-scoped-link-spacing-inline:var(--slds-g-spacing-4); --slds-c-tabs-scoped-link-color-background-hover:var(--slds-s-navigation-color-background-hover); --slds-c-tabs-scoped-link-color-border-hover:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-link-color-background-active:var(--slds-s-navigation-color-background-active); --slds-c-tabs-scoped-link-color-border-active:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-item-outline-offset:-4px; } lightning-tabset[variant="scoped"],.slds-tabs--scoped{ --slds-c-tabs-scoped-nav-color-background:var(--slds-s-navigation-color-background); --slds-c-tabs-scoped-nav-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-scoped-nav-color-border:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-nav-radius-border:var(--slds-s-navigation-radius-border); --slds-c-tabs-scoped-content-color-background:var(--slds-s-navigation-color-background-active); --slds-c-tabs-scoped-content-color-border:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-content-spacing-block:var(--slds-g-spacing-4); --slds-c-tabs-scoped-content-spacing-inline:var(--slds-g-spacing-4); --slds-c-tabs-scoped-link-spacing-inline:var(--slds-g-spacing-4); --slds-c-tabs-scoped-link-color-background-hover:var(--slds-s-navigation-color-background-hover); --slds-c-tabs-scoped-link-color-border-hover:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-link-color-background-active:var(--slds-s-navigation-color-background-active); --slds-c-tabs-scoped-link-color-border-active:var( --slds-s-navigation-color-border, var(--slds-g-color-border-1) ); --slds-c-tabs-scoped-item-outline-offset:-4px; } lightning-tabset[variant="scoped"] .slds-tabs_scoped,lightning-tabset[variant="scoped"] .slds-tabs--scoped,.slds-tabs--scoped{ --slds-c-tabs-scoped-nav-color-background:unset; --slds-c-tabs-scoped-nav-sizing-border:unset; --slds-c-tabs-scoped-nav-color-border:unset; --slds-c-tabs-scoped-nav-radius-border:unset; --slds-c-tabs-scoped-content-color-background:unset; --slds-c-tabs-scoped-content-color-border:unset; --slds-c-tabs-scoped-content-spacing-block:unset; --slds-c-tabs-scoped-content-spacing-inline:unset; --slds-c-tabs-scoped-link-spacing-inline:unset; --slds-c-tabs-scoped-link-color-background-hover:unset; --slds-c-tabs-scoped-link-color-border-hover:unset; --slds-c-tabs-scoped-link-color-background-active:unset; --slds-c-tabs-scoped-link-color-border-active:unset; --slds-c-tabs-scoped-item-outline-offset:unset; } .slds-vertical-tabs{ --slds-c-tabs-vertical-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-vertical-color-border:var(--slds-s-navigation-color-border); --slds-c-tabs-vertical-radius-border:var(--slds-g-radius-border-2); --slds-c-tabs-vertical-nav-sizing-inline:var(--slds-g-sizing-14); --slds-c-tabs-vertical-nav-color-background:var(--slds-s-navigation-color-background); --slds-c-tabs-vertical-item-color-background:transparent; --slds-c-tabs-vertical-item-color-background-active:var(--slds-s-navigation-color-background-active); --slds-c-tabs-vertical-link-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-vertical-link-spacing-inline:var(--slds-g-spacing-3); --slds-c-tabs-vertical-link-color-background:transparent; --slds-c-tabs-vertical-link-color-background-hover:var(--slds-s-navigation-color-background-hover); --slds-c-tabs-vertical-content-color-background:var(--slds-s-navigation-color-background-active); --slds-c-tabs-vertical-content-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-vertical-content-spacing-inline:var(--slds-g-spacing-3); } lightning-tabset[variant="vertical"]{ --slds-c-tabs-vertical-sizing-border:var(--slds-g-sizing-border-1); --slds-c-tabs-vertical-color-border:var(--slds-s-navigation-color-border); --slds-c-tabs-vertical-radius-border:var(--slds-g-radius-border-2); --slds-c-tabs-vertical-nav-sizing-inline:var(--slds-g-sizing-14); --slds-c-tabs-vertical-nav-color-background:var(--slds-s-navigation-color-background); --slds-c-tabs-vertical-item-color-background:transparent; --slds-c-tabs-vertical-item-color-background-active:var(--slds-s-navigation-color-background-active); --slds-c-tabs-vertical-link-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-vertical-link-spacing-inline:var(--slds-g-spacing-3); --slds-c-tabs-vertical-link-color-background:transparent; --slds-c-tabs-vertical-link-color-background-hover:var(--slds-s-navigation-color-background-hover); --slds-c-tabs-vertical-content-color-background:var(--slds-s-navigation-color-background-active); --slds-c-tabs-vertical-content-spacing-block:var(--slds-g-spacing-3); --slds-c-tabs-vertical-content-spacing-inline:var(--slds-g-spacing-3); } lightning-tabset[variant="vertical"] .slds-vertical-tabs{ --slds-c-tabs-vertical-sizing-border:unset; --slds-c-tabs-vertical-color-border:unset; --slds-c-tabs-vertical-radius-border:unset; --slds-c-tabs-vertical-nav-sizing-inline:unset; --slds-c-tabs-vertical-nav-color-background:unset; --slds-c-tabs-vertical-item-color-background:unset; --slds-c-tabs-vertical-item-color-background-active:unset; --slds-c-tabs-vertical-link-spacing-block:unset; --slds-c-tabs-vertical-link-spacing-inline:unset; --slds-c-tabs-vertical-link-color-background:unset; --slds-c-tabs-vertical-link-color-background-hover:unset; --slds-c-tabs-vertical-content-color-background:unset; --slds-c-tabs-vertical-content-spacing-block:unset; --slds-c-tabs-vertical-content-spacing-inline:unset; } .slds-sub-tabs{ --slds-c-tabs-subtab-nav-color-background:var(--slds-g-color-surface-container-1); --slds-c-tabs-subtab-color-background-active:var(--slds-g-color-accent-light-1); --slds-c-tabs-subtab-color-foreground-active:var(--slds-g-color-on-surface-1); --slds-c-tabs-subtab-color-background-hover:var(--slds-g-color-accent-light-1); --slds-c-tabs-subtab-icon-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-tabs-subtab-shadow-focus-notification:var(--slds-g-shadow-insetinverse-focus-1); --slds-c-tabs-subtab-color-background-pinned-indicator:var(--slds-g-color-accent-2); --slds-c-tabs-subtab-sizing-pinned-indicator:3px; } .slds-sub-tabs__item.slds-has-success::before{ animation-duration:1s; animation-iteration-count:3; animation-timing-function:linear; animation-name:success-pulse; transition:background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } .slds-sub-tabs__item.slds-has-error::before{ animation-duration:1s; animation-iteration-count:3; animation-timing-function:linear; animation-name:error-pulse; transition:background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } .slds-sub-tabs__item.slds-has-warning::before{ animation-duration:1s; animation-iteration-count:3; animation-timing-function:linear; animation-name:warning-pulse; transition:background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } .slds-tabs_medium,.slds-tabs--medium{ --slds-c-tabs-item-font-size:var(--slds-g-font-scale-var-2); --slds-c-tabs-scoped-link-spacing-inline:var(--slds-g-spacing-var-inline-6); } .slds-tabs_large,.slds-tabs--large{ --slds-c-tabs-item-font-size:var(--slds-g-font-scale-var-3); --slds-c-tabs-scoped-link-spacing-inline:var(--slds-g-spacing-var-inline-6); } .slds-tabs-mobile{ --slds-c-tabs-mobile-panel-offset-block-start:var(--slds-g-spacing-3); --slds-c-tabs-mobile-panel-offset-inline:var(--slds-g-spacing-3); } .slds-nav-vertical{ --slds-c-verticalnavigation-color-foreground:var(--slds-s-navigation-color); --slds-c-verticalnavigation-color-foreground-hover:var(--slds-s-navigation-color-hover); --slds-c-verticalnavigation-color-foreground-active:var(--slds-s-navigation-color-active); --slds-c-verticalnavigation-color-background-hover:color-mix( in srgb, var(--slds-g-color-accent-1) 10%, transparent ); --slds-c-verticalnavigation-color-border-hover:var(--slds-g-color-accent-1); --slds-c-verticalnavigation-color-border-active:var(--slds-g-color-accent-1); --slds-c-verticalnavigation-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-verticalnavigation-spacing-block:var(--slds-g-spacing-2); --slds-c-verticalnavigation-spacing-inline:var(--slds-g-spacing-5); --slds-c-verticalnavigation-spacing-inline-start:var(--slds-g-spacing-6); --slds-c-verticalnavigation-sizing-border:var(--slds-g-sizing-border-2); --slds-c-verticalnavigation-font-size:var(--slds-g-font-size-base); --slds-c-verticalnavigation-font-weight:var(--slds-g-font-weight-4); --slds-c-verticalnavigation-title-font-size:var(--slds-g-font-size-base); --slds-c-verticalnavigation-title-font-weight:var(--slds-g-font-weight-7); --slds-c-verticalnavigation-title-spacing-block:var(--slds-g-spacing-2); --slds-c-verticalnavigation-title-spacing-inline:var(--slds-g-spacing-4); --slds-c-verticalnavigation-title-spacing-inline-start:var(--slds-g-spacing-5); --slds-c-verticalnavigation-title-margin-block-start:var(--slds-g-spacing-2); --slds-c-verticalnavigation-section-margin-block-start:var(--slds-g-spacing-2); --slds-c-verticalnavigation-overflow-color-foreground:var(--slds-s-navigation-color); --slds-c-verticalnavigation-overflow-link-color-foreground:var(--slds-s-link-color); --slds-c-verticalnavigation-overflow-link-color-foreground-hover:var(--slds-s-link-color-hover); } .slds-nav-vertical.slds-nav-vertical_compact,.slds-nav-vertical.slds-nav-vertical--compact{ --slds-c-verticalnavigation-title-spacing-block:var(--slds-g-spacing-1); --slds-c-verticalnavigation-title-spacing-inline:var(--slds-g-spacing-5); --slds-c-verticalnavigation-title-spacing-inline-start:var(--slds-g-spacing-5); --slds-c-verticalnavigation-spacing-block:var(--slds-g-spacing-1); --slds-c-verticalnavigation-spacing-inline:var(--slds-g-spacing-5); --slds-c-verticalnavigation-spacing-inline-start:var(--slds-g-spacing-5); } .slds-nav-vertical .slds-nav-vertical__action{ border-block-start:var(--slds-g-sizing-border-1) solid transparent; border-block-end:var(--slds-g-sizing-border-1) solid transparent; } .slds-nav-vertical .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action, .slds-nav-vertical .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action{ font-weight:var(--slds-s-navigation-font-weight); } .slds-nav-vertical.slds-nav-vertical_shade,.slds-nav-vertical.slds-nav-vertical--shade{ --slds-c-verticalnavigation-color-background-hover:var(--slds-g-color-surface-container-1); } .slds-nav-vertical.slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action,.slds-nav-vertical.slds-nav-vertical--shade .slds-is-active .slds-nav-vertical__action{ border-color:var(--slds-g-color-neutral-base-90); } .slds-nav-vertical.slds-nav-vertical_shade .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action,.slds-nav-vertical.slds-nav-vertical--shade .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action{ border-color:var(--slds-g-color-neutral-base-90); background-color:var(--slds-g-color-on-surface-inverse-1); } .slds-nav-vertical .slds-nav-vertical__action_overflow .slds-icon,.slds-nav-vertical .slds-nav-vertical__action--overflow .slds-icon{ --slds-c-icon-color-foreground:currentColor; } .slds-notify_alert,.slds-notify--alert{ --slds-c-alert-spacing-block:var(--slds-g-spacing-2); --slds-c-alert-spacing-inline:var(--slds-g-spacing-2); --slds-c-alert-spacing-inline-end:var(--slds-g-spacing-6); --slds-c-alert-color-foreground:var(--slds-g-color-on-info-1); --slds-c-alert-color-background:var(--slds-g-color-info-container-1); --slds-c-alert-link-sizing-border:var(--slds-g-sizing-border-1); --slds-c-alert-link-color-border:transparent; --slds-c-alert-link-radius-border:var(--slds-g-radius-border-2); --slds-c-alert-link-color-foreground-disabled:color-mix(in oklab, currentColor, transparent 90%); --slds-c-alert-close-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-alert-close-margin-inline-start:var(--slds-g-spacing-1); } lightning-alert,.slds-notify--alert{ --slds-c-alert-spacing-block:var(--slds-g-spacing-2); --slds-c-alert-spacing-inline:var(--slds-g-spacing-2); --slds-c-alert-spacing-inline-end:var(--slds-g-spacing-6); --slds-c-alert-color-foreground:var(--slds-g-color-on-info-1); --slds-c-alert-color-background:var(--slds-g-color-info-container-1); --slds-c-alert-link-sizing-border:var(--slds-g-sizing-border-1); --slds-c-alert-link-color-border:transparent; --slds-c-alert-link-radius-border:var(--slds-g-radius-border-2); --slds-c-alert-link-color-foreground-disabled:color-mix(in oklab, currentColor, transparent 90%); --slds-c-alert-close-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-alert-close-margin-inline-start:var(--slds-g-spacing-1); } lightning-alert .slds-notify_alert,lightning-alert .slds-notify--alert,.slds-notify--alert{ --slds-c-alert-spacing-block:unset; --slds-c-alert-spacing-inline:unset; --slds-c-alert-spacing-inline-end:unset; --slds-c-alert-color-foreground:unset; --slds-c-alert-color-background:unset; --slds-c-alert-link-sizing-border:unset; --slds-c-alert-link-color-border:unset; --slds-c-alert-link-radius-border:unset; --slds-c-alert-link-color-foreground-disabled:unset; --slds-c-alert-close-spacing-inline-end:unset; --slds-c-alert-close-margin-inline-start:unset; } .slds-notify_alert .slds-icon,.slds-notify--alert .slds-icon{ } .slds-notify_alert .slds-button_icon:hover,.slds-notify--alert .slds-button--icon:hover, .slds-notify_alert .slds-button_icon:focus-visible, .slds-notify--alert .slds-button--icon:focus-visible{ --slds-c-alert-close-color-foreground-hover:green; } lightning-alert .slds-button_icon:hover,lightning-alert .slds-button--icon:hover,.slds-notify--alert .slds-button--icon:hover, .slds-notify_alert .slds-button_icon:focus-visible, .slds-notify--alert .slds-button--icon:focus-visible, .slds-notify--alert .slds-button--icon:focus-visible{ --slds-c-alert-close-color-foreground-hover:green; } .slds-alert_warning,.slds-alert--warning{ --slds-c-alert-color-background:var(--slds-g-color-warning-container-1); --slds-c-alert-color-foreground:var(--slds-g-color-on-warning-1); } lightning-alert[variant="warning"],.slds-alert--warning{ --slds-c-alert-color-background:var(--slds-g-color-warning-container-1); --slds-c-alert-color-foreground:var(--slds-g-color-on-warning-1); } lightning-alert[variant="warning"] .slds-alert_warning,lightning-alert[variant="warning"] .slds-alert--warning,.slds-alert--warning{ --slds-c-alert-color-background:unset; --slds-c-alert-color-foreground:unset; } .slds-alert_error,.slds-alert--error{ --slds-c-alert-color-background:var(--slds-g-color-error-container-1); --slds-c-alert-color-foreground:var(--slds-g-color-on-error-1); } lightning-alert[variant="error"],.slds-alert--error{ --slds-c-alert-color-background:var(--slds-g-color-error-container-1); --slds-c-alert-color-foreground:var(--slds-g-color-on-error-1); } lightning-alert[variant="error"] .slds-alert_error,lightning-alert[variant="error"] .slds-alert--error,.slds-alert--error{ --slds-c-alert-color-background:unset; --slds-c-alert-color-foreground:unset; } .slds-alert_offline,.slds-alert--offline{ --slds-c-alert-color-background:var(--slds-g-color-neutral-base-50); --slds-c-alert-color-foreground:var(--slds-g-color-neutral-base-100); } lightning-alert[variant="offline"],.slds-alert--offline{ --slds-c-alert-color-background:var(--slds-g-color-neutral-base-50); --slds-c-alert-color-foreground:var(--slds-g-color-neutral-base-100); } lightning-alert[variant="offline"] .slds-alert_offline,lightning-alert[variant="offline"] .slds-alert--offline,.slds-alert--offline{ --slds-c-alert-color-background:unset; --slds-c-alert-color-foreground:unset; } .slds-modal_prompt,.slds-modal--prompt{ --slds-c-modal-header-font-align:var(--slds-s-container-heading-font-align); --slds-c-modal-header-font-size:var(--slds-s-container-heading-font-size); --slds-c-modal-header-font-weight:var(--slds-s-container-heading-font-weight); --slds-c-modal-header-sizing-border:0; --slds-c-modal-content-spacing-inline:var(--slds-g-spacing-6); --slds-c-modal-content-spacing-block:var(--slds-g-spacing-4); --slds-c-modal-footer-font-align:var(--slds-s-container-footer-font-align); --slds-c-modal-footer-sizing-border:var(--slds-s-container-footer-sizing-border); } .slds-notify_toast,.slds-notify--toast{ --slds-c-toast-color-background:var(--slds-g-color-info-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-info-1); --slds-c-toast-radius-border:var(--slds-g-radius-border-2); --slds-c-toast-shadow:var(--slds-g-shadow-3); --slds-c-toast-spacing-margin:var(--slds-g-spacing-2); --slds-c-toast-spacing-block:var(--slds-g-spacing-3); --slds-c-toast-spacing-inline-start:var(--slds-g-spacing-5); --slds-c-toast-spacing-inline-end:var(--slds-g-spacing-8); --slds-c-toast-sizing-min-width:var(--slds-g-sizing-16); --slds-c-toast-sizing-max-width:50%; --slds-c-toast-content-font-weight:var(--slds-g-font-weight-6); --slds-c-toast-link-radius-border:var(--slds-g-radius-border-1); --slds-c-toast-close-spacing-block-start:var(--slds-g-spacing-3); --slds-c-toast-close-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-toast-close-spacing-inline-start:var(--slds-g-spacing-1); --slds-c-toast-close-color-foreground-hover:color-mix(in oklab, currentColor, transparent 25%); } lightning-toast,.slds-notify--toast{ --slds-c-toast-color-background:var(--slds-g-color-info-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-info-1); --slds-c-toast-radius-border:var(--slds-g-radius-border-2); --slds-c-toast-shadow:var(--slds-g-shadow-3); --slds-c-toast-spacing-margin:var(--slds-g-spacing-2); --slds-c-toast-spacing-block:var(--slds-g-spacing-3); --slds-c-toast-spacing-inline-start:var(--slds-g-spacing-5); --slds-c-toast-spacing-inline-end:var(--slds-g-spacing-8); --slds-c-toast-sizing-min-width:var(--slds-g-sizing-16); --slds-c-toast-sizing-max-width:50%; --slds-c-toast-content-font-weight:var(--slds-g-font-weight-6); --slds-c-toast-link-radius-border:var(--slds-g-radius-border-1); --slds-c-toast-close-spacing-block-start:var(--slds-g-spacing-3); --slds-c-toast-close-spacing-inline-end:var(--slds-g-spacing-3); --slds-c-toast-close-spacing-inline-start:var(--slds-g-spacing-1); --slds-c-toast-close-color-foreground-hover:color-mix(in oklab, currentColor, transparent 25%); } lightning-toast .slds-notify_toast,lightning-toast .slds-notify--toast,.slds-notify--toast{ --slds-c-toast-color-background:unset; --slds-c-toast-color-foreground:unset; --slds-c-toast-radius-border:unset; --slds-c-toast-shadow:unset; --slds-c-toast-spacing-margin:unset; --slds-c-toast-spacing-block:unset; --slds-c-toast-spacing-inline-start:unset; --slds-c-toast-spacing-inline-end:unset; --slds-c-toast-sizing-min-width:unset; --slds-c-toast-sizing-max-width:unset; --slds-c-toast-content-font-weight:unset; --slds-c-toast-link-radius-border:unset; --slds-c-toast-close-spacing-block-start:unset; --slds-c-toast-close-spacing-inline-end:unset; --slds-c-toast-close-spacing-inline-start:unset; --slds-c-toast-close-color-foreground-hover:unset; } .slds-notify_toast.slds-theme_info,.slds-notify--toast.slds-theme--info{ --slds-c-toast-color-background:var(--slds-g-color-info-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-info-1); } lightning-toast.slds-theme_info,lightning-toast.slds-theme--info,.slds-notify--toast.slds-theme--info{ --slds-c-toast-color-background:var(--slds-g-color-info-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-info-1); } lightning-toast .slds-notify_toast.slds-theme_info,lightning-toast .slds-notify--toast.slds-theme--info,.slds-notify--toast.slds-theme--info{ --slds-c-toast-color-background:unset; --slds-c-toast-color-foreground:unset; } .slds-notify_toast.slds-theme_success,.slds-notify--toast.slds-theme--success{ --slds-c-toast-color-background:var(--slds-g-color-success-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-success-1); } lightning-toast.slds-theme_success,lightning-toast.slds-theme--success,.slds-notify--toast.slds-theme--success{ --slds-c-toast-color-background:var(--slds-g-color-success-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-success-1); } lightning-toast .slds-notify_toast.slds-theme_success,lightning-toast .slds-notify--toast.slds-theme--success,.slds-notify--toast.slds-theme--success{ --slds-c-toast-color-background:unset; --slds-c-toast-color-foreground:unset; } .slds-notify_toast.slds-theme_error,.slds-notify--toast.slds-theme--error{ --slds-c-toast-color-background:var(--slds-g-color-error-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-error-1); } lightning-toast.slds-theme_error,lightning-toast.slds-theme--error,.slds-notify--toast.slds-theme--error{ --slds-c-toast-color-background:var(--slds-g-color-error-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-error-1); } lightning-toast .slds-notify_toast.slds-theme_error,lightning-toast .slds-notify--toast.slds-theme--error,.slds-notify--toast.slds-theme--error{ --slds-c-toast-color-background:unset; --slds-c-toast-color-foreground:unset; } .slds-notify_toast.slds-theme_warning,.slds-notify--toast.slds-theme--warning{ --slds-c-toast-color-background:var(--slds-g-color-warning-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-warning-1); } lightning-toast.slds-theme_warning,lightning-toast.slds-theme--warning,.slds-notify--toast.slds-theme--warning{ --slds-c-toast-color-background:var(--slds-g-color-warning-container-1); --slds-c-toast-color-foreground:var(--slds-g-color-on-warning-1); } lightning-toast .slds-notify_toast.slds-theme_warning,lightning-toast .slds-notify--toast.slds-theme--warning,.slds-notify--toast.slds-theme--warning{ --slds-c-toast-color-background:unset; --slds-c-toast-color-foreground:unset; } .slds-avatar{ --slds-c-avatar-size:var(--slds-g-sizing-9); --slds-c-avatar-radius-border:var(--slds-g-radius-border-circle); --slds-c-avatar-font-size:var(--slds-g-font-scale-1); --slds-c-avatar-font-line-height:var(--slds-g-font-lineheight-1); --slds-c-avatar-color-background:var(--slds-g-color-accent-container-1); --slds-c-avatar-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-avatar-initials-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-avatar-initials-color-background:var(--slds-g-color-accent-container-1); } lightning-avatar{ --slds-c-avatar-size:var(--slds-g-sizing-9); --slds-c-avatar-radius-border:var(--slds-g-radius-border-circle); --slds-c-avatar-font-size:var(--slds-g-font-scale-1); --slds-c-avatar-font-line-height:var(--slds-g-font-lineheight-1); --slds-c-avatar-color-background:var(--slds-g-color-accent-container-1); --slds-c-avatar-shadow-focus:var(--slds-g-shadow-outset-focus-1); --slds-c-avatar-initials-color-foreground:var(--slds-g-color-on-accent-1); --slds-c-avatar-initials-color-background:var(--slds-g-color-accent-container-1); } lightning-avatar .slds-avatar{ --slds-c-avatar-size:unset; --slds-c-avatar-radius-border:unset; --slds-c-avatar-font-size:unset; --slds-c-avatar-font-line-height:unset; --slds-c-avatar-color-background:unset; --slds-c-avatar-shadow-focus:unset; --slds-c-avatar-initials-color-foreground:unset; --slds-c-avatar-initials-color-background:unset; } .slds-avatar.slds-avatar_circle,.slds-avatar.slds-avatar--circle{ --slds-c-avatar-radius-border:var(--slds-g-radius-border-circle); } lightning-avatar.slds-avatar_circle,lightning-avatar.slds-avatar--circle,.slds-avatar.slds-avatar--circle{ --slds-c-avatar-radius-border:var(--slds-g-radius-border-circle); } lightning-avatar .slds-avatar.slds-avatar_circle,lightning-avatar .slds-avatar.slds-avatar--circle,.slds-avatar.slds-avatar--circle{ --slds-c-avatar-radius-border:unset; } .slds-avatar.slds-avatar_empty,.slds-avatar.slds-avatar--empty{ --slds-c-avatar-sizing-border:var(--slds-g-sizing-border-1); --slds-c-avatar-color-border:var(--slds-g-color-border-1); border-style:dashed; } .slds-avatar.slds-avatar_x-small,.slds-avatar.slds-avatar--x-small{ --slds-c-avatar-size:var(--slds-g-sizing-6); --slds-c-avatar-font-size:var(--slds-g-font-scale-neg-2); } lightning-avatar.slds-avatar_x-small,lightning-avatar.slds-avatar--x-small,.slds-avatar.slds-avatar--x-small{ --slds-c-avatar-size:var(--slds-g-sizing-6); --slds-c-avatar-font-size:var(--slds-g-font-scale-neg-2); } lightning-avatar .slds-avatar.slds-avatar_x-small,lightning-avatar .slds-avatar.slds-avatar--x-small,.slds-avatar.slds-avatar--x-small{ --slds-c-avatar-size:unset; --slds-c-avatar-font-size:unset; } .slds-avatar.slds-avatar_small,.slds-avatar.slds-avatar--small{ --slds-c-avatar-size:var(--slds-g-sizing-7); --slds-c-avatar-font-size:var(--slds-g-font-scale-neg-2); } lightning-avatar.slds-avatar_small,lightning-avatar.slds-avatar--small,.slds-avatar.slds-avatar--small{ --slds-c-avatar-size:var(--slds-g-sizing-7); --slds-c-avatar-font-size:var(--slds-g-font-scale-neg-2); } lightning-avatar .slds-avatar.slds-avatar_small,lightning-avatar .slds-avatar.slds-avatar--small,.slds-avatar.slds-avatar--small{ --slds-c-avatar-size:unset; --slds-c-avatar-font-size:unset; } .slds-avatar.slds-avatar_large,.slds-avatar.slds-avatar--large{ --slds-c-avatar-size:var(--slds-g-sizing-10); --slds-c-avatar-font-size:var(--slds-g-font-scale-3); --slds-c-avatar-font-line-height:var(--slds-g-font-lineheight-2); } lightning-avatar.slds-avatar_large,lightning-avatar.slds-avatar--large,.slds-avatar.slds-avatar--large{ --slds-c-avatar-size:var(--slds-g-sizing-10); --slds-c-avatar-font-size:var(--slds-g-font-scale-3); --slds-c-avatar-font-line-height:var(--slds-g-font-lineheight-2); } lightning-avatar .slds-avatar.slds-avatar_large,lightning-avatar .slds-avatar.slds-avatar--large,.slds-avatar.slds-avatar--large{ --slds-c-avatar-size:unset; --slds-c-avatar-font-size:unset; --slds-c-avatar-font-line-height:unset; } .slds-avatar.slds-avatar_profile-image-small,.slds-avatar.slds-avatar--profile-image-small{ --slds-c-avatar-image:url('../../../public/profile_avatar_96.png'); } lightning-avatar.slds-avatar_profile-image-small,lightning-avatar.slds-avatar--profile-image-small,.slds-avatar.slds-avatar--profile-image-small{ --slds-c-avatar-image:url('../../../public/profile_avatar_96.png'); } lightning-avatar .slds-avatar.slds-avatar_profile-image-small,lightning-avatar .slds-avatar.slds-avatar--profile-image-small,.slds-avatar.slds-avatar--profile-image-small{ --slds-c-avatar-image:unset; } .slds-avatar.slds-avatar_profile-image-medium,.slds-avatar.slds-avatar--profile-image-medium{ --slds-c-avatar-image:url('../../../public/profile_avatar_160.png'); } lightning-avatar.slds-avatar_profile-image-medium,lightning-avatar.slds-avatar--profile-image-medium,.slds-avatar.slds-avatar--profile-image-medium{ --slds-c-avatar-image:url('../../../public/profile_avatar_160.png'); } lightning-avatar .slds-avatar.slds-avatar_profile-image-medium,lightning-avatar .slds-avatar.slds-avatar--profile-image-medium,.slds-avatar.slds-avatar--profile-image-medium{ --slds-c-avatar-image:unset; } .slds-avatar.slds-avatar_profile-image-large,.slds-avatar.slds-avatar--profile-image-large{ --slds-c-avatar-image:url('../../../public/profile_avatar_200.png'); } lightning-avatar.slds-avatar_profile-image-large,lightning-avatar.slds-avatar--profile-image-large,.slds-avatar.slds-avatar--profile-image-large{ --slds-c-avatar-image:url('../../../public/profile_avatar_200.png'); } lightning-avatar .slds-avatar.slds-avatar_profile-image-large,lightning-avatar .slds-avatar.slds-avatar--profile-image-large,.slds-avatar.slds-avatar--profile-image-large{ --slds-c-avatar-image:unset; } .slds-avatar.slds-avatar_group-image-small,.slds-avatar.slds-avatar--group-image-small{ --slds-c-avatar-image:url('../../../public/group_avatar_96.png'); } lightning-avatar.slds-avatar_group-image-small,lightning-avatar.slds-avatar--group-image-small,.slds-avatar.slds-avatar--group-image-small{ --slds-c-avatar-image:url('../../../public/group_avatar_96.png'); } lightning-avatar .slds-avatar.slds-avatar_group-image-small,lightning-avatar .slds-avatar.slds-avatar--group-image-small,.slds-avatar.slds-avatar--group-image-small{ --slds-c-avatar-image:unset; } .slds-avatar.slds-avatar_group-image-medium,.slds-avatar.slds-avatar--group-image-medium{ --slds-c-avatar-image:url('../../../public/group_avatar_160.png'); } lightning-avatar.slds-avatar_group-image-medium,lightning-avatar.slds-avatar--group-image-medium,.slds-avatar.slds-avatar--group-image-medium{ --slds-c-avatar-image:url('../../../public/group_avatar_160.png'); } lightning-avatar .slds-avatar.slds-avatar_group-image-medium,lightning-avatar .slds-avatar.slds-avatar--group-image-medium,.slds-avatar.slds-avatar--group-image-medium{ --slds-c-avatar-image:unset; } .slds-avatar.slds-avatar_group-image-large,.slds-avatar.slds-avatar--group-image-large{ --slds-c-avatar-image:url('../../../public/group_avatar_200.png'); } lightning-avatar.slds-avatar_group-image-large,lightning-avatar.slds-avatar--group-image-large,.slds-avatar.slds-avatar--group-image-large{ --slds-c-avatar-image:url('../../../public/group_avatar_200.png'); } lightning-avatar .slds-avatar.slds-avatar_group-image-large,lightning-avatar .slds-avatar.slds-avatar--group-image-large,.slds-avatar.slds-avatar--group-image-large{ --slds-c-avatar-image:unset; } .slds-avatar .slds-avatar__initials{ text-shadow:0 0 1px rgb(0 0 0 / 80%); } .slds-avatar .slds-avatar__initials_inverse,.slds-avatar .slds-avatar__initials--inverse{ --slds-c-avatar-initials-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-avatar-initials-color-background:var(--slds-g-color-surface-container-2); text-shadow:none; } .slds-avatar-group{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-9); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-primary-initials-transform:scale(0.5); --slds-c-avatargroup-secondary-initials-transform:scale(0.4); } lightning-avatar-group{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-9); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-primary-initials-transform:scale(0.5); --slds-c-avatargroup-secondary-initials-transform:scale(0.4); } lightning-avatar-group .slds-avatar-group{ --slds-c-avatargroup-sizing:unset; --slds-c-avatargroup-primary-sizing:unset; --slds-c-avatargroup-secondary-sizing:unset; --slds-c-avatargroup-primary-initials-transform:unset; --slds-c-avatargroup-secondary-initials-transform:unset; } .slds-avatar-grouped{ --slds-c-avatargroup-grouped-sizing-border:var(--slds-g-sizing-border-1); --slds-c-avatargroup-grouped-color-border:var(--slds-g-color-on-accent-1); --slds-c-avatargroup-grouped-radius-border:var(--slds-g-radius-border-circle); --slds-c-avatargroup-grouped-color-background:var(--slds-g-color-accent-container-1); } lightning-avatar-grouped{ --slds-c-avatargroup-grouped-sizing-border:var(--slds-g-sizing-border-1); --slds-c-avatargroup-grouped-color-border:var(--slds-g-color-on-accent-1); --slds-c-avatargroup-grouped-radius-border:var(--slds-g-radius-border-circle); --slds-c-avatargroup-grouped-color-background:var(--slds-g-color-accent-container-1); } lightning-avatar-group .slds-avatar-grouped{ --slds-c-avatargroup-grouped-sizing-border:unset; --slds-c-avatargroup-grouped-color-border:unset; --slds-c-avatargroup-grouped-radius-border:unset; --slds-c-avatargroup-grouped-color-background:unset; } .slds-avatar-grouped_inverse,.slds-avatar-grouped--inverse{ --slds-c-avatargroup-grouped-color-background:var(--slds-g-color-surface-container-2); } lightning-avatar-grouped_inverse,lightning-avatar-grouped--inverse,.slds-avatar-grouped--inverse{ --slds-c-avatargroup-grouped-color-background:var(--slds-g-color-surface-container-2); } lightning-avatar-group .slds-avatar-grouped_inverse,lightning-avatar-group .slds-avatar-grouped--inverse,.slds-avatar-grouped--inverse{ --slds-c-avatargroup-grouped-color-background:unset; } .slds-avatar-group_x-small,.slds-avatar-group--x-small{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-5); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-4); --slds-c-avatargroup-primary-initials-transform:scale(0.3); --slds-c-avatargroup-secondary-initials-transform:scale(0.18); } lightning-avatar-group_x-small,lightning-avatar-group--x-small,.slds-avatar-group--x-small{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-5); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-4); --slds-c-avatargroup-primary-initials-transform:scale(0.3); --slds-c-avatargroup-secondary-initials-transform:scale(0.18); } lightning-avatar-group .slds-avatar-group_x-small,lightning-avatar-group .slds-avatar-group--x-small,.slds-avatar-group--x-small{ --slds-c-avatargroup-sizing:unset; --slds-c-avatargroup-primary-sizing:unset; --slds-c-avatargroup-secondary-sizing:unset; --slds-c-avatargroup-primary-initials-transform:unset; --slds-c-avatargroup-secondary-initials-transform:unset; } .slds-avatar-group_small,.slds-avatar-group--small{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-5); --slds-c-avatargroup-primary-initials-transform:scale(0.4); --slds-c-avatargroup-secondary-initials-transform:scale(0.3); } lightning-avatar-group_small,lightning-avatar-group--small,.slds-avatar-group--small{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-primary-sizing:var(--slds-g-sizing-6); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-5); --slds-c-avatargroup-primary-initials-transform:scale(0.4); --slds-c-avatargroup-secondary-initials-transform:scale(0.3); } lightning-avatar-group .slds-avatar-group_small,lightning-avatar-group .slds-avatar-group--small,.slds-avatar-group--small{ --slds-c-avatargroup-sizing:unset; --slds-c-avatargroup-primary-sizing:unset; --slds-c-avatargroup-secondary-sizing:unset; --slds-c-avatargroup-primary-initials-transform:unset; --slds-c-avatargroup-secondary-initials-transform:unset; } .slds-avatar-group_large,.slds-avatar-group--large{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-10); --slds-c-avatargroup-primary-sizing:calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-primary-initials-transform:scale(0.8); --slds-c-avatargroup-secondary-initials-transform:scale(0.5); } lightning-avatar-group_large,lightning-avatar-group--large,.slds-avatar-group--large{ --slds-c-avatargroup-sizing:var(--slds-g-sizing-10); --slds-c-avatargroup-primary-sizing:calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3)); --slds-c-avatargroup-secondary-sizing:var(--slds-g-sizing-7); --slds-c-avatargroup-primary-initials-transform:scale(0.8); --slds-c-avatargroup-secondary-initials-transform:scale(0.5); } lightning-avatar-group .slds-avatar-group_large,lightning-avatar-group .slds-avatar-group--large,.slds-avatar-group--large{ --slds-c-avatargroup-sizing:unset; --slds-c-avatargroup-primary-sizing:unset; --slds-c-avatargroup-secondary-sizing:unset; --slds-c-avatargroup-primary-initials-transform:unset; --slds-c-avatargroup-secondary-initials-transform:unset; } .slds-tree-container, .slds-tree_container, .slds-tree--container{ --slds-c-tree-sizing-min-width:calc(var(--slds-g-sizing-base) * 7.5); --slds-c-tree-sizing-max-width:25rem; --slds-c-tree-heading-spacing-block-end:var(--slds-g-spacing-2); --slds-c-tree-group-header-font-size:var(--slds-g-font-size-base); --slds-c-tree-group-header-font-weight:var(--slds-g-font-weight-6); } .slds-tree{ --slds-c-tree-item-pill-spacing-inline-start:var(--slds-g-spacing-3); --slds-c-tree-item-spacing-block:calc(var(--slds-g-spacing-1) + 2px); --slds-c-tree-item-spacing-inline-start:var(--slds-g-spacing-4); --slds-c-tree-item-spacing-indent:var(--slds-g-spacing-4); --slds-c-tree-item-color-background:transparent; --slds-c-tree-item-color-background-hover:var(--slds-s-table-row-color-background-selected); --slds-c-tree-item-color-background-focus:var(--slds-g-color-surface-container-2); --slds-c-tree-item-color-border:transparent; --slds-c-tree-item-shadow-focus:var(--slds-g-shadow-inset-focus-1); --slds-c-tree-color-foreground-disabled:var(--slds-g-color-disabled-1); --slds-c-tree-item-label-color-foreground:var(--slds-g-color-on-surface-2); --slds-c-tree-item-label-color-foreground-disabled:var(--slds-g-color-on-surface-2); --slds-c-tree-item-meta-color-foreground:var(--slds-g-color-on-surface-1); --slds-c-tree-item-meta-color-foreground-disabled:var(--slds-g-color-disabled-1); } .slds-tree [role='treeitem'][aria-selected='true']{ --slds-c-tree-item-color-background:var(--slds-g-color-brand-base-90); --slds-c-tree-item-color-border:var(--slds-g-color-accent-1); } } @layer deprecated{ :where(html){ --_slds-is-v2-enabled:true; --lwc-brandPrimary:var(--slds-g-color-brand-base-60) !important; --lwc-brandPrimaryActive:var(--slds-g-color-brand-base-50) !important; --lwc-brandAccessible:var(--slds-g-color-brand-base-50) !important; --lwc-brandAccessibleActive:var(--slds-g-color-brand-base-40) !important; --lwc-brandContrast:var(--slds-g-color-brand-base-100) !important; --lwc-brandContrastActive:var(--slds-g-color-brand-base-100) !important; --lwc-brandLight:var(--slds-g-color-brand-base-95) !important; --lwc-brandLightActive:var(--slds-g-color-brand-base-90) !important; --lwc-brandDark:var(--slds-g-color-brand-base-20) !important; --lwc-brandDarkActive:var(--slds-g-color-brand-base-10) !important; --lwc-brandTextLink:var(--slds-g-color-brand-base-50) !important; --lwc-brandTextLinkActive:var(--slds-g-color-brand-base-40) !important; } :where(html){ --_slds-c-popover-feature-color-background:var(--slds-g-color-accent-container-2); --_slds-c-popover-feature-color-border:var(--slds-g-color-accent-container-2); --_slds-c-popover-box-shadow:var(--slds-g-shadow-4); --_slds-c-popover-close-btn-color:var(--slds-g-color-accent-2); --_slds-c-popover-top-nubbin-shadow:-2px -2px 3px 0px light-dark(#0000001f, #0000003d); --_slds-c-popover-bottom-nubbin-shadow:2px 2px 2px 0 light-dark(#0000001f, #0000003d); --_slds-c-popover-left-nubbin-shadow:-2px 3px 3px 0px light-dark(#0000001f, #0000003d); --_slds-c-popover-right-nubbin-shadow:2px -2px 2px 0 light-dark(#0000001f, #0000003d); --_slds-c-path-item-color-background-active:var(--slds-g-color-surface-container-inverse-1); --_slds-c-path-item-color-background-active-hover:var(--slds-g-color-surface-container-inverse-1); --_slds-c-path-item-color-background-incomplete:var(--slds-g-color-surface-container-3); --_slds-c-path-item-color-incomplete:var(--slds-g-color-on-surface-2); --_slds-c-path-item-color-background-incomplete-hover:var(--slds-g-color-neutral-base-70); --_slds-c-path-item-color-background-complete:var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-complete-hover:var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-success:var(--slds-g-color-success-container-1); --_slds-c-path-item-color-background-error:var(--slds-g-color-error-container-1); --_slds-c-path-item-sizing-border:0.0625rem; --_slds-c-path-item-sizing-height:1.875rem; --_slds-c-globalnavigation-sizing-border:0; --_slds-c-globalnavigation-spacing-block:var(--slds-g-spacing-1); --_slds-c-globalnavigation-spacing-gap:var(--slds-g-spacing-1); --_slds-c-globalnavigation-item-sizing-width-max:var(--slds-g-sizing-15); --_slds-c-globalnavigation-item-sizing-border:0; --_slds-c-globalnavigation-item-radius-border:var(--slds-g-radius-border-3); --_slds-c-globalnavigation-item-sizing-border-hover:3px; --_slds-c-globalnavigation-item-sizing-border-active:0; --_slds-c-globalnavigation-item-color-background-hover:transparent; --_slds-c-globalnavigation-item-color-background-active:transparent; --_slds-c-globalnavigation-item-color-border-success:var(--slds-g-color-on-success-1); --_slds-c-globalnavigation-item-color-border-error:var(--slds-g-color-on-error-1); --_slds-c-globalnavigation-item-color-border-warning:var(--slds-g-color-on-warning-1); --_slds-c-globalnavigation-item-color-border-hover:var(--slds-g-color-brand-base-15); --_slds-c-globalnavigation-item-color-border-active:var(--slds-g-color-accent-2); --_slds-c-globalnavigation-item-shadow-focus:0 0 0 2px var(--slds-g-color-brand-base-15) inset; --_slds-c-globalnavigation-font-decoration-focus:none; --_slds-c-globalnavigation-font-weight:500; --_slds-c-globalnavigation-app-font-weight:var(--slds-g-font-weight-4); --_slds-c-globalnavigation-item-color-active:var(--slds-g-color-accent-2); --_slds-c-globalnavigation-subtab-color-background-active:var(--slds-g-color-brand-base-90); --_slds-c-globalnavigation-subtab-color-background-hover:var(--slds-g-color-surface-container-2); --_slds-c-globalheader-color-background:#ffffff; --_slds-c-globalheader-color:#5c5c5c; --_slds-c-globalheader-color-hover:#444444; --_slds-c-utilitybar-sizing-border-hover:3px; --_slds-c-utilitybar-sizing-border-active:3px; --_slds-c-utilitybar-color-border-hover:var(--slds-g-color-brand-base-15); --_slds-c-utilitybar-color-border-active:var(--slds-g-color-accent-2); --_slds-c-utilitybar-color-background-hover:var(--slds-g-color-surface-1); --_slds-c-utilitybar-color-background-active:var(--slds-g-color-surface-1); --_slds-c-utilitybar-color:var(--slds-g-color-on-surface-1); --_slds-c-utilitybar-color-hover:var(--slds-g-color-brand-base-15); --_slds-c-utilitybar-color-active:var(--slds-g-color-accent-2); --_slds-c-utilitybar-font-weight:var(--slds-g-font-weight-6); --_slds-c-datatable-color-background-error:var(--slds-g-color-error-container-1); --_slds-c-datatable-color-background-edit:var(--slds-g-color-palette-yellow-95); --_slds-c-datatable-row-color-border-hover:var(--slds-g-color-border-2); --_slds-c-datatable-row-shadow-hover:none; --_slds-c-datatable-color-border:var(--slds-g-color-border-1); --_slds-c-datatable-radius-border:calc(var(--slds-g-sizing-border-4) * 2); --_slds-c-card-radius-border:var(--slds-g-radius-border-3); --slds-c-button-destructive-color-background:var(--slds-g-color-error-base-50); --slds-c-button-destructive-color-border:var(--slds-g-color-error-base-50); --slds-c-button-destructive-color:light-dark(#fff, #fff); --slds-c-button-destructive-color-background-hover:light-dark( var(--slds-r-color-error-40), var(--slds-r-color-error-90) ); --slds-c-button-destructive-color-border-hover:light-dark( var(--slds-r-color-error-40), var(--slds-r-color-error-90) ); --slds-c-button-destructive-color-hover:light-dark(#fff, var(--slds-r-color-error-40)); --slds-c-button-success-color-background:var(--slds-g-color-success-base-50); --slds-c-button-success-color-border:var(--slds-g-color-success-base-50); --slds-c-button-success-color:light-dark(#fff, #fff); --slds-c-button-success-color-background-hover:light-dark( var(--slds-r-color-success-40), var(--slds-r-color-success-90) ); --slds-c-button-success-color-border-hover:light-dark( var(--slds-r-color-success-40), var(--slds-r-color-success-90) ); --slds-c-button-success-color-hover:light-dark(#fff, var(--slds-r-color-success-40)); --slds-c-button-success-shadow-hover:0 2px 0 0 light-dark(var(--slds-r-color-success-20), var(--slds-r-color-success-40)); --slds-c-button-destructive-shadow-hover:0 2px 0 0 light-dark(var(--slds-r-color-error-20), var(--slds-r-color-error-40)); --slds-c-button-inverse-shadow-hover:0 2px 0 0 light-dark(#2e2e2e, #5c5c5c); --slds-c-button-font-weight:var(--slds-g-font-weight-6); --_slds-c-buttonicon-brand-color-background-active:var(--slds-g-color-accent-container-2); --_slds-c-buttonicon-brand-sizing-border-active:0; --_slds-c-buttonicon-bare-radius-focus:var(--slds-g-radius-border-1); --_slds-c-brandband-scrim-sizing-height:3.125rem; --_slds-c-brandband-sizing-height-small:6rem; --_slds-c-brandband-sizing-height-medium:12.5rem; --_slds-c-brandband-sizing-height-large:18.75rem; } }