// form group : error
.form-group--error .button--form-group-style {
  @include form-field--invalid;

  &:active,
  &:focus {
    border-color: $color--negative;
  }

  svg {
    @include form-field--feedback-color;
  }
}

// form group : readonly
.form-group--read-only .button--form-group-style {
  background: $color--grey-10;
  border-color: $color--grey;
  color: $color--two-50;
  cursor: none;
  pointer-events: none;

  &:active,
  &:focus {
    @include transition(border-color, $transition-duration--fast);
    border: solid 1px $color--grey;
    outline: none;
  }

  svg {
    fill: $color--grey;
  }
}