$unit: 1.75vmin;
//
$bg-1: #b7ecff;
$bg-2: #639cb5;

$walkman-a-01: #73a5d6;
$walkman-a-02: darken(#73a5d6, 4);
$walkman-a-03: darken(#73a5d6, 10);
$walkman-a-04: darken(#73a5d6, 15);
$walkman-a-black: darken(#73a5d6, 50);

$walkman-b-01: #ffffff;
$walkman-b-02: #daf1f5;
$walkman-b-03: #94b8c1;
$walkman-b-04: #7599a2;

$button-01: #ffcf64;
$button-02: #e7b953;
$button-03: #c49733;

$button-b-01: $walkman-b-01;
$button-b-02: $walkman-b-02;
$button-b-03: lighten($walkman-b-03, 3);

/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
    display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;

    &__side{
        position: absolute;
        height: ( 2 * $pi * ($base / 2) ) / $sides ;
        width: $width;
        background-color: darken($color, 15);

        @for $var from 1 to ($sides + 1) {
            &:nth-of-type(#{$var}){ transform: rotateX( $var * $degree / $sides ) translateZ($base / 2); }
        }
        @for $var from 1 to 20 {
            &:nth-of-type(#{$var}){ background-color: darken($color, $var * 1); }
        }
        @for $var from 1 to 20 {
            &:nth-last-of-type(#{$var}){ background-color: darken($color, $var * 1); }
        }
    }
    &__top,
    &__bottom{
        position: absolute;
        width: $base;
        height: $base;
        border-radius: 50%;
        transform: rotateY(90deg) translateZ( $width / 2 );
    }
    &__bottom{ transform: rotateY(90deg) translateZ( $width / -2 );}
}

@mixin sphere($base, $sides, $degree, $pi, $width, $y, $color) {
    display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;

    &__side{
        position: absolute;
        height: ( 2 * $pi * ($base / 2) ) / $sides ;
        width: $width;
        background-color: darken($color, 2);

        @for $var from 1 to ($sides + 1) {
			&:nth-of-type(#{$var}) {
				transform: rotateX($var * $degree / $sides) translateZ($base / 2) rotateY($y);
                background-color: darken($color, $var * 1.5)
			}
		}
    }
}
@mixin cube($width, $height, $depth) {
    &__front{ @include cube-front($width, $height, $depth); }
    &__back{ @include cube-back($width, $height, $depth); }
    &__right{ @include cube-right($width, $height, $depth); }
    &__left{ @include cube-left($width, $height, $depth); }
    &__top{ @include cube-top($width, $height, $depth);}
    &__bottom{ @include cube-bottom($width, $height, $depth); }
}
//----------------------
@mixin cube-front($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-$width);
}
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {

    animation: #{$animation} #{$time} infinite ease;

    @keyframes #{$animation} {
        0%, 15%, 45%, 60%, 62%, 68%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
            @else if $side == "cube-bottom" { @include cube-bottom($width-el, $height-el, $depth-el); }

        }
        20%, 40%, 58%, 64%, 70%, 100%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-bottom" { @include cube-bottom($width-el, $height-el, $depth-el); }
        }
    }
}
@mixin cube-color($color) {
    &__front{ background-color: darken($color, 5); }
    &__back{ background-color: darken($color, 10) }
    &__right{ background-color: darken($color, 10) }
    &__left{ background-color: darken($color, 20); }
    &__top{ background-color: $color; }
    &__bottom{ background-color: darken($color, 20);}
}
/***********************/
/***********************/
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    transform-style: preserve-3d;

	user-select: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;

    font-family: sans-serif;
    font-size: .775 * $unit;
    color: rgba($walkman-a-black, .75);
    text-transform: uppercase;
}
/***********************/
/***********************/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;

    font-weight: bolder;
    overflow: hidden;
	cursor: grab;
    background-color: $bg-1;
}
.face{ position: absolute; }
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
/***********************/
/***********************/
.main{
    position: absolute;
    width: 24 * $unit;
    height: 7 * $unit;
    transform:
        perspective(400 * $unit)
        rotateX(66deg)
        rotateZ(40deg)
        translateZ(-16 * $unit)
    ;
}


.shadows{
	position: absolute;
	width: 102%;
	height: 102%;
	left: -1%;
	bottom: -1%;
	background-image: radial-gradient($bg-2, darken($bg-2, 15));
	box-shadow: 0 0 .5 * $unit .15 * $unit rgba(darken($bg-2, 15), .5);

	&::after{
		content: '';
		position: absolute;
		width: 102%;
		height: 102%;
		left: -1%;
		top: -1%;

		background-color: darken($bg-2, 20);
		box-shadow: 0 0 .5 * $unit .25 * $unit rgba(darken($bg-2, 15), .5);
		border-radius: .25 * $unit;
		filter: blur(.15 * $unit);
	}

	&::before{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 26.5 * $unit;
	    height: 25 * $unit;

		border-bottom-left-radius: 8.5 * $unit;
		transform-origin: bottom left;
		transform: skewX(-15deg);
		background-image: linear-gradient(to top, darken($bg-2, 20), darken($bg-2, 15) 30%, darken($bg-2, 10) 50%, $bg-2);
		box-shadow: 0 0 .5 * $unit .25 * $unit rgba(darken($bg-2, 15), .5);
		filter: blur(.15 * $unit);
	}
}


.waves {
	position: absolute;
	top: 100%;
	left: 0;

	display: grid;
	grid-auto-flow: column;
	width: 100%;
	height: 100%;
    opacity: 0;
    visibility: hidden;
}

.is-wave-playing {
    visibility: visible;
    opacity: 1;
}

.wave {
	height: 0 * $unit;
	width: (24 * $unit)/7;
	background-color: $bg-2;


	@for $i from 3 through 5 {
		&:nth-of-type(#{$i}) {
			animation: wave 525ms ease-in alternate infinite #{$i * 100}ms;
		}
	}

    &:nth-of-type(2),
    &:nth-of-type(6) {
        height: 0 * $unit;
        animation: wave-2 262.5ms ease-in alternate infinite 425ms;
    }
    &:nth-of-type(1),
	&:nth-of-type(7) {
		height: 0 * $unit;
		animation: wave-3 525ms ease-in alternate infinite 850ms;
	}
}
@keyframes wave {
	0%,
	100% { height: 4 * $unit; }
	24% { height: 6 * $unit; }
	25%,30% { height: 6.5 * $unit; }
	55%, 60% { height: 4.5 * $unit; }
	61%, 65% { height: 6.6 * $unit; }
	80%, 82% { height: 3.5 * $unit; }
	83%, 90% { height: 3 * $unit; }
	95% { height: 3.25 * $unit;}
}

@keyframes wave-2 {
	0% { height: 3 * $unit; }
	100% { height: 6 * $unit; }
}
@keyframes wave-3 {
	0%, 50% { height: 0 * $unit; }
	75%, 100% { height: 5 * $unit; }
}

/***********************/
/***********************/
.a{
    $width-el: 18 * $unit;
    $height-el: 27 * $unit;
    $depth-el: 2.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 0;

    &__front{
		background-color: $walkman-a-02;
		padding: 2 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__back{
		background-color: $walkman-a-04;

		background-image:
			linear-gradient(to bottom, transparent 70%, darken($walkman-a-04, 30)),
			linear-gradient(to right, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, darken($walkman-a-04, 25), darken($walkman-a-04, 15), darken($walkman-a-04, 10) 20%, $walkman-a-04)
		;
		background-size:
			100% 1 * $unit,
			1 * $unit 100%,
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			100% 0,
			0 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

        &::after{
            content: 'stereo';
            position: absolute;
            top: 1 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            font-size: 3 * $unit;
            color: $walkman-a-04;
            text-shadow: 0 0 .1*$unit lighten($walkman-a-04, 20);
        }

        &::before{
            content: '';
            position: absolute;
            width: 15 * $unit;
            height: 10 * $unit;
            bottom: .1 * $unit;
            right: .1 * $unit;
            border-top-left-radius: .5 * $unit;
            background-image: linear-gradient(to bottom, rgba(darken($walkman-a-04, 5), .75), rgba(darken($walkman-a-04, 5), .1));
            border-top: .15 * $unit solid darken($walkman-a-04, 10);
            border-left: .15 * $unit solid darken($walkman-a-04, 10);

        }
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
            linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),

			linear-gradient(to top, darken($walkman-a-01, 15), darken($walkman-a-01, 10) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 8))
		;
		background-size:
        1 * $unit 100%,

			100% 4 * $unit,
			100% 1 * $unit
		;
		background-position:
            0% 100%,
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
    &__right{ background-color: $walkman-a-03; }
    &__top{ background-color: $walkman-a-black; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.b01,
.b02,
.b04,
.b03{
	&__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}

	&__back{
		background-color:$walkman-a-04;

		background-image:
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
}

.b01{
    $width-el: 5.3 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 3.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(27 * $unit);

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color:$walkman-a-04;


		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			100% 0%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-01, 4), darken($walkman-a-01, 2) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 10)),

		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,

			100% 4 * $unit,
			100% 1 * $unit,
			100% 100%
		;
		background-position:
			100% 0,
			0 100%,
			0 100%,
			0 0%,
			0 0
		;
		background-repeat: no-repeat;
	}
    &__right{ background-image: linear-gradient(to right, $walkman-a-03 20%, $walkman-a-black 20% 60%, $walkman-a-03 60%); }
    &__top{ background-color: $walkman-a-01; }
    &__bottom{ background-color: $walkman-a-04; }
}

.b02{
    $width-el: 8.8 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 3.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 9.2 * $unit;
	transform: translateZ(27 * $unit);

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 18)),
			linear-gradient(to top, darken($walkman-a-02, 5), darken($walkman-a-02, 2) 20%, $walkman-a-02)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			100% 0%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color:$walkman-a-04;

		background-image:
			linear-gradient(to left, transparent 70%, lighten($walkman-a-04, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-04, 18)),
			linear-gradient(to top, darken($walkman-a-04, 5), darken($walkman-a-04, 2) 20%, $walkman-a-04)
		;
		background-size:
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__left{ background-image: linear-gradient(to right, $walkman-a-03 30%, $walkman-a-black 30% 80%, $walkman-a-03 80%); }
    &__right{ background-color: $walkman-a-03; }
    &__top{
        background-color: $walkman-a-01;
        display: inline-flex;
        justify-content: center;
        gap: .75 * $unit;

        &::before,
        &::after{
            content: '';
            margin-top: 3 * $unit;

            width: 1.75 * $unit;
            height: 1.75 * $unit;

            border: .225 * $unit solid $walkman-b-01;
            outline: .2 * $unit solid #498d8b;
            border-radius: 50%;
            background-image: radial-gradient(circle at 50% 50%, $walkman-a-black 50%, $walkman-b-03 50%);
        }
    }
    &__bottom{ background-color: $walkman-a-04; }
}

.b03{
    $width-el: 4.2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 1.4 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 0;
	left: 5.2 * $unit;

	transform: translateZ(27 * $unit);

    &__front{ background: $walkman-a-black; }
    &__back{  }
    &__left{ background-color: $walkman-a-01; display: none; }
    &__right{ background-color: $walkman-a-03; display: none; }
    &__top{
        background-color: $walkman-a-01;
        &::before{
            content: 'hot line';
            display: inline-block;
            margin-top: 1 * $unit;
            padding: .25 * $unit;


            color: $walkman-a-01;
            background-color: white;
            border-radius: .25 * $unit;
        }
    }
    &__bottom{ background-color: $walkman-a-04; }
}

.b04{
    $width-el: 4.2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: .85 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	left: 5.2 * $unit;
	transform: translateZ(27 * $unit);

    &__front{ background-color: $walkman-a-02; }
    &__back{ background-color: $walkman-a-black; }
    &__left{ background-color: $walkman-a-03; }
    &__right{ background-color: $walkman-a-03; }
    &__top{ background-color: $walkman-a-01;}
    &__bottom{ background-color: $walkman-a-04; }
}



.c{
    $width-el: 18 * $unit;
    $height-el: 27 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	left: 0;

    transform-origin: bottom left;
    transform: rotateZ(19deg);
    transition: transform 300ms linear;

    &__front{
		background-color: $walkman-a-02;
		background-image:
			linear-gradient(to bottom, transparent 70%, darken($walkman-a-02, 30)),
			linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-02, 25), darken($walkman-a-02, 15), darken($walkman-a-02, 10) 20%, $walkman-a-02)
		;
		background-size:
			100% 1 * $unit,
			1 * $unit 100%,
			1 * $unit 100%,
			100% 1 * $unit,
			100% 4 * $unit
		;
		background-position:
			0 100%,
			100% 0,
			0 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

		clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 65% 25%, 65% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);

	}
    &__back{
		background-color:$walkman-a-03;
		display: none;
	}
    &__left{
		background-color: $walkman-a-01;

		background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-a-02, 15)),
			linear-gradient(to top, darken($walkman-a-01, 15), darken($walkman-a-01, 10) 20%,$walkman-a-01),
			linear-gradient(to top, $walkman-a-01 70%, lighten($walkman-a-01, 8))
		;
		background-size:
            1 * $unit 100%,
			100% 4 * $unit,
			100% 1 * $unit
		;
		background-position:
            100% 0,
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
    &__right{ background-color: $walkman-a-03; display: none; }
    &__top{ background-color: $walkman-a-black; display: none; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.is-c-close{
    transform: rotateZ(0deg);
    transition: transform 300ms linear;
}

$unit-s: 1.75vmin;

.sphere,
.sphere2{
    $sides: 10;
    $degree: 360deg;
    $width: 2 * $unit-s;
    position: absolute;
    bottom: 1.5 * $unit;
    left: 9 * $unit;

    transform: translateZ(9.75 * $unit) rotateX(-90deg) rotateZ(135deg);

    .circle{
        position: absolute;
        width: 1.2 * $unit-s;
        height: 1.2 * $unit-s;
        border-radius: 50%;
        transform:  translateZ(1 * $unit-s);
        background-image: linear-gradient( darken( $walkman-b-03, 50) 40%, darken($walkman-b-03, 40) 41% 59%, darken( $walkman-b-03, 50) 60%  ) ;
    }

    &-item1{
        $base: 1.5 * $unit-s;
        $pi: 3.9;
        $y: -15deg;
        position: absolute;
        width: $width;
        height: $base;
        transform: rotateY(90deg);

        @include sphere($base, $sides, $degree, $pi, $width, $y, darken( $walkman-a-black, 4));
        &__side{ clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 95%);}
    }
}

.sphere2{ transform: translateZ(17.25 * $unit) rotateX(-90deg) rotateZ(135deg); }
.cr{ animation: circle linear 4000ms infinite; }

@keyframes circle { to { transform: translateZ(1 * $unit-s) rotateZ(1turn);} }

.cs{
    $width-el: 16 * $unit;
    $height-el: 25 * $unit;
    $depth-el: .35 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 1 * $unit;
	left: 1 * $unit;
    transform: translateZ(1 * $unit);

    &__front{
		background-image:
            radial-gradient(circle at 50% 70%, transparent 10%, darken(#8f8f8f, 15) 10% 15%, darken($walkman-a-04, 40) 15%),
            radial-gradient(circle at 50% 30%, transparent 10%, darken(#8f8f8f, 15) 10% 15%, darken($walkman-a-04, 40) 15%),
        ;
        background-size: 100% 50%;
        background-position:
            0 0,
            0 100%
        ;
        background-repeat: no-repeat;

        &::before{
            content: 'mix tape';
            position: absolute;
            top: 2 * $unit;
            padding: 1 * $unit 2.5 * $unit;
            font-family: cursive;
            font-size: 1.5 * $unit;
            background-image: linear-gradient(to bottom, darken(#8f8f8f, 15), darken(#8f8f8f, 15));
            transform-origin: bottom left;
            transform: rotateZ(90deg);
        }

	}
    &__back{ background-color: darken($walkman-a-04, 39); }
    &__left{ background-color: $walkman-a-black; }
    &__right{ background-color: $walkman-a-black; }
    &__top{ background-color: $walkman-a-black; }
    &__bottom{ background-color: $walkman-a-black;}
}

.d01,
.line{
	&__right{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to top, darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%,$walkman-b-03),
			linear-gradient(to top, $walkman-b-03 70%, lighten($walkman-b-03, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;
	}
}
.d06,
.d02{
	&__right{
		background-color: $walkman-b-03;
		background-image: linear-gradient(to top, transparent 70%, lighten($walkman-b-02, 15));
		background-size: 100% 1 * $unit;
		background-position: 0 0 ;
		background-repeat: no-repeat;
	}
}

.d01{
    $width-el: 6.3 * $unit;
    $height-el: 22 * $unit;
    $depth-el: 1.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	left: 18*$unit;
	right: 0;


    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to top, darken($walkman-b-02, 15), darken($walkman-b-02, 10) 20%,$walkman-b-02),
			linear-gradient(to top, $walkman-b-02 70%, lighten($walkman-b-02, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;

	}
    &__back{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to top, darken($walkman-b-03, 40), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: darken($walkman-b-03, 2);

        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to top, darken($walkman-b-04, 25), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
            100% 4 * $unit
        ;
        background-position:
            100% 0,
            0 0,
            0 100%
        ;
        background-repeat: no-repeat;

        &::before,
        &::after{
            content: '';
            position: absolute;
            top: 1 * $unit;
            width: .9 * $unit;
            height: 5 * $unit;
            background-image: repeating-linear-gradient($walkman-b-04 0 .2*$unit, transparent .2*$unit .6*$unit);
        }

        &::before{
            left: .4 * $unit;
        }
        &::after{
            left: 1.6 * $unit;
        }

	}
    &__top{ background-image: linear-gradient(to right, darken($walkman-b-03, 5) 85%, darken($walkman-b-02, 5)); }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d02{
    $width-el: 4.5 * $unit;
    $height-el: 10 * $unit;
    $depth-el: 1.5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	left: 18 * $unit;
	right: 0;

	transform: translateZ(22 * $unit);

    &__front{ background-color: $walkman-b-02; }
    &__back{
		background-color:$walkman-b-03;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: darken($walkman-b-03, 2);

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d03{
    $width-el: 6 * $unit;
    $height-el: 22 * $unit;
    $depth-el: 2 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	right: 0;

    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 10)),
			linear-gradient(to top, darken($walkman-b-03, 25), darken($walkman-b-02, 15), darken($walkman-b-02, 10) 20%, $walkman-b-02)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;
	}
    &__back{ background-color:$walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{
		background-color: $walkman-b-03;

		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
			linear-gradient(to top, darken($walkman-b-04, 25), darken($walkman-b-03, 15), darken($walkman-b-03, 10) 20%, $walkman-b-03)
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
			100% 4 * $unit
		;
		background-position:
			100% 0,
			0 0,
			0 100%
		;
		background-repeat: no-repeat;

        &::before{
            content: '';
            position: absolute;
            bottom: 3 * $unit;
            left: 1 * $unit;

            width: 1.75 * $unit;
            height: 1.75 * $unit;

            border: .1 * $unit solid $walkman-b-01;
            border-radius: 50%;
            background-image: radial-gradient(circle at 50% 50%, $walkman-b-02, black 20% 50%, $walkman-a-black 50%);
        }

        &::after{
            content: 'dc in 3v';
            position: absolute;
            bottom: 1.75 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-size: .45 * $unit;
        }
	}
    &__top{ background-color: $walkman-b-02; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d04{
    $width-el: 6 * $unit;
    $height-el: 6 * $unit;
    $depth-el: .5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 3 * $unit;
	right: 0;

	transform: translateZ(22 * $unit);

    &__front{

		background-color: $walkman-b-02;
		padding: 1 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__back{ background-color: $walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{
        background-color: $walkman-b-03;

        background-image: linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)), ;
		background-size: 1 * $unit 100%, ;
		background-position: 100% 0,;
		background-repeat: no-repeat;

    }
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}
.d05{
    $width-el: 6 * $unit;
    $height-el: 6.2 * $unit;
    $depth-el: .5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	right: 0;

	transform: translateZ(21.8 * $unit);
    // background: red;

    &__front{
		background-color: $walkman-b-02;
		background-image:
			linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 15)),
			linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 15)),
		;
		background-size:
			1 * $unit 100%,
			1 * $unit 100%,
		;
		background-position:
			100% 0,
			0 0,
		;
		background-repeat: no-repeat;
	}
    &__back{
		background-color: $walkman-b-03;
		padding: 1 * $unit;

		&::after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: $walkman-a-black;
		}
	}
    &__left{ background-color: $walkman-b-03; }
    &__right{
        background-color: $walkman-b-03;

        background-image: linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),;
		background-size: 1 * $unit 100%, ;
		background-position: 0 0, ;
		background-repeat: no-repeat;
    }
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.d06{
    $width-el: 6 * $unit;
    $height-el: 4.1 * $unit;
    $depth-el: 2 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 0;
	right: 0;

	transform: translateZ(27.9 * $unit);

    &__front{
        background-color:$walkman-b-02;
        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-02, 15)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-02, 15)),
            linear-gradient(to top, transparent 70%, lighten($walkman-b-02, 15)),
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
            100% 1 * $unit,
        ;
        background-position:
            100% 0,
            0 0,
            0 0,
        ;
        background-repeat: no-repeat;
    }
    &__back{ background-color:$walkman-b-03; }
    &__left{ background-color: $walkman-b-03; }
    &__right{

        background-image:
            linear-gradient(to right, transparent 70%, lighten($walkman-b-03, 10)),
            linear-gradient(to left, transparent 70%, lighten($walkman-b-03, 10)),
        ;
        background-size:
            1 * $unit 100%,
            1 * $unit 100%,
        ;
        background-position:
            100% 0,
            0 0,
        ;
        background-repeat: no-repeat;

        &::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 2.9 * $unit;

            padding-left: .45 * $unit;
            padding-right: .8 * $unit;
            margin-top: .75 * $unit;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, $walkman-b-03 50%, $walkman-b-03 100%),
                linear-gradient( 0deg, $walkman-a-black  0%, $walkman-a-black 50%, $walkman-b-03 50%, $walkman-b-03 100%);

            background-size: .45 * $unit .45 * $unit;
            background-clip: content-box;
        }
        &::before{
            content: 'mic';
            position: absolute;
            top: .2 * $unit;
            left: 50%;
            transform: translateX(-50%);
            font-size: .5 * $unit;
        }
	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: $walkman-b-02; }
}


.line{
    $width-el: 1.85 * $unit;
    $height-el: 32 * $unit;
    $depth-el: .25 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 3.5 * $unit;
	left: 94%;

    &__front{ background-image: linear-gradient(to bottom, darken($walkman-b-03, 7), darken($walkman-b-03, 12)); }
    &__back{ background-image: linear-gradient(to bottom, darken($walkman-b-03, 5), darken($walkman-b-03, 10)); }
    &__left{ background-color: $walkman-b-03; }

	$current: lighten($walkman-b-03, 3);

    &__right{
		background-color: $current;

		background-image:
			linear-gradient(to top, darken($current, 15), darken($current, 10) 20%,$current),
			linear-gradient(to top, $current 70%, lighten($current, 20))
		;
		background-size:
			100% 4 * $unit,
			100% 1 * $unit,
		;
		background-position:
			0 100%,
			0 0%
		;
		background-repeat: no-repeat;

	}
    &__top{ background-color: $walkman-b-01; }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.button{
    $width-el: 3.5 * $unit;
    $height-el: 2 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	top: 3 * $unit;
	left: 5.5 * $unit;

	transform: translateZ(31.5 * $unit);

    &__front{
		background-color: $button-02;
		background-image:
			linear-gradient(100deg, lighten(rgba($button-02, .5), 10) 14%, transparent 14% ),
			linear-gradient(-100deg, lighten(rgba($button-02, .5), 10) 14%, transparent 14% ),
			linear-gradient(to top, darken($button-02, 20), $button-02 92%, lighten($button-02, 8))
		;
		clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
	}
    &__back{
		background-color:$button-03;
		background-image:
			linear-gradient(100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
			linear-gradient(-100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
			linear-gradient(to top, darken($button-03, 15), $button-03 92%, lighten($button-03, 10))
		;
		clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
	}
    &__left{
		&::after{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			transform-origin: bottom;
			transform: rotateX(12deg);
			background-color: $button-03;

			background-image:
				linear-gradient(100deg, lighten(rgba($button-01, .5), 10) 14%, transparent 14% ),
				linear-gradient(-100deg, lighten(rgba($button-01, .5), 10) 14%, transparent 14% ),
				linear-gradient(to top, darken($button-01, 20), $button-01 92%, lighten($button-01, 15))
			;
		}
	}
    &__right{
		&::after{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			transform-origin: bottom;
			transform: rotateX(12deg);
			background-color: $button-03;

			background-image:
				linear-gradient(100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
				linear-gradient(-100deg, lighten(rgba($button-03, .5), 10) 14%, transparent 14% ),
				linear-gradient(to top, darken($button-03, 8), $button-03 92%, lighten($button-03, 5))
			;
		}
    }
    &__top{

		&::after{
			content: '';
			position: absolute;
			width: 80%;
			height: 100%;
			left: 10%;
			background-color: $button-01;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, $button-01 50%, $button-01 100%),
                linear-gradient( 0deg, $button-03 0%, $button-03 50%, $button-01 50%, $button-01 100%),
                linear-gradient(to left, lighten(rgba($button-01, .5), 10) 6%, transparent 6% ),
				linear-gradient(to right, lighten(rgba($button-01, .5), 10) 6%, transparent 6% ),
				linear-gradient(to top, darken($button-01, 10), $button-01 92%, lighten($button-01, 15))
            ;

            background-size:
                .273 * $unit .273 * $unit,
                .273 * $unit .273 * $unit,
                100% 100%,
                100% 100%,
                100% 100%
            ;
            background-clip: content-box;
		}
    }
    &__bottom{ background-color: darken($bg-2, 20); }
}

.button2{
    $width-el: 2 * $unit;
    $height-el: 5.8 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 1 * $unit;
	left: 96%;
	transform: translateZ(22.1 * $unit);

	&__front{
		background-color: $button-b-02;
		background-image:
			linear-gradient(to left, lighten(rgba($button-b-02, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-02, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, darken($button-b-03, 45), darken( $button-b-02, 10) 75% 90%, lighten($button-b-02, 1) )
		;
	}
	&__back{
		background-color: $button-b-03;

		background-image:
			linear-gradient(to left, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to left, darken($button-b-03, 30), darken( $button-b-03, 5) 75% 90%, lighten($button-b-02, 1) )
		;

	}
	&__left{ background-color: $button-b-03; }
	&__right{
		background-color: darken($button-b-03, 5);

        background-image:
            linear-gradient(-90deg, transparent 0%, transparent 50%, $button-b-03 50%, $button-b-03 100%),
            linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, $button-b-03 50%, $button-b-03 100%),
            linear-gradient(to top, darken($button-b-03, 10), transparent)
        ;

        background-size:
            .3 * $unit .3 * $unit,
            .3 * $unit .3 * $unit,
            100% 100%
        ;
        padding: .25 *$unit;
        background-clip: padding-box;

        &::after{
            content: 'EJECT';
            position: absolute;
            transform: translateZ(-.5 * $unit);
            top: 110%;
            left: 15%;
            font-size: .475 * $unit;
        }

	}
	&__top{
		background-color: $button-b-01;

		background-image:
			linear-gradient(to left, lighten(rgba($button-b-01, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-01, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, darken($button-b-03, 30), darken( $button-b-02, 5) 75% 90%, lighten($button-b-01, 1) )
		;
	}
	&__bottom{ background-color: $button-b-03;
		background-image:
			linear-gradient(to left, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to right, lighten(rgba($button-b-03, .5), 5) 6%, transparent 6% ),
			linear-gradient(to left, darken($button-b-03, 30), darken( $button-b-03, 5) 75% 90%, lighten($button-b-03, 1) )
		;

	}
}

.button5{
    $width-el: 2 * $unit;
    $height-el: 5 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 4.5 * $unit;
	left: 92%;
	transform: translateZ(22.5 * $unit);
    transition: left 100ms linear;


	&__front{
		background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15));
        clip-path: polygon(0% 0%, 75% 0%, 100% 30%, 100% 100%, 0% 100%);
	}
	&__back{
		background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15));
        clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 30%, 25% 0%);
	}

	&__right{
        &::after,
        &::before{
            content: '';
            position: absolute;
            width: 100%;
        }
        &::before{
            bottom: 0;
            height: 3.5 * $unit;

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
                linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
                linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5))
            ;

            background-size:
                .3 * $unit .3 * $unit,
                .3 * $unit .3 * $unit,
                100% 100%
            ;
            padding: .25 *$unit;
            background-clip: padding-box;
            border: .15 * $unit solid $button-b-03;
            animation: btn 1000ms linear infinite;
            cursor: pointer;
        }
        &::after{
            bottom: 3.5 * $unit;
            height: 1.65 * $unit;
            transform-origin: bottom;
            transform: rotateX(20deg);

            background-image:
                linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 2) 50%, darken($button-b-03, 2) 100%),
                linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 2) 50%, darken($button-b-03, 2) 100%),
                linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5))
            ;

            background-size:
                .3 * $unit .3 * $unit,
                .3 * $unit .3 * $unit,
                100% 100%
            ;
            padding: .25 *$unit;
            background-clip: padding-box;
            cursor: pointer;

        }
	}
	&__top{
		&::before{
            content: '';
            display: inline-block;
            width: 1.5 * $unit;
            height: 100%;
            background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10));
        }
	}
	&__bottom{
		background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20));
	}
}
.is-button-pressed{
    left: 90%;
    transition: left 100ms linear;
}

@keyframes btn{
    to { border: .15 * $unit solid $button-02; }
}

.button6,
.button7{
    $width-el: 2 * $unit;
    $height-el: 1.5 * $unit;
    $depth-el: 1 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	bottom: 4.5 * $unit;
	left: 88%;
	transform: translateZ(28 * $unit);


	&__front{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__back{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__right{
        background-image:
            linear-gradient(-90deg, transparent 0%, transparent 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
            linear-gradient( 0deg, darken($button-b-03, 20)  0%, darken($button-b-03, 20) 50%, darken($button-b-03, 10) 50%, darken($button-b-03, 5) 100%),
            linear-gradient(to top, darken(red, 0), darken($button-b-03, 5))
        ;

        background-size:
            .3 * $unit .3 * $unit,
            .3 * $unit .3 * $unit,
            100% 100%
        ;
        padding: .25 *$unit;
        background-clip: padding-box;
	}
	&__top{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10)); }
	&__bottom{ background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20)); }

}

.button7{
	bottom: 4.5 * $unit;
	left: 90%;
    transform: translateZ(30 * $unit);
}

.button3,
.button4{
    $width-el: .8 * $unit;
    $height-el: 4.8 * $unit;
    $depth-el: .5 * $unit;

    @include cube($width-el, $height-el, $depth-el);
    width: $width-el;
    height: $depth-el * 2;
    position: absolute;
	left: 100%;

	&__front{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__back{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 15)); }
	&__right{ background-image: linear-gradient(to top, darken($button-b-03, 10), darken($button-b-03, 5)); }
	&__top{ background-image: linear-gradient(to top, darken($button-b-03, 15), darken($button-b-03, 10)); }
	&__bottom{ background-image: linear-gradient(to top, darken($button-b-03, 20), darken($button-b-03, 20)); }
}

.button3{
    bottom: 4.4 * $unit;
	transform: translateZ(12 * $unit);

    &__right{
        &::after{
            content: 'volume';
            position: absolute;
            transform: translateZ(-.5 * $unit);
            top: 110%;
            left: 10%;
            font-size: .4 * $unit;
        }
    }
}
.button4{
	bottom: 5.6 * $unit;
	transform: translateZ(12 * $unit);
}

svg{
	fill: white;
}
.name{
	position: absolute;
	bottom: -29.5 * $unit;
	width: 12 * $unit;
	height: 12 * $unit;
	left: 50%;
	transform: translate(-50%);
}
.sony{
    position: absolute;
	top: -1.5 * $unit;
	width: 10 * $unit;
	height: 10 * $unit;
	left: 50%;
	transform: translate(-50%);
}