/**
 * TODO: Remove this as it breaks convention of preferring `[margin|padding]-top`
 */
.field {
  padding-bottom: var(--size-lg-i);
}

.field + .field {
  border-top: 1px solid var(--color-greyLighter);
  padding-top: var(--size-lg-i);
}

.errorField {
  padding-bottom: var(--size-lg-ii);
}

.meta {
  display: block;
  composes: fontSmallI from '../../globals/typography.css';
  color: var(--color-greyLight);
}

.description {
  display: block;
  position: relative;
  width: 100%;
  color: var(--color-grey);
  composes: fontSmallI from '../../globals/typography.css';
}

.headline {
  display: block;
  composes: fontRegular from '../../globals/typography.css';
  font-weight: var(--fontweight-demi);
  color: currentColor;
}

.label {
  display: block;
  composes: fontSmallIi from '../../globals/typography.css';
  color: var(--color-greyDark);
  font-weight: var(--fontweight-demi);
  text-transform: uppercase;
}

.optional {
  composes: fontSmallIi from '../../globals/typography.css';
  text-transform: none;
  font-weight: var(--fontweight-regular);
  color: var(--color-greyLight);
  font-style: italic;
  margin-left: var(--size-small);
}

.value {
  display: block;
  composes: fontRegular from '../../globals/typography.css';
  color: var(--color-greyDarker);
  text-align: center;
  display: inline-block;
  width: auto;
  color: var(--color-grey);
}


.placeholder {
  display: block;
  composes: fontRegular from '../../globals/typography.css';
  color: var(--color-greyLight);
  text-align: center;
  display: inline-block;
  width: auto;
}

.error {
  color: var(--color-danger);
}

* + .meta,
* + .description,
* + .headline,
* + .label,
* + .value,
* + .placeholder,
* + .inputWrapper {
  margin-top: var(--size-sm-ii);
}

.headline + .meta,
.headline + .description,
.headline + .value,
.headline + .placeholder,
.headline + .inputWrapper {
  margin-top: var(--size-sm-i);
}