@use '../base' as *;
@use 'autocomplete.scss' as *;

/* --------------------------------

File#: _3_select-autocomplete
Title: Select Autocomplete
Descr: Selection dropdown with autocomplete
Usage: codyhouse.co/license

-------------------------------- */

.select-auto {
  &.autocomplete {
    --autocomplete-dropdown-vertical-gap: 4px; // gap between input and results list
    --autocomplete-dropdown-max-height: 250px;
    --autocomplete-dropdown-scrollbar-width: 6px; // custom scrollbar - webkit browsers
  }
}

// input
.select-auto__input-wrapper {
  --input-btn-size: 1.25em; // btn/icon size
  --input-btn-icon-size: 16px; // btn/icon size
  --input-btn-text-gap: var(--space-xxs); // gap between button/icon and text

  position: relative;
  background: var(--color-bg-dark);
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px var(--color-contrast-lower);

  &.multiple {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;

    .chip {
      white-space: nowrap;
      margin-right: 1px;
    }

    input[type="text"] {
      width: auto;
    }

    @media (max-width: 756px) {
      flex-flow: column !important;

      &.has-selection {
        input[type="text"] {
          margin-top: 5px;
        }

        .chip {
          justify-content: space-between;

          .chip__btn {
            margin-right: 0 !important;;
          }
        }
      }
    }
  }

  &::placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
  }

  &:focus-within,
  .focus {
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary);
    outline: none;
  }

  .form-control {
    width: 100%;
    height: 100%;
    padding-right: calc(var(--form-control-padding-x) + var(--input-btn-size) + var(--input-btn-text-gap));
  }
}


.select-auto__input-icon-wrapper {
  width: var(--input-btn-size);
  height: var(--input-btn-size);

  position: absolute;
  bottom: calc(var(--input-btn-size) / 3);
  right: var(--form-control-padding-x);
  display: flex;
  pointer-events: none;

  .icon {
    display: block;
    margin: auto;
    width: var(--input-btn-icon-size, 16px);
    height: var(--input-btn-icon-size, 16px);
  }
}

.select-auto__input-btn {
  display: none;
  justify-content: center;
  align-items: center;
  width: inherit;
  height: inherit;
  pointer-events: auto;
  cursor: pointer;
  color: var(--color-contrast-medium); // icon color

  &:hover {
    color: var(--color-contrast-high);
  }
}

.select-auto--selection-done {
  .select-auto__input-icon-wrapper > .icon {
    display: none;
  }

  .select-auto__input-btn {
    display: flex;
  }
}

// dropdown
.select-auto__results {
  // reset spacing and typography
  @include spaceUnit(1rem);
  @include textUnit(1rem);
}

// single result item
.select-auto__option {
  position: relative;
  cursor: pointer;

  &:hover {
    background-color: alpha(var(--color-contrast-higher), 0.05);
  }

  &:focus,
  &.focus {
    outline: none;
    background-color: alpha(var(--color-primary), 0.12);
  }

  &.select-auto__option--selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding-right: calc(1em + var(--space-sm));
    @include fontSmooth;

    &:focus,
    .focus {
      background-color: var(--color-primary-dark);
    }

    &::after {
      content: '';
      position: absolute;
      right: var(--space-sm);
      top: calc(50% - 0.5em);
      height: 1em;
      width: 1em;
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    }
  }
}

.select-auto__group-title, .select-auto__no-results-msg {
  outline: none;
}