@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-mixins' as fonts;
@use '../../scss/breakpoints' as breakpoints;

.form-group-wrapper {
  &__title {
    &--on-dark {
      color: palette.$white;
    }
  }
}

.form-group-wrapper:last-of-type {
  padding-bottom: 0;
}

.field-set {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column;
  gap: spacers.getSpacer(s);

  > div {
    padding-bottom: 0;
  }

  &__legend {
    margin-bottom: spacers.getSpacer(m);
    margin-top: 0;
    display: flex;
    flex-flow: column;
    gap: 0.25rem;

    @include fonts.legend;

    &--on-dark {
      color: palette.$white;
    }
  }
}