/*
* Input component
*
*/

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

.dnb-input {
  --input-font-size: var(--font-size-basis);
  --input-font-size--small: var(--font-size-basis);
  --input-font-size--medium: var(--font-size-basis);
  --input-font-size--large: var(--font-size-medium);
  --input-padding: 1rem;
  --input-padding--small: 1rem;
  --input-padding--medium: 1rem;
  --input-padding--large: 1rem;
  --input-height: 2rem;
  --input-height--small: 1.5rem;
  --input-height--medium: 2.5rem;
  --input-height--large: 3rem;
  --input-background-color: var(--color-white);

  display: inline-flex;
  align-items: center;

  font-size: var(--input-font-small);
  line-height: var(--input-height);
  text-align: left;

  &__inner {
    display: inline-flex;
    flex-direction: column;

    width: auto;
  }

  &__shell {
    position: relative;

    display: flex;
    align-items: center;

    border: var(--input-border-width) solid var(--color-sea-green);
  }

  &__row {
    display: inline-flex;
    align-items: center; // Safari gets wired if we use "baseline"
  }

  &__input {
    border: none;
    outline: none;
    word-break: normal;

    position: relative;
    z-index: 2; // to make sure we are over the placeholder
  }

  &__input[disabled] {
    user-select: none; // Safari / Touch fix
    opacity: 1; // iOS fix
  }

  &__shell,
  &__input {
    height: var(--input-height);
    border-radius: var(--input-border-radius);
  }

  &__placeholder,
  &__input {
    width: 100%; // to get overflow working properly
    padding-left: var(--input-padding);
    padding-right: var(
      --input-padding
    ); // we may expand things because of the ellipsis
  }

  &__placeholder,
  &__input,
  input#{&}__input // Safari fix
  {
    // reset browser styling
    padding-top: 0; // Safari fix
    padding-bottom: 0; // Safari fix

    color: inherit;
    background-color: transparent;

    // because we inherit the size on the input (reset.css)
    font-size: var(--input-font-size);

    // because we inherit the size on the input (reset.css)
    line-height: inherit; // Safari fix
  }

  &__placeholder {
    pointer-events: none;

    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;

    // NB: We may consider moving this part to include &__input
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // - Border outline handling
  &__border {
    display: flex;

    border-radius: var(--b-radius, var(--input-border-radius));

    @include fakeBorder(
      var(--b-color, var(--input-border-color)),
      var(--b-width, var(--input-border-width)),
      var(--b-inset, var(--input-border-inset, inset))
    );
  }
  &--disabled &__border {
    // Overwrite the border
    @include fakeBorder(
      var(--input-border-color--disabled),
      var(--input-border-width--disabled),
      var(--input-border-inset--disabled, inset)
    );
  }
  &__border:focus-within {
    --b-color: var(--input-border-color--active);
    --b-width: var(--input-border-width--active);
    --b-inset: var(--input-border-inset--active);
    --b-radius: var(--input-border-radius--active);
  }
  &__border:hover,
  &__border.hover {
    --b-color: var(--input-border-color--hover);
    --b-width: var(--input-border-width--hover);
    --b-inset: var(--input-border-inset--hover);
  }
  &__status--error &__border {
    --b-color: var(--input-border-color__error);
    --b-width: var(--input-border-width__error);
  }
  &__status--error &__border:focus-within {
    --b-color: var(--input-border-color__error);
    --b-width: var(--input-border-width__error--active);
    --b-inset: var(--input-border-inset--active);
    --b-radius: var(--input-border-radius--active);
  }
  &__status--error &__border:hover,
  &__status--error &__border.hover {
    --b-color: var(--input-border-color__error);
    --b-width: var(--input-border-width__error--hover);
    --b-inset: var(--input-border-inset--hover);
  }
  html[data-whatinput='keyboard'] &__border:focus-within {
    --b-color: var(--input-border-color--focus);
    --b-width: var(--input-border-width--focus);
    --b-inset: var(--input-border-inset--focus);
    --b-radius: var(--input-border-radius--focus);
  }
  html[data-whatinput='keyboard'] &__status--error &__border:focus-within {
    --b-color: var(--input-border-color__error--focus);
    --b-width: var(--input-border-width--focus);
    --b-inset: var(--input-border-inset--focus);
    --b-radius: var(--input-border-radius--focus);
  }

  // centering type="file" - here we can actually keep it as pixels
  input#{&}__input[type='file'] {
    line-height: calc(var(--input-height) - 2px);
  }

  // hide the clear button on input type="search"
  &__input::-webkit-search-cancel-button {
    display: none;
  }

  &__input::-ms-clear {
    display: none;
  }

  // change file type appearance on type="file"
  ::-webkit-file-upload-button {
    cursor: pointer;
    outline: none;
    color: var(--color-sea-green);

    &:active,
    &:hover {
      color: var(--color-emerald-green);
    }
  }

  &--has-submit-element &__placeholder,
  &--has-submit-element &__input,
  &--has-clear-button &__placeholder,
  &--has-clear-button &__input {
    padding-right: calc(var(--input-padding) * 2.5);
  }

  // Because of password managers
  &--password &__placeholder,
  &--password &__input {
    margin-right: 2.5rem;
    padding-right: 0;

    &::-ms-clear {
      display: none;
    }

    // Hiding "password reveal" button in Ms Edge
    &::-ms-reveal {
      display: none;
    }
  }

  &--password &__placeholder {
    padding-right: 4rem;
  }

  &--password &__input {
    font-family: var(--font-family-monospace);
  }

  // change the autocomplete appearance once filled out
  &__input:autofill {
    // set the border and the background
    box-shadow:
      0 0 0 var(--input-border-width) var(--input-border-color)
        var(--autofill-inset, inset),
      0 0 0 10em var(--input-background-color) inset;
  }

  &__suffix {
    color: inherit;
  }

  &__submit-element {
    z-index: 3; // over placeholder

    margin-left: calc(var(--input-height) * -1);
    line-height: var(--line-height-basis);

    .dnb-button--input-button {
      width: var(--input-height);
      height: var(--input-height);
      line-height: var(--input-height);
    }
  }

  &__submit-button {
    position: relative;

    // place the button vertically
    align-self: center; /* IE needs this to stay centered */

    &__button {
      // For now we don't support a button on the left side
      border-radius: 0 var(--input-border-radius)
        var(--input-border-radius) 0;
    }
  }

  > .dnb-form-label {
    line-height: var(--line-height-basis);
  }

  @include formLabelWrap();

  &:not(&--vertical)[class*='__status'] {
    align-items: flex-start;

    & > .dnb-form-label {
      // vertical align the current font
      margin-top: 0.25rem;
    }
  }

  &--small {
    line-height: var(--input-height--small);

    .dnb-input__shell,
    .dnb-input__input {
      height: var(--input-height--small);
    }

    .dnb-input__placeholder,
    .dnb-input__input {
      padding-left: var(--input-padding--small);
      padding-right: var(--input-padding--small);
      font-size: var(--input-font-size--small);
    }

    .dnb-input__submit-element {
      margin-left: calc(var(--input-height--small) * -1);

      .dnb-button--input-button {
        width: var(--input-height--small);
        height: var(--input-height--small);
        line-height: var(--input-height--small);
      }
    }
  }
  &--small#{&}--has-submit-element &__placeholder,
  &--small#{&}--has-submit-element &__input,
  &--small#{&}--has-clear-button &__placeholder,
  &--small#{&}--has-clear-button &__input {
    padding-right: calc(var(--input-padding--small) * 2);
  }

  &--medium {
    line-height: var(--input-height--medium);

    .dnb-input__shell,
    .dnb-input__input {
      height: var(--input-height--medium);
    }

    .dnb-input__placeholder,
    .dnb-input__input {
      padding-left: var(--input-padding--medium);
      padding-right: var(--input-padding--medium);
      font-size: var(--input-font-size--medium);
    }

    .dnb-input__submit-element {
      margin-left: calc(var(--input-height--medium) * -1);

      .dnb-button--input-button {
        width: var(--input-height--medium);
        height: var(--input-height--medium);
        line-height: var(--input-height--medium);
      }
    }
  }
  &--medium#{&}--has-submit-element &__placeholder,
  &--medium#{&}--has-submit-element &__input,
  &--medium#{&}--has-clear-button &__placeholder,
  &--medium#{&}--has-clear-button &__input {
    padding-right: calc(var(--input-padding--medium) * 3);
  }

  &--large {
    line-height: var(--input-height--large);

    .dnb-input__shell,
    .dnb-input__input {
      height: var(--input-height--large);
    }

    .dnb-input__placeholder,
    .dnb-input__input {
      padding-left: var(--input-padding--large);
      padding-right: var(--input-padding--large);
      font-size: var(--input-font-size--large);
    }

    .dnb-input__submit-element {
      margin-left: calc(var(--input-height--large) * -1);

      .dnb-button--input-button {
        width: var(--input-height--large);
        height: var(--input-height--large);
        line-height: var(--input-height--large);
      }
    }
  }
  &--large#{&}--has-submit-element &__placeholder,
  &--large#{&}--has-submit-element &__input,
  &--large#{&}--has-clear-button &__placeholder,
  &--large#{&}--has-clear-button &__input {
    padding-right: calc(var(--input-padding--large) * 3.5);
  }
  &--large#{&}--has-clear-button:not(#{&}--has-submit-element)
    .dnb-input__submit-element {
    margin-left: calc(var(--input-height--large) + 0.5rem * -1);
  }

  &__align--center &__placeholder,
  &__align--center &__input {
    text-align: center;
  }

  &__align--right &__placeholder,
  &__align--right &__input {
    text-align: right;
  }

  // Input clear button styles
  &--clear.dnb-input__submit-element {
    opacity: 0;
    transition: opacity 200ms ease-in-out;

    .dnb-button {
      width: var(--input-height--small);
      height: var(--input-height--small);
      border-radius: var(--button-border-radius);

      .dnb-button__icon {
        margin: auto;
      }

      html:not([data-whatintent='touch'])
        &:not(.dnb-button--has-text):hover[disabled] {
        cursor: default;
      }
    }
  }

  &--small &--clear.dnb-input__submit-element {
    .dnb-button {
      width: 1rem;
      height: 1rem;
    }
  }

  &--medium &--clear,
  &--large &--clear {
    &.dnb-input__submit-element {
      .dnb-button {
        width: var(--input-height--small);
        height: var(--input-height--small);
      }
    }
  }

  &[data-has-content='true'] &--clear {
    opacity: 1;
  }

  &--has-submit-element &--clear.dnb-input__submit-element {
    margin-right: 2.5rem;
  }
  &--small#{&}--has-submit-element &--clear.dnb-input__submit-element {
    margin-right: 2rem;
  }
  &--medium#{&}--has-submit-element &--clear.dnb-input__submit-element {
    margin-right: 3rem;
  }
  &--large#{&}--has-submit-element &--clear.dnb-input__submit-element {
    margin-right: 3.5rem;
  }

  &__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem;
  }

  &--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  // make full width
  &--stretch {
    display: flex;
    flex-grow: 1;
  }

  &--stretch & {
    &__inner {
      flex-grow: 1;
    }

    &__inner,
    &__shell {
      width: 100%;
    }
  }

  &--stretch .dnb-form-label + &__inner {
    width: auto;
  }
  &--vertical#{&}--stretch &__inner {
    width: 100%;
  }

  .dnb-form-row--horizontal &--stretch {
    width: 100%;
  }

  // Icon
  &__icon {
    order: 0;
    position: absolute;
    z-index: 2; // to ensure its still visible on autofill
    left: 1rem;
    right: auto;

    top: 0;
    bottom: 0;
    margin: auto;
  }

  &--icon-position-right &__icon {
    order: 1;
    left: auto;
    right: 1rem;
  }
  &--icon-position-left#{&}--has-icon &__input,
  &--icon-position-left#{&}--has-icon &__placeholder {
    padding-left: 2.5rem;
  }
  &--icon-position-right#{&}--has-icon &__input,
  &--icon-position-right#{&}--has-icon &__placeholder {
    padding-right: 2.5rem;
  }
  &--icon-size-medium#{&}--icon-position-left#{&}--has-icon &__input,
  &--icon-size-medium#{&}--icon-position-left#{&}--has-icon
    &__placeholder {
    padding-left: 3rem;
  }
  &--icon-size-medium#{&}--icon-position-right#{&}--has-icon &__input,
  &--icon-size-medium#{&}--icon-position-right#{&}--has-icon
    &__placeholder {
    padding-right: 3rem;
  }

  html[data-visual-test] &__input {
    caret-color: var(--color-white);
  }

  &[data-has-content='false'] &__input:focus:autofill {
    --autofill-inset: none;
  }

  &[data-input-state='focus'] &__placeholder {
    display: none;
  }

  &--keep-placeholder[data-input-state='focus'] &__placeholder {
    display: block;
    color: var(--color-black-20);
  }

  .dnb-responsive-component & {
    @media screen and (max-width: 40em) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      margin-bottom: 0.5rem;

      // helps to stay in alignment with suffix
      &__row {
        align-items: flex-start;
      }

      & > .dnb-form-label {
        margin-bottom: 0.5rem;
      }
    }
  }
}