:root {
  --vjsr-summary-ntvo-color: var(--rufi-chip-font-color, #{$rufi-chip-font-color});
  --vjsr-summary-color: var(--rufi-chip-font-color, #{$rufi-chip-font-color});
  --vjsr-summary-act-bg-color: var(--rufi-chip-hover-bg-color, #{$rufi-chip-hover-bg-color});
  --vjsr-summary-bg-color: var(--rufi-chip-bg-color, #{$rufi-chip-hover-bg-color});
  --vjsr-summary-ntvo-bg-color: var(--rufi-chip-hover-bg-color, #{$rufi-chip-hover-bg-color});
}

.votejsr.field__items {
  margin: 0;
}

.vjsr--summary {
  padding: 0;
  margin: 0;
  border-radius: 16px;
}

.vjsr--condensed--widgets {
  @extend %rufi-chip-set;
  padding: 0;
  margin: 0;

  .vjsr--condensed--widget {
    margin: 0 4px;
  }
}

.vjsr--condensed--widget {
  @extend %rufi-chip;
  background-color: transparent;

  &--result {
    @extend %rufi-chip__text;
  }

  .vjsr--icon {
    @extend %rufi-chip__icon;
  }
}


@media (min-width: #{$breakpointSmall}){
  :root {
    --vjsr-modal-width: 600px;
    --vjsr-modal-widgets-flex-direction: row;
  }

  .vjsr--widget {
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1em 0 0;
    box-shadow: -1px 0 0 0 #DDD;

  }

  .vjsr--modal--widgets {
    flex-wrap: wrap;
  }
}
.node--type-rule {
  @media (min-width: #{$breakpointLarge}){
    --vjsr-modal-width: 900px;

    .vjsr--widget {
      flex: 1 1 33.333%;
      max-width: 33.333%;
    }
  }
}
