.ca-filter-multi {
  $block: &;
  $c-input-checkbox-bg: $c-white !default;
  $input-checkbox-border: $border-light !default;

  padding: $px12 $px16;

  &__value {
    padding: rem-calc(8px) 0 rem-calc(8px) $px32;
    position: relative;
    cursor: pointer;
    display: flex;

    &:first-child {
      margin-top: rem-calc(-12px);
    }

    &::before {
      @include valign;

      content: '';
      width: 20px;
      height: 20px;
      display: block;
      background-color: $c-input-checkbox-bg;
      border: $input-checkbox-border;
      left: 0;
      transition: all 200ms ease;
    }

    &--selected {
      font-weight: $font-weight-bold;

      &::before {
        background-color: var(--accent-color, $c-accent-color);
        border-color: var(--accent-color, $c-accent-color);
      }

      #{$block}__check {
        opacity: 1;
      }
    }

    &--disabled {
      opacity: 0.3;
      pointer-events: none;
    }

    &--hidden {
      display: none;
    }
  }

  &__check {
    @include valign;

    opacity: 0;
    left: 2px;
    transition: opacity 200ms ease;
    color: $c-white;
  }

  &__count {
    margin-left: auto;
    color: $c-text-secondary;
  }
}