comboBox.css

.combo-box {
  position: relative;
  width: 100%;
  @apply text-grey-80;
  font-size: 1rem;

  .suggestions-list {
    position: absolute;
    width: calc(100% - 2.1rem);
    top: calc(100% - 1.4rem);
    left: 1rem;
    right: 0;
    z-index: 1000;
    list-style: none;
    max-height: calc(2.5rem * var(--number-of-suggestions));
    overflow-y: auto;
    @apply bg-white-25;
    border-radius: 0.375rem;
    box-shadow:
      0px 6px 21px -5px rgba(24, 68, 239, 0.26),
      0px 8px 30px -5px rgba(0, 0, 0, 0.16),
      0px 3px 5px -2px rgba(0, 0, 0, 0.1);
  }

  .suggestion-item {
    padding: 0.688rem 1.188rem 0.813rem;
    cursor: pointer;
    box-shadow:
      0px 1px 0px rgba(235, 235, 234, 1) inset,
      0px -1px 0px rgba(182, 178, 175, 1) inset;

    &.active {
      @apply bg-selection-20;
    }

    &.small {
      font-size: 0.75rem;
      padding: 0.563rem 0.5rem 0.688rem;
    }

    &:hover {
      @apply bg-primary-5;
    }
  }
}