$backdrop-spacing: (spacing(extra-loose) - rem(20px)) / 2;
$stacking-order: (
  backdrop: 1,
  icon: 2,
);

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

.p_ik {
  position: relative;
  display: flex;
  align-items: center;
  margin: $backdrop-spacing;

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

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

.p_fa {
  fill: color('white');
  color: transparent;
}

.p_hl {
  fill: color('black');
}

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

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

.p_e8 {
  fill: color('sky');
}

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

.p_re {
  fill: color('ink', 'lightest');

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

.p_x1 {
  fill: color('ink', 'lighter');

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

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

.p_wv {
  fill: color('ink');

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

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

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

.p_jx {
  fill: color('blue');
}

.p_uo {
  fill: color('blue', 'dark');

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

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

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

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

.p_dv {
  fill: color('indigo');
}

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

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

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

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

.p_g8 {
  fill: color('teal');

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

.p_gr {
  fill: color('teal', 'dark');

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

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

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

.p_u7 {
  fill: color('green');

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

.p_wd {
  fill: color('green', 'dark');

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

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

.p_xw {
  fill: color('yellow');
}

.p_lw {
  fill: color('yellow', 'dark');

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

.p_lv {
  fill: color('orange');
}

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

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

.p_ir {
  fill: color('red');
}

.p_wl {
  fill: color('red', 'dark');

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

.p_np {
  fill: color('purple');
}

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

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