.multiselect-dropdown {
  position: relative;
  flex: 1;

  .multiselect-dropdown__button {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    padding: 7px;
    padding-right: 30px;
    min-height: 40px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23777777' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 15px;

    &:hover,
    &:focus {
      border-color: var(--primary-color);
    }

    &.multiselect-dropdown__button--empty {
      color: var(--grey-400);
    }
  }
}

.multiselect-dropdown__panel {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(400px, 80vw);
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.multiselect-dropdown__option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-primary);

  &:hover {
    background: var(--grey-100);
  }

  &.required::after {
    content: none;
  }
}