@keyframes rotateCassette {
to {
transform: rotateZ(360deg)
}
}
.cassette {
height: 158px;
width: 248px;
position: relative;
border-radius: 6px;
overflow: hidden;
box-shadow: 1px 1px 0 1px #777,-1px -1px 0 1px #fff;
font-size: 14px;
top: 0
}
.cassette__bottom {
transform: perspective(100px) rotateX(15deg);
content: "";
height: 24%;
width: 66%;
background: #aaa;
bottom: 0;
left: 17%;
box-shadow: inherit;
border-radius: 3% 3%0 0
}
.cassette__square::after,.cassette__square::before {
content: "";
border-radius: 30%;
background: #333;
bottom: 4%;
box-shadow: -1px -1px 0 0#eee inset;
z-index: 1;
position: absolute;
display: block;
height: 10px;
width: 10px
}
.cassette__square::before {
left: 34%
}
.cassette__square::after {
right: 34%
}
.cassette__description {
position: absolute;
top: 10%;
left: 0;
margin: auto;
bottom: 0;
right: 0;
color: #000;
text-indent: 8%;
z-index: 1
}
.cassette__description-icon {
background: var(--theme-bg-color);
color: var(--theme-text-color);
padding: 1% 2%;
position: relative;
font-weight: 700;
top: 5px;
left: 2px;
margin: 0 10px 0 0
}
.cassette__description::after,.cassette__description::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
bottom: 2%;
box-shadow: -1px -1px 0 0#eee inset;
z-index: 1
}
.cassette__description::before {
left: 23%
}
.cassette__description::after {
right: 23%
}
.cassette::after {
content: "";
clip-path: polygon(0 0,0 100%,22% 100%,22% 33%,78% 33%,78% 58%,22% 58%,22% 100%,100% 100%,100%0);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #aaa
}
.cassette::before,.cassette__bottom,.cassette__center {
position: absolute;
z-index: 1
}
.cassette::before {
background: linear-gradient(transparent 0 10px,#080808 10px 11px,transparent 11px 20px,#080808 20px 21px,transparent 21px 30px,#080808 30px 31px,var(--theme-text-color) 31px 40px,var(--theme-text-color) 40px 51px,var(--theme-base-color) 50px 62px,var(--theme-base-color) 62px) no-repeat 100%/100%#eee;
clip-path: polygon(0 0,0 100%,22% 100%,22% 40%,80% 40%,80% 78%,22% 78%,22% 100%,100% 100%,100%0);
content: "";
width: 88%;
background-clip: content-box;
padding: 0 1%;
height: 66%;
top: 7%;
left: 5%;
overflow: hidden;
border-radius: inherit;
box-shadow: 1px 1px 0#333 inset,-2px -1px 0#fff inset,0 0 0 10px #eee inset
}
.cassette__center,.cassette__center>div {
display: flex;
align-items: center
}
.cassette__center {
width: 60%;
height: 26%;
align-content: center;
margin: 0 auto;
left: 20%;
border-radius: 4px;
top: 32%;
overflow: hidden;
box-shadow: inherit;
background: rgba(17,17,17,.3)
}
.cassette__center>div {
font: 6px Arial;
height: 100%;
flex-direction: row;
justify-content: center;
text-indent: 1em;
letter-spacing: 1em
}
.cassette__center div:nth-child(2) {
background: linear-gradient(#eee 14%,transparent 14%,transparent 50%,#eee 80%);
width: 44%
}
.cassette__center div:nth-child(1),.cassette__center div:nth-child(3) {
background: radial-gradient(circle at center,#777 42%,#fff 43%,#fff 47%,#aaa 48%,#aaa 57%,#eee 60%);
width: 28%
}
.cassette__center div:nth-child(1)::after,.cassette__center div:nth-child(3)::after {
content: "";
background: #000;
border-radius: 50%;
box-sizing: border-box;
margin: auto;
width: 45%;
height: 45%;
box-shadow: 0-12px 0-8px #fff,0 12px 0-8px #fff,-10px -6px 0-8px #fff,10px -6px 0-8px #fff,10px 6px 0-8px #fff,-10px 6px 0-8px #fff
}
.cassette__center::after,.cassette__center::before {
content: "";
position: absolute;
background: repeating-radial-gradient(#4d2410 0 1px,#000 1px 2px) center;
height: 60px;
width: 60px;
z-index: -1;
border-radius: 50%
}
.animation .cassette .cassette__center div:nth-child(1)::after,.animation .cassette .cassette__center div:nth-child(3)::after,.animation .cassette .cassette__center::after,.animation .cassette .cassette__center::before {
animation: rotateCassette 5s linear infinite
}
.cassette__center::before {
right: 0
}