.shelf {
    position: relative;
    flex-basis: 37px;
    display: flex;
    align-items: center;
    background-color: rgb(45, 45, 45);
}

.logo {
    margin-left: 5px;
    width: 25px;
    filter: saturate(0) brightness(6);
}

.label {
    margin-left: 5px;
    font-size: 10px;
    color: rgb(212, 212, 212);
}

.control-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background: linear-gradient(
        to right,
        rgba(66, 66, 66, 0),
        rgba(66, 66, 66, 1),
        rgba(66, 66, 66, 1),
        rgba(66, 66, 66, 0)
    );
}

.control-box.disabled {
    opacity: 0.5;
    background: transparent;
    pointer-events: none;
}

.control-box .control-button {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    opacity: 0.6;
    cursor: pointer;
    transition: text-shadow 0.3s;
}

.control-box .control-button:hover {
    text-shadow: 0 0 40px white;
    opacity: 1;
}
