@import "compass/css3";

@mixin star($arms, $outerRadius, $innerRadius, $fill: null){
    $centerX: $outerRadius;
    $centerY: $outerRadius;
    $svg-box-width: $outerRadius*2;
    $svg-box-height: 0;
  
    $fill: if($fill, 'fill="#{$fill}"', '');

    $results: '';
    $angle: pi() / $arms;
    @for $i from 0 to (2*$arms) {
      // Use outer or inner radius depending on what iteration we are in.
      $r: if(($i % 2) == 0, $outerRadius, $innerRadius);

      $currX: $centerX + sin($i * $angle) * $r;
      $currY: $centerY - cos($i * $angle) * $r;
      
      $svg-box-height: if($currY > $svg-box-height, $currY, $svg-box-height);

      // Our first time we simply append the coordinates, subsequet times
      // we append a ", " to distinguish each coordinate pair.
      @if ($i == 0){
         $results: $currX,$currY;
      } @else {
      $results: $results $currX,$currY;
      }
    }
  background-image:
    url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg"\ viewBox="0,0 #{$svg-box-width},#{$svg-box-height}">\
        <polygon #{$fill} points="#{$results}" />\
      </svg>\
    ');
  /* background-size: cover; */
  background-position: 50%;
  background-repeat: no-repeat;
}

[class^='star'],
[class*=' star'] {
  width: 6em;
  height: 6em;
  float: left;
  margin: 0.5em;
}
  
.star3  { @include star( 3, 5,    1, hsl(  0, 75%, 50%)); }
.star4  { @include star( 4, 5,  2.5, hsl( 40, 75%, 50%)); }
.star5  { @include star( 5, 5,    2, hsl( 80, 75%, 50%)); }
.star6  { @include star( 6, 5,  1.3, hsl(120, 75%, 50%)); }
.star7  { @include star( 7, 5,  1.5, hsl(160, 75%, 50%)); }
.star8  { @include star( 8, 5,  2.2, hsl(200, 75%, 50%)); }
.star9  { @include star( 9, 5, 1.75, hsl(240, 75%, 50%)); }
.star10 { @include star(10, 5,  2.3, hsl(280, 75%, 50%)); }
.star11 { @include star(10, 5,    2, hsl(320, 75%, 50%)); }

.star-badge {
  @include star(20, 100, 85, hsl(0, 80%, 40%));
  transform: rotate(-10deg);
  display: table;
  margin: auto;
  font-size: 1.5em;
  position: absolute;
  top: -3em;
  left: -3em;
  /* Remove for Drop Shadow */
  @include filter(drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.35)));
  /**/
  & > * {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.5em;
    text-transform: uppercase;
  }
}
  
.panel {
  width: 21em;
  padding: 2em;
  font-size: 0.75em;
  display: inline-block;
  position: relative;
  background-color: #eee;
  border: 0.5em solid #bbb;
  border-radius: 0.5em;
}

body {
  background-color: hsl( 40, 75%, 50%);
  font-size: 0.8em;
}

.jiggle:hover {
  animation: jiggle 0.15s linear infinite alternate;
}

.jiggle:nth-of-type(even){
  animation-direction: alternate-reverse;
}

@keyframes jiggle {
    from {transform: rotate(-3deg);}
    to {transform: rotate(3deg);}
}
  
// Center using flexbox
:root{height:100%;display:flex}:root>*{margin:auto}