#app-main{

    .app-chrome {
        background-color    : transparent;
        box-shadow          : none;
        -webkit-app-region  : drag;
        border              : none;
        backdrop-filter     : none;

        &::before {
            background-color  : var(--background);
            z-index           : 15;
            content           : "";
            position          : absolute;
            top               : 0;
            right             : 0;
            width             : calc(100% - var(--sidebarWidth));
            height            : var(--chromeHeight);
            backdrop-filter   : var(--glassFilter2);
            -webkit-app-region: drag;
        }

        .app-chrome--left {
            z-index             : 17;
            width               : min-content;

            > .app-chrome-item:nth-of-type(2) {
                margin-left: calc(var(--sidebarWidth) * 0.4);
            }

            .shuffle {
                margin-left: calc(var(--sidebarWidth) * 0.2);
            } 

            .vdiv {
                display: none;
            }

            .playback-button.previous {
                background-image: url('icons/prev.svg');
                background-size: 85% !important;
            }

            .playback-button.play {
                background-image: url('icons/play.svg');
                opacity: 0.85;
                height: 40px !important;
            }

            .playback-button.pause {
                background-image: url('icons/pause.svg');
                opacity: 0.85;
                height: 40px !important;
            }

            .playback-button.stop {
                background-image: url('icons/stop.svg');
                opacity: 0.85;
                height: 40px !important;
            }
            
            .playback-button.next {
                background-image: url('icons/next.svg');
                background-size: 85% !important;
            }
        }

        .app-chrome--center {
            z-index: 17;

            .app-chrome-item.playback-controls {    
                width               : 100%;
                height              : 100%;
                max-width           : initial;
                border              : var(--buttonborder);
                background-color    : @backgroundMix;
                margin-left         : 16px;
                border-radius       : 5px;

                &:empty {
                    border             : 1px solid @mediaColorMix;
                    background-image   : url('/assets/cider-round.svg');
                    background-repeat  : no-repeat;
                    background-position: center;
                    background-size    : 36px;
                }
            }

            .app-playback-controls {
                height                  : 98%;
                backdrop-filter         : blur(0px);
                border-radius           : 5px;
                width                   : 100%;
                -webkit-app-region      : drag;

                .artwork {
                    width               : 50px;
                    height              : 50px;
                    margin-left         : 1px;
                    margin-right        : -2.25px;
                    margin-bottom       : 0px;
                    margin-top          : 1px;
                    border-radius       : 5px;
                    position            : absolute;
                    left                : 0px;

                    .mediaitem-artwork {
                        border-radius       : 5px;
                    }

                    .mediaitem-artwork--img {
                        image-rendering: -webkit-optimize-contrast !important;
                    }
                }

                .song-progress {
                    height          : max-content;
                    padding-left     : 5px;
                    padding-right    : 5px;

                    input[type="range"] {
                        border-radius: 16px;                              
                        box-shadow              : 0px 0px 0px 1px rgba(0, 0, 0, 25%);


                        &::-webkit-slider-thumb {
                            border-radius: 16px;
                            border       : 1px solid @mediaColorMix;
                            background   : var(--keyColor);

                            &:hover {
                                opacity         : 1;
                                background-image: var(--keyColor);
                            }
                        }
                    }
                }

                .song-name {
                    max-width         : unset;
                    width             : 100%;
                    padding-left      : 0.5%;
                    padding-right     : 1%;
                    margin-top        : -5px;
                    mask-image        : var(--linearGradient);
                    -webkit-mask-image: var(--linearGradient);

                }

                & div .song-artist-album {
                    width             : 98%;
                    max-width         : unset;
                    mask-image        : var(--linearGradient);
                    -webkit-mask-image: var(--linearGradient);

                    .song-artist-album-content {
                        font-size: 12px;
                    }
                }

                .actions {
                    display: none;
                }

                .audio-type {
                    margin-right: 10px;
                    margin-top  : 12px;
                }

                .playback-info {
                    position        : absolute;
                    height          : 100%;
                    left            : 50px;
                    width           : calc(100% - 50px);
                    display         : -webkit-box;
                }
            }

        }

        .app-chrome--right {
            z-index     : 17;
            width       : 20%;

            .app-chrome-item.volume {
                width       : 120px;
                margin-right: 3rem;
                justify-content: left;

                input[type="range"] {
                    background-color: transparent;
                    height          : 25px;
                    width           : 10px;
                    transition      : width 0.35s var(--appleEase);

                    &::-webkit-slider-runnable-track {
                        background   : var(--keyColor);
                        filter       : none !important;
                        height       : 4px;
                        border-radius: 4px;

                    }

                    &::-webkit-slider-thumb {
                        position  : relative;
                        border    : 1px solid hsl(0, 0%, 50%);
                        background: mix(@volumeThumbColor, @mediaColor, 50%);
                        margin-top: -5px;

                    }

                    &:hover,
                    &:active {
                        width: 80%;
                    }

                }
            }

            .window-controls {
                width: 100px;
            }
        }


    }
}