.strength {
  display: flex;
  align-items: center;

  &__bulbs {
    display: inline-flex;

    &--positive .strength__bulb--filled {
      background: $color--positive;
    }
    &--average .strength__bulb--filled {
      background: $color-brand--six;
    }
    &--negative .strength__bulb--filled {
      background: $color--negative;
    }
  }

  &__bulb {
    background: $color--grey;
    border-radius: $border-radius--m-l;
    height: $spacing--s;
    margin-left: 8px;
    width: 12px;

    &:first-child {
      margin-left: 0;
    }

    &--filled {
      background: $color-brand--one;
    }
  }

  &__label {
    @include font-style('body--l');
    @include text-ellipsis;
    line-height: $spacing--s;
    margin-left: 20px;
  }
}