diff --git a/_includes/forms/form--select.html b/_includes/forms/form--select.html new file mode 100644 index 0000000..732c154 --- /dev/null +++ b/_includes/forms/form--select.html @@ -0,0 +1,152 @@ +{% capture component %} + {% assign options = include.options | split: "," %} + {% if include.multiple %} +
+ {{ include.label }} + {% if include.required %} + + required + {% endif %} + + +
+ {% for option in options %} + {% assign keyval = option | split: "|" %} +
+ + +
+ {% endfor %} +
+ + {% if include.description %} + {% include atoms/spacer.html size="2" %} + {% comment %}Divs ensure aria-describedby is the same level in the DOM for copying.{% endcomment %} +
+
+

{{ include.description }}

+
+
+ {% endif %} +
+ {% else %} +
+ + + {% if include.description %} +

{{ include.description }}

+ {% endif %} +
+ {% endif %} +{% endcapture %} + +{% capture name %}Select{% endcapture %} + +{% capture liquid %}{% raw %} + {% include forms/form--select.html + classes="" + description="Users do not love default multi-selects, so this uses checkboxes." + label="Favorite states" + multiple=true + name="states" + options=states + required=false + %} +{% endraw %}{% endcapture %} + +{% capture usage %} +#### General guidance + +A select component is used to capture results when you want users to pick from a +pre-selected list of options. + +If the user is to select one option among many, set the 'multiple' prop to false, +which will show a `` + +To make a list of options to pass into the 'options' prop, format a liquid capture +like this: +```{% raw %} +{% capture states %} +AL|Alabama, AK|Alaska, AS|American Samoa, AZ|Arizona, AR|Arkansas, +CA|California, CO|Colorado, CT|Connecticut, +DE|Delaware, DC|Dist of Columbia, +FL|Florida, +GA|Georgia, GU|Guam, +HI|Hawaii, +ID|Idaho, IL|Illinois, IN|Indiana, IA|Iowa, +KS|Kansas, KY|Kentucky, +LA|Louisiana, +ME|Maine, MD|Maryland, MA|Massachusetts, MI|Michigan, MN|Minnesota, UM|Minor Outlying Islands, MS|Mississippi, MO|Missouri, MT|Montana, +NE|Nebraska, NV|Nevada, NH|New Hampshire, NJ|New Jersey, NM|New Mexico, NY|New York, NC|North Carolina, ND|North Dakota, MP|Northern Mariana Islands, +OH|Ohio, OK|Oklahoma, OR|Oregon, +PA|Pennsylvania, PR|Puerto Rico, +RI|Rhode Island, +SC|South Carolina, SD|South Dakota, +TN|Tennessee, TX|Texas, +UT|Utah, +VT|Vermont, VA|Virginia, VI|U.S. Virgin Islands, +WA|Washington, WV|West Virginia, WI|Wisconsin, WY|Wyoming +{% endcapture %}{% endraw %} +``` + +Each row is a pipe-separated key|value pair, and rows are separated by a comma and +a space. +{% endcapture %} + +{% capture accessibility %} +Both checkboxes and the select element are recognized by most assistive technologies. +The more you change the markup the greater risk you have of breaking the experience +for somebody. +{% endcapture %} + +{% capture props %} +classes| css classes applied to parent| color--main-dark, +description| Longer textual description or help text| Selects can have description text, +label| text as short description of what to fill out| Primary email, +multiple| true or false for whether you can choose more than one option| true, +name| input name passed as the key for the value in the form| languages, +options| A pipe-and-comma-separated list of key/value pairs to choose from| langs, +required| Whether it is required to fill this out in order to submit the form| true +{% endcapture %} + +{% assign classes = "background-color--main-light, font-size--2em" | split: ", " %} + +{% if include.mode == "docblock" %} + {% include molecules/docblock.html + accessibility=accessibility + classes=classes + html=component + liquid=liquid + name=name + props=props + source=include + usage=usage + %} +{% else %} + {{ component }} +{% endif %} + diff --git a/assets/css/pre-commit-dependency.css b/assets/css/pre-commit-dependency.css index 3634bd5..6a8c09b 100644 --- a/assets/css/pre-commit-dependency.css +++ b/assets/css/pre-commit-dependency.css @@ -1 +1 @@ -@font-face{font-display:optional;font-family:'Public Sans';font-style:normal;font-weight:100 900;src:url("../fonts/public_sans/public_sans_variable.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Public Sans';font-style:italic;font-weight:100 900;src:url("../fonts/public_sans/public_sans_variable_italic.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Emberly';font-style:normal;font-weight:100 900;src:url("../fonts/emberly/emberly-variable.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Emberly';font-style:italic;font-weight:100 900;src:url("../fonts/emberly/emberly-variable-italic.woff2") format("woff2")}:root{--content--footnotes: 'Footnotes';--line-height--default: 1.425;--line-height--heading: 1;--box-shadow--default: 0 .1em .75em rgba(99,99,99,.625);--font-family--input: 'Public Sans', Arial, Helvetica, sans-serif;--font-family--monospace: 'courier new', courier, monospace;--font-family--primary: 'Public Sans', Arial, Helvetica, sans-serif;--font-family--secondary: 'Emberly', Georgia, Times New Roman, serif;--layout--content-area: 1200px;--spacing--single: 0.625rem;--border--default: 1px solid #ccc;--text-shadow--default: 0 0 2px rgba(0,0,0,.325);--transition--default: background-color .3s ease-in;--border-radius--default: .25em;--color--black: #222;--color--grey-dark: #555;--color--grey: #aaa;--color--grey-light: #f7f7f7;--color--white: #fff;--color--main: #00799E;--color--main-dark: #002733;--color--main-light: #ccf4ff;--color--second: #E32416;--color--second-dark: #331716;--color--second-light: #ffcfcc;--color--third: #00afb9;--color--third-dark: #003033;--color--third-light: #ccfcff;--color--accent: #6100a7;--color--status: #004085;--color--status-background: #cce5ff;--color--warning: #856404;--color--warning-background: #fff3cd;--color--error: #721c24;--color--error-background: #f8d7da}[lang="de"]{--content--error: 'Fehler: '}html,button,input,select,textarea{font-family:var(--font-family--input)}body,.font-family--primary{font-family:var(--font-family--primary)}h1,h2,.font-family--secondary{font-family:var(--font-family--secondary)}code,pre,.font-family--monospace{font-family:var(--font-family--monospace)}article,aside,blockquote,details,figcaption,figure,footer,header,nav,section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block}body:not(.page--front)>main>section,body.page--front>main>section:nth-child(n+2){content-visibility:auto;contain-intrinsic-size:850px}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}canvas,embed,iframe,img,object,picture,svg,video{max-width:100%}html{font-size:100%;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-y:scroll;text-rendering:optimizeLegibility}body{background-color:var(--color--white);color:var(--color--black);font-size:16px;font-weight:200;line-height:var(--line-height--default);margin:0;scroll-behavior:smooth}@media (max-width: 1023px){body{word-wrap:break-word;hyphens:auto}}@media all and (prefers-color-scheme: dark){body{background-color:var(--color--grey-dark);background-image:none;filter:grayscale(100%) invert(100%)}figure img{filter:invert(100%)}}@media all and (prefers-reduced-motion: reduce){:root{--transition--default: none}}main{font-size:1.25em}a{transition:var(--transition--default);text-decoration:underline}a:link{color:var(--color--main)}a:visited{color:var(--color--accent)}a:hover{color:var(--color--second)}a:active{color:var(--color--second)}a:focus{outline:0 none;text-decoration:underline dotted}abbr[title]{border-bottom:1px dotted;cursor:help;white-space:nowrap}address{font-style:normal;text-align:left}b,strong{font-weight:bold}blockquote{font-size:2em;font-weight:300;margin:0;padding:1em 0;position:relative}@media all and (max-width: 1023px){blockquote{font-size:1.25em}}code,pre{font-size:1em}pre{padding:calc(2 * var(--spacing--single));white-space:pre-wrap;word-wrap:break-word}dd{margin:0 0 0 calc(4 * var(--spacing--single))}dfn{font-style:italic}details{background-color:rgba(255,255,255,0.5);border-radius:var(--border-radius--default);margin:calc(2 * var(--spacing--single)) auto;padding:calc(0.5 * var(--spacing--single)) calc(1.5 * var(--spacing--single))}details>summary{border-radius:var(--border-radius--default);display:block;cursor:pointer;font-weight:500;line-height:var(--line-height--heading);padding:calc(2 * var(--spacing--single)) calc(4 * var(--spacing--single)) calc(2 * var(--spacing--single)) calc(1 * var(--spacing--single));position:relative}details>summary::marker{display:none}details>summary:focus{box-shadow:0 0 3px;outline:none}details>summary:hover,details>summary:active,details>summary:focus-within,details[open]>summary{background-color:rgba(255,255,255,0.5)}details>summary::after{background-color:var(--color--white);border-radius:50%;color:var(--color--accent);content:"+";padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));position:absolute;right:calc(0.5 * var(--spacing--single));text-align:center;top:calc(1.5 * var(--spacing--single))}details>summary:hover::after,details>summary:active::after,details>summary:focus-within::after,details[open]>summary::after{background-color:var(--color--accent);color:var(--color--white)}details[open]{padding-bottom:calc(2 * var(--spacing--single))}details[open]>summary{margin-bottom:calc(1 * var(--spacing--single))}details[open]>summary:after{content:"-"}div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}figure{display:inline-block;min-width:1px;margin:0;max-width:100%}figcaption{font-size:0.75em}h1,.heading--h1{font-size:4.5em;font-weight:500;line-height:var(--line-height--heading);margin:0;overflow-wrap:break-word;word-wrap:break-word}@media all and (max-width: 770px){h1,.heading--h1{font-size:3em}}h1>a:link,h1>a:visited{color:inherit;text-decoration:inherit}h2,.heading--h2{font-size:3.5em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}@media all and (max-width: 770px){h2,.heading--h2{font-size:2.5em}}h2:first-child{margin-top:0}h2>a:link,h2>a:visited{color:inherit;text-decoration:inherit}h3,.heading--h3{font-size:2em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}h3:first-child{margin-top:0}h3>a:link,h3>a:visited{color:inherit;text-decoration:inherit}h4{font-size:1.5em;font-weight:400;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}h4:first-child{margin-top:0}h4>a:link,h4>a:visited{color:inherit;text-decoration:inherit}h5{font-size:1.125em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em}h5:first-child{margin-top:0}h5>a:link,h5>a:visited{color:inherit;text-decoration:inherit}h6{font-size:1em;font-weight:600;line-height:var(--line-height--heading);margin:1.5em 0 0.25em}h6:first-child{margin-top:0}h6>a:link,h6>a:visited{color:inherit;text-decoration:inherit}hr{background-color:var(--color--grey-dark);border-width:0;color:var(--color--grey-dark);height:1px;line-height:0;margin:calc(1 * var(--spacing--single)) 0}iframe{border:1px solid var(--color--grey-light)}img,picture{border:0;display:block;height:auto !important;-ms-interpolation-mode:bicubic;line-height:0}mark,.marker{color:var(--color--accent)}p{margin:calc(2.5 * var(--spacing--single)) 0;max-width:75ch;overflow-wrap:break-word;word-wrap:break-word}p:first-child{margin-top:0}p:last-child{margin-bottom:0}q{quotes:none}q::before,q::after{content:""}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg:not(:root){overflow:hidden}table{background-color:transparent;border-spacing:0;margin:0 0 1.5em;text-align:left;border:0 none}td,th{padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));border:0 none}th{font-weight:500}thead{background-color:var(--color--grey-dark);color:var(--color--white)}thead th:not(:last-child){border-right:1px solid var(--color--white)}tbody th{background-color:var(--color--grey-light);border-bottom:1px solid var(--color--grey);color:var(--color--grey-dark);padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single));vertical-align:top}tbody td{border-bottom:1px solid var(--color--grey);vertical-align:middle}tbody td:not(:last-child){border-right:1px solid var(--color--grey-light)}tbody tr:nth-child(even){background-color:rgba(255,255,255,0.5)}ul,ol{margin:0 0 0 1.2em;padding:0}ul ul,ol ul{padding:0 0 0 1.2em}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}video{height:auto}fieldset{background-color:rgba(255,255,255,0.5);border:1px solid var(--color--grey);border-radius:var(--border-radius--default);margin:calc(2 * var(--spacing--single)) 0;padding:calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}legend{font-size:0.625em;font-weight:900;line-height:1;padding:0 calc(2 * var(--spacing--single));text-align:center}button,input,select,textarea{background-color:var(--color--white);border:1px solid var(--color--grey);border-radius:var(--border-radius--default);box-sizing:border-box;color:var(--color--grey-dark);font-size:1rem;font-weight:400;margin:0;max-width:100%;padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));transition:var(--transition--default);vertical-align:middle}@media all and (max-width: 670px){button,input,select,textarea{max-width:280px}}@media all and (min-width: 671px){input:not([type]),input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="url"],input[size],select{max-width:415px;width:100%}textarea:not([cols]){max-width:700px;width:100%}}button,input{line-height:1}textarea{max-height:inherit}.button,.button:link,button{background-color:var(--color--main);border:var(--border--default);border-radius:var(--border-radius--default);color:var(--color--white);cursor:pointer;display:inline-block;font-size:1em;font-weight:900;margin:0 calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single));padding:calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single));text-align:center;text-decoration:none;transition:var(--transition--default)}.button:visited{color:var(--color--white)}.button:hover,button:hover,.button.active,.button:active,button:active{background-color:var(--color--main-light);color:currentColor}.button:focus,button:focus{outline:1px dashed;outline-offset:1px}.button.disabled,.button[disabled],button.disabled,button[disabled]{background-color:var(--color--grey-dark);color:var(--color--white);cursor:default}a.button{text-decoration:underline}a.button:hover,a.button:active,a.button:focus-within{text-decoration:underline dashed}input[type="checkbox"],input[type="radio"]{cursor:pointer}input[type="checkbox"]+label,input[type="radio"]+label{cursor:pointer}input:checked+label{font-weight:900}input[type="file"]{padding:2px}input[type="file"]::-webkit-file-upload-button{font-size:0.95em;margin:0}input[type="image"]{border:0 none}label{display:block}.align-content--flex-start{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.align-content--flex-end{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.align-content--center{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.align-content--space-between{-webkit-align-content:space-between;-ms-flex-line-pack:justify;align-content:space-between}.align-content--space-around{-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}.align-content--space-evenly{-webkit-align-content:space-around;-ms-flex-line-pack:space-evenly;align-content:space-evenly}.align-content--stretch{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}.align-items--flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-moz-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-items--flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-moz-box-align:end;-ms-flex-align:end;align-items:flex-end}.align-items--center{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.align-items--baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-moz-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.align-items--stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.align-self--flex-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.align-self--flex-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.align-self--center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.align-self--baseline{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline}.align-self--stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.background-size--cover{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.cursor--pointer{cursor:pointer}.display--none{display:none}.display--block{display:block}.display--flex{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.display--inline-block{display:inline-block}.flex--auto{-webkit-box-flex:1;-webkit-flex:auto;-moz-box-flex:1;-ms-flex:auto;flex:auto}.flex--initial{-webkit-box-flex:0;-webkit-flex:0;-moz-box-flex:0;-ms-flex:0;flex:0}.flex--none{-webkit-box-flex:0;-webkit-flex:none;-moz-box-flex:0;-ms-flex:none;flex:none}.flex--1{-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--2{-webkit-box-flex:2;-webkit-flex:2;-moz-box-flex:2;-ms-flex:2;flex:2;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--3{-webkit-box-flex:3;-webkit-flex:3;-moz-box-flex:3;-ms-flex:3;flex:3;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--4{-webkit-box-flex:4;-webkit-flex:4;-moz-box-flex:4;-ms-flex:4;flex:4;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--5{-webkit-box-flex:5;-webkit-flex:5;-moz-box-flex:5;-ms-flex:5;flex:5;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--6{-webkit-box-flex:6;-webkit-flex:6;-moz-box-flex:6;-ms-flex:6;flex:6;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex-direction--row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex-direction--row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-moz-box-orient:horizontal;-moz-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-direction--column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-direction--column-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap--nowrap{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap--wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap--wrap-reverse{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.font-style--italic{font-style:italic}.font-weight--100{font-weight:100}.font-weight--600{font-weight:600}.font-weight--900{font-weight:900}.justify-content--flex-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.justify-content--flex-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-content--center{-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-content--space-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-content--space-around{-webkit-justify-content:space-around;-ms-flex-pack:justify;justify-content:space-around}.justify-content--space-evenly{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-evenly;justify-content:space-evenly}.justify-content--stretch{-webkit-box-pack:stretch;-webkit-justify-content:stretch;-moz-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch}.list-style--none{list-style:none}.overflow-x--scroll{overflow-x:scroll}.position--relative{position:relative}.position--absolute{position:absolute}.position--fixed{position:fixed}.text-align--left{text-align:left}.text-align--right{text-align:right}.text-align--center{text-align:center}.text-align--justify{text-align:justify}.text-transform--capitalize{text-transform:capitalize}@media all and (prefers-reduced-motion: no-preference){.animation-name--reveal.js--animation--observed{animation-name:reveal}}@media all and (prefers-reduced-motion: no-preference){.js--animation .animation-name--reveal{opacity:0}.js--animation .animation-name--reveal.js--animation--observed{opacity:1;animation-duration:2s;animation-name:reveal}}.js--event--click--toggle[class*="animation-name--"]{animation-name:none}@keyframes reveal{from{opacity:0;-webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;-webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.background-color--black{background-color:var(--color--black)}.background-color--grey-dark{background-color:var(--color--grey-dark)}.background-color--grey{background-color:var(--color--grey)}.background-color--grey-light{background-color:var(--color--grey-light)}.background-color--white{background-color:var(--color--white)}.background-color--main{background-color:var(--color--main)}.background-color--main-dark{background-color:var(--color--main-dark)}.background-color--main-light{background-color:var(--color--main-light)}.background-color--second{background-color:var(--color--second)}.background-color--second-dark{background-color:var(--color--second-dark)}.background-color--second-light{background-color:var(--color--second-light)}.background-color--third{background-color:var(--color--third)}.background-color--third-dark{background-color:var(--color--third-dark)}.background-color--third-light{background-color:var(--color--third-light)}.background-color--accent{background-color:var(--color--accent)}.background-color--status{background-color:var(--color--status)}.background-color--status-background{background-color:var(--color--status-background)}.background-color--warning{background-color:var(--color--warning)}.background-color--warning-background{background-color:var(--color--warning-background)}.background-color--error{background-color:var(--color--error)}.background-color--error-background{background-color:var(--color--error-background)}.color--grey{color:var(--color--grey)}.color--white{color:var(--color--white)}.color--white a{color:var(--color--white)}.color--main{color:var(--color--main)}.color--main-dark{color:var(--color--main-dark)}.color--second-dark{color:var(--color--second-dark)}.color--third-dark{color:var(--color--third-dark)}.color--accent{color:var(--color--accent)}.a11y--visually-hidden:not(:focus-within){clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px;word-wrap:normal}@media all and (max-width: 1023px){.background-image-display-mobile--hide{background-image:none !important}}.border--default{border:var(--border--default)}.border-radius--default{border-radius:var(--border-radius--default)}.bottom--0{bottom:0}.box-shadow--default{box-shadow:var(--box-shadow--default)}.box-shadow--lifted-edges,pre.highlight{position:relative}.box-shadow--lifted-edges:before,pre.highlight:before,.box-shadow--lifted-edges:after,pre.highlight:after{bottom:calc(1.5 * var(--spacing--single));box-shadow:0 calc(1.5 * var(--spacing--single)) calc(1 * var(--spacing--single)) rgba(0,0,0,0.75);content:"";left:calc(1 * var(--spacing--single));max-width:300px;position:absolute;top:80%;transform:rotate(-3deg);width:50%;z-index:-1}.box-shadow--lifted-edges:after,pre.highlight:after{transform:rotate(3deg);right:calc(1 * var(--spacing--single));left:auto}.left--0{left:0}.line-height--default{line-height:var(--line-height--default)}.line-height--heading{line-height:var(--line-height--heading)}.order--neg1{order:-1}.right--0{right:0}.text-shadow--default{text-shadow:var(--text-shadow--default)}.top--0{top:0}.z-index--1{z-index:1}.z-index--3{z-index:3}.z-index--4{z-index:4}.z-index--9{z-index:9}.z-index--9998{z-index:9998}.font-size--p75em{font-size:0.75em}.font-size--p875em{font-size:0.875em}.font-size--1p25em{font-size:1.25em}.font-size--1p5em{font-size:1.5em}.font-size--2em{font-size:2em}.text-align--center figure,.text-align--center img,.text-align--center p,.text-align--center picture,.text-align--center svg,.text-align--center video,.text-align--justify figure,.text-align--justify img,.text-align--justify p,.text-align--justify picture,.text-align--justify svg,.text-align--justify table,.text-align--justify video,[class*="text-align--"] .text-align--center img,[class*="text-align--"] .text-align--center picture{margin:0 auto var(--spacing--single)}.text-align--center figure img,.text-align--center figure picture,.text-align--justify figure img,.text-align--justify figure picture{margin-bottom:0}.text-align--left figure,.text-align--left img,.text-align--left picture,.text-align--left svg,.text-align--left video,.text-align--right figure,.text-align--right img,.text-align--right picture,.text-align--right svg,.text-align--right table,.text-align--right video{margin:0}.text-align--left p,.text-align--right p{margin:0 0 var(--spacing--single)}.text-align--center p:last-child,.text-align--justify p:last-child,.text-align--left p:last-child,.text-align--right p:last-child{margin-bottom:0}main{min-height:37vh}@media all and (max-width: 1023px){.layout--column--empty{display:none}}@media all and (max-width: 1023px){.layout--column{min-width:270px}}@media all and (max-width: 767px){.layout--column{padding-top:calc(2 * var(--spacing--single))}.layout--column:last-child{padding-bottom:calc(2 * var(--spacing--single))}}@media all and (max-width: 1023px){.layout--row{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media all and (max-width: 767px){.layout--row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.layout--stripe{padding:calc(10 * var(--spacing--single)) calc(2 * var(--spacing--single))}.layout--strip{padding:calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}@media all and (max-width: 767px){.layout--stripe{padding:calc(6 * var(--spacing--single)) calc(2 * var(--spacing--single))}}.layout--stripe--inner{margin:0 auto;max-width:var(--layout--content-area);position:relative;z-index:2}.layout--stripe--inner.z-index--3{z-index:3}.layout--hide--no-javascript{display:none}.js .layout--hide--no-javascript{display:inherit}.layout--multiple--horizontal{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;margin-left:0;margin-right:0}.layout--multiple--horizontal{flex-direction:column}.layout--multiple--horizontal>*{box-sizing:border-box;margin:0 0 calc(4 * var(--spacing--single))}@media all and (min-width: 768px){.layout--multiple--horizontal{flex-direction:row;flex-wrap:wrap}.layout--multiple--horizontal>*{flex-basis:calc(33% - (4 * var(--spacing--single)));margin:0 calc(2 * var(--spacing--single)) calc(4 * var(--spacing--single));max-width:calc(33% - (4 * var(--spacing--single)));min-width:205px}}.margin-horizontal--0{margin-left:0;margin-right:0}.margin-horizontal--1{margin-left:calc(0.5 * var(--spacing--single));margin-right:calc(0.5 * var(--spacing--single))}.margin-horizontal--2{margin-left:calc(1 * var(--spacing--single));margin-right:calc(1 * var(--spacing--single))}.margin-horizontal--4{margin-left:calc(2 * var(--spacing--single));margin-right:calc(2 * var(--spacing--single))}.margin-horizontal--8{margin-left:calc(4 * var(--spacing--single));margin-right:calc(4 * var(--spacing--single))}.margin-horizontal--16{margin-left:calc(8 * var(--spacing--single));margin-right:calc(8 * var(--spacing--single))}.margin-horizontal--32{margin-left:calc(16 * var(--spacing--single));margin-right:calc(16 * var(--spacing--single))}@media all and (max-width: 767px){.margin-horizontal--collapse{margin-left:0;margin-right:0}}.margin-left--auto{margin-left:auto}.margin-top--auto{margin-top:auto}.margin-vertical--0{margin-bottom:0;margin-top:0}.margin-vertical--1{margin-bottom:calc(0.5 * var(--spacing--single));margin-top:calc(0.5 * var(--spacing--single))}.margin-vertical--2{margin-bottom:calc(1 * var(--spacing--single));margin-top:calc(1 * var(--spacing--single))}.margin-vertical--4,.button.margin-vertical--4,a.button.margin-vertical--4{margin-bottom:calc(2 * var(--spacing--single));margin-top:calc(2 * var(--spacing--single))}.margin-vertical--8{margin-bottom:calc(4 * var(--spacing--single));margin-top:calc(4 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--8{margin-bottom:calc(2 * var(--spacing--single));margin-top:calc(2 * var(--spacing--single))}}.margin-vertical--16{margin-bottom:calc(8 * var(--spacing--single));margin-top:calc(8 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--16{margin-bottom:calc(4 * var(--spacing--single));margin-top:calc(4 * var(--spacing--single))}}.margin-vertical--32{margin-bottom:calc(16 * var(--spacing--single));margin-top:calc(16 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--32{margin-bottom:calc(8 * var(--spacing--single));margin-top:calc(8 * var(--spacing--single))}}.padding-horizontal--0{padding-left:0;padding-right:0}.padding-horizontal--1{padding-left:calc(0.5 * var(--spacing--single));padding-right:calc(0.5 * var(--spacing--single))}.padding-horizontal--2{padding-left:calc(1 * var(--spacing--single));padding-right:calc(1 * var(--spacing--single))}.padding-horizontal--4{padding-left:calc(2 * var(--spacing--single));padding-right:calc(2 * var(--spacing--single))}.padding-horizontal--8{padding-left:calc(4 * var(--spacing--single));padding-right:calc(4 * var(--spacing--single))}.padding-horizontal--16{padding-left:calc(8 * var(--spacing--single));padding-right:calc(8 * var(--spacing--single))}.padding-horizontal--32{padding-left:calc(16 * var(--spacing--single));padding-right:calc(16 * var(--spacing--single))}@media all and (max-width: 767px){.padding-horizontal--collapse{padding-left:0;padding-right:0}}.padding-vertical--0{padding-bottom:0;padding-top:0}.padding-vertical--1{padding-bottom:calc(0.5 * var(--spacing--single));padding-top:calc(0.5 * var(--spacing--single))}.padding-vertical--2{padding-bottom:calc(1 * var(--spacing--single));padding-top:calc(1 * var(--spacing--single))}.padding-vertical--4{padding-bottom:calc(2 * var(--spacing--single));padding-top:calc(2 * var(--spacing--single))}.padding-vertical--8{padding-bottom:calc(4 * var(--spacing--single));padding-top:calc(4 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--8{padding-bottom:calc(2 * var(--spacing--single));padding-top:calc(2 * var(--spacing--single))}}.padding-vertical--16{padding-bottom:calc(8 * var(--spacing--single));padding-top:calc(8 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--16{padding-bottom:calc(4 * var(--spacing--single));padding-top:calc(4 * var(--spacing--single))}}.padding-vertical--32{padding-bottom:calc(16 * var(--spacing--single));padding-top:calc(16 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--32{padding-bottom:calc(8 * var(--spacing--single));padding-top:calc(8 * var(--spacing--single))}}.highlight pre{background-color:var(--color--black);color:var(--color--white)}.highlight .c{color:var(--color--grey-dark)}.highlight .err{background-color:var(--color--error-background);color:var(--color--error)}.highlight .k{color:var(--color--main-light)}.highlight .l{color:var(--color--accent)}.highlight .n{color:var(--color--grey-light)}.highlight .o{color:var(--color--second-light)}.highlight .p{color:var(--color--grey-light)}.highlight .cm{color:var(--color--grey-dark)}.highlight .c1{color:var(--color--grey-dark)}.highlight .gs{font-weight:bold}.highlight .kc{color:var(--color--main-light)}.highlight .kd{color:var(--color--main-light)}.highlight .m{color:var(--color--accent)}.highlight .s{color:var(--color--grey)}.highlight .na{color:var(--color--third-light)}.highlight .nb{color:var(--color--grey-light)}.highlight .no{color:var(--color--main-light)}.highlight .ni{color:var(--color--grey-light)}.highlight .ne{color:var(--color--third-light)}.highlight .nl{color:var(--color--grey-light)}.highlight .nx{color:var(--color--third-light)}.highlight .nt{color:var(--color--second-light)}.highlight .nv{color:var(--color--grey-light)}.highlight .w{color:var(--color--grey-light)}.highlight .sb{color:var(--color--grey)}.highlight .s2{color:var(--color--grey)}.highlight .si{color:var(--color--grey)}.highlight .sx{color:var(--color--grey)}.highlight .s1{color:var(--color--grey)}.highlight .ss{color:var(--color--grey)}.highlight .il{color:var(--color--accent)}.highlight .gu{color:var(--color--grey-dark)}.highlight .gi{color:var(--color--third-light)}.a11y--skip-hide{background:var(--color--main-dark);position:relative;text-align:center}.a11y--skip-hide a{color:var(--color--white);display:block;height:1px;left:-10000px;overflow:hidden;padding:10px;position:absolute;top:auto;width:1px}.a11y--skip-hide a:focus{height:auto;outline:0 none;position:static;width:auto}.alert{border:1px solid;border-radius:var(--border-radius--default);font-style:italic;margin:10px 0;padding:10px}.alert a{color:inherit;font-weight:600}.alert p:first-of-type{margin-top:0}.alert--error{background-color:var(--color--error-background);color:var(--color--error)}.alert--status{background-color:var(--color--status-background);color:var(--color--status)}.alert--warning{background-color:var(--color--warning-background);color:var(--color--warning)}.background-image--gradient--main{background-image:linear-gradient(-5deg, transparent 50%, var(--color--main) 200%)}.background-image--hero-home{background-position:bottom left;background-repeat:no-repeat;min-height:50vw}.webp--disabled .background-image--hero-home{background-image:url("../images/in-css/hero-home.jpg")}.webp--enabled .background-image--hero-home{background-image:url("../images/in-css/hero-home.jpg.webp")}.background-image--hero-standout{background-position:center center;background-repeat:no-repeat}.body-scroll--up .fab{bottom:-200px}.border-spaced>li{border-bottom:1px solid}.border-spaced li:last-child{border-bottom:0 none}@media all and (min-width: 768px){.border-spaced>li{border-right:1px solid;border-bottom:0 none}.border-spaced li:last-child{border-right:0 none}}.browserupgrade{background-color:#1d3141;color:#fff;font-family:Arial, sans-serif;font-size:24px;padding:20px;text-align:left}.browserupgrade a:link,.browserupgrade a:visited{color:#fafafa;text-decoration:underline}.browserupgrade a:hover,.browserupgrade a:hover,.browserupgrade a:hover{color:#ffc227}.browserupgrade>p{margin:0 auto;max-width:960px}.card{border:var(--border--default);border-radius:var(--border-radius--default);box-shadow:var(--box-shadow--default);transition:var(--transition--default)}.card figure,.card figure img{border-top-left-radius:var(--border-radius--default);border-top-right-radius:var(--border-radius--default);margin-bottom:0;transition:var(--transition--default)}.card h3{margin-bottom:calc(1.5 * var(--spacing--single))}.card h3>a{text-decoration:underline}.card h3+strong{margin-bottom:calc(1.5 * var(--spacing--single));margin-top:calc(-1 * var(--spacing--single))}.card picture{overflow:hidden}.card--hover:hover,.card--hover:active,.card--hover:focus-within{border-style:dot-dash}.card--hover figure img{transition-property:transform;will-change:transform}.card--hover:hover figure img,.card--hover:active figure img,.card--hover:focus-within figure img{transform:scale(1.125)}.card--hover:focus-within h3>a{text-decoration:underline dashed}.copyright p{max-width:none}.dialog--cookie-disclosure{box-shadow:0 -2px 6px rgba(128,128,128,0.9)}.docblock{margin:0 0 calc(4 * var(--spacing--single))}.docblock--example{border:1px dashed;padding:calc(2 * var(--spacing--single))}.docs-sidebar a.active{font-style:italic;text-decoration:underline dashed}@media all and (min-width: 1440px){.has--docs-sidebar>.layout--stripe--inner{margin-left:360px}.docs-sidebar{overflow-y:auto;position:sticky;top:0;width:360px}}.figure--icon{height:1.25ch;vertical-align:top;width:1.25ch}.figure--icon>svg{fill:currentColor}.footnotes{background-color:var(--color--grey-light);border:2px solid var(--color--grey);color:var(--color--black);font-size:0.875em;margin-top:calc(4 * var(--spacing--single));padding:calc(2 * var(--spacing--single))}.footnotes::before{content:var(--content--footnotes);font-weight:900}.form--item:not([class*="flex--"])+.form--item:not([class*="flex--"]){margin-top:calc(2 * var(--spacing--single))}.form--item--description{font-size:0.75em}.form--item--checkbox.position--relative>label,.form--item--radio.position--relative>label{border:var(--border--default);border-radius:var(--border-radius--default);box-shadow:var(--box-shadow--default);cursor:pointer;transition:var(--transition--default)}.form--item--checkbox.position--relative>label:hover,.form--item--checkbox.position--relative>label:active,.form--item--checkbox.position--relative>label:focus-within,.form--item--checkbox.position--relative>input:checked+label,.form--item--radio.position--relative>label:hover,.form--item--radio.position--relative>label:active,.form--item--radio.position--relative>label:focus-within,.form--item--radio.position--relative>input:checked+label{border-style:dot-dash}.form--item--checkbox.position--relative>label,.form--item--radio.position--relative>label{padding-left:calc(3 * var(--spacing--single));padding-right:calc(1 * var(--spacing--single))}.form--item--checkbox.position--relative>input,.form--item--radio.position--relative>input{left:calc(1 * var(--spacing--single));position:absolute;top:calc(50% - 7px);z-index:2}.header--logo{text-decoration:none}.include--molecule--youtube{position:relative}.include--molecule--youtube::before{background-image:linear-gradient(rgba(0,0,0,0.75) 0%, transparent 100%);color:var(--color--white);content:attr(data-title);cursor:pointer;display:block;left:0;padding:calc(2 * var(--spacing--single));position:absolute;right:0;text-shadow:var(--text-shadow--default);top:0;z-index:2}.include--molecule--youtube::after{background-image:url("../images/in-css/youtube.svg");background-repeat:no-repeat;background-size:contain;bottom:calc(50% - calc(3.4 * var(--spacing--single)));content:"";cursor:pointer;display:block;padding:calc(3.4 * var(--spacing--single));position:absolute;right:calc(50% - calc(3.4 * var(--spacing--single)))}.include--molecule--youtube:hover::after{background-color:#f00}.js--dismissible{min-height:35px;padding-right:55px !important}.js--dismissible--close{background-color:transparent;color:currentColor;margin:0;padding:calc(0.75 * var(--spacing--single)) calc(1 * var(--spacing--single));position:absolute;right:calc(1 * var(--spacing--single));top:calc(50% - 17.5px)}.js--event--click{cursor:pointer;transition:var(--transition--default)}.js .js--toggle-below--closed{display:none}.menu-item{margin:calc(0.5 * var(--spacing--single)) 0 calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single));padding-right:calc(0.5 * var(--spacing--single))}.menu-item>a{color:inherit;display:block;margin:0 auto;max-width:calc(var(--layout--content-area) / 5);padding:calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}.color--white .menu-item>a:hover,.color--white .menu-item>a:active,.color--white .menu-item>a.active,.color--white .menu-item>a:focus{background-color:var(--color--second);font-weight:700;text-decoration:underline dashed var(--color--grey-light)}@media all and (min-width: 768px){.menu-layout--horizontal{text-align:center}}.palette{border:1px solid var(--color--grey);min-height:calc(10 * var(--spacing--single));min-width:calc(10 * var(--spacing--single))}.picture--lazy-load{transform:scale(1, 0);transition:var(--transition--default)}.picture--lazy-load--loaded{transform:scale(1, 1)}.search-widget form{max-width:calc(100vw - (4 * var(--spacing--single)));right:calc(-12 * var(--spacing--single));width:calc(24 * var(--spacing--single))}@media all and (min-width: 768px){.search-widget form{right:0}}.button--search-widget--submit{background-color:var(--color--accent);box-shadow:none;margin:0;padding:calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single))}.button--search-widget--toggle{line-height:var(--line-height--heading);margin:0;padding:calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single))}.button--search-widget--toggle>svg{fill:var(--color--white);margin:0}.button--search-widget--toggle[aria-expanded="true"]>svg{fill:var(--color--second-light)}.social a{display:block;margin:0 calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single)) 0;min-height:48px;min-width:48px}.social a:hover,.social a:active,.social a:focus-within{color:var(--color--second-light)}.sticky--top{position:static;top:-300px;transition:var(--transition--default)}@media all and (min-width: 1024px){.body-scroll--up .sticky--top{box-shadow:0 2px 6px rgba(128,128,128,0.9);position:sticky;top:0;transition:var(--transition--default);z-index:8}}.hamburger{background-color:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;margin:0 0 0 auto;overflow:visible;padding:calc(1.5 * var(--spacing-single));position:relative;right:calc(-1 * var(--spacing--single));text-transform:none;transition-duration:0.15s;transition-property:opacity, filter;transition-timing-function:linear}@media all and (min-width: 1024px){.hamburger{display:none}}.hamburger:hover{opacity:0.7}.hamburger-box{display:inline-block;height:24px;position:relative;width:40px}.hamburger-inner{display:block;margin-top:-2px;top:50%}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{background-color:#000;border-radius:4px;height:4px;position:absolute;transition-duration:0.15s;transition-property:transform;transition-timing-function:ease;width:40px}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0s 0.13s linear}.hamburger--spring .hamburger-inner::before{top:10px;transition:top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}.hamburger--spring .hamburger-inner::after{top:20px;transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}.hamburger--spring.is-active .hamburger-inner{background-color:transparent;transition-delay:0.22s}.hamburger--spring.is-active .hamburger-inner::before{top:0;transform:translate3d(0, 10px, 0) rotate(45deg);transition:top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)}.hamburger--spring.is-active .hamburger-inner::after{top:0;transform:translate3d(0, 10px, 0) rotate(-45deg);transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)}@media all and (max-width: 1023px){.mobile--tray--open .page>div,.mobile--tray--open .page>footer,.mobile--tray--open .page>main{position:relative;z-index:0}.mobile--tray{background-color:var(--color--main-light);bottom:0;box-sizing:border-box;flex-direction:column;justify-content:center;left:calc(-1 * calc(100vw - calc(8 * var(--spacing--single))));padding:calc(2 * var(--spacing--single));position:fixed;top:0;transition:left 0.3s ease-in;width:calc(100vw - calc(8 * var(--spacing--single)))}.mobile--tray.open{box-shadow:0 0 20px var(--color--main);left:0}.mobile--tray .menu{flex-direction:column}.mobile--tray .menu a{margin-bottom:calc(0.5 * var(--spacing--single));padding:calc(1.5 * var(--spacing--single)) calc(1.5 * var(--spacing--single))}.mobile--tray .border-spaced>li{border-right:0 none}.mobile--tray .flex--auto{flex:none}}@media print{body>:not(main){display:none !important}*{background:#fff !important;box-shadow:none !important;color:#000 !important;text-shadow:none !important}} +@font-face{font-display:optional;font-family:'Public Sans';font-style:normal;font-weight:100 900;src:url("../fonts/public_sans/public_sans_variable.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Public Sans';font-style:italic;font-weight:100 900;src:url("../fonts/public_sans/public_sans_variable_italic.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Emberly';font-style:normal;font-weight:100 900;src:url("../fonts/emberly/emberly-variable.woff2") format("woff2")}@font-face{font-display:optional;font-family:'Emberly';font-style:italic;font-weight:100 900;src:url("../fonts/emberly/emberly-variable-italic.woff2") format("woff2")}:root{--content--footnotes: 'Footnotes';--line-height--default: 1.425;--line-height--heading: 1;--box-shadow--default: 0 .1em .75em rgba(99,99,99,.625);--font-family--input: 'Public Sans', Arial, Helvetica, sans-serif;--font-family--monospace: 'courier new', courier, monospace;--font-family--primary: 'Public Sans', Arial, Helvetica, sans-serif;--font-family--secondary: 'Emberly', Georgia, Times New Roman, serif;--layout--content-area: 1200px;--spacing--single: 0.625rem;--border--default: 1px solid #ccc;--text-shadow--default: 0 0 2px rgba(0,0,0,.325);--transition--default: background-color .3s ease-in;--border-radius--default: .25em;--color--black: #222;--color--grey-dark: #555;--color--grey: #aaa;--color--grey-light: #f7f7f7;--color--white: #fff;--color--main: #00799E;--color--main-dark: #002733;--color--main-light: #ccf4ff;--color--second: #E32416;--color--second-dark: #331716;--color--second-light: #ffcfcc;--color--third: #00afb9;--color--third-dark: #003033;--color--third-light: #ccfcff;--color--accent: #6100a7;--color--status: #004085;--color--status-background: #cce5ff;--color--warning: #856404;--color--warning-background: #fff3cd;--color--error: #721c24;--color--error-background: #f8d7da}[lang="de"]{--content--error: 'Fehler: '}html,button,input,select,textarea{font-family:var(--font-family--input)}body,.font-family--primary{font-family:var(--font-family--primary)}h1,h2,.font-family--secondary{font-family:var(--font-family--secondary)}code,pre,.font-family--monospace{font-family:var(--font-family--monospace)}article,aside,blockquote,details,figcaption,figure,footer,header,nav,section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block}body:not(.page--front)>main>section,body.page--front>main>section:nth-child(n+2){content-visibility:auto;contain-intrinsic-size:850px}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}canvas,embed,iframe,img,object,picture,svg,video{max-width:100%}html{font-size:100%;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-y:scroll;text-rendering:optimizeLegibility}body{background-color:var(--color--white);color:var(--color--black);font-size:16px;font-weight:200;line-height:var(--line-height--default);margin:0;scroll-behavior:smooth}@media (max-width: 1023px){body{word-wrap:break-word;hyphens:auto}}@media all and (prefers-color-scheme: dark){body{background-color:var(--color--grey-dark);background-image:none;filter:grayscale(100%) invert(100%)}figure img{filter:invert(100%)}}@media all and (prefers-reduced-motion: reduce){:root{--transition--default: none}}main{font-size:1.25em}a{transition:var(--transition--default);text-decoration:underline}a:link{color:var(--color--main)}a:visited{color:var(--color--accent)}a:hover{color:var(--color--second)}a:active{color:var(--color--second)}a:focus{outline:0 none;text-decoration:underline dotted}abbr[title]{border-bottom:1px dotted;cursor:help;white-space:nowrap}address{font-style:normal;text-align:left}b,strong{font-weight:bold}blockquote{font-size:2em;font-weight:300;margin:0;padding:1em 0;position:relative}@media all and (max-width: 1023px){blockquote{font-size:1.25em}}code,pre{font-size:1em}pre{padding:calc(2 * var(--spacing--single));white-space:pre-wrap;word-wrap:break-word}dd{margin:0 0 0 calc(4 * var(--spacing--single))}dfn{font-style:italic}details{background-color:rgba(255,255,255,0.5);border-radius:var(--border-radius--default);margin:calc(2 * var(--spacing--single)) auto;padding:calc(0.5 * var(--spacing--single)) calc(1.5 * var(--spacing--single))}details>summary{border-radius:var(--border-radius--default);display:block;cursor:pointer;font-weight:500;line-height:var(--line-height--heading);padding:calc(2 * var(--spacing--single)) calc(4 * var(--spacing--single)) calc(2 * var(--spacing--single)) calc(1 * var(--spacing--single));position:relative}details>summary::marker{display:none}details>summary:focus{box-shadow:0 0 3px;outline:none}details>summary:hover,details>summary:active,details>summary:focus-within,details[open]>summary{background-color:rgba(255,255,255,0.5)}details>summary::after{background-color:var(--color--white);border-radius:50%;color:var(--color--accent);content:"+";padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));position:absolute;right:calc(0.5 * var(--spacing--single));text-align:center;top:calc(1.5 * var(--spacing--single))}details>summary:hover::after,details>summary:active::after,details>summary:focus-within::after,details[open]>summary::after{background-color:var(--color--accent);color:var(--color--white)}details[open]{padding-bottom:calc(2 * var(--spacing--single))}details[open]>summary{margin-bottom:calc(1 * var(--spacing--single))}details[open]>summary:after{content:"-"}div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}figure{display:inline-block;min-width:1px;margin:0;max-width:100%}figcaption{font-size:0.75em}h1,.heading--h1{font-size:4.5em;font-weight:500;line-height:var(--line-height--heading);margin:0;overflow-wrap:break-word;word-wrap:break-word}@media all and (max-width: 770px){h1,.heading--h1{font-size:3em}}h1>a:link,h1>a:visited{color:inherit;text-decoration:inherit}h2,.heading--h2{font-size:3.5em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}@media all and (max-width: 770px){h2,.heading--h2{font-size:2.5em}}h2:first-child{margin-top:0}h2>a:link,h2>a:visited{color:inherit;text-decoration:inherit}h3,.heading--h3{font-size:2em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}h3:first-child{margin-top:0}h3>a:link,h3>a:visited{color:inherit;text-decoration:inherit}h4{font-size:1.5em;font-weight:400;line-height:var(--line-height--heading);margin:1.5em 0 0.25em;overflow-wrap:break-word;word-wrap:break-word}h4:first-child{margin-top:0}h4>a:link,h4>a:visited{color:inherit;text-decoration:inherit}h5{font-size:1.125em;font-weight:500;line-height:var(--line-height--heading);margin:1.5em 0 0.25em}h5:first-child{margin-top:0}h5>a:link,h5>a:visited{color:inherit;text-decoration:inherit}h6{font-size:1em;font-weight:600;line-height:var(--line-height--heading);margin:1.5em 0 0.25em}h6:first-child{margin-top:0}h6>a:link,h6>a:visited{color:inherit;text-decoration:inherit}hr{background-color:var(--color--grey-dark);border-width:0;color:var(--color--grey-dark);height:1px;line-height:0;margin:calc(1 * var(--spacing--single)) 0}iframe{border:1px solid var(--color--grey-light)}img,picture{border:0;display:block;height:auto !important;-ms-interpolation-mode:bicubic;line-height:0}mark,.marker{color:var(--color--accent)}p{margin:calc(2.5 * var(--spacing--single)) 0;max-width:75ch;overflow-wrap:break-word;word-wrap:break-word}p:first-child{margin-top:0}p:last-child{margin-bottom:0}q{quotes:none}q::before,q::after{content:""}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg:not(:root){overflow:hidden}table{background-color:transparent;border-spacing:0;margin:0 0 1.5em;text-align:left;border:0 none}td,th{padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));border:0 none}th{font-weight:500}thead{background-color:var(--color--grey-dark);color:var(--color--white)}thead th:not(:last-child){border-right:1px solid var(--color--white)}tbody th{background-color:var(--color--grey-light);border-bottom:1px solid var(--color--grey);color:var(--color--grey-dark);padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single));vertical-align:top}tbody td{border-bottom:1px solid var(--color--grey);vertical-align:middle}tbody td:not(:last-child){border-right:1px solid var(--color--grey-light)}tbody tr:nth-child(even){background-color:rgba(255,255,255,0.5)}ul,ol{margin:0 0 0 1.2em;padding:0}ul ul,ol ul{padding:0 0 0 1.2em}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}video{height:auto}fieldset{background-color:rgba(255,255,255,0.5);border:1px solid var(--color--grey);border-radius:var(--border-radius--default);margin:calc(2 * var(--spacing--single)) 0;padding:calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}legend{font-size:0.625em;font-weight:900;line-height:1;padding:0 calc(2 * var(--spacing--single));text-align:center}button,input,select,textarea{background-color:var(--color--white);border:1px solid var(--color--grey);border-radius:var(--border-radius--default);box-sizing:border-box;color:var(--color--grey-dark);font-size:1rem;font-weight:400;margin:0;max-width:100%;padding:calc(0.5 * var(--spacing--single)) calc(1 * var(--spacing--single));transition:var(--transition--default);vertical-align:middle}@media all and (max-width: 670px){button,input,select,textarea{max-width:280px}}@media all and (min-width: 671px){input:not([type]),input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="url"],input[size],select{max-width:415px;width:100%}textarea:not([cols]){max-width:700px;width:100%}}button,input{line-height:1}textarea{max-height:inherit}.button,.button:link,button{background-color:var(--color--main);border:var(--border--default);border-radius:var(--border-radius--default);color:var(--color--white);cursor:pointer;display:inline-block;font-size:1em;font-weight:900;margin:0 calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single));padding:calc(1 * var(--spacing--single)) calc(2 * var(--spacing--single));text-align:center;text-decoration:none;transition:var(--transition--default)}.button:visited{color:var(--color--white)}.button:hover,button:hover,.button.active,.button:active,button:active{background-color:var(--color--main-light);color:currentColor}.button:focus,button:focus{outline:1px dashed;outline-offset:1px}.button.disabled,.button[disabled],button.disabled,button[disabled]{background-color:var(--color--grey-dark);color:var(--color--white);cursor:default}a.button{text-decoration:underline}a.button:hover,a.button:active,a.button:focus-within{text-decoration:underline dashed}input[type="checkbox"],input[type="radio"]{cursor:pointer}input[type="checkbox"]+label,input[type="radio"]+label{cursor:pointer}input:checked+label{font-weight:900}input[type="file"]{padding:2px}input[type="file"]::-webkit-file-upload-button{font-size:0.95em;margin:0}input[type="image"]{border:0 none}label{display:block}.align-content--flex-start{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.align-content--flex-end{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.align-content--center{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.align-content--space-between{-webkit-align-content:space-between;-ms-flex-line-pack:justify;align-content:space-between}.align-content--space-around{-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}.align-content--space-evenly{-webkit-align-content:space-around;-ms-flex-line-pack:space-evenly;align-content:space-evenly}.align-content--stretch{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}.align-items--flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-moz-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-items--flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-moz-box-align:end;-ms-flex-align:end;align-items:flex-end}.align-items--center{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.align-items--baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-moz-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.align-items--stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.align-self--flex-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.align-self--flex-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.align-self--center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.align-self--baseline{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline}.align-self--stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.background-size--cover{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.cursor--pointer{cursor:pointer}.display--none{display:none}.display--block{display:block}.display--flex{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.display--inline-block{display:inline-block}.flex--auto{-webkit-box-flex:1;-webkit-flex:auto;-moz-box-flex:1;-ms-flex:auto;flex:auto}.flex--initial{-webkit-box-flex:0;-webkit-flex:0;-moz-box-flex:0;-ms-flex:0;flex:0}.flex--none{-webkit-box-flex:0;-webkit-flex:none;-moz-box-flex:0;-ms-flex:none;flex:none}.flex--1{-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--2{-webkit-box-flex:2;-webkit-flex:2;-moz-box-flex:2;-ms-flex:2;flex:2;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--3{-webkit-box-flex:3;-webkit-flex:3;-moz-box-flex:3;-ms-flex:3;flex:3;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--4{-webkit-box-flex:4;-webkit-flex:4;-moz-box-flex:4;-ms-flex:4;flex:4;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--5{-webkit-box-flex:5;-webkit-flex:5;-moz-box-flex:5;-ms-flex:5;flex:5;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--6{-webkit-box-flex:6;-webkit-flex:6;-moz-box-flex:6;-ms-flex:6;flex:6;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex-direction--row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex-direction--row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-moz-box-orient:horizontal;-moz-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-direction--column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-direction--column-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap--nowrap{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap--wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap--wrap-reverse{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.font-style--italic{font-style:italic}.font-weight--100{font-weight:100}.font-weight--600{font-weight:600}.font-weight--900{font-weight:900}.justify-content--flex-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.justify-content--flex-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-content--center{-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-content--space-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-content--space-around{-webkit-justify-content:space-around;-ms-flex-pack:justify;justify-content:space-around}.justify-content--space-evenly{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-evenly;justify-content:space-evenly}.justify-content--stretch{-webkit-box-pack:stretch;-webkit-justify-content:stretch;-moz-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch}.list-style--none{list-style:none}.overflow-x--scroll{overflow-x:scroll}.overflow-y--auto{overflow-y:auto}.position--relative{position:relative}.position--absolute{position:absolute}.position--fixed{position:fixed}.text-align--left{text-align:left}.text-align--right{text-align:right}.text-align--center{text-align:center}.text-align--justify{text-align:justify}.text-transform--capitalize{text-transform:capitalize}@media all and (prefers-reduced-motion: no-preference){.animation-name--reveal.js--animation--observed{animation-name:reveal}}@media all and (prefers-reduced-motion: no-preference){.js--animation .animation-name--reveal{opacity:0}.js--animation .animation-name--reveal.js--animation--observed{opacity:1;animation-duration:2s;animation-name:reveal}}.js--event--click--toggle[class*="animation-name--"]{animation-name:none}@keyframes reveal{from{opacity:0;-webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;-webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.background-color--black{background-color:var(--color--black)}.background-color--grey-dark{background-color:var(--color--grey-dark)}.background-color--grey{background-color:var(--color--grey)}.background-color--grey-light{background-color:var(--color--grey-light)}.background-color--white{background-color:var(--color--white)}.background-color--main{background-color:var(--color--main)}.background-color--main-dark{background-color:var(--color--main-dark)}.background-color--main-light{background-color:var(--color--main-light)}.background-color--second{background-color:var(--color--second)}.background-color--second-dark{background-color:var(--color--second-dark)}.background-color--second-light{background-color:var(--color--second-light)}.background-color--third{background-color:var(--color--third)}.background-color--third-dark{background-color:var(--color--third-dark)}.background-color--third-light{background-color:var(--color--third-light)}.background-color--accent{background-color:var(--color--accent)}.background-color--status{background-color:var(--color--status)}.background-color--status-background{background-color:var(--color--status-background)}.background-color--warning{background-color:var(--color--warning)}.background-color--warning-background{background-color:var(--color--warning-background)}.background-color--error{background-color:var(--color--error)}.background-color--error-background{background-color:var(--color--error-background)}.color--grey{color:var(--color--grey)}.color--white{color:var(--color--white)}.color--white a{color:var(--color--white)}.color--main{color:var(--color--main)}.color--main-dark{color:var(--color--main-dark)}.color--second-dark{color:var(--color--second-dark)}.color--third-dark{color:var(--color--third-dark)}.color--accent{color:var(--color--accent)}.a11y--visually-hidden:not(:focus-within){clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px;word-wrap:normal}@media all and (max-width: 1023px){.background-image-display-mobile--hide{background-image:none !important}}.border--default{border:var(--border--default)}.border-radius--default{border-radius:var(--border-radius--default)}.bottom--0{bottom:0}.box-shadow--default{box-shadow:var(--box-shadow--default)}.box-shadow--lifted-edges,pre.highlight{position:relative}.box-shadow--lifted-edges:before,pre.highlight:before,.box-shadow--lifted-edges:after,pre.highlight:after{bottom:calc(1.5 * var(--spacing--single));box-shadow:0 calc(1.5 * var(--spacing--single)) calc(1 * var(--spacing--single)) rgba(0,0,0,0.75);content:"";left:calc(1 * var(--spacing--single));max-width:300px;position:absolute;top:80%;transform:rotate(-3deg);width:50%;z-index:-1}.box-shadow--lifted-edges:after,pre.highlight:after{transform:rotate(3deg);right:calc(1 * var(--spacing--single));left:auto}.left--0{left:0}.line-height--default{line-height:var(--line-height--default)}.line-height--heading{line-height:var(--line-height--heading)}.order--neg1{order:-1}.right--0{right:0}.text-shadow--default{text-shadow:var(--text-shadow--default)}.top--0{top:0}.z-index--1{z-index:1}.z-index--3{z-index:3}.z-index--4{z-index:4}.z-index--9{z-index:9}.z-index--9998{z-index:9998}.font-size--p75em{font-size:0.75em}.font-size--p875em{font-size:0.875em}.font-size--1p25em{font-size:1.25em}.font-size--1p5em{font-size:1.5em}.font-size--2em{font-size:2em}.text-align--center figure,.text-align--center img,.text-align--center p,.text-align--center picture,.text-align--center svg,.text-align--center video,.text-align--justify figure,.text-align--justify img,.text-align--justify p,.text-align--justify picture,.text-align--justify svg,.text-align--justify table,.text-align--justify video,[class*="text-align--"] .text-align--center img,[class*="text-align--"] .text-align--center picture{margin:0 auto var(--spacing--single)}.text-align--center figure img,.text-align--center figure picture,.text-align--justify figure img,.text-align--justify figure picture{margin-bottom:0}.text-align--left figure,.text-align--left img,.text-align--left picture,.text-align--left svg,.text-align--left video,.text-align--right figure,.text-align--right img,.text-align--right picture,.text-align--right svg,.text-align--right table,.text-align--right video{margin:0}.text-align--left p,.text-align--right p{margin:0 0 var(--spacing--single)}.text-align--center p:last-child,.text-align--justify p:last-child,.text-align--left p:last-child,.text-align--right p:last-child{margin-bottom:0}main{min-height:37vh}@media all and (max-width: 1023px){.layout--column--empty{display:none}}@media all and (max-width: 1023px){.layout--column{min-width:270px}}@media all and (max-width: 767px){.layout--column{padding-top:calc(2 * var(--spacing--single))}.layout--column:last-child{padding-bottom:calc(2 * var(--spacing--single))}}@media all and (max-width: 1023px){.layout--row{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media all and (max-width: 767px){.layout--row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.layout--stripe{padding:calc(10 * var(--spacing--single)) calc(2 * var(--spacing--single))}.layout--strip{padding:calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}@media all and (max-width: 767px){.layout--stripe{padding:calc(6 * var(--spacing--single)) calc(2 * var(--spacing--single))}}.layout--stripe--inner{margin:0 auto;max-width:var(--layout--content-area);position:relative;z-index:2}.layout--stripe--inner.z-index--3{z-index:3}.layout--hide--no-javascript{display:none}.js .layout--hide--no-javascript{display:inherit}.layout--multiple--horizontal{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;margin-left:0;margin-right:0}.layout--multiple--horizontal{flex-direction:column}.layout--multiple--horizontal>*{box-sizing:border-box;margin:0 0 calc(4 * var(--spacing--single))}@media all and (min-width: 768px){.layout--multiple--horizontal{flex-direction:row;flex-wrap:wrap}.layout--multiple--horizontal>*{flex-basis:calc(33% - (4 * var(--spacing--single)));margin:0 calc(2 * var(--spacing--single)) calc(4 * var(--spacing--single));max-width:calc(33% - (4 * var(--spacing--single)));min-width:205px}}.margin-horizontal--0{margin-left:0;margin-right:0}.margin-horizontal--1{margin-left:calc(0.5 * var(--spacing--single));margin-right:calc(0.5 * var(--spacing--single))}.margin-horizontal--2{margin-left:calc(1 * var(--spacing--single));margin-right:calc(1 * var(--spacing--single))}.margin-horizontal--4{margin-left:calc(2 * var(--spacing--single));margin-right:calc(2 * var(--spacing--single))}.margin-horizontal--8{margin-left:calc(4 * var(--spacing--single));margin-right:calc(4 * var(--spacing--single))}.margin-horizontal--16{margin-left:calc(8 * var(--spacing--single));margin-right:calc(8 * var(--spacing--single))}.margin-horizontal--32{margin-left:calc(16 * var(--spacing--single));margin-right:calc(16 * var(--spacing--single))}@media all and (max-width: 767px){.margin-horizontal--collapse{margin-left:0;margin-right:0}}.margin-left--auto{margin-left:auto}.margin-top--auto{margin-top:auto}.margin-vertical--0{margin-bottom:0;margin-top:0}.margin-vertical--1{margin-bottom:calc(0.5 * var(--spacing--single));margin-top:calc(0.5 * var(--spacing--single))}.margin-vertical--2{margin-bottom:calc(1 * var(--spacing--single));margin-top:calc(1 * var(--spacing--single))}.margin-vertical--4,.button.margin-vertical--4,a.button.margin-vertical--4{margin-bottom:calc(2 * var(--spacing--single));margin-top:calc(2 * var(--spacing--single))}.margin-vertical--8{margin-bottom:calc(4 * var(--spacing--single));margin-top:calc(4 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--8{margin-bottom:calc(2 * var(--spacing--single));margin-top:calc(2 * var(--spacing--single))}}.margin-vertical--16{margin-bottom:calc(8 * var(--spacing--single));margin-top:calc(8 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--16{margin-bottom:calc(4 * var(--spacing--single));margin-top:calc(4 * var(--spacing--single))}}.margin-vertical--32{margin-bottom:calc(16 * var(--spacing--single));margin-top:calc(16 * var(--spacing--single))}@media all and (max-width: 960px){.margin-vertical--32{margin-bottom:calc(8 * var(--spacing--single));margin-top:calc(8 * var(--spacing--single))}}.max-height--16{max-height:calc(16 * var(--spacing--single))}.padding-horizontal--0{padding-left:0;padding-right:0}.padding-horizontal--1{padding-left:calc(0.5 * var(--spacing--single));padding-right:calc(0.5 * var(--spacing--single))}.padding-horizontal--2{padding-left:calc(1 * var(--spacing--single));padding-right:calc(1 * var(--spacing--single))}.padding-horizontal--4{padding-left:calc(2 * var(--spacing--single));padding-right:calc(2 * var(--spacing--single))}.padding-horizontal--8{padding-left:calc(4 * var(--spacing--single));padding-right:calc(4 * var(--spacing--single))}.padding-horizontal--16{padding-left:calc(8 * var(--spacing--single));padding-right:calc(8 * var(--spacing--single))}.padding-horizontal--32{padding-left:calc(16 * var(--spacing--single));padding-right:calc(16 * var(--spacing--single))}@media all and (max-width: 767px){.padding-horizontal--collapse{padding-left:0;padding-right:0}}.padding-vertical--0{padding-bottom:0;padding-top:0}.padding-vertical--1{padding-bottom:calc(0.5 * var(--spacing--single));padding-top:calc(0.5 * var(--spacing--single))}.padding-vertical--2{padding-bottom:calc(1 * var(--spacing--single));padding-top:calc(1 * var(--spacing--single))}.padding-vertical--4{padding-bottom:calc(2 * var(--spacing--single));padding-top:calc(2 * var(--spacing--single))}.padding-vertical--8{padding-bottom:calc(4 * var(--spacing--single));padding-top:calc(4 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--8{padding-bottom:calc(2 * var(--spacing--single));padding-top:calc(2 * var(--spacing--single))}}.padding-vertical--16{padding-bottom:calc(8 * var(--spacing--single));padding-top:calc(8 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--16{padding-bottom:calc(4 * var(--spacing--single));padding-top:calc(4 * var(--spacing--single))}}.padding-vertical--32{padding-bottom:calc(16 * var(--spacing--single));padding-top:calc(16 * var(--spacing--single))}@media all and (max-width: 960px){.padding-vertical--32{padding-bottom:calc(8 * var(--spacing--single));padding-top:calc(8 * var(--spacing--single))}}.highlight pre{background-color:var(--color--black);color:var(--color--white)}.highlight .c{color:var(--color--grey-dark)}.highlight .err{background-color:var(--color--error-background);color:var(--color--error)}.highlight .k{color:var(--color--main-light)}.highlight .l{color:var(--color--accent)}.highlight .n{color:var(--color--grey-light)}.highlight .o{color:var(--color--second-light)}.highlight .p{color:var(--color--grey-light)}.highlight .cm{color:var(--color--grey-dark)}.highlight .c1{color:var(--color--grey-dark)}.highlight .gs{font-weight:bold}.highlight .kc{color:var(--color--main-light)}.highlight .kd{color:var(--color--main-light)}.highlight .m{color:var(--color--accent)}.highlight .s{color:var(--color--grey)}.highlight .na{color:var(--color--third-light)}.highlight .nb{color:var(--color--grey-light)}.highlight .no{color:var(--color--main-light)}.highlight .ni{color:var(--color--grey-light)}.highlight .ne{color:var(--color--third-light)}.highlight .nl{color:var(--color--grey-light)}.highlight .nx{color:var(--color--third-light)}.highlight .nt{color:var(--color--second-light)}.highlight .nv{color:var(--color--grey-light)}.highlight .w{color:var(--color--grey-light)}.highlight .sb{color:var(--color--grey)}.highlight .s2{color:var(--color--grey)}.highlight .si{color:var(--color--grey)}.highlight .sx{color:var(--color--grey)}.highlight .s1{color:var(--color--grey)}.highlight .ss{color:var(--color--grey)}.highlight .il{color:var(--color--accent)}.highlight .gu{color:var(--color--grey-dark)}.highlight .gi{color:var(--color--third-light)}.a11y--skip-hide{background:var(--color--main-dark);position:relative;text-align:center}.a11y--skip-hide a{color:var(--color--white);display:block;height:1px;left:-10000px;overflow:hidden;padding:10px;position:absolute;top:auto;width:1px}.a11y--skip-hide a:focus{height:auto;outline:0 none;position:static;width:auto}.alert{border:1px solid;border-radius:var(--border-radius--default);font-style:italic;margin:10px 0;padding:10px}.alert a{color:inherit;font-weight:600}.alert p:first-of-type{margin-top:0}.alert--error{background-color:var(--color--error-background);color:var(--color--error)}.alert--status{background-color:var(--color--status-background);color:var(--color--status)}.alert--warning{background-color:var(--color--warning-background);color:var(--color--warning)}.background-image--gradient--main{background-image:linear-gradient(-5deg, transparent 50%, var(--color--main) 200%)}.background-image--hero-home{background-position:bottom left;background-repeat:no-repeat;min-height:50vw}.webp--disabled .background-image--hero-home{background-image:url("../images/in-css/hero-home.jpg")}.webp--enabled .background-image--hero-home{background-image:url("../images/in-css/hero-home.jpg.webp")}.background-image--hero-standout{background-position:center center;background-repeat:no-repeat}.body-scroll--up .fab{bottom:-200px}.border-spaced>li{border-bottom:1px solid}.border-spaced li:last-child{border-bottom:0 none}@media all and (min-width: 768px){.border-spaced>li{border-right:1px solid;border-bottom:0 none}.border-spaced li:last-child{border-right:0 none}}.browserupgrade{background-color:#1d3141;color:#fff;font-family:Arial, sans-serif;font-size:24px;padding:20px;text-align:left}.browserupgrade a:link,.browserupgrade a:visited{color:#fafafa;text-decoration:underline}.browserupgrade a:hover,.browserupgrade a:hover,.browserupgrade a:hover{color:#ffc227}.browserupgrade>p{margin:0 auto;max-width:960px}.card{border:var(--border--default);border-radius:var(--border-radius--default);box-shadow:var(--box-shadow--default);transition:var(--transition--default)}.card figure,.card figure img{border-top-left-radius:var(--border-radius--default);border-top-right-radius:var(--border-radius--default);margin-bottom:0;transition:var(--transition--default)}.card h3{margin-bottom:calc(1.5 * var(--spacing--single))}.card h3>a{text-decoration:underline}.card h3+strong{margin-bottom:calc(1.5 * var(--spacing--single));margin-top:calc(-1 * var(--spacing--single))}.card picture{overflow:hidden}.card--hover:hover,.card--hover:active,.card--hover:focus-within{border-style:dot-dash}.card--hover figure img{transition-property:transform;will-change:transform}.card--hover:hover figure img,.card--hover:active figure img,.card--hover:focus-within figure img{transform:scale(1.125)}.card--hover:focus-within h3>a{text-decoration:underline dashed}.copyright p{max-width:none}.dialog--cookie-disclosure{box-shadow:0 -2px 6px rgba(128,128,128,0.9)}.docblock{margin:0 0 calc(4 * var(--spacing--single))}.docblock--example{border:1px dashed;padding:calc(2 * var(--spacing--single))}.docs-sidebar a.active{font-style:italic;text-decoration:underline dashed}@media all and (min-width: 1440px){.has--docs-sidebar>.layout--stripe--inner{margin-left:360px}.docs-sidebar{overflow-y:auto;position:sticky;top:0;width:360px}}.figure--icon{height:1.25ch;vertical-align:top;width:1.25ch}.figure--icon>svg{fill:currentColor}.footnotes{background-color:var(--color--grey-light);border:2px solid var(--color--grey);color:var(--color--black);font-size:0.875em;margin-top:calc(4 * var(--spacing--single));padding:calc(2 * var(--spacing--single))}.footnotes::before{content:var(--content--footnotes);font-weight:900}.form--item:not([class*="flex--"])+.form--item:not([class*="flex--"]){margin-top:calc(2 * var(--spacing--single))}.form--item--select--multiple .form--item:not([class*="flex--"])+.form--item:not([class*="flex--"]){margin-top:calc(0.25 * var(--spacing--single))}.form--item--description{font-size:0.75em}.form--item--checkbox.position--relative>label,.form--item--radio.position--relative>label{border:var(--border--default);border-radius:var(--border-radius--default);box-shadow:var(--box-shadow--default);cursor:pointer;transition:var(--transition--default)}.form--item--checkbox.position--relative>label:hover,.form--item--checkbox.position--relative>label:active,.form--item--checkbox.position--relative>label:focus-within,.form--item--checkbox.position--relative>input:checked+label,.form--item--radio.position--relative>label:hover,.form--item--radio.position--relative>label:active,.form--item--radio.position--relative>label:focus-within,.form--item--radio.position--relative>input:checked+label{border-style:dot-dash}.form--item--checkbox.position--relative>label,.form--item--radio.position--relative>label{padding-left:calc(3 * var(--spacing--single));padding-right:calc(1 * var(--spacing--single))}.form--item--checkbox.position--relative>input,.form--item--radio.position--relative>input{left:calc(1 * var(--spacing--single));position:absolute;top:calc(50% - 7px);z-index:2}.header--logo{text-decoration:none}.include--molecule--youtube{position:relative}.include--molecule--youtube::before{background-image:linear-gradient(rgba(0,0,0,0.75) 0%, transparent 100%);color:var(--color--white);content:attr(data-title);cursor:pointer;display:block;left:0;padding:calc(2 * var(--spacing--single));position:absolute;right:0;text-shadow:var(--text-shadow--default);top:0;z-index:2}.include--molecule--youtube::after{background-image:url("../images/in-css/youtube.svg");background-repeat:no-repeat;background-size:contain;bottom:calc(50% - calc(3.4 * var(--spacing--single)));content:"";cursor:pointer;display:block;padding:calc(3.4 * var(--spacing--single));position:absolute;right:calc(50% - calc(3.4 * var(--spacing--single)))}.include--molecule--youtube:hover::after{background-color:#f00}.js--dismissible{min-height:35px;padding-right:55px !important}.js--dismissible--close{background-color:transparent;color:currentColor;margin:0;padding:calc(0.75 * var(--spacing--single)) calc(1 * var(--spacing--single));position:absolute;right:calc(1 * var(--spacing--single));top:calc(50% - 17.5px)}.js--event--click{cursor:pointer;transition:var(--transition--default)}.js .js--toggle-below--closed{display:none}.menu-item{margin:calc(0.5 * var(--spacing--single)) 0 calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single));padding-right:calc(0.5 * var(--spacing--single))}.menu-item>a{color:inherit;display:block;margin:0 auto;max-width:calc(var(--layout--content-area) / 5);padding:calc(2 * var(--spacing--single)) calc(2 * var(--spacing--single))}.color--white .menu-item>a:hover,.color--white .menu-item>a:active,.color--white .menu-item>a.active,.color--white .menu-item>a:focus{background-color:var(--color--second);font-weight:700;text-decoration:underline dashed var(--color--grey-light)}@media all and (min-width: 768px){.menu-layout--horizontal{text-align:center}}.palette{border:1px solid var(--color--grey);min-height:calc(10 * var(--spacing--single));min-width:calc(10 * var(--spacing--single))}.picture--lazy-load{transform:scale(1, 0);transition:var(--transition--default)}.picture--lazy-load--loaded{transform:scale(1, 1)}.search-widget form{max-width:calc(100vw - (4 * var(--spacing--single)));right:calc(-12 * var(--spacing--single));width:calc(24 * var(--spacing--single))}@media all and (min-width: 768px){.search-widget form{right:0}}.button--search-widget--submit{background-color:var(--color--accent);box-shadow:none;margin:0;padding:calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single))}.button--search-widget--toggle{line-height:var(--line-height--heading);margin:0;padding:calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single))}.button--search-widget--toggle>svg{fill:var(--color--white);margin:0}.button--search-widget--toggle[aria-expanded="true"]>svg{fill:var(--color--second-light)}.social a{display:block;margin:0 calc(0.5 * var(--spacing--single)) calc(0.5 * var(--spacing--single)) 0;min-height:48px;min-width:48px}.social a:hover,.social a:active,.social a:focus-within{color:var(--color--second-light)}.sticky--top{position:static;top:-300px;transition:var(--transition--default)}@media all and (min-width: 1024px){.body-scroll--up .sticky--top{box-shadow:0 2px 6px rgba(128,128,128,0.9);position:sticky;top:0;transition:var(--transition--default);z-index:8}}.hamburger{background-color:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;margin:0 0 0 auto;overflow:visible;padding:calc(1.5 * var(--spacing-single));position:relative;right:calc(-1 * var(--spacing--single));text-transform:none;transition-duration:0.15s;transition-property:opacity, filter;transition-timing-function:linear}@media all and (min-width: 1024px){.hamburger{display:none}}.hamburger:hover{opacity:0.7}.hamburger-box{display:inline-block;height:24px;position:relative;width:40px}.hamburger-inner{display:block;margin-top:-2px;top:50%}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{background-color:#000;border-radius:4px;height:4px;position:absolute;transition-duration:0.15s;transition-property:transform;transition-timing-function:ease;width:40px}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0s 0.13s linear}.hamburger--spring .hamburger-inner::before{top:10px;transition:top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}.hamburger--spring .hamburger-inner::after{top:20px;transition:top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}.hamburger--spring.is-active .hamburger-inner{background-color:transparent;transition-delay:0.22s}.hamburger--spring.is-active .hamburger-inner::before{top:0;transform:translate3d(0, 10px, 0) rotate(45deg);transition:top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)}.hamburger--spring.is-active .hamburger-inner::after{top:0;transform:translate3d(0, 10px, 0) rotate(-45deg);transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)}@media all and (max-width: 1023px){.mobile--tray--open .page>div,.mobile--tray--open .page>footer,.mobile--tray--open .page>main{position:relative;z-index:0}.mobile--tray{background-color:var(--color--main-light);bottom:0;box-sizing:border-box;flex-direction:column;justify-content:center;left:calc(-1 * calc(100vw - calc(8 * var(--spacing--single))));padding:calc(2 * var(--spacing--single));position:fixed;top:0;transition:left 0.3s ease-in;width:calc(100vw - calc(8 * var(--spacing--single)))}.mobile--tray.open{box-shadow:0 0 20px var(--color--main);left:0}.mobile--tray .menu{flex-direction:column}.mobile--tray .menu a{margin-bottom:calc(0.5 * var(--spacing--single));padding:calc(1.5 * var(--spacing--single)) calc(1.5 * var(--spacing--single))}.mobile--tray .border-spaced>li{border-right:0 none}.mobile--tray .flex--auto{flex:none}}@media print{body>:not(main){display:none !important}*{background:#fff !important;box-shadow:none !important;color:#000 !important;text-shadow:none !important}} diff --git a/assets/css/theme/theme--classes.css b/assets/css/theme/theme--classes.css index 3cf0679..616585a 100644 --- a/assets/css/theme/theme--classes.css +++ b/assets/css/theme/theme--classes.css @@ -320,6 +320,11 @@ .form--item:not([class*="flex--"]) + .form--item:not([class*="flex--"]) { margin-top: calc(2 * var(--spacing--single)); } +.form--item--select--multiple + .form--item:not([class*="flex--"]) + + .form--item:not([class*="flex--"]) { + margin-top: calc(0.25 * var(--spacing--single)); +} .form--item--description { font-size: 0.75em; } diff --git a/assets/css/utility/utility--spacing.css b/assets/css/utility/utility--spacing.css index b8993fe..37d51c4 100644 --- a/assets/css/utility/utility--spacing.css +++ b/assets/css/utility/utility--spacing.css @@ -106,6 +106,31 @@ a.button.margin-vertical--4 { } } +/** + * Max-height helpers. + */ +.max-height--inherit { + max-height: inherit; +} +.max-height--1 { + max-height: calc(1 * var(--spacing--single)); +} +.max-height--2 { + max-height: calc(2 * var(--spacing--single)); +} +.max-height--4 { + max-height: calc(4 * var(--spacing--single)); +} +.max-height--8 { + max-height: calc(8 * var(--spacing--single)); +} +.max-height--16 { + max-height: calc(16 * var(--spacing--single)); +} +.max-height--32 { + max-height: calc(32 * var(--spacing--single)); +} + /** * Padding classes. * diff --git a/collections/_docs/design/forms.html b/collections/_docs/design/forms.html index bc02ab3..204c589 100755 --- a/collections/_docs/design/forms.html +++ b/collections/_docs/design/forms.html @@ -29,6 +29,51 @@ mode="docblock" %} +{% comment %}{% endcomment %} +{% capture states %} +AL|Alabama, AK|Alaska, AS|American Samoa, AZ|Arizona, AR|Arkansas, +CA|California, CO|Colorado, CT|Connecticut, +DE|Delaware, DC|Dist of Columbia, +FL|Florida, +GA|Georgia, GU|Guam, +HI|Hawaii, +ID|Idaho, IL|Illinois, IN|Indiana, IA|Iowa, +KS|Kansas, KY|Kentucky, +LA|Louisiana, +ME|Maine, MD|Maryland, MA|Massachusetts, MI|Michigan, MN|Minnesota, UM|Minor Outlying Islands, MS|Mississippi, MO|Missouri, MT|Montana, +NE|Nebraska, NV|Nevada, NH|New Hampshire, NJ|New Jersey, NM|New Mexico, NY|New York, NC|North Carolina, ND|North Dakota, MP|Northern Mariana Islands, +OH|Ohio, OK|Oklahoma, OR|Oregon, +PA|Pennsylvania, PR|Puerto Rico, +RI|Rhode Island, +SC|South Carolina, SD|South Dakota, +TN|Tennessee, TX|Texas, +UT|Utah, +VT|Vermont, VA|Virginia, VI|U.S. Virgin Islands, +WA|Washington, WV|West Virginia, WI|Wisconsin, WY|Wyoming +{% endcapture %} + +{% include forms/form--select.html + classes="" + description="A single select uses a dropdown." + label="Favorite state" + multiple=false + name="states" + options=states + required=false + mode="docblock" +%} + +{% include forms/form--select.html + classes="" + description="Users do not love default multi-selects, so this uses checkboxes." + label="Favorite states" + multiple=true + name="states" + options=states + required=false + mode="docblock" +%} + {% include forms/form--yes-no.html classes="" default=false