$aui-fieldset-field-spacing-x: unit(6) !default;
$aui-fieldset-field-spacing-y: unit(6) !default;

.aui-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  line-height: unit(6);
  font-weight: $aui-font-weight-normal;
  color: $aui-field-placeholder-color;
  box-sizing: border-box;

  &--selects &__legend,
  &--textfields &__legend {
    font-weight: $aui-font-weight-bold;
    color: $aui-color-dark;
  }

  &--radios &__legend {
    margin-bottom: unit(4);
  }

  &__fields {
    display: flex;
    flex-flow: row wrap;
    margin-right: #{$aui-fieldset-field-spacing-x * -1};
    margin-bottom: #{$aui-fieldset-field-spacing-y * -1};
  }

  &__field {
    flex: 1 1 auto;
    margin-right: $aui-fieldset-field-spacing-x;
    margin-bottom: $aui-fieldset-field-spacing-y;
  }

  &--radios &__field {
    flex: 0 1 auto;
  }

  &--radios {

    &.is-invalid {
      .aui-radio__label {
        color: $aui-color-invalid;
      }
    }
  }

  &__error {
    display: flex;
    align-items: center;
    line-height: $aui-field-error-line-height;
    margin-top: unit(3.5);
    font-size: rem(13);
    color: $aui-field-error-color;

    &::before {
      content: '';
      display: inline-block;
      margin-right: rem(16px);
      width: 24px;
      min-width: 24px;
      height: 24px;
      background: url('data:image/svg+xml,#{aui-svg-caution($aui-field-error-color)}') center center no-repeat;

      @include aui-respond-to('large') {
        margin-right: unit(2);
      }
    }
  }

  &.is-invalid &__error,
  &.is-invalid &__legend {
    color: $aui-color-invalid;
  }
}
