/* fraunces-vietnamese-opsz-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-vietnamese-opsz-normal.5579b3a6.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* fraunces-latin-ext-opsz-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-latin-ext-opsz-normal.b16a2528.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* fraunces-latin-opsz-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-latin-opsz-normal.252d721d.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* fraunces-vietnamese-opsz-italic */
@font-face {
font-family: 'Fraunces Variable';
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-vietnamese-opsz-italic.d58f50e8.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* fraunces-latin-ext-opsz-italic */
@font-face {
font-family: 'Fraunces Variable';
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-latin-ext-opsz-italic.106debbb.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* fraunces-latin-opsz-italic */
@font-face {
font-family: 'Fraunces Variable';
font-style: italic;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/fraunces-latin-opsz-italic.52edf8fc.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* archivo-vietnamese-wght-normal */
@font-face {
font-family: 'Archivo Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/archivo-vietnamese-wght-normal.b2ae2ca2.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* archivo-latin-ext-wght-normal */
@font-face {
font-family: 'Archivo Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/archivo-latin-ext-wght-normal.784ec3dc.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* archivo-latin-wght-normal */
@font-face {
font-family: 'Archivo Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/dist/assets/archivo-latin-wght-normal.577248e7.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
@layer wa-base {
/**
Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
IE: \`\` anchors.
*/
wa-page :is(*, *:after, *:before) {
scroll-margin-top: var(--scroll-margin-top);
}
wa-page[view='desktop'] [data-toggle-nav] {
display: none;
}
wa-page[view='mobile'] .wa-desktop-only,
wa-page[view='desktop'] .wa-mobile-only {
display: none !important;
}
}
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
@layer wa-base {
/**
Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
IE: \`\` anchors.
*/
wa-page :is(*, *:after, *:before) {
scroll-margin-top: var(--scroll-margin-top);
}
wa-page[view='desktop'] [data-toggle-nav] {
display: none;
}
wa-page[view='mobile'] .wa-desktop-only,
wa-page[view='desktop'] .wa-mobile-only {
display: none !important;
}
}
@layer wa-color-variant {
:where(:root), /* default */
.wa-brand-blue {
--wa-color-brand-95: var(--wa-color-blue-95);
--wa-color-brand-90: var(--wa-color-blue-90);
--wa-color-brand-80: var(--wa-color-blue-80);
--wa-color-brand-70: var(--wa-color-blue-70);
--wa-color-brand-60: var(--wa-color-blue-60);
--wa-color-brand-50: var(--wa-color-blue-50);
--wa-color-brand-40: var(--wa-color-blue-40);
--wa-color-brand-30: var(--wa-color-blue-30);
--wa-color-brand-20: var(--wa-color-blue-20);
--wa-color-brand-10: var(--wa-color-blue-10);
--wa-color-brand-05: var(--wa-color-blue-05);
--wa-color-brand: var(--wa-color-blue);
--wa-color-brand-on: var(--wa-color-blue-on);
}
.wa-brand-red {
--wa-color-brand-95: var(--wa-color-red-95);
--wa-color-brand-90: var(--wa-color-red-90);
--wa-color-brand-80: var(--wa-color-red-80);
--wa-color-brand-70: var(--wa-color-red-70);
--wa-color-brand-60: var(--wa-color-red-60);
--wa-color-brand-50: var(--wa-color-red-50);
--wa-color-brand-40: var(--wa-color-red-40);
--wa-color-brand-30: var(--wa-color-red-30);
--wa-color-brand-20: var(--wa-color-red-20);
--wa-color-brand-10: var(--wa-color-red-10);
--wa-color-brand-05: var(--wa-color-red-05);
--wa-color-brand: var(--wa-color-red);
--wa-color-brand-on: var(--wa-color-red-on);
}
.wa-brand-orange {
--wa-color-brand-95: var(--wa-color-orange-95);
--wa-color-brand-90: var(--wa-color-orange-90);
--wa-color-brand-80: var(--wa-color-orange-80);
--wa-color-brand-70: var(--wa-color-orange-70);
--wa-color-brand-60: var(--wa-color-orange-60);
--wa-color-brand-50: var(--wa-color-orange-50);
--wa-color-brand-40: var(--wa-color-orange-40);
--wa-color-brand-30: var(--wa-color-orange-30);
--wa-color-brand-20: var(--wa-color-orange-20);
--wa-color-brand-10: var(--wa-color-orange-10);
--wa-color-brand-05: var(--wa-color-orange-05);
--wa-color-brand: var(--wa-color-orange);
--wa-color-brand-on: var(--wa-color-orange-on);
}
.wa-brand-yellow {
--wa-color-brand-95: var(--wa-color-yellow-95);
--wa-color-brand-90: var(--wa-color-yellow-90);
--wa-color-brand-80: var(--wa-color-yellow-80);
--wa-color-brand-70: var(--wa-color-yellow-70);
--wa-color-brand-60: var(--wa-color-yellow-60);
--wa-color-brand-50: var(--wa-color-yellow-50);
--wa-color-brand-40: var(--wa-color-yellow-40);
--wa-color-brand-30: var(--wa-color-yellow-30);
--wa-color-brand-20: var(--wa-color-yellow-20);
--wa-color-brand-10: var(--wa-color-yellow-10);
--wa-color-brand-05: var(--wa-color-yellow-05);
--wa-color-brand: var(--wa-color-yellow);
--wa-color-brand-on: var(--wa-color-yellow-on);
}
.wa-brand-green {
--wa-color-brand-95: var(--wa-color-green-95);
--wa-color-brand-90: var(--wa-color-green-90);
--wa-color-brand-80: var(--wa-color-green-80);
--wa-color-brand-70: var(--wa-color-green-70);
--wa-color-brand-60: var(--wa-color-green-60);
--wa-color-brand-50: var(--wa-color-green-50);
--wa-color-brand-40: var(--wa-color-green-40);
--wa-color-brand-30: var(--wa-color-green-30);
--wa-color-brand-20: var(--wa-color-green-20);
--wa-color-brand-10: var(--wa-color-green-10);
--wa-color-brand-05: var(--wa-color-green-05);
--wa-color-brand: var(--wa-color-green);
--wa-color-brand-on: var(--wa-color-green-on);
}
.wa-brand-cyan {
--wa-color-brand-95: var(--wa-color-cyan-95);
--wa-color-brand-90: var(--wa-color-cyan-90);
--wa-color-brand-80: var(--wa-color-cyan-80);
--wa-color-brand-70: var(--wa-color-cyan-70);
--wa-color-brand-60: var(--wa-color-cyan-60);
--wa-color-brand-50: var(--wa-color-cyan-50);
--wa-color-brand-40: var(--wa-color-cyan-40);
--wa-color-brand-30: var(--wa-color-cyan-30);
--wa-color-brand-20: var(--wa-color-cyan-20);
--wa-color-brand-10: var(--wa-color-cyan-10);
--wa-color-brand-05: var(--wa-color-cyan-05);
--wa-color-brand: var(--wa-color-cyan);
--wa-color-brand-on: var(--wa-color-cyan-on);
}
.wa-brand-indigo {
--wa-color-brand-95: var(--wa-color-indigo-95);
--wa-color-brand-90: var(--wa-color-indigo-90);
--wa-color-brand-80: var(--wa-color-indigo-80);
--wa-color-brand-70: var(--wa-color-indigo-70);
--wa-color-brand-60: var(--wa-color-indigo-60);
--wa-color-brand-50: var(--wa-color-indigo-50);
--wa-color-brand-40: var(--wa-color-indigo-40);
--wa-color-brand-30: var(--wa-color-indigo-30);
--wa-color-brand-20: var(--wa-color-indigo-20);
--wa-color-brand-10: var(--wa-color-indigo-10);
--wa-color-brand-05: var(--wa-color-indigo-05);
--wa-color-brand: var(--wa-color-indigo);
--wa-color-brand-on: var(--wa-color-indigo-on);
}
.wa-brand-purple {
--wa-color-brand-95: var(--wa-color-purple-95);
--wa-color-brand-90: var(--wa-color-purple-90);
--wa-color-brand-80: var(--wa-color-purple-80);
--wa-color-brand-70: var(--wa-color-purple-70);
--wa-color-brand-60: var(--wa-color-purple-60);
--wa-color-brand-50: var(--wa-color-purple-50);
--wa-color-brand-40: var(--wa-color-purple-40);
--wa-color-brand-30: var(--wa-color-purple-30);
--wa-color-brand-20: var(--wa-color-purple-20);
--wa-color-brand-10: var(--wa-color-purple-10);
--wa-color-brand-05: var(--wa-color-purple-05);
--wa-color-brand: var(--wa-color-purple);
--wa-color-brand-on: var(--wa-color-purple-on);
}
.wa-brand-pink {
--wa-color-brand-95: var(--wa-color-pink-95);
--wa-color-brand-90: var(--wa-color-pink-90);
--wa-color-brand-80: var(--wa-color-pink-80);
--wa-color-brand-70: var(--wa-color-pink-70);
--wa-color-brand-60: var(--wa-color-pink-60);
--wa-color-brand-50: var(--wa-color-pink-50);
--wa-color-brand-40: var(--wa-color-pink-40);
--wa-color-brand-30: var(--wa-color-pink-30);
--wa-color-brand-20: var(--wa-color-pink-20);
--wa-color-brand-10: var(--wa-color-pink-10);
--wa-color-brand-05: var(--wa-color-pink-05);
--wa-color-brand: var(--wa-color-pink);
--wa-color-brand-on: var(--wa-color-pink-on);
}
.wa-brand-gray {
--wa-color-brand-95: var(--wa-color-gray-95);
--wa-color-brand-90: var(--wa-color-gray-90);
--wa-color-brand-80: var(--wa-color-gray-80);
--wa-color-brand-70: var(--wa-color-gray-70);
--wa-color-brand-60: var(--wa-color-gray-60);
--wa-color-brand-50: var(--wa-color-gray-50);
--wa-color-brand-40: var(--wa-color-gray-40);
--wa-color-brand-30: var(--wa-color-gray-30);
--wa-color-brand-20: var(--wa-color-gray-20);
--wa-color-brand-10: var(--wa-color-gray-10);
--wa-color-brand-05: var(--wa-color-gray-05);
--wa-color-brand: var(--wa-color-gray);
--wa-color-brand-on: var(--wa-color-gray-on);
}
}
@layer wa-color-variant {
:where(:root), /* default */
.wa-neutral-gray {
--wa-color-neutral-95: var(--wa-color-gray-95);
--wa-color-neutral-90: var(--wa-color-gray-90);
--wa-color-neutral-80: var(--wa-color-gray-80);
--wa-color-neutral-70: var(--wa-color-gray-70);
--wa-color-neutral-60: var(--wa-color-gray-60);
--wa-color-neutral-50: var(--wa-color-gray-50);
--wa-color-neutral-40: var(--wa-color-gray-40);
--wa-color-neutral-30: var(--wa-color-gray-30);
--wa-color-neutral-20: var(--wa-color-gray-20);
--wa-color-neutral-10: var(--wa-color-gray-10);
--wa-color-neutral-05: var(--wa-color-gray-05);
--wa-color-neutral: var(--wa-color-gray);
--wa-color-neutral-on: var(--wa-color-gray-on);
}
.wa-neutral-red {
--wa-color-neutral-95: var(--wa-color-red-95);
--wa-color-neutral-90: var(--wa-color-red-90);
--wa-color-neutral-80: var(--wa-color-red-80);
--wa-color-neutral-70: var(--wa-color-red-70);
--wa-color-neutral-60: var(--wa-color-red-60);
--wa-color-neutral-50: var(--wa-color-red-50);
--wa-color-neutral-40: var(--wa-color-red-40);
--wa-color-neutral-30: var(--wa-color-red-30);
--wa-color-neutral-20: var(--wa-color-red-20);
--wa-color-neutral-10: var(--wa-color-red-10);
--wa-color-neutral-05: var(--wa-color-red-05);
--wa-color-neutral: var(--wa-color-red);
--wa-color-neutral-on: var(--wa-color-red-on);
}
.wa-neutral-orange {
--wa-color-neutral-95: var(--wa-color-orange-95);
--wa-color-neutral-90: var(--wa-color-orange-90);
--wa-color-neutral-80: var(--wa-color-orange-80);
--wa-color-neutral-70: var(--wa-color-orange-70);
--wa-color-neutral-60: var(--wa-color-orange-60);
--wa-color-neutral-50: var(--wa-color-orange-50);
--wa-color-neutral-40: var(--wa-color-orange-40);
--wa-color-neutral-30: var(--wa-color-orange-30);
--wa-color-neutral-20: var(--wa-color-orange-20);
--wa-color-neutral-10: var(--wa-color-orange-10);
--wa-color-neutral-05: var(--wa-color-orange-05);
--wa-color-neutral: var(--wa-color-orange);
--wa-color-neutral-on: var(--wa-color-orange-on);
}
.wa-neutral-yellow {
--wa-color-neutral-95: var(--wa-color-yellow-95);
--wa-color-neutral-90: var(--wa-color-yellow-90);
--wa-color-neutral-80: var(--wa-color-yellow-80);
--wa-color-neutral-70: var(--wa-color-yellow-70);
--wa-color-neutral-60: var(--wa-color-yellow-60);
--wa-color-neutral-50: var(--wa-color-yellow-50);
--wa-color-neutral-40: var(--wa-color-yellow-40);
--wa-color-neutral-30: var(--wa-color-yellow-30);
--wa-color-neutral-20: var(--wa-color-yellow-20);
--wa-color-neutral-10: var(--wa-color-yellow-10);
--wa-color-neutral-05: var(--wa-color-yellow-05);
--wa-color-neutral: var(--wa-color-yellow);
--wa-color-neutral-on: var(--wa-color-yellow-on);
}
.wa-neutral-green {
--wa-color-neutral-95: var(--wa-color-green-95);
--wa-color-neutral-90: var(--wa-color-green-90);
--wa-color-neutral-80: var(--wa-color-green-80);
--wa-color-neutral-70: var(--wa-color-green-70);
--wa-color-neutral-60: var(--wa-color-green-60);
--wa-color-neutral-50: var(--wa-color-green-50);
--wa-color-neutral-40: var(--wa-color-green-40);
--wa-color-neutral-30: var(--wa-color-green-30);
--wa-color-neutral-20: var(--wa-color-green-20);
--wa-color-neutral-10: var(--wa-color-green-10);
--wa-color-neutral-05: var(--wa-color-green-05);
--wa-color-neutral: var(--wa-color-green);
--wa-color-neutral-on: var(--wa-color-green-on);
}
.wa-neutral-cyan {
--wa-color-neutral-95: var(--wa-color-cyan-95);
--wa-color-neutral-90: var(--wa-color-cyan-90);
--wa-color-neutral-80: var(--wa-color-cyan-80);
--wa-color-neutral-70: var(--wa-color-cyan-70);
--wa-color-neutral-60: var(--wa-color-cyan-60);
--wa-color-neutral-50: var(--wa-color-cyan-50);
--wa-color-neutral-40: var(--wa-color-cyan-40);
--wa-color-neutral-30: var(--wa-color-cyan-30);
--wa-color-neutral-20: var(--wa-color-cyan-20);
--wa-color-neutral-10: var(--wa-color-cyan-10);
--wa-color-neutral-05: var(--wa-color-cyan-05);
--wa-color-neutral: var(--wa-color-cyan);
--wa-color-neutral-on: var(--wa-color-cyan-on);
}
.wa-neutral-blue {
--wa-color-neutral-95: var(--wa-color-blue-95);
--wa-color-neutral-90: var(--wa-color-blue-90);
--wa-color-neutral-80: var(--wa-color-blue-80);
--wa-color-neutral-70: var(--wa-color-blue-70);
--wa-color-neutral-60: var(--wa-color-blue-60);
--wa-color-neutral-50: var(--wa-color-blue-50);
--wa-color-neutral-40: var(--wa-color-blue-40);
--wa-color-neutral-30: var(--wa-color-blue-30);
--wa-color-neutral-20: var(--wa-color-blue-20);
--wa-color-neutral-10: var(--wa-color-blue-10);
--wa-color-neutral-05: var(--wa-color-blue-05);
--wa-color-neutral: var(--wa-color-blue);
--wa-color-neutral-on: var(--wa-color-blue-on);
}
.wa-neutral-indigo {
--wa-color-neutral-95: var(--wa-color-indigo-95);
--wa-color-neutral-90: var(--wa-color-indigo-90);
--wa-color-neutral-80: var(--wa-color-indigo-80);
--wa-color-neutral-70: var(--wa-color-indigo-70);
--wa-color-neutral-60: var(--wa-color-indigo-60);
--wa-color-neutral-50: var(--wa-color-indigo-50);
--wa-color-neutral-40: var(--wa-color-indigo-40);
--wa-color-neutral-30: var(--wa-color-indigo-30);
--wa-color-neutral-20: var(--wa-color-indigo-20);
--wa-color-neutral-10: var(--wa-color-indigo-10);
--wa-color-neutral-05: var(--wa-color-indigo-05);
--wa-color-neutral: var(--wa-color-indigo);
--wa-color-neutral-on: var(--wa-color-indigo-on);
}
.wa-neutral-purple {
--wa-color-neutral-95: var(--wa-color-purple-95);
--wa-color-neutral-90: var(--wa-color-purple-90);
--wa-color-neutral-80: var(--wa-color-purple-80);
--wa-color-neutral-70: var(--wa-color-purple-70);
--wa-color-neutral-60: var(--wa-color-purple-60);
--wa-color-neutral-50: var(--wa-color-purple-50);
--wa-color-neutral-40: var(--wa-color-purple-40);
--wa-color-neutral-30: var(--wa-color-purple-30);
--wa-color-neutral-20: var(--wa-color-purple-20);
--wa-color-neutral-10: var(--wa-color-purple-10);
--wa-color-neutral-05: var(--wa-color-purple-05);
--wa-color-neutral: var(--wa-color-purple);
--wa-color-neutral-on: var(--wa-color-purple-on);
}
.wa-neutral-pink {
--wa-color-neutral-95: var(--wa-color-pink-95);
--wa-color-neutral-90: var(--wa-color-pink-90);
--wa-color-neutral-80: var(--wa-color-pink-80);
--wa-color-neutral-70: var(--wa-color-pink-70);
--wa-color-neutral-60: var(--wa-color-pink-60);
--wa-color-neutral-50: var(--wa-color-pink-50);
--wa-color-neutral-40: var(--wa-color-pink-40);
--wa-color-neutral-30: var(--wa-color-pink-30);
--wa-color-neutral-20: var(--wa-color-pink-20);
--wa-color-neutral-10: var(--wa-color-pink-10);
--wa-color-neutral-05: var(--wa-color-pink-05);
--wa-color-neutral: var(--wa-color-pink);
--wa-color-neutral-on: var(--wa-color-pink-on);
}
}
@layer wa-color-variant {
:where(:root), /* default */
.wa-success-green {
--wa-color-success-95: var(--wa-color-green-95);
--wa-color-success-90: var(--wa-color-green-90);
--wa-color-success-80: var(--wa-color-green-80);
--wa-color-success-70: var(--wa-color-green-70);
--wa-color-success-60: var(--wa-color-green-60);
--wa-color-success-50: var(--wa-color-green-50);
--wa-color-success-40: var(--wa-color-green-40);
--wa-color-success-30: var(--wa-color-green-30);
--wa-color-success-20: var(--wa-color-green-20);
--wa-color-success-10: var(--wa-color-green-10);
--wa-color-success-05: var(--wa-color-green-05);
--wa-color-success: var(--wa-color-green);
--wa-color-success-on: var(--wa-color-green-on);
}
.wa-success-red {
--wa-color-success-95: var(--wa-color-red-95);
--wa-color-success-90: var(--wa-color-red-90);
--wa-color-success-80: var(--wa-color-red-80);
--wa-color-success-70: var(--wa-color-red-70);
--wa-color-success-60: var(--wa-color-red-60);
--wa-color-success-50: var(--wa-color-red-50);
--wa-color-success-40: var(--wa-color-red-40);
--wa-color-success-30: var(--wa-color-red-30);
--wa-color-success-20: var(--wa-color-red-20);
--wa-color-success-10: var(--wa-color-red-10);
--wa-color-success-05: var(--wa-color-red-05);
--wa-color-success: var(--wa-color-red);
--wa-color-success-on: var(--wa-color-red-on);
}
.wa-success-orange {
--wa-color-success-95: var(--wa-color-orange-95);
--wa-color-success-90: var(--wa-color-orange-90);
--wa-color-success-80: var(--wa-color-orange-80);
--wa-color-success-70: var(--wa-color-orange-70);
--wa-color-success-60: var(--wa-color-orange-60);
--wa-color-success-50: var(--wa-color-orange-50);
--wa-color-success-40: var(--wa-color-orange-40);
--wa-color-success-30: var(--wa-color-orange-30);
--wa-color-success-20: var(--wa-color-orange-20);
--wa-color-success-10: var(--wa-color-orange-10);
--wa-color-success-05: var(--wa-color-orange-05);
--wa-color-success: var(--wa-color-orange);
--wa-color-success-on: var(--wa-color-orange-on);
}
.wa-success-yellow {
--wa-color-success-95: var(--wa-color-yellow-95);
--wa-color-success-90: var(--wa-color-yellow-90);
--wa-color-success-80: var(--wa-color-yellow-80);
--wa-color-success-70: var(--wa-color-yellow-70);
--wa-color-success-60: var(--wa-color-yellow-60);
--wa-color-success-50: var(--wa-color-yellow-50);
--wa-color-success-40: var(--wa-color-yellow-40);
--wa-color-success-30: var(--wa-color-yellow-30);
--wa-color-success-20: var(--wa-color-yellow-20);
--wa-color-success-10: var(--wa-color-yellow-10);
--wa-color-success-05: var(--wa-color-yellow-05);
--wa-color-success: var(--wa-color-yellow);
--wa-color-success-on: var(--wa-color-yellow-on);
}
.wa-success-cyan {
--wa-color-success-95: var(--wa-color-cyan-95);
--wa-color-success-90: var(--wa-color-cyan-90);
--wa-color-success-80: var(--wa-color-cyan-80);
--wa-color-success-70: var(--wa-color-cyan-70);
--wa-color-success-60: var(--wa-color-cyan-60);
--wa-color-success-50: var(--wa-color-cyan-50);
--wa-color-success-40: var(--wa-color-cyan-40);
--wa-color-success-30: var(--wa-color-cyan-30);
--wa-color-success-20: var(--wa-color-cyan-20);
--wa-color-success-10: var(--wa-color-cyan-10);
--wa-color-success-05: var(--wa-color-cyan-05);
--wa-color-success: var(--wa-color-cyan);
--wa-color-success-on: var(--wa-color-cyan-on);
}
.wa-success-blue {
--wa-color-success-95: var(--wa-color-blue-95);
--wa-color-success-90: var(--wa-color-blue-90);
--wa-color-success-80: var(--wa-color-blue-80);
--wa-color-success-70: var(--wa-color-blue-70);
--wa-color-success-60: var(--wa-color-blue-60);
--wa-color-success-50: var(--wa-color-blue-50);
--wa-color-success-40: var(--wa-color-blue-40);
--wa-color-success-30: var(--wa-color-blue-30);
--wa-color-success-20: var(--wa-color-blue-20);
--wa-color-success-10: var(--wa-color-blue-10);
--wa-color-success-05: var(--wa-color-blue-05);
--wa-color-success: var(--wa-color-blue);
--wa-color-success-on: var(--wa-color-blue-on);
}
.wa-success-indigo {
--wa-color-success-95: var(--wa-color-indigo-95);
--wa-color-success-90: var(--wa-color-indigo-90);
--wa-color-success-80: var(--wa-color-indigo-80);
--wa-color-success-70: var(--wa-color-indigo-70);
--wa-color-success-60: var(--wa-color-indigo-60);
--wa-color-success-50: var(--wa-color-indigo-50);
--wa-color-success-40: var(--wa-color-indigo-40);
--wa-color-success-30: var(--wa-color-indigo-30);
--wa-color-success-20: var(--wa-color-indigo-20);
--wa-color-success-10: var(--wa-color-indigo-10);
--wa-color-success-05: var(--wa-color-indigo-05);
--wa-color-success: var(--wa-color-indigo);
--wa-color-success-on: var(--wa-color-indigo-on);
}
.wa-success-purple {
--wa-color-success-95: var(--wa-color-purple-95);
--wa-color-success-90: var(--wa-color-purple-90);
--wa-color-success-80: var(--wa-color-purple-80);
--wa-color-success-70: var(--wa-color-purple-70);
--wa-color-success-60: var(--wa-color-purple-60);
--wa-color-success-50: var(--wa-color-purple-50);
--wa-color-success-40: var(--wa-color-purple-40);
--wa-color-success-30: var(--wa-color-purple-30);
--wa-color-success-20: var(--wa-color-purple-20);
--wa-color-success-10: var(--wa-color-purple-10);
--wa-color-success-05: var(--wa-color-purple-05);
--wa-color-success: var(--wa-color-purple);
--wa-color-success-on: var(--wa-color-purple-on);
}
.wa-success-pink {
--wa-color-success-95: var(--wa-color-pink-95);
--wa-color-success-90: var(--wa-color-pink-90);
--wa-color-success-80: var(--wa-color-pink-80);
--wa-color-success-70: var(--wa-color-pink-70);
--wa-color-success-60: var(--wa-color-pink-60);
--wa-color-success-50: var(--wa-color-pink-50);
--wa-color-success-40: var(--wa-color-pink-40);
--wa-color-success-30: var(--wa-color-pink-30);
--wa-color-success-20: var(--wa-color-pink-20);
--wa-color-success-10: var(--wa-color-pink-10);
--wa-color-success-05: var(--wa-color-pink-05);
--wa-color-success: var(--wa-color-pink);
--wa-color-success-on: var(--wa-color-pink-on);
}
.wa-success-gray {
--wa-color-success-95: var(--wa-color-gray-95);
--wa-color-success-90: var(--wa-color-gray-90);
--wa-color-success-80: var(--wa-color-gray-80);
--wa-color-success-70: var(--wa-color-gray-70);
--wa-color-success-60: var(--wa-color-gray-60);
--wa-color-success-50: var(--wa-color-gray-50);
--wa-color-success-40: var(--wa-color-gray-40);
--wa-color-success-30: var(--wa-color-gray-30);
--wa-color-success-20: var(--wa-color-gray-20);
--wa-color-success-10: var(--wa-color-gray-10);
--wa-color-success-05: var(--wa-color-gray-05);
--wa-color-success: var(--wa-color-gray);
--wa-color-success-on: var(--wa-color-gray-on);
}
}
@layer wa-color-variant {
:where(:root), /* default */
.wa-warning-yellow {
--wa-color-warning-95: var(--wa-color-yellow-95);
--wa-color-warning-90: var(--wa-color-yellow-90);
--wa-color-warning-80: var(--wa-color-yellow-80);
--wa-color-warning-70: var(--wa-color-yellow-70);
--wa-color-warning-60: var(--wa-color-yellow-60);
--wa-color-warning-50: var(--wa-color-yellow-50);
--wa-color-warning-40: var(--wa-color-yellow-40);
--wa-color-warning-30: var(--wa-color-yellow-30);
--wa-color-warning-20: var(--wa-color-yellow-20);
--wa-color-warning-10: var(--wa-color-yellow-10);
--wa-color-warning-05: var(--wa-color-yellow-05);
--wa-color-warning: var(--wa-color-yellow);
--wa-color-warning-on: var(--wa-color-yellow-on);
}
.wa-warning-red {
--wa-color-warning-95: var(--wa-color-red-95);
--wa-color-warning-90: var(--wa-color-red-90);
--wa-color-warning-80: var(--wa-color-red-80);
--wa-color-warning-70: var(--wa-color-red-70);
--wa-color-warning-60: var(--wa-color-red-60);
--wa-color-warning-50: var(--wa-color-red-50);
--wa-color-warning-40: var(--wa-color-red-40);
--wa-color-warning-30: var(--wa-color-red-30);
--wa-color-warning-20: var(--wa-color-red-20);
--wa-color-warning-10: var(--wa-color-red-10);
--wa-color-warning-05: var(--wa-color-red-05);
--wa-color-warning: var(--wa-color-red);
--wa-color-warning-on: var(--wa-color-red-on);
}
.wa-warning-orange {
--wa-color-warning-95: var(--wa-color-orange-95);
--wa-color-warning-90: var(--wa-color-orange-90);
--wa-color-warning-80: var(--wa-color-orange-80);
--wa-color-warning-70: var(--wa-color-orange-70);
--wa-color-warning-60: var(--wa-color-orange-60);
--wa-color-warning-50: var(--wa-color-orange-50);
--wa-color-warning-40: var(--wa-color-orange-40);
--wa-color-warning-30: var(--wa-color-orange-30);
--wa-color-warning-20: var(--wa-color-orange-20);
--wa-color-warning-10: var(--wa-color-orange-10);
--wa-color-warning-05: var(--wa-color-orange-05);
--wa-color-warning: var(--wa-color-orange);
--wa-color-warning-on: var(--wa-color-orange-on);
}
.wa-warning-green {
--wa-color-warning-95: var(--wa-color-green-95);
--wa-color-warning-90: var(--wa-color-green-90);
--wa-color-warning-80: var(--wa-color-green-80);
--wa-color-warning-70: var(--wa-color-green-70);
--wa-color-warning-60: var(--wa-color-green-60);
--wa-color-warning-50: var(--wa-color-green-50);
--wa-color-warning-40: var(--wa-color-green-40);
--wa-color-warning-30: var(--wa-color-green-30);
--wa-color-warning-20: var(--wa-color-green-20);
--wa-color-warning-10: var(--wa-color-green-10);
--wa-color-warning-05: var(--wa-color-green-05);
--wa-color-warning: var(--wa-color-green);
--wa-color-warning-on: var(--wa-color-green-on);
}
.wa-warning-cyan {
--wa-color-warning-95: var(--wa-color-cyan-95);
--wa-color-warning-90: var(--wa-color-cyan-90);
--wa-color-warning-80: var(--wa-color-cyan-80);
--wa-color-warning-70: var(--wa-color-cyan-70);
--wa-color-warning-60: var(--wa-color-cyan-60);
--wa-color-warning-50: var(--wa-color-cyan-50);
--wa-color-warning-40: var(--wa-color-cyan-40);
--wa-color-warning-30: var(--wa-color-cyan-30);
--wa-color-warning-20: var(--wa-color-cyan-20);
--wa-color-warning-10: var(--wa-color-cyan-10);
--wa-color-warning-05: var(--wa-color-cyan-05);
--wa-color-warning: var(--wa-color-cyan);
--wa-color-warning-on: var(--wa-color-cyan-on);
}
.wa-warning-blue {
--wa-color-warning-95: var(--wa-color-blue-95);
--wa-color-warning-90: var(--wa-color-blue-90);
--wa-color-warning-80: var(--wa-color-blue-80);
--wa-color-warning-70: var(--wa-color-blue-70);
--wa-color-warning-60: var(--wa-color-blue-60);
--wa-color-warning-50: var(--wa-color-blue-50);
--wa-color-warning-40: var(--wa-color-blue-40);
--wa-color-warning-30: var(--wa-color-blue-30);
--wa-color-warning-20: var(--wa-color-blue-20);
--wa-color-warning-10: var(--wa-color-blue-10);
--wa-color-warning-05: var(--wa-color-blue-05);
--wa-color-warning: var(--wa-color-blue);
--wa-color-warning-on: var(--wa-color-blue-on);
}
.wa-warning-indigo {
--wa-color-warning-95: var(--wa-color-indigo-95);
--wa-color-warning-90: var(--wa-color-indigo-90);
--wa-color-warning-80: var(--wa-color-indigo-80);
--wa-color-warning-70: var(--wa-color-indigo-70);
--wa-color-warning-60: var(--wa-color-indigo-60);
--wa-color-warning-50: var(--wa-color-indigo-50);
--wa-color-warning-40: var(--wa-color-indigo-40);
--wa-color-warning-30: var(--wa-color-indigo-30);
--wa-color-warning-20: var(--wa-color-indigo-20);
--wa-color-warning-10: var(--wa-color-indigo-10);
--wa-color-warning-05: var(--wa-color-indigo-05);
--wa-color-warning: var(--wa-color-indigo);
--wa-color-warning-on: var(--wa-color-indigo-on);
}
.wa-warning-purple {
--wa-color-warning-95: var(--wa-color-purple-95);
--wa-color-warning-90: var(--wa-color-purple-90);
--wa-color-warning-80: var(--wa-color-purple-80);
--wa-color-warning-70: var(--wa-color-purple-70);
--wa-color-warning-60: var(--wa-color-purple-60);
--wa-color-warning-50: var(--wa-color-purple-50);
--wa-color-warning-40: var(--wa-color-purple-40);
--wa-color-warning-30: var(--wa-color-purple-30);
--wa-color-warning-20: var(--wa-color-purple-20);
--wa-color-warning-10: var(--wa-color-purple-10);
--wa-color-warning-05: var(--wa-color-purple-05);
--wa-color-warning: var(--wa-color-purple);
--wa-color-warning-on: var(--wa-color-purple-on);
}
.wa-warning-pink {
--wa-color-warning-95: var(--wa-color-pink-95);
--wa-color-warning-90: var(--wa-color-pink-90);
--wa-color-warning-80: var(--wa-color-pink-80);
--wa-color-warning-70: var(--wa-color-pink-70);
--wa-color-warning-60: var(--wa-color-pink-60);
--wa-color-warning-50: var(--wa-color-pink-50);
--wa-color-warning-40: var(--wa-color-pink-40);
--wa-color-warning-30: var(--wa-color-pink-30);
--wa-color-warning-20: var(--wa-color-pink-20);
--wa-color-warning-10: var(--wa-color-pink-10);
--wa-color-warning-05: var(--wa-color-pink-05);
--wa-color-warning: var(--wa-color-pink);
--wa-color-warning-on: var(--wa-color-pink-on);
}
.wa-warning-gray {
--wa-color-warning-95: var(--wa-color-gray-95);
--wa-color-warning-90: var(--wa-color-gray-90);
--wa-color-warning-80: var(--wa-color-gray-80);
--wa-color-warning-70: var(--wa-color-gray-70);
--wa-color-warning-60: var(--wa-color-gray-60);
--wa-color-warning-50: var(--wa-color-gray-50);
--wa-color-warning-40: var(--wa-color-gray-40);
--wa-color-warning-30: var(--wa-color-gray-30);
--wa-color-warning-20: var(--wa-color-gray-20);
--wa-color-warning-10: var(--wa-color-gray-10);
--wa-color-warning-05: var(--wa-color-gray-05);
--wa-color-warning: var(--wa-color-gray);
--wa-color-warning-on: var(--wa-color-gray-on);
}
}
@layer wa-color-variant {
:where(:root), /* default */
.wa-danger-red {
--wa-color-danger-95: var(--wa-color-red-95);
--wa-color-danger-90: var(--wa-color-red-90);
--wa-color-danger-80: var(--wa-color-red-80);
--wa-color-danger-70: var(--wa-color-red-70);
--wa-color-danger-60: var(--wa-color-red-60);
--wa-color-danger-50: var(--wa-color-red-50);
--wa-color-danger-40: var(--wa-color-red-40);
--wa-color-danger-30: var(--wa-color-red-30);
--wa-color-danger-20: var(--wa-color-red-20);
--wa-color-danger-10: var(--wa-color-red-10);
--wa-color-danger-05: var(--wa-color-red-05);
--wa-color-danger: var(--wa-color-red);
--wa-color-danger-on: var(--wa-color-red-on);
}
.wa-danger-orange {
--wa-color-danger-95: var(--wa-color-orange-95);
--wa-color-danger-90: var(--wa-color-orange-90);
--wa-color-danger-80: var(--wa-color-orange-80);
--wa-color-danger-70: var(--wa-color-orange-70);
--wa-color-danger-60: var(--wa-color-orange-60);
--wa-color-danger-50: var(--wa-color-orange-50);
--wa-color-danger-40: var(--wa-color-orange-40);
--wa-color-danger-30: var(--wa-color-orange-30);
--wa-color-danger-20: var(--wa-color-orange-20);
--wa-color-danger-10: var(--wa-color-orange-10);
--wa-color-danger-05: var(--wa-color-orange-05);
--wa-color-danger: var(--wa-color-orange);
--wa-color-danger-on: var(--wa-color-orange-on);
}
.wa-danger-yellow {
--wa-color-danger-95: var(--wa-color-yellow-95);
--wa-color-danger-90: var(--wa-color-yellow-90);
--wa-color-danger-80: var(--wa-color-yellow-80);
--wa-color-danger-70: var(--wa-color-yellow-70);
--wa-color-danger-60: var(--wa-color-yellow-60);
--wa-color-danger-50: var(--wa-color-yellow-50);
--wa-color-danger-40: var(--wa-color-yellow-40);
--wa-color-danger-30: var(--wa-color-yellow-30);
--wa-color-danger-20: var(--wa-color-yellow-20);
--wa-color-danger-10: var(--wa-color-yellow-10);
--wa-color-danger-05: var(--wa-color-yellow-05);
--wa-color-danger: var(--wa-color-yellow);
--wa-color-danger-on: var(--wa-color-yellow-on);
}
.wa-danger-green {
--wa-color-danger-95: var(--wa-color-green-95);
--wa-color-danger-90: var(--wa-color-green-90);
--wa-color-danger-80: var(--wa-color-green-80);
--wa-color-danger-70: var(--wa-color-green-70);
--wa-color-danger-60: var(--wa-color-green-60);
--wa-color-danger-50: var(--wa-color-green-50);
--wa-color-danger-40: var(--wa-color-green-40);
--wa-color-danger-30: var(--wa-color-green-30);
--wa-color-danger-20: var(--wa-color-green-20);
--wa-color-danger-10: var(--wa-color-green-10);
--wa-color-danger-05: var(--wa-color-green-05);
--wa-color-danger: var(--wa-color-green);
--wa-color-danger-on: var(--wa-color-green-on);
}
.wa-danger-cyan {
--wa-color-danger-95: var(--wa-color-cyan-95);
--wa-color-danger-90: var(--wa-color-cyan-90);
--wa-color-danger-80: var(--wa-color-cyan-80);
--wa-color-danger-70: var(--wa-color-cyan-70);
--wa-color-danger-60: var(--wa-color-cyan-60);
--wa-color-danger-50: var(--wa-color-cyan-50);
--wa-color-danger-40: var(--wa-color-cyan-40);
--wa-color-danger-30: var(--wa-color-cyan-30);
--wa-color-danger-20: var(--wa-color-cyan-20);
--wa-color-danger-10: var(--wa-color-cyan-10);
--wa-color-danger-05: var(--wa-color-cyan-05);
--wa-color-danger: var(--wa-color-cyan);
--wa-color-danger-on: var(--wa-color-cyan-on);
}
.wa-danger-blue {
--wa-color-danger-95: var(--wa-color-blue-95);
--wa-color-danger-90: var(--wa-color-blue-90);
--wa-color-danger-80: var(--wa-color-blue-80);
--wa-color-danger-70: var(--wa-color-blue-70);
--wa-color-danger-60: var(--wa-color-blue-60);
--wa-color-danger-50: var(--wa-color-blue-50);
--wa-color-danger-40: var(--wa-color-blue-40);
--wa-color-danger-30: var(--wa-color-blue-30);
--wa-color-danger-20: var(--wa-color-blue-20);
--wa-color-danger-10: var(--wa-color-blue-10);
--wa-color-danger-05: var(--wa-color-blue-05);
--wa-color-danger: var(--wa-color-blue);
--wa-color-danger-on: var(--wa-color-blue-on);
}
.wa-danger-indigo {
--wa-color-danger-95: var(--wa-color-indigo-95);
--wa-color-danger-90: var(--wa-color-indigo-90);
--wa-color-danger-80: var(--wa-color-indigo-80);
--wa-color-danger-70: var(--wa-color-indigo-70);
--wa-color-danger-60: var(--wa-color-indigo-60);
--wa-color-danger-50: var(--wa-color-indigo-50);
--wa-color-danger-40: var(--wa-color-indigo-40);
--wa-color-danger-30: var(--wa-color-indigo-30);
--wa-color-danger-20: var(--wa-color-indigo-20);
--wa-color-danger-10: var(--wa-color-indigo-10);
--wa-color-danger-05: var(--wa-color-indigo-05);
--wa-color-danger: var(--wa-color-indigo);
--wa-color-danger-on: var(--wa-color-indigo-on);
}
.wa-danger-purple {
--wa-color-danger-95: var(--wa-color-purple-95);
--wa-color-danger-90: var(--wa-color-purple-90);
--wa-color-danger-80: var(--wa-color-purple-80);
--wa-color-danger-70: var(--wa-color-purple-70);
--wa-color-danger-60: var(--wa-color-purple-60);
--wa-color-danger-50: var(--wa-color-purple-50);
--wa-color-danger-40: var(--wa-color-purple-40);
--wa-color-danger-30: var(--wa-color-purple-30);
--wa-color-danger-20: var(--wa-color-purple-20);
--wa-color-danger-10: var(--wa-color-purple-10);
--wa-color-danger-05: var(--wa-color-purple-05);
--wa-color-danger: var(--wa-color-purple);
--wa-color-danger-on: var(--wa-color-purple-on);
}
.wa-danger-pink {
--wa-color-danger-95: var(--wa-color-pink-95);
--wa-color-danger-90: var(--wa-color-pink-90);
--wa-color-danger-80: var(--wa-color-pink-80);
--wa-color-danger-70: var(--wa-color-pink-70);
--wa-color-danger-60: var(--wa-color-pink-60);
--wa-color-danger-50: var(--wa-color-pink-50);
--wa-color-danger-40: var(--wa-color-pink-40);
--wa-color-danger-30: var(--wa-color-pink-30);
--wa-color-danger-20: var(--wa-color-pink-20);
--wa-color-danger-10: var(--wa-color-pink-10);
--wa-color-danger-05: var(--wa-color-pink-05);
--wa-color-danger: var(--wa-color-pink);
--wa-color-danger-on: var(--wa-color-pink-on);
}
.wa-danger-gray {
--wa-color-danger-95: var(--wa-color-gray-95);
--wa-color-danger-90: var(--wa-color-gray-90);
--wa-color-danger-80: var(--wa-color-gray-80);
--wa-color-danger-70: var(--wa-color-gray-70);
--wa-color-danger-60: var(--wa-color-gray-60);
--wa-color-danger-50: var(--wa-color-gray-50);
--wa-color-danger-40: var(--wa-color-gray-40);
--wa-color-danger-30: var(--wa-color-gray-30);
--wa-color-danger-20: var(--wa-color-gray-20);
--wa-color-danger-10: var(--wa-color-gray-10);
--wa-color-danger-05: var(--wa-color-gray-05);
--wa-color-danger: var(--wa-color-gray);
--wa-color-danger-on: var(--wa-color-gray-on);
}
}
/* Rules shared by all palettes */
/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {
/**
* Conditional tokens to check if the key color is >= 60
* Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
* The numeric value of the key is isolated as --wa-color-{hue}-key
* If key < 60, the result is 0%
* If key >= 60, the result is 100%
* Intended to be used in the color-mix() functions below
*/
--wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
--wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
--wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
--wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
--wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
--wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
--wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
--wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
--wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
--wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
/**
* Tokens to set text color with appropriate WCAG 2.1 contrast
* If key < 60, the text color is white
* If key >= 60, the text color is {hue}-10
*/
--wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
--wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
--wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
--wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
--wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
--wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
--wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
--wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
--wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
--wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}
@layer wa-color-palette {
:where(:root),
.wa-palette-default {
--wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
--wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
--wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
--wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
--wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
--wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
--wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
--wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
--wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
--wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
--wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
--wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
--wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
--wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
--wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
--wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
--wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
--wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
--wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
--wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
--wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
--wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
--wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
--wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
--wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
--wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
--wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
--wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
--wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
--wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
--wa-color-yellow: var(--wa-color-yellow-80);
--wa-color-yellow-key: 80;
--wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
--wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
--wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
--wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
--wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
--wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
--wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
--wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
--wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
--wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
--wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
--wa-color-green: var(--wa-color-green-60);
--wa-color-green-key: 60;
--wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
--wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
--wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
--wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
--wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
--wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
--wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
--wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
--wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
--wa-color-cyan: var(--wa-color-cyan-70);
--wa-color-cyan-key: 70;
--wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
--wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
--wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
--wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
--wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
--wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
--wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
--wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
--wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
--wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
--wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
--wa-color-blue: var(--wa-color-blue-50);
--wa-color-blue-key: 50;
--wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
--wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
--wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
--wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
--wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
--wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
--wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
--wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
--wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
--wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
--wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
--wa-color-indigo: var(--wa-color-indigo-50);
--wa-color-indigo-key: 50;
--wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
--wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
--wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
--wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
--wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
--wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
--wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
--wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
--wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
--wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
--wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
--wa-color-purple: var(--wa-color-purple-50);
--wa-color-purple-key: 50;
--wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
--wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
--wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
--wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
--wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
--wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
--wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
--wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
--wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
--wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
--wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
--wa-color-pink: var(--wa-color-pink-50);
--wa-color-pink-key: 50;
--wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
--wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
--wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
--wa-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
--wa-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
--wa-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
--wa-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
--wa-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
--wa-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
--wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
--wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
--wa-color-gray: var(--wa-color-gray-40);
--wa-color-gray-key: 40;
}
}
@layer wa-theme {
:where(:root),
.wa-theme-default,
.wa-light,
.wa-dark .wa-invert,
.wa-light .wa-theme-default,
.wa-dark .wa-theme-default.wa-invert,
.wa-dark .wa-theme-default .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert,
.wa-dark .wa-theme-default,
.wa-light .wa-theme-default.wa-invert,
.wa-light .wa-theme-default .wa-invert {
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
--wa-color-mix-active: var(--wa-color-surface-default) 20%;
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:where(:root),
.wa-theme-default,
.wa-light,
.wa-dark,
.wa-invert {
font-family: var(--wa-font-family-body);
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Buttons */
--wa-button-transform-hover: none;
--wa-button-transform-active: scale(0.9875);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-color: var(--wa-tooltip-background-color);
--wa-tooltip-border-style: var(--wa-border-style);
--wa-tooltip-border-width: var(--wa-border-width-s);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
:is(html, body):has(wa-page) {
min-height: 100%;
padding: 0;
margin: 0;
}
}
@layer wa-utilities {
.wa-size-xs {
font-size: var(--wa-font-size-xs);
}
.wa-size-s {
font-size: var(--wa-font-size-s);
}
.wa-size-m {
font-size: var(--wa-font-size-m);
}
.wa-size-l {
font-size: var(--wa-font-size-l);
}
.wa-size-xl {
font-size: var(--wa-font-size-xl);
}
}
@layer wa-utilities {
:where(:root),
.wa-neutral {
--wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
--wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
--wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
--wa-color-border-loud: var(--wa-color-neutral-border-loud);
--wa-color-border-normal: var(--wa-color-neutral-border-normal);
--wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
--wa-color-on-loud: var(--wa-color-neutral-on-loud);
--wa-color-on-normal: var(--wa-color-neutral-on-normal);
--wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
}
.wa-brand {
--wa-color-fill-loud: var(--wa-color-brand-fill-loud);
--wa-color-fill-normal: var(--wa-color-brand-fill-normal);
--wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
--wa-color-border-loud: var(--wa-color-brand-border-loud);
--wa-color-border-normal: var(--wa-color-brand-border-normal);
--wa-color-border-quiet: var(--wa-color-brand-border-quiet);
--wa-color-on-loud: var(--wa-color-brand-on-loud);
--wa-color-on-normal: var(--wa-color-brand-on-normal);
--wa-color-on-quiet: var(--wa-color-brand-on-quiet);
}
.wa-success {
--wa-color-fill-loud: var(--wa-color-success-fill-loud);
--wa-color-fill-normal: var(--wa-color-success-fill-normal);
--wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
--wa-color-border-loud: var(--wa-color-success-border-loud);
--wa-color-border-normal: var(--wa-color-success-border-normal);
--wa-color-border-quiet: var(--wa-color-success-border-quiet);
--wa-color-on-loud: var(--wa-color-success-on-loud);
--wa-color-on-normal: var(--wa-color-success-on-normal);
--wa-color-on-quiet: var(--wa-color-success-on-quiet);
}
.wa-warning {
--wa-color-fill-loud: var(--wa-color-warning-fill-loud);
--wa-color-fill-normal: var(--wa-color-warning-fill-normal);
--wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
--wa-color-border-loud: var(--wa-color-warning-border-loud);
--wa-color-border-normal: var(--wa-color-warning-border-normal);
--wa-color-border-quiet: var(--wa-color-warning-border-quiet);
--wa-color-on-loud: var(--wa-color-warning-on-loud);
--wa-color-on-normal: var(--wa-color-warning-on-normal);
--wa-color-on-quiet: var(--wa-color-warning-on-quiet);
}
.wa-danger {
--wa-color-fill-loud: var(--wa-color-danger-fill-loud);
--wa-color-fill-normal: var(--wa-color-danger-fill-normal);
--wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
--wa-color-border-loud: var(--wa-color-danger-border-loud);
--wa-color-border-normal: var(--wa-color-danger-border-normal);
--wa-color-border-quiet: var(--wa-color-danger-border-quiet);
--wa-color-on-loud: var(--wa-color-danger-on-loud);
--wa-color-on-normal: var(--wa-color-danger-on-normal);
--wa-color-on-quiet: var(--wa-color-danger-on-quiet);
}
}
/* Required utilities */
@layer wa-native {
/* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
html {
box-sizing: border-box;
margin: 0;
padding: 0;
tab-size: 4;
background-color: var(--wa-color-surface-default);
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
min-height: 100vh;
margin: 0;
padding: 0;
color: var(--wa-color-text-normal);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
/* #endregion */
/* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
address,
audio,
blockquote,
dd,
details,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
iframe,
ol,
p,
pre,
table,
ul,
video {
margin: 0;
&:has(+ *) {
margin-block-end: var(--wa-content-spacing);
}
}
/* #endregion */
/* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--wa-font-family-heading);
font-weight: var(--wa-font-weight-heading);
line-height: var(--wa-line-height-condensed);
text-wrap: balance;
}
h1 {
font-size: var(--wa-font-size-3xl);
}
h2 {
font-size: var(--wa-font-size-2xl);
}
h3 {
font-size: var(--wa-font-size-xl);
}
h4 {
font-size: var(--wa-font-size-l);
}
h5 {
font-size: var(--wa-font-size-m);
}
h6 {
font-size: var(--wa-font-size-xs);
}
p {
text-wrap: wrap;
}
@supports (text-wrap: pretty) {
p {
text-wrap: pretty;
}
}
blockquote {
padding: var(--wa-space-xl);
color: var(--wa-color-text-quiet);
font-family: var(--wa-font-family-longform);
font-size: var(--wa-font-size-larger);
border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
}
hr {
margin: var(--wa-content-spacing) 0;
border: none;
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
figcaption {
margin-block-start: var(--wa-space-xs);
color: var(--wa-color-text-quiet);
font-size: var(--wa-font-size-smaller);
line-height: var(--wa-line-height-condensed);
}
/* #endregion */
/* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
ul,
ol {
padding: 0;
}
li > ul,
li > ol {
margin-inline-start: 0.25em;
}
ul {
list-style: disc;
}
li {
margin-inline-start: 1.125em;
padding: 0;
}
/* `ul` markers are graphical (3:1 contrast threshold); `ol` markers are text
(4.5:1). Numerals also wear transparency more than discs, so they keep more
contrast. `currentColor` lets markers ride along when text color changes. */
ul > li::marker {
color: color-mix(in oklch, currentColor 40%, transparent);
}
ol > li::marker {
color: color-mix(in oklch, currentColor 60%, transparent);
}
dt {
font-weight: var(--wa-font-weight-bold);
}
menu {
list-style: none;
margin: 0;
padding: 0;
& > li {
margin: 0;
}
}
/* #endregion */
/* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
strong,
b {
font-weight: var(--wa-font-weight-bold);
}
em,
i {
font-style: italic;
}
u {
text-decoration-line: underline;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
s {
text-decoration-line: line-through;
text-decoration-thickness: 0.09375em;
}
ins {
text-decoration-color: var(--wa-color-success-on-quiet);
text-decoration-line: underline;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
del {
color: color-mix(in oklab, currentColor, transparent 10%);
text-decoration-color: var(--wa-color-danger-on-quiet);
text-decoration-line: line-through;
text-decoration-thickness: 0.09375em;
}
mark {
padding: 0.125em 0.25em;
color: var(--wa-color-warning-on-quiet);
background-color: var(--wa-color-warning-fill-quiet);
border-radius: var(--wa-border-radius-s);
}
small {
font-size: var(--wa-font-size-smaller);
}
sub,
sup {
font-size: var(--wa-font-size-smaller);
line-height: 0;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
abbr[title] {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
cursor: help;
}
kbd {
padding: 0.125em 0.25em;
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
border-radius: var(--wa-border-radius-s);
box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);
wa-icon {
vertical-align: -2px;
}
}
/* #endregion */
/* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a {
color: var(--wa-color-text-link);
text-decoration: var(--wa-link-decoration-default);
-webkit-text-decoration: var(--wa-link-decoration-default);
text-decoration-thickness: 0.09375em;
text-underline-offset: 0.125em;
}
*:is([appearance~='accent'], .wa-accent) {
a,
a:hover {
color: currentColor;
}
}
a:hover {
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
text-decoration: var(--wa-link-decoration-hover);
-webkit-text-decoration: var(--wa-link-decoration-hover);
}
a:focus,
button:focus {
outline: none;
}
a:focus-visible,
button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* #endregion */
/* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
code,
samp,
var {
padding: 0.125em 0.25em;
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
background-color: var(--wa-color-overlay-inline);
border-radius: var(--wa-border-radius-s);
}
pre {
padding: var(--wa-space-m);
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
white-space: pre;
background-color: var(--wa-color-overlay-inline);
border-radius: var(--wa-panel-border-radius);
overflow-x: auto;
/* Remove overlapping styles for child code elements */
& code,
& samp,
& var {
padding: 0;
font-size: 1em;
background-color: transparent;
}
/* Print styles */
@media print {
background: none;
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
}
/* #endregion */
/* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
img,
svg,
picture,
video {
max-width: 100%;
height: auto;
}
img,
picture,
video {
border-radius: var(--wa-border-radius-m);
}
embed,
iframe,
object {
max-width: 100%;
}
iframe {
border: none;
}
/* #endregion */
/* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table {
width: 100%;
font-variant-numeric: tabular-nums;
border: none;
border-collapse: collapse;
}
caption {
color: var(--wa-color-text-quiet);
font-size: var(--wa-font-size-smaller);
&:has(+ *) {
margin-block-end: 0.75em;
}
}
tbody {
tr {
border-top: solid var(--wa-border-width-s) var(--wa-color-border-quiet);
:where(table.wa-zebra-rows) &:nth-child(odd) {
background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
}
:where(table.wa-hover-rows) & {
@media (hover: hover) {
&:hover {
background-color: var(--wa-color-fill-quiet);
&,
+ tr {
border-top-color: var(--wa-color-border-normal);
}
}
}
}
}
}
td,
th {
padding: 0.75em;
text-align: start;
vertical-align: top;
}
th {
padding-block: 0.75em;
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-bold);
border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
}
/* #endregion */
/* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
details {
padding: 0;
background-color: var(--wa-color-surface-default);
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
border-radius: var(--wa-panel-border-radius);
overflow-anchor: none;
summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--wa-space-m);
border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
cursor: pointer;
user-select: none;
-webkit-user-select: none;
> * {
margin: 0;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
}
}
&[open] {
padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);
summary {
margin-inline: calc(-1 * var(--wa-space-m));
border-end-start-radius: 0;
border-end-end-radius: 0;
}
}
&::details-content {
box-sizing: border-box; /* Ensure contents don't overflow */
}
/* Print styles */
@media print {
background: none;
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
summary {
list-style: none;
}
}
}
/* Replace the summary marker */
details summary {
&::marker,
&::-webkit-details-marker {
display: none;
}
&::after {
content: '';
background-color: var(--wa-color-text-quiet);
mask: url("data:image/svg+xml;utf8,")
center no-repeat;
width: 1rem;
height: 1rem;
rotate: 0deg;
}
&:dir(rtl)::after {
rotate: 180deg;
}
}
details[open] summary::after {
rotate: 90deg;
}
/* #endregion */
/* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
dialog {
flex-direction: column;
align-items: start;
width: 32rem;
max-width: calc(100% - var(--wa-space-l));
padding: var(--wa-space-l);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-panel-border-radius);
border: none;
box-shadow: var(--wa-shadow-l);
transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);
/* Center the dialog */
margin: auto;
inset: 0;
&[open] {
display: flex;
}
&:focus {
outline: none;
}
}
dialog::backdrop {
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
}
/* #endregion */
/* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
label {
display: inline-block;
position: relative;
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
&:has(
input:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='reset'],
[type='submit']
),
textarea,
select
) {
width: 100%;
}
& + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
& > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
margin-block-start: 0.5em;
}
}
/* #endregion */
/* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
fieldset {
padding: var(--wa-space-l);
padding-block-start: calc(var(--wa-space-l) - 0.5em);
border: solid 1px var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-m);
}
legend {
padding: 0;
padding-inline: var(--wa-space-xs);
font-weight: var(--wa-form-control-label-font-weight);
}
/* #endregion */
/* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='file'],
a.wa-button {
/* We allow modifier classes on ,
* but these selectors ensure the styles only apply to
* the file selector button in the user agent's shadow root */
&:not(input[type='file']),
&::file-selector-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-font-weight-action);
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
border-style: var(--wa-border-style);
border-width: max(1px, var(--wa-form-control-border-width));
border-radius: var(--wa-form-control-border-radius);
transition-property: background, border, box-shadow, color;
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
/* Default styles for standard buttons */
&:not(input[type='file']) {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
&:not(:disabled) {
@media (hover: hover) {
&:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
transform: var(--wa-button-transform-hover);
}
}
&:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
transform: var(--wa-button-transform-active);
}
@media (prefers-reduced-motion: reduce) {
&:hover,
&:active {
transform: none;
}
}
}
}
/* Default styles for file selector buttons */
&:is(input[type='file']) {
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled) {
&::file-selector-button:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&::file-selector-button:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
}
}
/* Modifier classes */
&.wa-plain {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-outlined {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-filled {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&:not(input[type='file']):active,
&::file-selector-button:active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
}
&.wa-outlined {
&:not(input[type='file']),
&::file-selector-button {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
}
&.wa-accent {
&:not(input[type='file']),
&::file-selector-button {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
}
&:not(:disabled) {
&:not(input[type='file']):hover,
&::file-selector-button:hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
}
&:not(input[type='file']):active,
&::file-selector-button:active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
}
}
}
&.wa-pill {
&:not(input[type='file']),
&::file-selector-button {
border-radius: var(--wa-border-radius-pill);
}
}
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Wrap in :is() so that Safari doesn't stop parsing this block */
&:is(::-moz-focus-inner) {
border: 0;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
/* When disabled, prevent mouse events from bubbling up from children */
* {
pointer-events: none;
}
}
/* Adds space between icons and adjacent elements
* Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
& > wa-icon:has(+ *) {
margin-inline-end: 0.75em;
}
& > * + wa-icon {
margin-inline-start: 0.75em;
}
}
/* #endregion */
/* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
input[type='file'] {
display: block;
max-inline-size: 100%;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
border-radius: var(--wa-border-radius-m);
cursor: pointer;
}
/* #endregion */
/* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
input[type='checkbox'],
label:has(input[type='checkbox']),
input[type='radio'],
label:has(input[type='radio']) {
display: inline-flex;
width: fit-content;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
user-select: none;
-webkit-user-select: none;
&,
+ label {
cursor: pointer;
}
&:disabled,
&:has(:disabled) {
opacity: 0.5;
cursor: not-allowed;
}
}
input[type='checkbox'],
input[type='radio'] {
appearance: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
margin: 0;
margin-inline-end: 0.5em;
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-style: var(--wa-border-style);
border-width: var(--wa-form-control-border-width);
transition:
background var(--wa-transition-normal),
border-color var(--wa-transition-fast),
box-shadow var(--wa-transition-fast),
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
}
/* Checkbox */
input[type='checkbox'] {
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.8;
border-radius: min(
calc(var(--wa-form-control-toggle-size) * 0.375),
var(--wa-border-radius-s)
); /* min prevents entirely circular checkbox */
&:checked,
&:indeterminate {
color: var(--checked-icon-color);
background-color: var(--wa-form-control-activated-color);
border-color: var(--wa-form-control-activated-color);
}
&:checked::after,
&:indeterminate::after {
content: '';
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
background-color: currentColor;
}
&:checked::after {
mask: url("data:image/svg+xml;utf8,")
center / 1em 1em no-repeat;
}
&:indeterminate::after {
mask: url("data:image/svg+xml;utf8,")
center no-repeat;
}
}
/* Radio */
input[type='radio'] {
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.7;
color: transparent;
border-radius: 50%;
&:checked {
color: var(--checked-icon-color);
border-color: var(--wa-form-control-activated-color);
}
&:checked::after {
content: '';
aspect-ratio: 1;
width: 100%;
scale: var(--checked-icon-scale);
background-color: currentColor;
border-radius: 50%;
}
}
/* #endregion */
/* #region Text Fields + Textareas + Selects */
input:not(
/* Exclude inputs that don't accept text */
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
), textarea, select {
width: 100%;
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
color: var(--wa-form-control-value-color);
font-size: var(--wa-form-control-value-size);
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-style: var(--wa-form-control-border-style);
border-width: var(--wa-form-control-border-width);
border-radius: var(--wa-form-control-border-radius);
transition:
background-color var(--wa-transition-normal),
border-color var(--wa-transition-normal),
outline-color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
outline-offset: var(--wa-focus-ring-offset);
cursor: text;
&::placeholder {
color: var(--wa-form-control-placeholder-color);
user-select: none;
-webkit-user-select: none;
}
&:focus-visible {
outline-color: var(--wa-color-focus);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.wa-outlined {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
&.wa-filled {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
&.wa-outlined {
border-color: var(--wa-form-control-border-color);
}
}
&.wa-pill {
border-radius: var(--wa-border-radius-pill);
}
}
/* Textarea */
textarea {
height: auto;
min-height: var(--wa-form-control-height);
scroll-padding-block: var(--wa-form-control-padding-block);
padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
line-height: var(--wa-line-height-normal);
resize: vertical;
}
/* Select */
select {
--icon-caret: url("data:image/svg+xml;utf8,");
appearance: none;
position: relative;
min-width: 0;
background-image: var(--icon-caret), var(--icon-caret);
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
background-size: 1rem 1rem;
text-overflow: ellipsis;
padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
overflow: hidden;
cursor: pointer;
&[multiple] {
height: auto;
background-image: none;
padding-inline: var(--wa-form-control-padding-inline);
}
}
/* #endregion */
/* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
input[type='color'] {
display: block;
block-size: var(--wa-form-control-height);
inline-size: var(--wa-form-control-height);
padding: calc(var(--wa-form-control-border-width) * 2);
font-size: 1em;
background: transparent;
border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);
cursor: pointer;
forced-color-adjust: none;
&::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: inherit;
}
&::-webkit-color-swatch {
border: none;
border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
}
/* #endregion */
/* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
input[type='range'] {
--thumb-width: 1.4em;
--thumb-height: 1.4em;
--track-size: 0.5em;
-webkit-appearance: none;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: var(--track-size);
margin: 0;
font-size: inherit;
line-height: var(--wa-form-control-height);
vertical-align: middle;
background-color: var(--wa-color-neutral-fill-normal);
border-radius: calc(var(--track-size) / 2);
&::-webkit-slider-runnable-track {
width: 100%;
height: var(--track-size);
border: none;
border-radius: 999px;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--thumb-width);
height: var(--thumb-height);
margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);
background-color: var(--wa-form-control-activated-color);
border: solid 0.125em var(--wa-color-surface-default);
border-radius: 50%;
transition-property: background-color, border-color, box-shadow, color;
transition-duration: var(--wa-transition-normal);
transition-timing-function: var(--wa-transition-easing);
}
&:enabled {
&:focus-visible::-webkit-slider-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&::-webkit-slider-thumb {
cursor: pointer;
}
&::-webkit-slider-thumb:active {
cursor: grabbing;
}
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-progress {
height: var(--track-size);
background-color: var(--wa-color-neutral-fill-normal);
border-radius: 3px;
}
&::-moz-range-track {
width: 100%;
height: var(--track-size);
background-color: var(--wa-color-neutral-fill-normal);
border: none;
border-radius: 999px;
}
&::-moz-range-thumb {
width: var(--thumb-width);
height: var(--thumb-height);
background-color: var(--wa-form-control-activated-color);
border: solid 0.125em var(--wa-color-surface-default);
border-radius: 50%;
transition-property: background-color, border-color, box-shadow, color;
transition-duration: var(--wa-transition-normal);
transition-timing-function: var(--wa-transition-easing);
}
&:enabled {
&:focus-visible::-moz-range-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&::-moz-range-thumb {
cursor: pointer;
}
&::-moz-range-thumb:active {
cursor: grabbing;
}
}
}
label > input[type='range'] {
margin-block-start: 1em;
}
input[type='range']:focus {
outline: none;
}
input[type='range']:disabled {
opacity: 0.5;
cursor: not-allowed;
&::-webkit-slider-thumb {
cursor: not-allowed;
}
&::-moz-range-thumb {
cursor: not-allowed;
}
}
/* #endregion */
/* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
progress {
--indicator-color: var(--wa-color-brand-fill-loud);
width: 100%;
height: 1rem;
overflow: hidden;
color: var(--wa-color-brand-on-loud);
background-color: var(--wa-color-neutral-fill-normal);
border-radius: var(--wa-border-radius-pill);
&::-webkit-progress-bar {
background: transparent;
}
&[value]::-webkit-progress-value {
background-color: var(--indicator-color);
}
&::-moz-progress-bar {
background-color: var(--indicator-color);
}
}
/* Indeterminate */
progress:not([value]) {
padding-left: var(--inset-inline-start);
animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
&::-webkit-progress-bar {
background-color: var(
--indicator-color
); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
}
}
@keyframes wa-fade-in {
from {
opacity: 0;
}
}
/* For some reason Chrome fiercely resists animations on this pseudo
so we had to do it with padding on