<<< erathemesruby-dark.css >>>
:root {
 --green: #36B37E;
 --green-dark: #58A19F;
 --green-darker: #1D0606;
 --green-light: #C9EDE5;
 --blue: #3498db;
 --blue-dark: #219ebc;
 --blue-darker: #001f3f;
 --red: #F2006A;
 --red-dark: #001b4a;
 --red-darker: #583ca9;
 --gray: #CFD8DC;
}

checkbox,
label,
input,
textarea {
 appearance: none;
 box-sizing: border-box;
 outline: none;
 margin: 0;
 padding: 0;
 cursor: pointer;
}

button,
a {
 appearance: none;
 font-family: "Push";
 font-size: 1rem;
 border-radius: 4px;
 box-shadow: 0 0 0 2px var(--none-color);
}

.button1,
.button2,
.button3 {
 font-size: 1.2rem;
 width: 300px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 color: #fff;
 margin: 20px auto;
 cursor: pointer;
 background: linear-gradient(to right, var(--blue), var(--light-color));
}

.flex {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 60px;
}

.buf {
 margin: 20px;
}

.control {
 height: 100%;
 position: relative;
 border: 1px solid rgb(123, 123, 123);
}

.control::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 10%;
 background-color: #fff;
 transform: translateY(-50%);
 filter: brightness(1.5);
}

.track {
 position: relative;
 width: 100%;
 height: 100%;
 border: 1px solid rgb(123, 123, 123);
 padding: 10px;
}

.track::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 10px;
 background-color: #fff;
 z-index: 4;
}

.track::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #fff;
 box-shadow: inset 0 0 20px #000;
 z-index: 5;
 filter: brightness(0.5);
}

.track.mute::after {
 background-color: #eee;
}

.track.solo::after {
 background-color: #eee;
}

.play {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 10px;
 height: 10px;
 background-color: #fff;
 border: 1px solid rgb(123, 123, 123);
 z-index: 11;
 box-shadow: inset 0 0 10px #000;
 transform: translate(-50%, -50%);
}

.slider {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 10px;
 margin-top: -5px;
 transform: translate(-50%, -50%);
}

.slider::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 10px;
 background-color: #fff;
 z-index: 12;
 box-shadow: inset 0 0 10px #000;
}

.slider::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 10px;
 height: 10px;
 background-color: #fff;
 box-shadow: inset 0 0 10px #000;
 transform: translate(-50%, -50%);
}

.mute,
.solo {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #fff;
 box-shadow: inset 0 0 20px #000;
 z-index: 1;
}

.mute {
 margin-bottom: 10px;
}

.solo {
 margin-top: 10px;
}

.mute::after,
.solo::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 10px;
 background-color: #fff;
 z-index: 12;
 box-shadow: inset 0 0 10px #000;
}

.mute::before,
.solo::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 10px;
 height: 10px;
 background-color: #fff;
 box-shadow: inset 0 0 10px #000;
 transform: translate(-50%, -50%);
}

.track.mute {
 .slider,
 .play {
    background-color: red;
 }
}

.track.solo {
 .slider,
 .play {
    background-color: green;
 }
}