<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 });
}