$small-size: rem(32px);
$medium-size: rem(40px);
$large-size: rem(60px);

.p_up {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: $small-size;
  max-width: 100%;
  background: color(teal);
  border-radius: 50%;
  user-select: none;

  &::after {
    content: '';
    display: block;
    padding-bottom: 100%;
  }
}

.p_lf {
  width: $small-size;
}

.p_qt {
  width: $medium-size;
}

.p_pf {
  width: $large-size;
}

.p_mi {
  background: color(teal);
}

.p_gv {
  background: color(red);
}

.p_b4 {
  background: color(orange);
}

.p_sh {
  background: color(green);
}

.p_yr {
  background: color(blue);
}

.p_z0 {
  background: color(purple);
}

.p_sx {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.p_c1 {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: rem(2px);
}

.p_ft {
  width: rem(48px);
  height: auto;
  color: color(white);
}