@import 'mixins/controls';

$form-group-padding-x: .5rem;
$form-group-padding-y: .5rem;
$form-group-margin-y: 1.25rem;

.form-group {
  padding-bottom: $form-group-margin-y;
  position: relative;
}

.form-control-label {
  color: $color-text-dark-secondary;
  display: block;
  font-size: $font-size-caption;
  margin-bottom: .25rem;
}

.form-control-error {
  color: $color-error;
  font-size: $font-size-caption;
  position: absolute;
  bottom: .125rem;
}

.form-control {
  @include control($type: 'form');
  border-color: $border-color-dark;
  @include control-invalid;
  @include control-focus;
  @include control-disabled;
  width: 100%;
}

.form-section-heading {
  font-size: $font-size-body-1;
  padding: 0 $form-group-padding-x;
  margin: $form-group-margin-y 0; 
}

.form-actions {
  padding: 0 $form-group-padding-x;
  margin: ($form-group-margin-y / 2) 0;
}

.form-error {
  background-color: rgba($color-error, .12);
  color: $color-error;
  font-size: $font-size-body-2;
  padding: $form-group-padding-y $form-group-padding-x;
}