/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

.ams-icon {
  --ams-line-height: var(--ams-icon-line-height);

  align-items: center;
  align-self: baseline; /* Aligns the icon with text in flex or grid context */
  display: inline-flex; /* Center align the icon vertically, and override the default 'hidden' attribute */
  font-size: var(--ams-icon-font-size);
  line-height: var(--ams-line-height);
}

.ams-icon::after {
  content: "\00200B"; /* This zero width space enables baseline alignment. */
}

.ams-icon svg {
  fill: currentColor;
  inline-size: 1em;
}

.ams-icon--inverse {
  color: var(--ams-icon-inverse-color);
}

.ams-icon--square {
  inline-size: calc(1em * var(--ams-line-height));
  justify-content: center;
}

.ams-icon--small {
  --ams-line-height: var(--ams-icon-small-line-height);

  font-size: var(--ams-icon-small-font-size);
}

.ams-icon--large {
  --ams-line-height: var(--ams-icon-large-line-height);

  font-size: var(--ams-icon-large-font-size);
}

.ams-icon--heading-0 {
  --ams-line-height: var(--ams-icon-heading-0-line-height);

  font-size: var(--ams-icon-heading-0-font-size);
  line-height: var(--ams-icon-heading-0-line-height);
}

.ams-icon--heading-1 {
  --ams-line-height: var(--ams-icon-heading-1-line-height);

  font-size: var(--ams-icon-heading-1-font-size);
  line-height: var(--ams-icon-heading-1-line-height);
}

.ams-icon--heading-2 {
  --ams-line-height: var(--ams-icon-heading-2-line-height);

  font-size: var(--ams-icon-heading-2-font-size);
  line-height: var(--ams-icon-heading-2-line-height);
}

.ams-icon--heading-3 {
  --ams-line-height: var(--ams-icon-heading-3-line-height);

  font-size: var(--ams-icon-heading-3-font-size);
  line-height: var(--ams-icon-heading-3-line-height);
}

.ams-icon--heading-4 {
  --ams-line-height: var(--ams-icon-heading-4-line-height);

  font-size: var(--ams-icon-heading-4-font-size);
  line-height: var(--ams-icon-heading-4-line-height);
}

.ams-icon--heading-5 {
  --ams-line-height: var(--ams-icon-heading-5-line-height);

  font-size: var(--ams-icon-heading-5-font-size);
  line-height: var(--ams-icon-heading-5-line-height);
}

.ams-icon--heading-6 {
  --ams-line-height: var(--ams-icon-heading-6-line-height);

  font-size: var(--ams-icon-heading-6-font-size);
  line-height: var(--ams-icon-heading-6-line-height);
}