:root{--font-family: serif;--light-grey: gainsboro;--dark-grey: dimgrey;--green: green;--red: red;--blue: blue;--white: white;--space-xl: 10px;--space-l: 6px;--space-m: 4px;--space-s: 2px}a{display:inline-block}.example1{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example1:focus-within{border-color:var(--dark-grey)}.example1 .select-box__options{outline:none;overflow:auto}.example1 .select-box__option{cursor:pointer;padding:var(--space-l)}.example1 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example1 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example2{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example2 :focus-within{border-color:var(--dark-grey)}.example2 .select-box__options{outline:none;overflow:auto;width:160px;height:450px}.example2 .select-box__group-label{padding:var(--space-s);margin:var(--space-s);font-weight:700}.example2 .select-box__option{cursor:pointer;padding:var(--space-l)}.example2 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example2 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example3{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example3:focus-within{border-color:var(--dark-grey)}.example3 .dropdown[data-open=false] .dropdown__content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.example3 .dropdown__trigger{cursor:pointer;padding:var(--space-m);outline:none;-webkit-user-select:none;user-select:none;border:2px solid transparent;width:200px}.example3 .dropdown__trigger:focus{border-color:var(--blue)}.example3 .dropdown__content{display:flex;flex-direction:column;height:240px}.example3 .select-box__options{outline:none;overflow:auto}.example3 .select-box__option{cursor:pointer;padding:var(--space-l)}.example3 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example3 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example4{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example4:focus-within{border-color:var(--dark-grey)}.example4 .dropdown[data-open=false] .dropdown__content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.example4 .dropdown__trigger{cursor:pointer;padding:var(--space-m);outline:none;-webkit-user-select:none;user-select:none;border:2px solid transparent;width:200px}.example4 .dropdown__trigger:focus{border-color:var(--blue)}.example4 .dropdown__content{display:flex;flex-direction:column;height:282px}.example4 .select-box__options{outline:none;overflow:auto}.example4 .select-box__option{cursor:pointer;padding:var(--space-l)}.example4 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example4 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example5{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example5:focus-within{border-color:var(--dark-grey)}.example5 .select-box__input{font-family:var(--font-family);font-size:100%;box-sizing:border-box;min-width:200px;border:2px solid var(--light-grey);padding:var(--space-s);margin:var(--space-s);outline:none;display:block}.example5 .select-box__input:focus{border-color:var(--blue)}.example5 .select-box__option{cursor:pointer;padding:var(--space-l)}.example5 .select-box__options{outline:none;overflow:auto}.example5 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example5 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example6{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example6:focus-within{border-color:var(--dark-grey)}.example6 .dropdown__trigger{cursor:pointer;padding:var(--space-m);outline:none;-webkit-user-select:none;user-select:none;border:2px solid transparent;width:200px}.example6 .dropdown__content{display:flex;flex-direction:column}.example6 .select-box__input{font-family:var(--font-family);font-size:100%;box-sizing:border-box;min-width:200px;border:2px solid var(--light-grey);padding:var(--space-s);margin:var(--space-s);outline:none;display:block}.example6 .select-box__input:focus{border-color:var(--blue)}.example6 .select-box__option{cursor:pointer;padding:var(--space-l)}.example6 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example6 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example7{border:2px solid var(--light-grey);display:inline-flex;flex-direction:column;margin:var(--space-s);padding:var(--space-s)}.example7 :focus-within{border-color:var(--dark-grey)}.example7 .dropdown__trigger{cursor:pointer;padding:var(--space-m);outline:none;-webkit-user-select:none;user-select:none;border:2px solid transparent;width:20px;text-align:center}.example7 .dropdown__content{display:flex;flex-direction:column}.example7 .select-box__input{font-family:var(--font-family);font-size:100%;box-sizing:border-box;min-width:200px;border:2px solid var(--light-grey);padding:var(--space-s);margin:var(--space-s);outline:none;display:block}.example7 .select-box__input:focus{border-color:var(--blue)}.example7 .select-box__option{cursor:pointer;padding:var(--space-l)}.example7 .select-box__option[aria-current=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--green)}.example7 .select-box__option[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--red)}.example7__wrapper{display:flex}.dropdown.example .dropdown__trigger{appearance:none;all:unset;cursor:pointer;padding:var(--space-m);outline:none;display:inline-block;border:2px solid var(--light-grey)}.dropdown.example .dropdown__trigger:focus{border-color:var(--dark-grey)}.dropdown.example .dropdown__content{border:2px solid var(--light-grey);margin-top:var(--space-m);padding:var(--space-xl);position-area:bottom span-right;width:300px}.dropdown.example .dropdown__content:focus-within{border-color:var(--dark-grey)}