.bz-option {
  cursor: pointer;
  font-size: $bz-font-size-body;
  overflow: hidden;
  padding: $bz-space-inset-squish-s;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  min-height: 37px;

  .bz-select-options--compact & {
    min-height: 2.8rem;
    font-size: $bz-font-size-body-small;
    padding: $bz-space-inset-squish-xs;
  }

  &:hover {
    background-color: $bz-neutral-200;
  }

  &--selected {
    background-color: $bz-neutral-200;
    color: $bz-theme-400;
  }

  &--active{
    @extend .focus-inset;
    background-color: $bz-neutral-200;

    .bz-initials {
      background-color: $bz-theme-400;
      color: $bz-neutral-100;
    }
  }

  &__content {
    align-items: center;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  &__label{
    align-items: center;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__title {
    font-size: $bz-font-size-body;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__subtitle {
    color: $bz-neutral-500;
    font-size: $bz-font-size-body-small;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}