.multi-select--container {
  width: 100%;
  position: relative;
  background-color: white;
  border-radius: var(--table-radius);
  padding: .5rem;
  outline: solid 1px var(--neutral-100);
  box-shadow: 0 4px 2px -2px var(--neutral-100);
}

.multi-select--container:has(input[type="search"]:focus) {
  outline: solid 1px var(--primary-400);
  box-shadow: 0 0 0 1px var(--primary-100);
}

.multi-select--pills-and-search-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  overflow: hidden;

  input[type="search"] {
    padding: 0;
    width: clamp(250px, 75%, 400px);
    outline: none;
    box-shadow: none;
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
  }
}

#multi-select-results {
  position: fixed;
  background-color: white;
  display: block;
}

.multi-select--options-container {
  position: relative;
  width: 100%;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 12px 4px -2px var(--neutral-100);
  border-radius: var(--table-radius);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  outline: solid 1px var(--neutral-100);
  backdrop-filter: blur(10px);
  max-height: 250px;
  overflow-y: auto;

  li:not(:last-child) {
    border-bottom: solid 1px var(--neutral-100);
  }

}

span.multi-select--no-results {
  width: 100%;
  padding: .5rem;
  font-size: var(--rem-14);
  color: var(--text-information);
  display: block;
}

.multi-select--list-item {
  width: 100%;

  button.multi-select--list-item-button {
    background-color: transparent;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: 100%;

    span.multi-select--result-value {
      font-size: var(--rem-14);
      line-height: 1.25rem;
      color: var(--neutral-900);
      max-width: calc(100% - 100px);
    }

    span.multi-select--result-type {
      font-size: var(--rem-12);
      line-height: var(--rem-14);
      color: var(--neutral-300);
      max-width: 100px;
    }

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.multi-select--pills-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  width: fit-content;
}

.multi-select--pills-and-search-container:has(.multi-select--pills-container[data-options-limit-reached="true"]) > input[type="search"] {
  display: none;
}

.multi-select--pill {
  border-radius: 1rem;
  outline: solid 1px var(--neutral-100);
  background-color: var(--neutral-50);
  color: var(--neutral-700);
  font-size: var(--rem-12);
  line-height: 18px;
  padding: .125rem .5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

.multi-select--item-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--rem-12);
  padding: .5rem;
  border-radius: var(--select-item-radius);
  cursor: pointer;

  &:hover {
    background-color: var(--neutral-50);
  }
}

div[data-controller^="multi-select-v3"] {
  position: relative;

  .multi-select--pills-and-search-container {
    appearance: none; /* reset */
    width: 100%;
    border: none;
    outline: solid 1px var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: 10px .75rem;
    box-shadow: 0 2px 4px -2px var(--neutral-100);

    &:has(input[type="search"]:focus) {
      outline: solid 1px var(--primary-400);
    }

    .multi-select--pills-container {
      max-width: calc(100% - 2rem);
    }
  }
  
  .multi-select--options-container {
    display: flex;
    position: fixed;
    top: calc(100% - 1.2rem);
    width: min-content;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 4px 16px -4px rgba(33, 37, 43, 0.15);
    border-radius: var(--table-radius);
    flex-direction: column;
    padding: .25rem;
  }

  .multi-select--list-item {
    width: 100%;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border-bottom: none;

    label {
      width: 100%;
      height: 100%;
      padding: .5rem;
      border-radius: inherit;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--rem-12);
      font-size: var(--rem-14);
      color: var(--action-secondary);
      line-height: var(--rem-22);
      letter-spacing: 0;
    }
  }
}