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

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

.p_e6 {
  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_jq {
  color: color('white');
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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