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

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

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

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

.Biblio-Icon--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%;
  }
}

.Biblio-Icon--isColored {
  color: color('white');
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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