:root {
  --icon-color: var(--primary-color, inherit);

  --icon-font-size: inherit;
  --icon-font-size-small: 0.8rem;
  --icon-font-size-medium: 1.2rem;
  --icon-font-size-large: 1.8rem;
  --icon-font-size-xlarge: 3rem;

  --icon-stroke-width: 6px;
  --icon-stroke-width-thin: 3px;
  --icon-stroke-width-thin-multiply: 0.5;
  --icon-stroke-width-fat: 8px;
  --icon-stroke-width-fat-multiply: 1.5;
}

.icon {
  font-size: inherit;
  stroke: inherit;
  stroke-width: var(--icon-stroke-width, 3);
  display: inline-block;
  width: 1em;
  height: 1em;
  contain: strict;
  box-sizing: content-box;
  color: var(--icon-color);
  vertical-align: text-top;
}

.icon-sm {
  font-size: var(--icon-font-size-small);
}

.icon-md {
  font-size: var(--icon-font-size-medium);
}

.icon-lg {
  font-size: var(--icon-font-size-large);
}

.icon-xl {
  font-size: var(--icon-font-size-xlarge);
}

.icon-thin {
  stroke-width: var(--icon-stroke-width-thin, calc(var(--icon-stroke-width) * var(--icon-stroke-width-thin-multiply)));
}

.icon-fat {
  stroke-width: var(--icon-stroke-width-fat, calc(var(--icon-stroke-width) * var(--icon-stroke-width-fat-multiply)));
}

.icon>svg {
  display: block;
  overflow: visible;
  height: 100%;
  width: 100%;
}

.icon>svg [stroke] {
  stroke: currentColor;
}