@utrecht/components/form-fieldset/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-form-fieldset {
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
}

.utrecht-form-fieldset--html-fieldset,
.utrecht-form-fieldset__fieldset--html-fieldset {
  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
  all: revert;
  border: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  min-inline-size: 0;
  padding-block-end: 0;
  padding-block-start: 0.01em;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-form-fieldset__legend--html-legend {
  display: table;
  inline-size: 100%;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-form-fieldset--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-fieldset--section {
  background-color: var(--utrecht-form-fieldset-section-background-color);
  color: var(--utrecht-form-fieldset-section-color);
}

.utrecht-form-fieldset__legend {
  break-inside: avoid;
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-form-fieldset-legend-font-size);
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
  line-height: var(--utrecht-form-fieldset-legend-line-height);
  page-break-after: avoid;
  page-break-inside: avoid;
}

.utrecht-form-fieldset__legend--disabled {
  color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
}

.utrecht-form-fieldset__legend--distanced {
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
}

.utrecht-form-fieldset--invalid {
  border-inline-start-color: var(--utrecht-form-fieldset-invalid-border-inline-start-color, var(--utrecht-form-field-invalid-border-inline-start-color));
  border-inline-start-style: solid;
  border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width));
  padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start));
}