/*
* Textarea theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
:root {
  --textarea-text-color: var(--color-sea-green);
  --textarea-text-color--focus: var(--color-sea-green);
  --textarea-text-color--changed: var(--color-emerald-green);
  --textarea-text-color--disabled: var(--color-sea-green-alt-30);
  --textarea-background-color: var(--color-white);
  --textarea-background-color--focus: var(--color-white);
  --textarea-background-color--changed: var(--color-white);
  --textarea-background-color--disabled: var(--color-mint-green-12); }

.dnb-textarea__textarea {
  border-radius: 0.5rem;
  /* IE11 fix */ }
  .dnb-textarea__textarea,
  .dnb-textarea--virgin .dnb-textarea__textarea,
  .dnb-textarea--initial .dnb-textarea__textarea {
    color: #007272;
    color: var(--textarea-text-color);
    background-color: #fff;
    background-color: var(--textarea-background-color); }
  .dnb-textarea--dirty .dnb-textarea__textarea {
    color: #14555a;
    color: var(--textarea-text-color--changed);
    background-color: #fff;
    background-color: var(--textarea-background-color--changed); }
  .dnb-textarea--focus .dnb-textarea__textarea, .dnb-textarea__textarea:focus, .dnb-textarea__textarea:hover {
    outline: none; }
    .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]), .dnb-textarea__textarea:focus:not([disabled]), .dnb-textarea__textarea:hover:not([disabled]) {
      color: #007272;
      color: var(--textarea-text-color--focus);
      background-color: #fff;
      background-color: var(--textarea-background-color--focus); }
      .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
        -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
                box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
        /* IE11 fix */ }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not(.status--error), .dnb-textarea__textarea:focus:not([disabled]):not(.status--error), .dnb-textarea__textarea:hover:not([disabled]):not(.status--error) {
            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                    box-shadow: 0 0 0 0.125rem #14555a;
            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
  .dnb-textarea__textarea[disabled],
  .dnb-textarea--disabled .dnb-textarea__textarea {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: #b3dada;
    color: var(--textarea-text-color--disabled);
    background-color: #f4fbf9;
    background-color: var(--textarea-background-color--disabled);
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
    -webkit-box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30);
            box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
    .dnb-textarea__textarea[disabled]::-webkit-scrollbar,
    .dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar {
      width: 0; }
  .dnb-textarea__textarea.status--error,
  .dnb-textarea__textarea .dnb-textarea__status--error {
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
  .dnb-textarea__textarea ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  .dnb-textarea__textarea ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .dnb-textarea__textarea {
      -ms-overflow-style: -ms-autohiding-scrollba;
      -webkit-box-shadow: 0 0 0 0.0625rem #008484;
              box-shadow: 0 0 0 0.0625rem #008484;
      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }

.dnb-textarea__placeholder {
  color: #007272;
  color: var(--textarea-text-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-line-clamp: var(--textarea-rows, 2); }

.dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea, .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:hover {
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
  -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
          box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
  -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
          box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }

.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder,
.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder {
  display: none; }

textarea.dnb-textarea {
  border-radius: 0.5rem;
  /* IE11 fix */ }
  textarea.dnb-textarea,
  .dnb-textarea--virgin textarea.dnb-textarea,
  .dnb-textarea--initial textarea.dnb-textarea {
    color: #007272;
    color: var(--textarea-text-color);
    background-color: #fff;
    background-color: var(--textarea-background-color); }
  .dnb-textarea--dirty textarea.dnb-textarea {
    color: #14555a;
    color: var(--textarea-text-color--changed);
    background-color: #fff;
    background-color: var(--textarea-background-color--changed); }
  .dnb-textarea--focus textarea.dnb-textarea, textarea.dnb-textarea:focus, textarea.dnb-textarea:hover {
    outline: none; }
    .dnb-textarea--focus textarea.dnb-textarea:not([disabled]), textarea.dnb-textarea:focus:not([disabled]), textarea.dnb-textarea:hover:not([disabled]) {
      color: #007272;
      color: var(--textarea-text-color--focus);
      background-color: #fff;
      background-color: var(--textarea-background-color--focus); }
      .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
        -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #14555a;
                box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #14555a;
        -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
                box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-emerald-green);
        /* IE11 fix */ }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          .dnb-textarea--focus textarea.dnb-textarea:not([disabled]):not(.status--error), textarea.dnb-textarea:focus:not([disabled]):not(.status--error), textarea.dnb-textarea:hover:not([disabled]):not(.status--error) {
            -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                    box-shadow: 0 0 0 0.125rem #14555a;
            -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                    box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
  textarea.dnb-textarea[disabled],
  .dnb-textarea--disabled textarea.dnb-textarea {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: #b3dada;
    color: var(--textarea-text-color--disabled);
    background-color: #f4fbf9;
    background-color: var(--textarea-background-color--disabled);
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
    -webkit-box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 0.5625rem #b3dada;
            box-shadow: 0 0 0 0.5rem #f4fbf9, 0 0 0 calc(0.5rem + 0.0625rem) #b3dada;
    -webkit-box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30);
            box-shadow: 0 0 0 var(--textarea-padding-width) var(--color-mint-green-12), 0 0 0 calc(var(--textarea-padding-width) + 0.0625rem) var(--color-sea-green-alt-30); }
    textarea.dnb-textarea[disabled]::-webkit-scrollbar,
    .dnb-textarea--disabled textarea.dnb-textarea::-webkit-scrollbar {
      width: 0; }
  textarea.dnb-textarea.status--error,
  textarea.dnb-textarea .dnb-textarea__status--error {
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
    -webkit-box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 0.625rem #e10076;
            box-shadow: 0 0 0 0.5rem
    #fff, 0 0 0 calc(0.5rem + 0.125rem) #e10076;
    -webkit-box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red);
            box-shadow: var(--textarea-border-inner), 0 0 0 calc(var(--textarea-padding-width) + 0.125rem) var(--color-cherry-red); }
  textarea.dnb-textarea ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  textarea.dnb-textarea ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--textarea-text-color--focus);
    text-shadow: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    textarea.dnb-textarea {
      -ms-overflow-style: -ms-autohiding-scrollba;
      -webkit-box-shadow: 0 0 0 0.0625rem #008484;
              box-shadow: 0 0 0 0.0625rem #008484;
      -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt);
              box-shadow: 0 0 0 0.0625rem var(--color-sea-green-alt); } }
