// form group
.form-group--selection-control {
  .form-group__input + .form-group__input {
    margin-top: $baseline * 1.5;

    @include viewport--l {
      margin-top: $spacing--xs;
    }
  }

  .form-group__label {
    margin-bottom: $baseline * 1.5;
  }
  // form group button
  & + .button {
    margin-top: $baseline * 4;
  }
}

// selection control
.selection-control {
  @include font-style('body--m', 'body--l');
  align-items: flex-start;
  display: inline-flex;
  position: relative;
  padding: 0 3px;

  &__input {
    position: relative;
    top: $selection-control-input-top;

    @include viewport--l {
      top: $selection-control-input-top--l;
    }
  }
  // (fake) control style
  &__control {
    @include center-all;
    @include form-field-border-color;
    background: $color-brand--white;
    border-radius: $border-radius--xs;
    cursor: pointer;
    position: relative;
    transition: border-color $transition-duration--fast;
  }
  // input
  input {
    opacity: 0;
    position: absolute;
    // control style focus
    &:not(:disabled):not(:read-only):focus + .selection-control__control {
      @include form-field--border-interaction-color;
    }

    &:focus + .selection-control__control {
      @include form-field--border-interaction-color;
    }
  }
  // hover
  &:hover .selection-control__control {
    @include form-field--border-interaction-color;
  }
  // input label
  &__label {
    cursor: pointer;
    margin-left: 10px;

    .meta-content & {
      word-break: break-word;
      hyphens: auto;
    }
  }
}

// disabled
.selection-control--disabled,
.selection-control--disabled a {
  @include form-field--disabled-text-color;
  pointer-events: none;

  .selection-control__control {
    background: $color--grey-10;
    border-color: $color--grey;
  }

  input:checked + .selection-control__control {
    border-color: $color--grey-10;
  }

  a {
    pointer-events: all;
    text-decoration: underline;
  }
}

// error
.form-group--error .selection-control__control {
  @include form-field--invalid;
}