@use '../../../functions/units';
@use '../../../components/base';

// We use these to style the fieldset border and spacing.
$fieldset-border-style: solid !default;
$fieldset-border-width: 1px !default;
$fieldset-border-color: #ddd !default;
$fieldset-padding: units.rem(20) !default;
$fieldset-margin: units.rem(18 0) !default;

// We use these to style the legends when you use them
$legend-bg: base.$body-bg !default;
$legend-font-weight: bold !default;
$legend-padding: units.rem(0 3) !default;

/* We add basic fieldset styling */
fieldset {
  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
  padding: $fieldset-padding;
  margin: $fieldset-margin;

  // and legend styles
  legend {
    font-weight: $legend-font-weight;
    background: $legend-bg;
    padding: $legend-padding;
    margin: 0;
    margin-#{base.$default-float}: units.rem(-3);
  }
}