$stacking-order: (
  backdrop: 1,
  icon: 2,
);

@mixin color-icon($value, $hue: base) {
  svg {
    fill: color($value, $hue);
  }

  img {
    filter: filter($value, $hue);
  }
}

.Icon {
  display: block;
  height: rem(20px);
  width: rem(20px);
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

.hasBackdrop {
  position: relative;
  display: flex;
  align-items: center;
  margin: spacing(extra-tight);

  &::after {
    content: '';
    position: absolute;
    z-index: z-index(backdrop, $stacking-order);
    top: -1 * spacing(extra-tight);
    bottom: -1 * spacing(extra-tight);
    left: -1 * spacing(extra-tight);
    right: -1 * spacing(extra-tight);
    border-radius: 50%;
  }
}

.isColored {
  color: color('white');
}

.colorWhite {
  @include color-icon('white');
  color: transparent;
}

.colorBlack {
  @include color-icon('black');
}

.colorSkyLighter {
  @include color-icon('sky', 'lighter');
}

.colorSkyLight {
  @include color-icon('sky', 'light');
}

.colorSky {
  @include color-icon('sky');
}

.colorSkyDark {
  @include color-icon('sky', 'dark');
}

.colorInkLightest {
  @include color-icon('ink', 'lightest');
}

.colorInkLighter {
  @include color-icon('ink', 'lighter');

  &::after {
    background-color: color('sky');
  }
}

.colorInkLight {
  @include color-icon('ink', 'light');
}

.colorInk {
  @include color-icon('ink');

  &::after {
    background-color: color('sky');
  }
}

.colorBlueLighter {
  @include color-icon('blue', 'lighter');
}

.colorBlueLight {
  @include color-icon('blue', 'light');
}

.colorBlue {
  @include color-icon('blue');
}

.colorBlueDark {
  @include color-icon('blue', 'dark');

  &::after {
    background-color: color('blue', 'light');
  }
}

.colorBlueDarker {
  @include color-icon('blue', 'darker');
}

.colorIndigoLighter {
  @include color-icon('indigo', 'lighter');
}

.colorIndigoLight {
  @include color-icon('indigo', 'light');
}

.colorIndigo {
  @include color-icon('indigo');
}

.colorIndigoDark {
  @include color-icon('indigo', 'dark');
}

.colorIndigoDarker {
  @include color-icon('indigo', 'darker');
}

.colorTealLighter {
  @include color-icon('teal', 'lighter');
}

.colorTealLight {
  @include color-icon('teal', 'light');
}

.colorTeal {
  @include color-icon('teal');

  &::after {
    background-color: color('white');
  }
}

.colorTealDark {
  @include color-icon('teal', 'dark');

  &::after {
    background-color: color('teal', 'light');
  }
}

.colorTealDarker {
  @include color-icon('teal', 'darker');
}

.colorGreenLighter {
  @include color-icon('green', 'lighter');
}

.colorGreen {
  @include color-icon('green');

  &::after {
    background-color: color('green', 'lighter');
  }
}

.colorGreenDark {
  @include color-icon('green', 'dark');

  &::after {
    background-color: color('green', 'light');
  }
}

.colorYellowLighter {
  @include color-icon('yellow', 'lighter');
}

.colorYellow {
  @include color-icon('yellow');
}

.colorYellowDark {
  @include color-icon('yellow', 'dark');

  &::after {
    background-color: color('yellow', 'light');
  }
}

.colorOrange {
  @include color-icon('orange');
}

.colorOrangeDark {
  @include color-icon('orange', 'dark');
}

.colorRedLighter {
  @include color-icon('red', 'lighter');
}

.colorRed {
  @include color-icon('red');
}

.colorRedDark {
  @include color-icon('red', 'dark');

  &::after {
    background-color: color('red', 'light');
  }
}

.colorPurple {
  @include color-icon('purple');
}

.Svg,
.Img {
  position: relative;
  z-index: z-index(icon, $stacking-order);
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

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