.ebs-select__options-item {
  position: relative;
  padding: rem(6px 8px);
  border-radius: rem($border-radius);
  cursor: pointer;
  transition: all 0.3s;

  &--has-prefix {
    padding-left: rem(32.5px);
  }

  &--active {
    background-color: var(--primary-000);
  }

  &--active &-text {
    color: var(--primary-color);
  }

  &--selected {
    background-color: var(--primary-000);
  }

  &--selected &-suffix,
  &--selected &-prefix {
    .ebs-checkbox__wrapper .ebs-checkbox {
      @include checkbox-hover;
    }
  }

  &:hover {
    background-color: var(--primary-000);

    .ebs-select__options-item-text {
      color: var(--primary-color);
    }

    &-suffix,
    &-prefix {
      .ebs-checkbox__wrapper .ebs-checkbox,
      .ebs-checkbox__wrapper .ebs-checkbox {
        @include checkbox-hover;
      }

      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox,
      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox {
        @include checkbox-checked-hover;
      }
    }
  }

  &-prefix,
  &-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: $text-color;
  }

  &-prefix {
    left: rem(10px);
  }

  &-suffix {
    right: rem(10px);
  }

  &-text {
    color: $text-color;
    font-size: rem(14px);
    line-height: 140%;
  }
}
