:host {
  --dimension-icon-height: 16px;
  --dimension-icon-width: 16px;
  --color-icon-fill: currentColor;
  contain: strict;
  display: inline-block;
  fill: var(--color-icon-fill);
  flex-shrink: 0;
  height: var(--dimension-icon-height);
  width: var(--dimension-icon-width);
}
:host .pdsicon {
  fill: var(--color-icon-fill);
}

.pds-icon-fill-none {
  fill: none;
}

.icon-inner,
.pds-icon,
svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* :host-context is supported in chromium; :dir is supported in safari & firefox */
:host(.flip-rtl):host-context([dir=rtl]) .icon-inner {
  transform: scaleX(-1);
}

:host(.flip-rtl:dir(rtl)) .icon-inner {
  transform: scaleX(-1);
}

/**
  * This is needed for WebKit otherwise the fallback
  * will always cause the icon to be flipped if the document
  * loads in RTL.
  */
:host(.flip-rtl:dir(ltr)) .icon-inner {
  transform: scaleX(1);
}