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

DNB Eufemia Design System UI Library

.eufemia-scope--11_0_0 .dnb-textarea{--textarea-color-background:var(--token-color-background-neutral);--textarea-color-text:var(--token-color-text-neutral);--textarea-color-placeholder:var(
    --token-color-text-neutral-alternative
  );--textarea-color-border:var(--token-color-stroke-action);--textarea-border-radius--default:0.25rem;--textarea-border-width:var(--textarea-border-width--default);--textarea-border-width--default:0.0625rem;--textarea-border-width--hover:0.125rem;--textarea-rows:2;--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)}.eufemia-scope--11_0_0 .dnb-textarea__inner{display:inline-flex;flex-direction:column}.eufemia-scope--11_0_0 .dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.eufemia-scope--11_0_0 .dnb-textarea__shell:after{--size:0.5rem;--bg-size:cover;--bg-pos:0;background-color:var(--textarea-color-background);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}.eufemia-scope--11_0_0 .dnb-textarea__resize--medium .dnb-textarea__shell:after{content:""}.eufemia-scope--11_0_0 .dnb-textarea__resize--large .dnb-textarea__shell:after{--size:1rem;--bg-size:60%;--bg-pos:0.25rem;content:""}.eufemia-scope--11_0_0 .dnb-textarea__autoresize .dnb-textarea__shell:after{content:none}.eufemia-scope--11_0_0 .dnb-textarea__state{--border-color:var(--textarea-color-border);--border-width:var(--textarea-border-width,var(--textarea-border-width--default));background-color:var(--textarea-color-background);border-color:transparent;border-radius:var(--textarea-border-radius,var(--textarea-border-radius--default));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}.eufemia-scope--11_0_0 .dnb-textarea__row{display:inline-flex;margin:var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-vertical) var(--textarea-size-horizontal)}.eufemia-scope--11_0_0 .dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.eufemia-scope--11_0_0 .dnb-textarea__textarea{background-color:var(--textarea-color-background);border:none;color:var(--textarea-color-text);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]) .eufemia-scope--11_0_0 .dnb-textarea__textarea{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html:not([data-visual-test]) .eufemia-scope--11_0_0 .dnb-textarea__textarea{scroll-behavior:auto}}.eufemia-scope--11_0_0 .dnb-textarea__textarea{scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888)}.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}.eufemia-scope--11_0_0 .dnb-textarea__textarea::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-width,.5rem)}}@supports (-moz-appearance:none){.eufemia-scope--11_0_0 .dnb-textarea__textarea{overflow-x:clip!important}}.eufemia-scope--11_0_0 .dnb-textarea__textarea ::selection{text-shadow:none}.eufemia-scope--11_0_0 .dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);background-color:transparent;border:none;color:var(--textarea-color-placeholder);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}.eufemia-scope--11_0_0 .dnb-textarea__placeholder,.eufemia-scope--11_0_0 .dnb-textarea__textarea{text-align:left}.eufemia-scope--11_0_0 .dnb-textarea__textarea:-webkit-autofill{box-shadow:0 0 0 10em var(--textarea-color-background,var(--color-white)) inset}.eufemia-scope--11_0_0 .dnb-textarea__textarea:autofill{box-shadow:0 0 0 10em var(--textarea-color-background,var(--color-white)) inset}.eufemia-scope--11_0_0 .dnb-textarea__align--right .dnb-textarea__placeholder,.eufemia-scope--11_0_0 .dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.eufemia-scope--11_0_0 .dnb-textarea,.eufemia-scope--11_0_0 .dnb-textarea__size--small{--textarea-size-vertical:var(--textarea-size--small);--textarea-size-horizontal:1rem}.eufemia-scope--11_0_0 .dnb-textarea__size--medium{--textarea-size-vertical:var(--textarea-size--medium);--textarea-size-horizontal:1rem}.eufemia-scope--11_0_0 .dnb-textarea__size--large{--textarea-size-vertical:var(--textarea-size--large);--textarea-size-horizontal:1rem}.eufemia-scope--11_0_0 .dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.eufemia-scope--11_0_0 .dnb-textarea--disabled{--textarea-color-background:var(
    --token-color-background-action-disabled
  );--textarea-color-text:var(--token-color-text-neutral-alternative);--textarea-color-border:var(--token-color-stroke-action-disabled)}.eufemia-scope--11_0_0 .dnb-textarea--disabled .dnb-textarea__textarea,.eufemia-scope--11_0_0 .dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.eufemia-scope--11_0_0 .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.eufemia-scope--11_0_0 .dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.eufemia-scope--11_0_0 .dnb-textarea__inner>.dnb-form-status{margin-top:.5rem;order:2}.eufemia-scope--11_0_0 .dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:var(--textarea-size-vertical)}.eufemia-scope--11_0_0 .dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.eufemia-scope--11_0_0 .dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.eufemia-scope--11_0_0 .dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.eufemia-scope--11_0_0 .dnb-textarea{flex-wrap:wrap}.eufemia-scope--11_0_0 .dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.eufemia-scope--11_0_0 .dnb-textarea--stretch{display:flex;flex-grow:1}.eufemia-scope--11_0_0 .dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.eufemia-scope--11_0_0 .dnb-textarea--stretch .dnb-textarea__inner,.eufemia-scope--11_0_0 .dnb-textarea--stretch .dnb-textarea__shell,.eufemia-scope--11_0_0 .dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.eufemia-scope--11_0_0 .dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.eufemia-scope--11_0_0 .dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}.eufemia-scope--11_0_0 .dnb-textarea--keep-placeholder.dnb-textarea--focus .dnb-textarea__placeholder{display:block}@media screen and (max-width:40em){.eufemia-scope--11_0_0 .dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.eufemia-scope--11_0_0 .dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .eufemia-scope--11_0_0 .dnb-textarea__textarea{caret-color:var(--color-white)}.eufemia-scope--11_0_0 .dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:var(--textarea-border-radius,var(--textarea-border-radius--default))}.eufemia-scope--11_0_0 .dnb-textarea.dnb-skeleton .dnb-textarea__state,.eufemia-scope--11_0_0 .dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}.eufemia-scope--11_0_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state,.eufemia-scope--11_0_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-border-width:var(--textarea-border-width--hover);--textarea-border-inset: }.eufemia-scope--11_0_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus~.dnb-textarea__state{--textarea-color-border:var(--token-color-stroke-action-pressed);--textarea-border-radius:var(--textarea-border-radius--focus)}.eufemia-scope--11_0_0 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover~.dnb-textarea__state{--textarea-color-border:var(
    --token-color-stroke-action-hover
  )}.eufemia-scope--11_0_0 .dnb-textarea__status--error .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled)~.dnb-textarea__state{--textarea-color-border:var(--token-color-stroke-error)}