.option-group {
  &__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -$spacing--xs;
  }

  .form-group__input {
    margin: $spacing--xs 10px 0 0;
    top: 0;
  }

  input:focus + .selection-control__label {
    @include form-field--option-group-hover-color;
  }

  .selection-control__label {
    @include form-field--option-group-color;
    border-radius: $border-radius;
    cursor: pointer;
    display: inline-block;
    height: $spacing--l;
    line-height: $baseline * 4.8;
    margin-left: 0;
    min-width: 50px;
    padding: 0 10px;
    transition: background $transition-duration--fast;

    &:hover {
      @include form-field--option-group-hover-color;
      transition: background $transition-duration--fast;
    }

    @include viewport--l {
      padding: 0 20px;
    }
  }

  .selection-control input:checked + .selection-control__label {
    @include form-field--option-group-active-color;
  }

  &.form-group--error {
    .selection-control__label {
      @include form-field--invalid;
      @include form-field--invalid-label-color;

      &:hover {
        background: $color--one-light;
        border-color: $color-brand--one;
        @include form-field--invalid-label-color;
      }
    }

    .selection-control input:checked + .selection-control__label {
      @include form-field--option-group-active-color;
    }
  }

  &.form-group--readonly .selection-control__label {
    background: $color--grey-10;
    @include color-dark-shade-main;
  }
}