michaelchadwick/ember-remember-stuff

.ribbon {
  background: #ffb9a2;
  box-shadow: 0 0 0 999px #ffb9a2;
  clip-path: inset(0 -100%);
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 0.5em 0.5em 0.25em;
  position: fixed;
  text-transform: uppercase;
  z-index: 1;

  @media (min-width: 768px) {
    font-size: 1em;
  }

  &.left {
    inset: 0 auto auto 0; /* top and left equal to 0 */
    transform-origin: 100% 0; /* OR top right */
    transform: translate(-29.3%) rotate(-45deg);
  }

  &.right {
    inset: 0 0 auto auto; /* top and right equal to 0 */
    transform-origin: 0 0; /* OR top left */
    transform: translate(29.3%) rotate(45deg);
  }

  &.dev {
    background: #1da826;
    box-shadow: 0 0 0 999px #1da826;
    color: #ffffff;
  }

  &.prod {
    background: #cb0b38;
    box-shadow: 0 0 0 999px #cb0b38;
    color: #ffffff;
  }
}