.Polaris-Icon {
  display: block;
  height: 2rem;
  width: 2rem;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

.Polaris-Icon--hasBackdrop {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.4rem;
}

.Polaris-Icon--hasBackdrop::before {
  content: '';
  position: absolute;
  top: -0.4rem;
  bottom: -0.4rem;
  left: -0.4rem;
  right: -0.4rem;
  border-radius: 50%;
}

.Polaris-Icon--applyColor {
  color: $icon-svg-color-apply-color;
}

.Polaris-Icon--colorBase svg {
  fill: $icon-svg-color-base;
}

.Polaris-Icon--colorBase::before {
  background-color: $icon-color-base-before;
}

.Polaris-Icon--colorSubdued svg {
  fill: $icon-svg-color-subdued;
}

.Polaris-Icon--colorCritical svg {
  fill: $icon-svg-color-critical;
}

.Polaris-Icon--colorCritical::before {
  background-color: $icon-color-critical-before;
}

.Polaris-Icon--colorInteractive svg {
  fill: $icon-svg-color-interactive;
}

.Polaris-Icon--colorWarning svg {
  fill: $icon-svg-color-warning;
}

.Polaris-Icon--colorWarning::before {
  background-color: $icon-color-warning-before;
}

.Polaris-Icon--colorHighlight svg {
  fill: $icon-svg-color-highlight;
}

.Polaris-Icon--colorHighlight::before {
  background-color: $icon-color-highlight-before;
}

.Polaris-Icon--colorSuccess svg {
  fill: $icon-svg-color-success;
}

.Polaris-Icon--colorSuccess::before {
  background-color: $icon-color-success-before;
}

.Polaris-Icon--colorPrimary svg {
  fill: $icon-svg-color-primary;
}

.Polaris-Icon__Img,
.Polaris-Icon__Svg {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.Polaris-Icon__Placeholder {
  padding-bottom: 100%;
  background: currentColor;
}