// sass-lint:disable no-qualifying-elements

@import "../../settings";
@import "../../tools";

.c-form-fieldset {
  border: 1px solid $grey-2;
  padding: $default-spacing-unit;
  width: auto;
}

.c-form-fieldset__legend {
  margin-left: -$default-spacing-unit / 2;
  font-size: 24px;
  color: $grey-1;
}

.c-form-fieldset__legend-text {
  margin: 0 $default-spacing-unit / 2;
}

.c-form-fieldset__hint {
  display: block;
  margin-bottom: $default-spacing-unit;
  color: $grey-1;
}

.c-form-fieldset__add-another {
  margin-top: $default-spacing-unit;
  margin-bottom: 0;
}

// Modifiers
fieldset.c-form-fieldset--subfield {
  position: relative;
  margin-left: $default-spacing-unit * 2;

  &::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 5px solid $grey-2;
    margin-left: -$default-spacing-unit;
    content: "";
  }
}

// sass-lint:disable no-qualifying-elements

@import "../../settings";
@import "../../tools";

.c-form-fieldset {
  border: 1px solid $grey-2;
  padding: $default-spacing-unit;
  width: auto;
}

.c-form-fieldset__legend {
  margin-left: -$default-spacing-unit / 2;
  font-size: 24px;
  color: $grey-1;
}

.c-form-fieldset__legend-text {
  margin: 0 $default-spacing-unit / 2;
}

.c-form-fieldset__hint {
  display: block;
  margin-bottom: $default-spacing-unit;
  color: $grey-1;
}

.c-form-fieldset__add-another {
  margin-top: $default-spacing-unit;
  margin-bottom: 0;
}

// Modifiers
fieldset.c-form-fieldset--subfield {
  border-left: 0;
  padding-left: $default-spacing-unit * 2;
  position: relative;

  &::before {
    position: absolute;
    left: $default-spacing-unit;
    top: 0;
    bottom: 0;
    border-left: 5px solid $grey-2;
    margin-left: -$default-spacing-unit;
    content: "";
  }
}

Correct display of double border on subfield fieldset
Correct display of double border on subfield fieldset

In some cases two modifiers could be added to a fieldset element
which would produce a double border.

Using the form-group modifier wouldn't produce the border at the
correct height so this ensures there is no second border coming from
the form group styles if both modifiers are applied.
