// Variables
$background: #9B59B6;

$line-color: #FFF;
$line-width: 20px;
$line-height: 3px;

// Mixin For Span Element
@mixin span($t) {
  transition: all $t + s cubic-bezier(.5, 10, .6, .1);
  display: block;
  cursor: pointer;
  box-shadow: 1px 1px 4px darken(#9B59B6, 4%);
}

// Mixin For Centering Elements
@mixin center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

// Main Styles
html,body {
  background: $background;
}

.container {
  margin-top: 140px;
  transform: scale(3);
}

span {
  @include span(0.4);
}

.active {
  background: $line-color;
  width: $line-width;
  height: $line-height;
  margin-top: 4px;
  @include center;
}

.cross {
  background: $line-color;
  width: $line-width;
  height: $line-height;
  margin-top: 4px;
  display: block;
  @include center;
}

.cross:nth-of-type(1) {
  transform: rotate(45deg);
}

.cross:nth-of-type(2) {
  transform: rotate(-45deg);
  margin-top: -3px;
}