/*
* Input theme
*
*/

.dnb-input__border--tokens {
  // Border
  --input-border-radius--default: 0.5rem;
  --input-border-radius--active: 1.5rem;
  --input-border-radius--focus: 1.5rem;
}

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

  // 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,
  &__input {
    transition: border-radius 0.25s ease-out;
  }

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

  &:not([data-input-state='disabled']) {
    // Focus
    &[data-input-state='focus'] {
      --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-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) {
      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);
      }
    }
  }
}