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

.dnb-input {
  color: #007272;
  color: var(--input-text-color); }
  .dnb-input__shell {
    background-color: #fff;
    background-color: var(--input-background-color);
    border: none;
    -webkit-box-shadow: inset 0 0 0 0.0625rem #008484;
            box-shadow: inset 0 0 0 0.0625rem #008484;
    -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
            box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
    border-color: transparent; }
    .dnb-input__shell[data-input-state='dirty'] {
      color: #14555a;
      color: var(--input-text-color--changed);
      background-color: #fff;
      background-color: var(--input-background-color--changed); }
    .dnb-input__shell[data-input-state='disabled'] {
      color: #b3dada;
      color: var(--input-text-color--disabled);
      -webkit-box-shadow: inset 0 0 0 0.0625rem #b3dada;
              box-shadow: inset 0 0 0 0.0625rem #b3dada;
      -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color--disabled);
              box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color--disabled);
      border-color: transparent;
      background-color: #f4fbf9;
      background-color: var(--input-background-color--disabled); }
    .dnb-input__shell:not([data-input-state='disabled']):hover, .dnb-input__shell[data-input-state='focus'] {
      color: #007272;
      color: var(--input-text-color--focus);
      background-color: #fff;
      background-color: var(--input-background-color--focus);
      -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(--input-border-color--focus);
              box-shadow: 0 0 0 0.125rem var(--input-border-color--focus);
      border-color: transparent; }
  .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']), .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']):not([data-input-state='disabled']):hover {
    -webkit-box-shadow: 0 0 0 0.125rem #e10076;
            box-shadow: 0 0 0 0.125rem #e10076;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
            box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
    border-color: transparent; }
  .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']) ~ .dnb-input__submit-button .dnb-button__icon,
  .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']) ~ .dnb-input__submit-button .dnb-button--secondary .dnb-button__icon {
    color: #e10076;
    color: var(--color-cherry-red); }
  .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']) ~ .dnb-input__submit-button .dnb-button {
    -webkit-box-shadow: 0 0 0 0.125rem #e10076;
            box-shadow: 0 0 0 0.125rem #e10076;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
            box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
    border-color: transparent; }
  .dnb-input ::-moz-selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--input-text-color--focus);
    text-shadow: none; }
  .dnb-input ::selection {
    background-color: #a5e1d2;
    background-color: var(--color-mint-green);
    color: #007272;
    color: var(--input-text-color--focus);
    text-shadow: none; }
  .dnb-input__input:not([disabled]):not([readonly]):focus ~ .dnb-input__placeholder {
    display: none; }
  .dnb-input__shell[data-input-state='focus'][data-has-content='false'] .dnb-input__input:not([disabled]):not([readonly]) .dnb-input__placeholder {
    display: none; }
