flyonui/components/select.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}@media (width>=640px){.sm\:select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.sm\:input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.sm\:select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.sm\:select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.sm\:select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.sm\:select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.sm\:select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.sm\:select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.sm\:select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.sm\:select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}}@media (width>=768px){.md\:select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.md\:input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.md\:select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.md\:select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.md\:select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.md\:select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.md\:select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.md\:select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.md\:select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.md\:select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}}@media (width>=1024px){.lg\:select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.lg\:input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.lg\:select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.lg\:select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.lg\:select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.lg\:select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.lg\:select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.lg\:select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.lg\:select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.lg\:select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}}@media (width>=1280px){.xl\:select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.xl\:input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.xl\:select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.xl\:select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.xl\:select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.xl\:select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.xl\:select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.xl\:select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.xl\:select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.xl\:select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}}@media (width>=1536px){.\32 xl\:select{cursor:pointer;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);-webkit-user-select:none;user-select:none;height:var(--size);touch-action:manipulation;text-overflow:ellipsis;border:var(--border)solid #0000;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000);--size:calc(var(--size-field,.25rem)*9.5);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>");background-position:calc(100% - .5rem);background-repeat:no-repeat;background-size:1.3em;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&:hover:not(:focus,:focus-within),&:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}[dir=rtl] &{background-position:1.3em}& select{appearance:none;background-color:#0000;border-style:none;width:calc(100% + 2.75rem);height:100%;margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none}}&[multiple]{background-image:none}&:focus,&:focus-within{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--input-color:var(--color-primary);--tw-shadow-color:color-mix(in oklab,var(--input-color)30%,#0000);outline:1px solid var(--input-color);border-color:var(--input-color);isolation:isolate}&:has(>select[disabled]),&:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);border-width:0;border-color:color-mix(in oklab,var(--color-base-content)10%,transparent);background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}}.\32 xl\:input>.select{border-style:var(--tw-border-style);border-width:0;height:auto;&:focus,&:focus-within{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:var(--tw-outline-style);outline-width:0}}.\32 xl\:select:has(>.select-floating) select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.\32 xl\:select-floating-label{inset-inline-start:0;background-color:var(--color-base-100);width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);margin-inline-start:.75rem;padding-inline:.25rem;position:absolute;top:0;overflow:hidden;translate:-12.5% calc(-50% - .125em);scale:.75}.\32 xl\:select-floating{width:100%;display:block;position:relative;& .select{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}&:has(>select[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px;&~.select-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:has(.select:focus){& .select-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.select-xs) .select-floating-label,&:has(.select-sm) .select-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-inline-start:.625rem}&:has(.select-md) .select-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));margin-inline-start:.75rem}&:has(.select-lg) .select-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));margin-inline-start:1rem}&:has(.select-xl) .select-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));margin-inline-start:1.125rem}}.\32 xl\:select-xs{--size:calc(var(--size-field,.25rem)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.\32 xl\:select-sm{--size:calc(var(--size-field,.25rem)*7.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-inline:.625rem 2rem;& select{margin-inline-end:-2rem;padding-inline:.625rem 2rem}}.\32 xl\:select-md{--size:calc(var(--size-field,.25rem)*9.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));padding-inline:.75rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:.75rem 2.5rem}}.\32 xl\:select-lg{--size:calc(var(--size-field,.25rem)*11.5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1rem 2.5rem}}.\32 xl\:select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));padding-inline:1.125rem 2.5rem;& select{margin-inline-end:-2.5rem;padding-inline:1.125rem 2.5rem}}}}