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

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

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

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

.p_uk {
  fill: color(white);
}

.p_y7 {
  fill: color(black);
}

.p_ye {
  fill: color(sky, lighter);
}

.p_kg {
  fill: color(sky, light);
}

.p_jh {
  fill: color(sky);
}

.p_tz {
  fill: color(sky, dark);
}

.p_la {
  fill: color(ink, lightest);
}

.p_io {
  fill: color(ink, lighter);

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

.p_y6 {
  fill: color(ink, light);
}

.p_fq {
  fill: color(ink);

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

.p_s1 {
  fill: color(blue, lighter);
}

.p_m7 {
  fill: color(blue, light);
}

.p_xa {
  fill: color(blue);
}

.p_sk {
  fill: color(blue, dark);

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

.p_ob {
  fill: color(blue, darker);
}

.p_lb {
  fill: color(indigo, lighter);
}

.p_ha {
  fill: color(indigo, light);
}

.p_hf {
  fill: color(indigo);
}

.p_k0 {
  fill: color(indigo, dark);
}

.p_wm {
  fill: color(indigo, darker);
}

.p_as {
  fill: color(teal, lighter);
}

.p_ky {
  fill: color(teal, light);
}

.p_il {
  fill: color(teal);

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

.p_eo {
  fill: color(teal, dark);

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

.p_ru {
  fill: color(teal, darker);
}

.p_jg {
  fill: color(green, lighter);
}

.p_bt {
  fill: color(green);

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

.p_os {
  fill: color(green, dark);

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

.p_x7 {
  fill: color(yellow, lighter);
}

.p_vi {
  fill: color(yellow);
}

.p_nh {
  fill: color(yellow, dark);

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

.p_p1 {
  fill: color(orange);
}

.p_sr {
  fill: color(orange, dark);
}

.p_e1 {
  fill: color(red, lighter);
}

.p_oh {
  fill: color(red);
}

.p_df {
  fill: color(red, dark);

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

.p_hy {
  fill: color(purple);
}

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

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