:host {
  display: inline-flex;
  /* Fallback, not decoration: a `size` outside ICON_SIZES matches no rule below,
     and an unset --icon-size collapses the host to `auto` — the icon disappears
     with nothing in the console. Degrade to the prop's own default instead. */
  --icon-size: var(--spacing-16);

  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: middle;
}

:host([size='16']) {
  --icon-size: var(--spacing-16);
}
:host([size='20']) {
  --icon-size: var(--spacing-20);
}
:host([size='24']) {
  --icon-size: var(--spacing-24);
}
:host([size='32']) {
  --icon-size: var(--spacing-32);
}

.svg-icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.svg-icon svg {
    width: 100%;
    height: 100%;
    color: var(--icon-color, currentColor);
    transition: color 0.1s ease-in-out;
  }

:host([interactive]:not([interactive='false'])) {
  cursor: pointer;
}

:host([interactive]:not([interactive='false']):not([disabled])) .svg-icon:hover svg {
    color: var(--color-icon-brand-default);
  }

:host([interactive]:not([interactive='false']):not([disabled])) .svg-icon:active svg {
    color: var(--color-icon-brand-strong);
  }

/* Focus ring on the host (role=button + tabindex sit on the host now). */
:host([interactive]:not([interactive='false']):not([disabled]):focus-visible) {
  outline: var(--border-width-2) solid var(--color-border-brand-default);
  outline-offset: var(--spacing-2);
}

:host([disabled]:not([disabled='false'])) {
  cursor: not-allowed;
  pointer-events: none;
}

:host([disabled]:not([disabled='false'])) .svg-icon svg {
    color: var(--color-icon-base-disabled);
  }

@media (prefers-reduced-motion: reduce) {
  .svg-icon svg {
    transition: none;
  }
}