:where(html){--gray-0-hsl:210 17% 98%;--gray-1-hsl:210 17% 95%;--gray-2-hsl:210 16% 93%;--gray-3-hsl:210 14% 89%;--gray-4-hsl:210 14% 83%;--gray-5-hsl:210 11% 71%;--gray-6-hsl:210 7% 56%;--gray-7-hsl:210 9% 31%;--gray-8-hsl:210 10% 23%;--gray-9-hsl:210 11% 15%;--gray-10-hsl:214 14% 10%;--gray-11-hsl:216 16% 6%;--gray-12-hsl:210 40% 2%}:where(button,input[type=button],.btn){--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(var(--gray-5-hsl)/25%);--_highlight-dark:hsl(var(--gray-12-hsl)/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:var(--size-relative-7);--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:var(--size-relative-6);text-align:center;text-shadow:var(--_ink-shadow);transition:border-color .5s var(--ease-3);user-select:none}:where(button,input[type=submit],.btn){--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(var(--gray-5-hsl)/25%);--_highlight-dark:hsl(var(--gray-12-hsl)/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:var(--size-relative-7);--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:var(--size-relative-6);text-align:center;text-shadow:var(--_ink-shadow);transition:border-color .5s var(--ease-3);user-select:none}:where(button,input[type=reset],.btn){--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(var(--gray-5-hsl)/25%);--_highlight-dark:hsl(var(--gray-12-hsl)/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:var(--size-relative-7);--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:var(--size-relative-6);text-align:center;text-shadow:var(--_ink-shadow);transition:border-color .5s var(--ease-3);user-select:none}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_accent:initial;--_text:initial;--_size:initial;--_bg-light:#fff;--_bg-dark:var(--surface-3);--_bg:var(--_bg-light);--_border:var(--surface-3);--_highlight-size:0;--_highlight-light:hsl(var(--gray-5-hsl)/25%);--_highlight-dark:hsl(var(--gray-12-hsl)/25%);--_highlight:var(--_highlight-light);--_ink-shadow-light:0 1px 0 var(--gray-3);--_ink-shadow-dark:0 1px 0 var(--surface-1);--_ink-shadow:var(--_ink-shadow-light);--_icon-size:var(--size-relative-7);--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:var(--size-relative-6);text-align:center;text-shadow:var(--_ink-shadow);transition:border-color .5s var(--ease-3);user-select:none}@media (prefers-color-scheme:dark){:where(button,input[type=button],.btn){--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(button,input[type=submit],.btn){--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(button,input[type=reset],.btn){--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_highlight:var(--_highlight-dark);--_bg:var(--_bg-dark);--_ink-shadow:var(--_ink-shadow-dark)}}@media (prefers-reduced-motion:no-preference){:where(button,input[type=button],.btn){transition:border-color .5s var(--ease-3),box-shadow 145ms var(--ease-4),outline-offset 145ms var(--ease-4)}:where(button,input[type=submit],.btn){transition:border-color .5s var(--ease-3),box-shadow 145ms var(--ease-4),outline-offset 145ms var(--ease-4)}:where(button,input[type=reset],.btn){transition:border-color .5s var(--ease-3),box-shadow 145ms var(--ease-4),outline-offset 145ms var(--ease-4)}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{transition:border-color .5s var(--ease-3),box-shadow 145ms var(--ease-4),outline-offset 145ms var(--ease-4)}}[disabled]:where(button,input[type=button],.btn){--_bg:none;--_text:var(--gray-6);box-shadow:var(--shadow-1);cursor:not-allowed}[disabled]:where(button,input[type=submit],.btn){--_bg:none;--_text:var(--gray-6);box-shadow:var(--shadow-1);cursor:not-allowed}[disabled]:where(button,input[type=reset],.btn){--_bg:none;--_text:var(--gray-6);box-shadow:var(--shadow-1);cursor:not-allowed}@media (prefers-color-scheme:dark){[disabled]:where(button,input[type=button],.btn){--_text:var(--gray-5)}[disabled]:where(button,input[type=submit],.btn){--_text:var(--gray-5)}[disabled]:where(button,input[type=reset],.btn){--_text:var(--gray-5)}}:where(button,input[type=button],.btn):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-duration:.25s}:where(button,input[type=submit],.btn):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-duration:.25s}:where(button,input[type=reset],.btn):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-duration:.25s}:where(button,input[type=button],.btn)>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(button,input[type=submit],.btn)>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(button,input[type=reset],.btn)>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(button,input[type=button],.btn)>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where(button,input[type=submit],.btn)>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where(button,input[type=reset],.btn)>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where(a.btn){-webkit-text-decoration:none;text-decoration:none}:where([type=submit],form button:not([type],[disabled])){--_text:var(--_accent,var(--link))}:where([type=reset]){--_text:var(--red-6);--_border:var(--red-3)}:where([type=reset]):focus-visible{outline-color:var(--red-6)}@media (prefers-color-scheme:dark){:where([type=reset]){--_text:var(--red-2);--_border:var(--surface-3)}}:where(form button:not([type]),[type=submit],[type=reset]):hover:not([disabled]){--_border:currentColor}:where(form button:not([type]),[type=submit],[type=reset]):focus-visible:not([disabled]){--_border:currentColor}:where(input[type=file]){align-self:flex-start;border:var(--border-size-1) solid var(--surface-2);border-radius:var(--radius-2);box-shadow:var(--inner-shadow-4);color:var(--text-2);cursor:auto;max-inline-size:100%;padding:0}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer;margin-inline-end:var(--size-relative-6)}@media (prefers-color-scheme:dark){:where([disabled]),:where([type=reset]),:where([type=submit]),:where(form button:not([type=button])){--_bg:var(--surface-1)}}
/*
TODO:
- large excellent mobile design
- excellent tablet design
- fix arrow not rotating when open (regression)
- add directional aware entry/exit transitions
*/
button {
text-shadow: none;
}
.custom-select-wrapper {
select.custom-select {
/* opt into customizing select */
&, &::picker(select) {
appearance: base-select;
}
font-size: var(--font-size-1);
/* removing open props normalize styles */
background: none;
padding: 0;
/* enable transitions in the drop down */
&::picker(select) {
transition:
opacity .2s ease,
transform .2s var(--ease-out-3),
display .2s allow-discrete,
overlay .2s allow-discrete
;
}
&::picker-icon {
display: none;
}
/* set the off stage styles */
&:not(:open)::picker(select) {
opacity: 0;
transform: scale(.95);
}
/* set the on stage styles */
&:open::picker(select) {
opacity: 1;
transform: scale(1);
}
/* transition the selected option changing */
selectedcontent > * {
transition:
transform 1s var(--ease-spring-4),
display 1s allow-discrete,
opacity 1s;
@starting-style {
opacity: 0;
transform: translateY(10px);
}
opacity: 1;
}
/* customize the invoking button */
> button {
--_text: var(--text-1);
&:focus-visible {
outline-offset: -3px;
}
&:has(selectedcontent) {
align-items: start;
min-inline-size: 20ch;
flex-direction: column;
}
&.primary {
--_bg: var(--link);
--_border: none;
--_text: var(--surface-1);
--_ink-shadow: none;
}
> div {
inline-size: 100%;
display: flex;
justify-content: space-between;
gap: var(--size-3);
}
& > small {
color: var(--text-2);
}
& svg {
inline-size: 2ch;
transition: transform .3s var(--ease-elastic-out-2);
}
}
&:open > button svg {
transform: rotate(.5turn);
}
/* reset some picker styles */
&::picker(select) {
background: light-dark(white, var(--surface-2));
border-radius: 16px;
padding: 0;
margin-block: 5px;
box-shadow: var(--shadow-5);
@media (forced-colors: none) {
border: none;
}
}
/* customize the picker contents */
> div {
min-inline-size: calc(anchor-size(self-inline) + 20px);
scroll-behavior: smooth;
&.scrollable {
max-block-size: 20lh;
scrollbar-width: thin;
}
& hr {
margin-block: var(--size-2);
}
& label {
display: block;
position: sticky;
top: 0;
z-index: 1;
background: var(--surface-3);
font-size: var(--font-size-0);
color: var(--text-2);
font-weight: var(--font-weight-7);
padding-block: var(--size-1);
padding-inline: var(--size-3);
}
& option {
display: flex;
align-items: center;
gap: var(--size-3);
padding-block: var(--size-2);
padding-inline: var(--size-3);
font-size: var(--font-size-1);
cursor: pointer;
outline-offset: -1px;
&::checkmark {
font-weight: var(--font-weight-8);
}
&:focus-visible {
outline-offset: -1px;
}
&:is(:focus, :hover) {
background: oklch(from var(--link) l c h / 25%);
color: inherit;
}
&:is(:checked) {
background: var(--link);
color: var(--surface-1);
font-weight: var(--font-weight-8);
}
}
}
}
/* utilities to aid in custom select children */
.custom-option {
display: flex;
gap: var(--size-3);
align-items: center;
justify-content: space-between;
.primary & {
display: grid;
gap: var(--size-1);
}
&:has(.description) {
display: grid;
justify-items: start;
gap: var(--size-2);
padding-block: var(--size-2);
text-shadow: none;
& .description {
color: var(--text-2);
}
}
option:is(:checked) & .description {
font-weight: normal;
color: var(--surface-2);
}
selectedcontent & .description {
display: none;
}
}
.indicator {
display: inline-block;
block-size: var(--size-2);
inline-size: var(--size-2);
border-radius: var(--radius-round);
background: var(--gray-5);
&.success {
background: var(--green-5);
}
&.danger {
background: var(--red-5);
}
}
.option-text {
flex: 2;
}
.avatar {
border-radius: var(--radius-round);
overflow: hidden;
}
@layer demo.support {
body {
display: grid;
place-items: start;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
}
#support {
position: fixed;
inset-block-start: 10px;
inset-inline: 10px;
padding-block: 10px;
background: var(--surface-1);
display: grid;
gap: 10px;
text-align: center;
place-content: center;
background: hsl(from yellow h s l / 25%);
.supports-custom-select & {
display: none;
}
}
}