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

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

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

/* variables */
:root {
  /* colors */
  --sc6-color-primary-hsl: 11, 81%, 53%;
  --sc6-color-bg-hsl: 0, 0%, 100%;
  --sc6-color-contrast-high-hsl: 230, 7%, 23%;
  --sc6-color-contrast-higher-hsl: 230, 13%, 9%;
  --sc6-color-primary-dark-hsl: 250, 84%, 46%;
  --sc6-color-contrast-medium-hsl: 225, 4%, 47%;
  --sc6-color-white-hsl: 0, 0%, 100%;
  --sc6-color-bg-dark-hsl: 240, 4%, 95%;
  --sc6-color-contrast-lower-hsl: 240, 4%, 85%;
  --sc6-color-contrast-low-hsl: 240, 4%, 65%;

  /* spacing */
  --sc6-space-2xs: 0.375rem;
  --sc6-space-xs: 0.5rem;
  --sc6-space-sm: 0.75rem;

  /* typography */
  --sc6-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sc6-space-2xs: 0.5625rem;
    --sc6-space-xs: 0.75rem;
    --sc6-space-sm: 1.125rem;

    /* typography */
    --sc6-text-sm: 1rem;
  }
}

/* form elements */
.sc6-form-control {
  font-size: 1em;
  padding: var(--sc6-space-2xs) var(--sc6-space-xs);
  background: none;
  line-height: 1.2;
  /* box-shadow: inset 0px 0px 0px 1px hsl(var(--sc6-color-contrast-lower-hsl)); */
  transition: all 0.2s ease;
  border-radius: 0.25em;
  border: 0;
  font-weight: 500;
}

.sc6-form-control::placeholder {
  opacity: 1;
  font-weight: 500;
  color: var(--wp--preset--color--false-black);
}

.sc6-form-control:focus, .sc6-form-control:focus-within {
  background: hsl(var(--sc6-color-bg-hsl));
  box-shadow: inset 0px 0px 0px 1px hsla(var(--sc6-color-contrast-lower-hsl), 0), 0px 0px 0px 2px hsl(var(--sc6-color-primary-hsl)), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  outline: none;
}

.sc6-form-label {
  display: inline-block;
  font-size: var(--sc6-text-sm);
}

/* icons */
.sc6-icon {
  height: var(--sc6-size, 1em);
  width: var(--sc6-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
.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-icon-size: 16px;
  /* btn/icon size */
  --input-btn-icon-margin-right: var(--sc6-space-xs);
  /* btn/icon size */
  --input-btn-text-gap: var(--sc6-space-2xs);
  /* gap between button/icon and text */
  position: relative;
}
.select-auto__input-wrapper input {
  width: 100%;
  height: 100%;
  padding-right: calc(var(--input-btn-text-gap) + var(--input-btn-icon-size) + var(--input-btn-icon-margin-right));
  font-family: inherit;
}

.select-auto__input-icon-wrapper .sc6-icon,
.select-auto__input-btn .sc6-icon {
  display: block;
  margin: auto;
  width: var(--input-btn-icon-size, 16px);
  height: var(--input-btn-icon-size, 16px);
  color: var(--wp--custom--accent);
}

.select-auto__input-icon-wrapper {
  position: absolute;
  right: var(--input-btn-icon-margin-right);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  list-style: none;
  padding-left: 0;
}

.select-auto__input-btn {
  /* search cancel button */
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  color: hsl(var(--sc6-color-contrast-medium-hsl));
  /* icon color */
  transition: 0.3s;
}
.select-auto__input-btn:hover {
  color: hsl(var(--sc6-color-contrast-high-hsl));
}
.select-auto__input-btn:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.select-auto--selection-done .select-auto__input-icon-wrapper > .sc6-icon {
  display: none;
}
.select-auto--selection-done .select-auto__input-btn {
  display: inline-flex; background: none; border: 0;
}

/* dropdown */
.select-auto__results {
  font-size: 1rem;
}

/* optgroup style */
.select-auto__group-title {
  font-size: 0.833rem;
}

/* single result item */
.select-auto__option {
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}
.select-auto__option:hover {
  /* background-color: hsla(var(--sc6-color-contrast-higher-hsl), 0.05); */
  background-color: var(--wp--preset--color--false-white);
}
.select-auto__option:focus {
  outline: none;
  background-color: hsla(var(--sc6-color-primary-hsl), 0.12);
}
.select-auto__option.select-auto__option--selected {
  background-color: hsl(var(--sc6-color-primary-hsl));
  color: hsl(var(--sc6-color-white-hsl));
  padding-right: calc(1em + var(--sc6-space-sm));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.select-auto__option.select-auto__option--selected:focus {
  background-color: hsl(var(--sc6-color-primary-dark-hsl));
}
.select-auto__option.select-auto__option--selected::after {
  content: "";
  position: absolute;
  right: var(--sc6-space-sm);
  top: calc(50% - 0.5em);
  height: 1em;
  width: 1em;
  background-color: currentColor;
  -webkit-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");
          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;
}

/* utility classes */
.sc6-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.sc6-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc6-padding-x-sm {
  padding-left: var(--sc6-space-sm);
  padding-right: var(--sc6-space-sm);
}

.sc6-padding-y-xs {
  padding-top: var(--sc6-space-xs);
  padding-bottom: var(--sc6-space-xs);
}

.sc6-hide {
  display: none !important;
}

.sc6-color-contrast-medium {
  --sc6-color-o: 1;
  color: hsla(var(--sc6-color-contrast-medium-hsl), var(--sc6-color-o, 1));
}

.sc6-margin-bottom-2xs {
  margin-bottom: var(--sc6-space-2xs);
}

.sc6-position-relative {
  position: relative;
}