Rounded label: Grey

.c-rounded-label {
  display: inline-block;
  background-color: secondary(page, 100);
  border-radius: remify(24px);
  color: primary(night, 120);
  margin-right: remify(8px);
  padding: remify(4px) remify(16px);
  text-align: center;

  img {
    max-height: remify(25px);
  }

  .icon {
    display: none;
    @include min-screen(bp(phone-p)) {
      display: inline-block;
    }
  }

  .svg,
  svg {
    vertical-align: middle;
    display: inline-block;
    margin-right: remify(4px);
    fill: currentColor;
  }

  .c-product & {
    @include shadow(small);
    margin-top: 0;
    margin-right: 0remify(16px);  
    @include font-scale(level-1-5);

    @include min-screen(bp(phablet)) {
      margin-top: initial;
      margin-right: remify(16px);
    }
  }
  
  .c-product--compact & {
    @include shadow(small);
    margin-top: remify(16px);
    margin-right: 0;  

    @include min-screen(bp(phone-p)) {
      margin-right: remify(16px);
    }
  }

  .c-launch--showcase & {
    position: absolute;
    top: remify(16px);
  }

  .c-canvas--content-template & {
    font-weight: fw(bold);
    margin-bottom: remify(24px);
  }

  &:last-child,
  &.last {
    margin-right: 0;
  }

  .c-product__schedule & {
    margin-bottom: remify(24px);
  }

  // .c-form--outstanding & {
  //   background-color: #fff;
  // }

  p {
    @include resetFont();
    // padding: remify(8px) remify(16px);
  }

  .c-skyscreaper--extra & {
    z-index: 1;
    position: absolute;
    top: remify(-18px);
    left: remify(24px);
    @include shadow(small);
  }

  .c-retail & {
    z-index: 1;
    position: absolute;
    top: remify(16px);
    left: remify(16px);
    @include shadow(small);
    font-size: 12px;
  }

  .c-superhero--details & {
    margin-right: 0;
  }

}

.c-rounded-label--positive {
  font-weight: fw(bold);
  background-color: status(positive);
  color: #fff
}

.c-rounded-label--negative {
  font-weight: fw(bold);
  background-color: status(negative);
  color: #fff
}

.c-rounded-label--dark {
  font-weight: fw(bold);
  color: secondary(page, 100);
  background: primary(night, 100);
}

.c-rounded-label--relevant {
  font-weight: fw(bold);
  color: primary(night, 120);
  background: primary(sun, 80);
}

.c-rounded-label--sky {
  font-weight: fw(bold);
  color: white;
  background: primary(sky, 120);
}

.c-rounded-label--grey {
  background: primary(night, 20);
}

.c-rounded-label--stamp {

  .c-product & {
    background-color: primary(night, 80);
    color: #fff;
    text-transform: uppercase;
    font-size: 75%;
    position: absolute;
    left: 50%;
    top: remify(-12px);
    transform: translateX(-50%);

    // p {
      padding: remify(4px) remify(16px);
    // }

  }

}

.c-rounded-label--small {
  padding: remify(4px) remify(12px);
  @include font-scale(level-1);
}