/*
* Autocomplete component
*
*/

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

.dnb-autocomplete {
  --autocomplete-width: 16rem;
  --autocomplete-height: 2rem;
  --autocomplete-height--small: 1.5rem;
  --autocomplete-height--medium: 2.5rem;
  --autocomplete-height--large: 3rem;
  --autocomplete-padding-horizontal: 1rem;
  --autocomplete-focus-border-width: 0.125rem;
  --autocomplete-text-padding: 0.5rem;
  --autocomplete-border-radius: 0.25rem;

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

  font-size: var(--font-size-small);
  line-height: var(--autocomplete-height);

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

    margin: 0;
    padding: 0;

    width: auto;

    color: inherit;
  }
  &--right &__inner {
    align-items: flex-end;
  }

  &__shell {
    position: relative;

    width: var(--autocomplete-width);

    margin: 0;
    padding: 0;

    color: inherit;
  }

  &__row {
    display: inline-flex;
    align-items: center; // centers the suffix vertically
  }

  &--small {
    line-height: var(--autocomplete-height--small);
  }
  &--medium {
    line-height: var(--autocomplete-height--medium);
  }
  &--large {
    line-height: var(--autocomplete-height--large);
  }

  &__icon {
    display: inline-flex;
    justify-content: center;

    pointer-events: none;
  }

  &__show-all {
    .dnb-drawer-list__option__inner {
      display: flex;
      justify-content: center;
      align-items: center;

      .dnb-drawer-list__option__item {
        display: flex;
        flex-direction: column;
      }

      .dnb-icon {
        align-self: center;
      }
    }
  }

  // input
  &__input {
    display: inline-flex;
    align-items: center;

    outline: none;

    &,
    .dnb-input__inner,
    .dnb-input__shell,
    .dnb-input__input {
      width: 100%;
    }
  }

  &--opened .dnb-input__submit-button__button .dnb-icon {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
  }
  .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
    @include fakeBorder(var(--color-black-55), 0.0625rem, inset);
  }
  .dnb-input__submit-button__button .dnb-icon {
    transition: transform 400ms ease-out;

    html[data-visual-test] & {
      transition-duration: 1ms !important;
    }
  }

  // Support for "suffix_value"
  .dnb-input {
    &__inner__element {
      position: relative;
      z-index: 3;

      cursor: text;
    }

    &--has-inner-element .dnb-input__placeholder,
    &--has-inner-element .dnb-input__input {
      @include allAbove(small) {
        // same width of submit button
        padding-right: 0 !important; // use important so we avoid to have all sizes in addition
      }
      @include allBelow(small) {
        // same width of submit button
        padding-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
      }
    }

    &__inner__element.dnb-p {
      white-space: nowrap;
      padding: 0 0.5rem;

      @include allBelow(small) {
        display: none;
      }
    }

    &__inner__element.dnb-p,
    .dnb-spacing &__inner__element.dnb-p {
      margin: 0;
    }

    &--has-submit-element .dnb-input__inner__element {
      // same width of submit button
      margin-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
    }
  }
  &--icon-position-right .dnb-input {
    // stylelint-disable-next-line
    &__inner__element.dnb-p {
      padding-right: 3rem;
    }
    &--icon-position-right &--icon-position-right#{&}--has-icon &__input {
      padding-right: 1rem;
    }
  }
  &--disabled .dnb-input {
    // stylelint-disable-next-line
    &__inner__element {
      cursor: not-allowed;
    }
  }

  &__text {
    order: 1;
    position: relative;
    z-index: 4;

    width: 100%;
    height: inherit;
    line-height: inherit;

    padding: 0 var(--autocomplete-text-padding) 0 0;

    overflow: hidden;

    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    font-size: var(--font-size-basis);

    &__inner {
      display: inline-block;

      width: 100%;

      height: inherit;
      padding: 0;

      overflow: hidden;
      white-space: nowrap;

      color: inherit;
      text-decoration: none;
      text-overflow: inherit;
      text-align: inherit;
    }
  }

  > .dnb-form-label {
    margin-right: 1rem;
    line-height: var(--line-height-basis);
  }
  @include formLabelWrap();

  // make full width
  &--stretch {
    display: flex;
    flex-grow: 1;
  }
  &--stretch & {
    &__inner {
      flex-grow: 1;
    }
    &__row,
    &__inner,
    &__shell {
      width: 100%;
    }
  }
  &--stretch .dnb-form-label + &__inner {
    width: auto;
  }
  &--vertical#{&}--stretch &__inner {
    width: 100%;
  }
  .dnb-form-row--horizontal &--stretch {
    width: 100%;
  }

  label + &[class*='__form-status'] {
    vertical-align: top;
    .dnb-autocomplete__shell {
      top: -0.375rem;
    }
  }
  &__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem;
  }

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

  &:not(&--vertical)[class*='__status'] {
    align-items: flex-start;
    > .dnb-form-label {
      // vertical align the current font
      margin-top: 0.25rem;
    }
  }

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

      margin-bottom: 0.5rem;

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

  // Search highlight wrapper
  &__list .dnb-drawer-list__option__item > span {
    padding-right: 0.125em; // add one space because of the word split
  }
}