@import "compass/css3";

$background1: #000;

$background2: #0097c0
  url("http://stash.rachelnabors.com/codepen/badge/brillant_trans.png") 50% 50%;

$diameter: 6em;

%circle {
  @include border-radius(100%);
}

%centering {
  position: absolute;
  top: 50%;
  left: 50%;
}

.logo {
  $logo-diameter: $diameter+1em;
  $rounded-corners: 1.5em;
  background: $background1;
  @include border-radius($rounded-corners);
  color: #fff;
  margin: 2em auto;
  position: relative;
  width: $logo-diameter;
  height: $logo-diameter;
  z-index: -2;
  &:before {
    background: $background1;
    @include border-radius($rounded-corners);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    @include rotate(30deg);
    width: $logo-diameter;
    height: $logo-diameter;
    z-index: -2;
  }
  &:after {
    background: $background1;
    @include border-radius($rounded-corners);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    @include rotate(-30deg);
    width: $logo-diameter;
    height: $logo-diameter;
    z-index: -2;
  }
}

.rivets {
  $rivets-diameter: $diameter+1em;
  width: $rivets-diameter;
  height: $rivets-diameter;
  &:before,
  &:after {
    content: " ";
    background: $background1;
    @extend %circle;
    position: absolute;
    top: 50%;
    margin-top: -0.25em;
    width: 0.5em;
    height: 0.5em;
  }
  &:before {
    left: -0.75em;
  }
  &:after {
    right: -0.75em;
  }
}

.seal {
  $seal-diameter: $diameter + 1em;
  @extend %circle;
  @extend %centering;
  background: $background1;
  margin-top: -($seal-diameter/2);
  margin-left: -($seal-diameter/2);
  width: $seal-diameter;
  height: $seal-diameter;
  &:before {
    @extend %centering;
    $width: $diameter * 1.75;
    $height: 1.25em;
    background: $background2;
    content: "";
    margin-top: -($height);
    margin-left: -($width/2);
    z-index: -1;
    width: $width;
    height: 0;
    border: $height solid rgba(0, 0, 0, 0);
    border-left: $height/2 solid #fff;
    border-right: $height/2 solid #fff;
    @include box-sizing(border-box);
    /*Fix to make the borders appear on the ribbon ends also*/
    background-origin: border-box;
  }
}

.type {
  @extend %circle;
  @include transform-origin(50%, 50%);
  @include rotate(-30deg);
  @include box-sizing(border-box);
  background: $background2;
  font-family: "Lato", sans-serif;
  text-align: center;
  text-transform: uppercase;
  padding-top: 1em;
  @extend %centering;
  margin-top: -($diameter/2);
  margin-left: -($diameter/2);
  width: $diameter;
  height: $diameter;
  h1 {
    font-size: 4em;
    font-weight: 900;
  }
  em {
    display: block;
    font-size: 0.75em;
    font-style: italic;
    font-weight: 300;
  }
}