<div class="container">
    <button class="button button-close">
        <span class="outer-bars">
            <span class="bar"></span>
            <span class="bar"></span>
        </span>
        <span class="squares">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="icon icon-close"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        </span>
    </button>
    
    
    <button class="button button-close small">
        <span class="outer-bars">
            <span class="bar"></span>
            <span class="bar"></span>
        </span>
        <span class="squares">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="icon icon-close"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        </span>        
    </button>
    
</div>

$colorCopyHighlight: #10dcb2;

@function ease($easeName) {

  $easeMap: (
    linear:     '0.250, 0.250, 0.750, 0.750',
    ease:       '0.250, 0.100, 0.250, 1.000',
    easeIn:     '0.420, 0.000, 1.000, 1.000',
    easeOut:    '0.000, 0.000, 0.580, 1.000',
    easeInOut:    '0.420, 0.000, 0.580, 1.000',
    easeInQuad:   '0.550, 0.085, 0.680, 0.530',
    easeOutQuad:  '0.250, 0.460, 0.450, 0.940',
    easeInCubic:  '0.550, 0.055, 0.675, 0.190',
    easeOutCubic: '0.215, 0.610, 0.355, 1.000',
    easeInQuart:  '0.895, 0.030, 0.685, 0.220',
    easeOutQuart: '0.165, 0.840, 0.440, 1.000',
    easeInQuint:  '0.755, 0.050, 0.855, 0.060',
    easeOutQuint: '0.230, 1.000, 0.320, 1.000',
    easeInSine:   '0.470, 0.000, 0.745, 0.715',
    easeOutSine:  '0.390, 0.575, 0.565, 1.000',
    easeInExpo:   '0.950, 0.050, 0.795, 0.035',
    easeOutExpo:  '0.190, 1.000, 0.220, 1.000',
    easeInCirc:   '0.600, 0.040, 0.980, 0.335',
    easeOutCirc:  '0.075, 0.820, 0.165, 1.000',
    easeInBack:   '0.600, -0.280, 0.735, 0.045',
    easeOutBack:  '0.175, 0.885, 0.320, 1.275',
    easeInOutQuad:  '0.455, 0.030, 0.515, 0.955',
    easeInOutCubic: '0.645, 0.045, 0.355, 1.000',
    easeInOutQuart: '0.770, 0.000, 0.175, 1.000',
    easeInOutQuint: '0.860, 0.000, 0.070, 1.000',
    easeInOutSine:  '0.445, 0.050, 0.550, 0.950',
    easeInOutExpo:  '1.000, 0.000, 0.000, 1.000',
    easeInOutCirc:  '0.785, 0.135, 0.150, 0.860',
    easeInOutBack:  '0.680, -0.550, 0.265, 1.550'
  );

  @if map-has-key($easeMap, $easeName) {
    @return cubic-bezier(#{map-get($easeMap, $easeName)})
  } @else {
    @warn "The easing value '#{$easeName}' isn't available. "
        + "Please make sure it is defined in '$easeMap' map.";
    @return null;
  }
}

@mixin pos($top: 0, $right: $top, $bottom: $top, $left: $right) {
  top: $top;
  bottom: $bottom;
  left: $left;
  right: $right;
}

@mixin pulsate-animation($name, $min-opacity: 0, $duration: 1000, $loop: infinite, $ease: 'ease-in-out') {
  animation: #{$duration}ms #{$name} $loop #{$ease};

  @keyframes #{$name} {
    0% { opacity: 1; }
    50% { opacity: $min-opacity; }
    100% { opacity: 1; }
  }
}

html {
    background: #121212;
}

button {
    background: transparent;
    border: 0;
    margin: 40px;
}

.button {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  box-sizing: content-box;
    
    &:focus,
  &:active {
    outline: none;
  }
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    text-align: center;
}

//todo: delete
.button {
    vertical-align: middle;
}

.button-close {
    width: 48px;
  height: 48px;
  display: inline-block;
  color: #fff;
    position: relative;
  transform: rotate(45deg);
    
    &.small {
           width: 40px;
           height: 40px;
    }
    
    .icon-close {
        width: 24px;
    height: 24px;
    display: block;
    margin: auto;
    position: relative;
        
    &:before,
    &:after {
      position: absolute;
      content: '';
      background: $colorCopyHighlight;
    }

    &:before {
      top: 0;
      bottom: 0;
      left: 50%;
      width: 3px;
      height: 100%;
      transform: translate(-50%, 0);
    }

    &:after {
      top: 50%;
      left: 0;
      height: 3px;
      width: 100%;
      transform: translate(0, -50%);
    }

  }
    
    .outer-bars {
        $initBorderWidth: 10px;
        @include pos(-10px);
        position: absolute;
      transform: rotate(-45deg);
        
        .bar {
            @include pos(50%, 0, auto, 0);
            transform: translateY(-50%);
            position: absolute;
            border: 1px solid currentColor;
            box-sizing: border-box;
            border-top: 0;
            border-bottom: 0;
            height: $initBorderWidth;
            width: 100%;
            box-sizing: border-box;
            
            &:last-child {
                transform: translateY(-50%) rotate(90deg);
            }
        }
    }
    
    .line {
    @include pulsate-animation('close-button', .5, 400);
    height: 50%;
    width: 50%;
    position: absolute;
    transition: all .1s ease(easeOutQuart);

    &:after,
    &:before {
      content: '';
      position: absolute;
      background: currentColor;
    }

    &:before {
      width: 1px;
    }

    &:after {
      height: 1px;
    }

    &.top {
      top: 0;
      left: 0;

      &:before {
        @include pos(0, auto, 2px, 0);
      }

      &:after {
        @include pos(0, 2px, auto, 0);
      }
    }

    &.bottom {
      bottom: 0;
      right: 0;
      animation-delay: 200ms;

      &:before {
        @include pos(2px, 0, 0, auto);
      }

      &:after {
        @include pos(auto, 0, 0, 2px);
      }
    }

    &.left {
      bottom: 0;
      left: 0;
      animation-delay: 300ms;

      &:before {
        @include pos(2px, auto, 0, 0);
      }

      &:after {
        @include pos(auto, 2px, 0, 0);
      }
    }

    &.right {
      top: 0;
      right: 0;
      animation-delay: 100ms;

      &:before {
        @include pos(0, 0, 2px, auto);
      }

      &:after {
        @include pos(0, 0, auto, 2px);
      }
    }
  }
}

audio {
    display: none;
}

let outline = document.querySelectorAll('.outer-bars');
let outlineBars = document.querySelectorAll('.outer-bars .bar');
let squares = document.querySelectorAll('.squares .line');
let icon = document.querySelectorAll('.icon-close');
let timeline = new TimelineMax({ repeat: -1, repeatDelay: 3 });

timeline
    .delay(1)
    .add('init', 0)
    .add('rotate', .6)
    //.add(flicker(icon), 'init')
    .add(flicker(outline), 'init')
    .add(rotate(icon, -90), 'rotate')
    .add(rotate(outline, 45), 'rotate')
    .to(outlineBars, .2, { height: 0 })
    .from(squares, .2, { height: 0, width: 0 })
    //.to(squares, .05, { opacity: 0, repeat: 3, repeatDelay: .05, ease: SteppedEase.config(2) })
    //.add(flicker(outline))
;


function flicker(element)
{
    // let tween = new TweenMax;
    // return tween.fromTo(element, 1, { opacity: 0}, {opacity: 1});
    let tl = new TimelineMax;
    return tl.from(element, .15,
                   { opacity: 0, repeat: 3, repeatDelay: 0, ease: SteppedEase.config(0) });
}

function rotate(element, direction)
{
    let tl = new TimelineMax;
    return tl.to(element, .5, { rotation: direction, ease: Power2.easeOut });
}