[hidden] {
  display: none !important;
}

/**
 * @prop --color: Color of the icon (default: currentColor)
 */
:host {
  display: inline-block;
  width: 1em;
  height: 1em;
  contain: strict;
  box-sizing: content-box !important;
  fill: var(--color);
  --color: currentColor;
}

:host(.flow-color) {
  --color: var(--flow-color-base);
}

:host .ionicon {
  stroke: var(--color);
}

.ionicon-fill-none {
  fill: none;
}

.ionicon-stroke-width {
  stroke-width: 32px;
  stroke-width: var(--flowicon-stroke-width, 32px);
}

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

/* Icon RTL
 * -----------------------------------------------------------
 */
:host(.flip-rtl) .icon-inner {
  transform: scaleX(-1);
}

/* Icon Sizes
 * -----------------------------------------------------------
 */
:host(.icon-x-small) {
  font-size: 8px !important;
}

:host(.icon-small) {
  font-size: 12px !important;
}

:host(.icon-regular) {
  font-size: 16px !important;
}

:host(.icon-large) {
  font-size: 24px !important;
}

:host(.icon-x-large) {
  font-size: 32px !important;
}

:host(.icon-xx-large) {
  font-size: 46px !important;
}