@dnb/eufemia/es/components/textarea/style/dnb-textarea.min.css

DNB Eufemia Design System UI Library

.dnb-textarea{--textarea-border-radius:0.25rem;--textarea-rows:2;--textarea-background-color:var(--color-white);--textarea-placeholder-color:grey;--textarea-size--small:0.25rem;--textarea-size--medium:0.5rem;--textarea-size--large:0.75rem;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__shell:after{--size:0.5rem;--bg-size:cover;--bg-pos:0;background-color:var(--textarea-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='.5' d='m1 7 6-6M3.5 7 7 3.5M6 7l1-1'/%3E%3C/svg%3E");background-position:var(--bg-pos) var(--bg-pos);background-size:var(--bg-size);bottom:0;height:var(--size);pointer-events:none;position:absolute;right:0;width:var(--size);z-index:2}.dnb-textarea__resize--medium .dnb-textarea__shell:after{content:""}.dnb-textarea__resize--large .dnb-textarea__shell:after{--size:1rem;--bg-size:60%;--bg-pos:0.25rem;content:""}.dnb-textarea__autoresize .dnb-textarea__shell:after{content:none}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--textarea-background-color);border-color:transparent;border-radius:var(--textarea-border-radius);bottom:calc(var(--textarea-size-vertical)*-1);box-shadow:var(--textarea-border-inset,inset) 0 0 0 var(--border-width) var(--border-color);left:calc(var(--textarea-size-horizontal)*-1);position:absolute;right:calc(var(--textarea-size-vertical)*-1);top:calc(var(--textarea-size-vertical)*-1);z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-horizontal)}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea__textarea{background-color:var(--textarea-background-color,var(--color-white));border:none;color:var(--textarea-color,var(--color-black));cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0;position:relative;width:100%;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:auto}}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-width,.5rem)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip!important}}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);background-color:var(--textarea-background-color,var(--color-white));background-color:transparent;border:none;color:var(--textarea-color,var(--color-black));color:var(--textarea-placeholder-color);cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__textarea:-webkit-autofill{box-shadow:0 0 0 10em var(--textarea-background-color,var(--color-white)) inset}.dnb-textarea__textarea:autofill{box-shadow:0 0 0 10em var(--textarea-background-color,var(--color-white)) inset}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea,.dnb-textarea__size--small{--textarea-size-vertical:var(--textarea-size--small);--textarea-size-horizontal:1rem}.dnb-textarea__size--medium{--textarea-size-vertical:var(--textarea-size--medium);--textarea-size-horizontal:1rem}.dnb-textarea__size--large{--textarea-size-vertical:var(--textarea-size--large);--textarea-size-horizontal:1rem}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:var(--textarea-size-vertical)}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}.dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder{--textarea-placeholder-color:var(--textarea-placeholder-color--focus);display:block}.dnb-form-row--horizontal .dnb-textarea--stretch{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:var(--textarea-border-radius)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}