daisyui/components/select.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}@media (width>=640px){.sm\:select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.sm\:select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.sm\:select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.sm\:select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.sm\:select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.sm\:select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.sm\:select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.sm\:select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.sm\:select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.sm\:select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.sm\:select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.sm\:select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.sm\:select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.sm\:select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.sm\:select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}}@media (width>=768px){.md\:select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.md\:select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.md\:select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.md\:select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.md\:select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.md\:select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.md\:select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.md\:select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.md\:select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.md\:select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.md\:select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.md\:select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.md\:select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.md\:select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.md\:select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}}@media (width>=1024px){.lg\:select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.lg\:select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.lg\:select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.lg\:select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.lg\:select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.lg\:select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.lg\:select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.lg\:select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.lg\:select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.lg\:select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.lg\:select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.lg\:select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.lg\:select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.lg\:select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.lg\:select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}}@media (width>=1280px){.xl\:select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.xl\:select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.xl\:select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.xl\:select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.xl\:select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.xl\:select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.xl\:select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.xl\:select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.xl\:select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.xl\:select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.xl\:select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.xl\:select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.xl\:select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.xl\:select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.xl\:select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}}@media (width>=1536px){.\32 xl\:select{@layer daisyui.component{&{border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1))inset;border-color:var(--input-color);--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000);--size:calc(var(--size-field,.25rem)*10);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;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;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}[dir=rtl] &{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}&[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}& select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border)*2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem;&:focus,&:focus-within{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:not(:last-child){background-image:none;margin-inline-end:-1.375rem}}&:focus,&:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000);outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}&:has(>select[disabled]),&:is(:disabled,[disabled]),fieldset:disabled &{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:color-mix(in oklab,var(--color-base-content)40%,transparent);&::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}&:has(>select[disabled])>select[disabled]{cursor:not-allowed}&,& select{@supports (appearance:base-select){&{appearance:base-select}}&::picker(select){color:inherit;border:var(--border)solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth)*3px)-2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth)*.1)),0 8px 10px -6px rgb(0 0 0/calc(var(--depth)*.1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}@supports (appearance:base-select){&::picker(select){appearance:base-select}}&::picker-icon{display:none}& optgroup{padding-top:.5em;& option{&:first-child{margin-top:.5em}}}& option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);&:not(:disabled){&:hover,&:focus-visible{cursor:pointer;background-color:color-mix(in oklab,var(--color-base-content)10%,transparent);--tw-outline-style:none;outline-style:none;@media (forced-colors:active){&{outline-offset:2px;outline:2px solid #0000}}}&:active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth)*3px)-2px var(--color-neutral)}}}}[dir=rtl] &{&::picker(select),& select::picker(select){translate:.5rem}}}}.\32 xl\:select-ghost{@layer daisyui.modifier{&{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}&:focus,&:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}}}.\32 xl\:select-neutral{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-neutral)}}}.\32 xl\:select-primary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-primary)}}}.\32 xl\:select-secondary{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-secondary)}}}.\32 xl\:select-accent{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-accent)}}}.\32 xl\:select-info{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-info)}}}.\32 xl\:select-success{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-success)}}}.\32 xl\:select-warning{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-warning)}}}.\32 xl\:select-error{@layer daisyui.modifier{&,&:focus,&:focus-within{--input-color:var(--color-error)}}}.\32 xl\:select-xs{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*6);font-size:.6875rem}& option{padding-block:.25rem;padding-inline:.5rem}}}.\32 xl\:select-sm{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*8);font-size:.75rem}& option{padding-block:.25rem;padding-inline:.625rem}}}.\32 xl\:select-md{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*10);font-size:.875rem}& option{padding-block:.375rem;padding-inline:.75rem}}}.\32 xl\:select-lg{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*12);font-size:1.125rem}& option{padding-block:.375rem;padding-inline:1rem}}}.\32 xl\:select-xl{@layer daisyui.modifier{&{--size:calc(var(--size-field,.25rem)*14);font-size:1.375rem}& option{padding-block:.375rem;padding-inline:1.25rem}}}}}