/*
* Input theme
*
*/

@import '../../../../style/core/utilities.scss';

.dnb-input__border--tokens {
  // Border
  --input-border-color: var(--sb-color-gray-dark-2);
  --input-border-color--hover: var(--sb-color-violet);
  --input-border-color--active: var(--sb-color-violet);
  --input-border-color--focus: var(--focus-ring-color);
  --input-border-color--disabled: var(--sb-color-gray);
  --input-border-color__error: var(--sb-color-red);
  --input-border-color__error--focus: var(--sb-color-red);
  --input-border-width: 0.0625rem;
  --input-border-width--hover: 0.125rem;
  --input-border-width--active: 0.0625rem;
  --input-border-width--disabled: 0.0625rem;
  --input-border-width--focus: var(--focus-ring-width);
  --input-border-width__error: 0.0625rem;
  --input-border-width__error--hover: 0.125rem;
  --input-border-width__error--active: 0.0625rem;
  --input-border-inset: inset;
  --input-border-inset--hover: inset;
  --input-border-inset--active: inset;
  --input-border-inset--focus: inset;
  --input-border-inset--disabled: inset;
  --input-border-radius: 0.5rem;
  --input-border-radius--active: 1.5rem;
  --input-border-radius--focus: 1.5rem;
}

.dnb-input {
  --input-height: 2.5rem;

  // Text
  --input-color: var(--input-color--default);
  --input-color--default: var(--sb-color-text);
  --input-color--active: var(--sb-color-text);

  // Button
  --input-button-border-color: var(--input-border-color);
  --input-button-border-width: var(--input-border-width);
  --input-button-border-radius: var(--input-border-radius);

  // - Border outline handling

  &__shell {
    background-color: var(--input-background-color);
    transition: border-radius 0.25s ease-out;
    border: none;
    color: var(--input-color);
  }

  &__submit-button__button {
    --button-secondary-color: var(--sb-color-violet);
    --button-secondary-color--active: var(--sb-color-violet);
  }

  &__placeholder {
    color: var(--sb-color-gray-dark-3);
  }

  &[data-input-state='disabled'] {
    .dnb-input__shell {
      &,
      .dnb-icon,
      .dnb-input__placeholder {
        color: var(--sb-color-gray-dark-2);
      }

      -webkit-text-fill-color: currentcolor;

      background-color: var(--sb-color-gray-light);
    }
  }

  &:not([data-input-state='disabled']) {
    // Focus
    &[data-input-state='focus'] {
      --input-color: var(--input-color--active);
      --input-button-border-color: var(--input-border-color--active);
      --input-button-border-radius: var(--input-border-radius--active);

      html[data-whatinput='keyboard'] & {
        --input-button-border-color: var(--input-border-color--focus);
        --input-button-border-width: var(--input-border-width--focus);
      }

      &.dnb-input__status--error {
        html[data-whatinput='keyboard'] & {
          --input-button-border-color: var(
            --input-border-color__error--focus
          );
        }
      }
    }

    &.dnb-input__status--error {
      --input-color--default: var(--sb-color-red);
      --input-color--active: var(--sb-color-text);
      --input-button-border-color: var(--sb-color-red);

      .dnb-input__submit-button__button {
        --button-secondary-background--hover: var(--sb-color-red);
        --button-secondary-color--hover: var(--sb-color-white);
        --button-secondary-color--active: var(--sb-color-red);
      }
    }

    .dnb-input__submit-button__button:not(:focus-visible) {
      background-color: transparent;
      box-shadow: none;
      border-radius: 0 var(--input-button-border-radius)
        var(--input-button-border-radius) 0;
      &:hover,
      &:active {
        border: var(--input-button-border-width) solid
          var(--input-button-border-color);
        border-left: none;
        padding-left: var(--input-button-border-width);
      }
    }
  }
}