/**
 *
 * Rules
 *
 */
:host {
  align-content: center;
  background: var(--ezp-icon-background, transparent);
  border-radius: var(--ezp-icon-borderRadius, 0);
  display: grid;
  grid-template: var(--ezp-icon-gridTemplate)/var(--ezp-icon-gridTemplate);
  height: var(--ezp-icon-height, var(--ezp-icon-size));
  justify-content: center;
  padding: var(--ezp-icon-padding, 0);
  width: var(--ezp-icon-width, var(--ezp-icon-size));
}
:host(.framed) {
  --ezp-icon-background: var(--ezp-core-shade-primary);
  --ezp-icon-borderRadius: 50%;
  --ezp-icon-padding: var(--ezp-icon-frame);
}

:host(.normal) {
  --ezp-icon-size: 18px;
  --ezp-icon-gridTemplate: 24px;
  --ezp-icon-frame: var(--ezp-spacing-3);
}

:host(.large) {
  --ezp-icon-size: 36px;
  --ezp-icon-gridTemplate: 48px;
  --ezp-icon-frame: var(--ezp-spacing-4);
}

:host(.huge) {
  --ezp-icon-size: 54px;
  --ezp-icon-gridTemplate: 72px;
  --ezp-icon-frame: var(--ezp-spacing-5);
}

svg {
  display: block;
  fill: var(--ezp-icon-fill, currentColor);
  height: 100%;
  width: 100%;
}