flyonui/components/advanceSelect.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}@media (width>=640px){.sm\:advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.sm\:advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.sm\:advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.sm\:select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.sm\:advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.sm\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.sm\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.sm\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.sm\:advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.sm\:advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}}@media (width>=768px){.md\:advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.md\:advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.md\:advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.md\:select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.md\:advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.md\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.md\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.md\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.md\:advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.md\:advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}}@media (width>=1024px){.lg\:advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.lg\:advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.lg\:advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.lg\:select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.lg\:advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.lg\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.lg\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.lg\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.lg\:advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.lg\:advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}}@media (width>=1280px){.xl\:advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.xl\:advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.xl\:advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.xl\:select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.xl\:advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.xl\:advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.xl\:advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}}@media (width>=1536px){.\32 xl\:advance-select-toggle{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);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);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;align-items:center;padding-inline:.75rem 2.5rem;display:inline-flex;position:relative;&: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}&:focus-visible{outline:unset}}.\32 xl\:advance-select-menu{z-index:10;width:100%;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*.5)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-image:none;padding:.5rem}.\32 xl\:advance-select-option{cursor:pointer;border-radius:var(--radius-field);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);padding-block:.625rem;padding-inline:1rem;&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent)}}&:focus{background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}}.\32 xl\:select-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.\32 xl\:advance-select-tag{cursor:pointer;border-radius:var(--radius-field);border-style:var(--tw-border-style);background-color:var(--color-base-100);text-align:start;width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);text-wrap:nowrap;color:var(--color-base-content);border-width:1px;align-items:center;padding-inline:.375rem 2.5rem;display:flex;position:relative;&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)&: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}&:focus-visible{outline:unset}}.\32 xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.25rem;padding-inline:.5rem}}}.\32 xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.\32 xl\:advance-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;&~.advance-select-menu{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.375rem;padding-inline:.5rem}}}.\32 xl\:advance-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;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}.\32 xl\:advance-select-xl{--size:calc(var(--size-field,.25rem)*14);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-inline:1rem 2.5rem;&~.advance-select-menu .advance-select-option{cursor:pointer;width:100%;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding-block:.75rem;padding-inline:1rem}}}}