flyonui/components/textarea.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}@media (width>=640px){.sm\:textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.sm\:textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.sm\:textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.sm\:textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.sm\:textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.sm\:textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.sm\:textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\:textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (width>=768px){.md\:textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.md\:textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.md\:textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.md\:textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.md\:textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.md\:textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.md\:textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.md\:textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (width>=1024px){.lg\:textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.lg\:textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.lg\:textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.lg\:textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.lg\:textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.lg\:textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.lg\:textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.lg\:textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.lg\:textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.lg\:textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.lg\:textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (width>=1280px){.xl\:textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.xl\:textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.xl\:textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.xl\:textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.xl\:textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.xl\:textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.xl\:textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.xl\:textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.xl\:textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.xl\:textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.xl\:textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (width>=1536px){.\32 xl\:textarea{appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);width:100%;min-height:5rem;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-base-content);flex-shrink:1;padding-block:.5rem;padding-inline:1rem;display:inline-flex;&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}&:hover{@media (hover:hover){border-color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}&:focus-visible{--tw-outline-style:none;outline-style:none}border:var(--border)solid #0000;border-color:var(--input-color);touch-action:manipulation;--input-color:color-mix(in oklab,var(--color-base-content)40%,#0000)& :where(textarea){appearance:none;background-color:#0000;border:none;&:focus,&:focus-within{--tw-outline-style:none;outline-style: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(>textarea[disabled]),&:is(:disabled,[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(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}}.\32 xl\:textarea:has(>textarea){padding:0;& textarea{width:100%;height:auto;min-height:5rem;&:first-child{padding-block:.5rem;padding-inline-start:1rem}&:nth-child(2){padding-block:.5rem}&:last-child{padding-block:.5rem;padding-inline-end:1rem}}}.\32 xl\:textarea:has(>.textarea-floating){padding:0;& :where(.textarea-floating:first-child)>textarea{padding-block:.5rem;padding-inline-start:1rem}& :where(.textarea-floating:nth-child(2))>textarea{padding-block:.5rem}& :where(.textarea-floating:last-child)>textarea{padding-block:.5rem;padding-inline-end:1rem}& :where(.textarea-floating:nth-child(2)) .textarea-floating-label,& :where(.textarea-floating:last-child) .textarea-floating-label{margin-inline-start:0}& *>textarea{width:100%;height:100%;min-height:5rem}}.\32 xl\:textarea:has(>.textarea-floating) textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}}.\32 xl\:textarea-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:color-mix(in oklab,var(--color-base-content)50%,transparent);inset-inline-start:0;top:9px;background-color:#0000;margin-inline-start:1rem;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline-start:1px;overflow:hidden}.\32 xl\:textarea-floating{width:100%;display:block;position:relative;& .textarea{&::placeholder{color:#0000}&:focus{&::placeholder{color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}field-sizing:content&:has(>textarea[disabled]),&:is(:disabled,[disabled]){border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in oklab,var(--color-base-content)40%,transparent);opacity:.5;background-color:#0000;&::placeholder{color:#0000}&~.textarea-floating-label{color:color-mix(in oklab,var(--color-base-content)30%,transparent)}}}&:focus-within,&:not(:has(textarea:placeholder-shown)),&:has(.textarea:focus){& .textarea-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);padding-inline:.25rem;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}}&:focus-within,&:has(.textarea:focus){& .textarea-floating-label{--input-color:var(--color-primary);color:var(--input-color)}}&:has(.textarea-xs) .textarea-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:has(.textarea-sm) .textarea-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&:has(.textarea-md) .textarea-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&:has(.textarea-lg) .textarea-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&:has(.textarea-xl) .textarea-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.\32 xl\:textarea-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\32 xl\:textarea-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\32 xl\:textarea-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\32 xl\:textarea-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.\32 xl\:textarea-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}}