.fullscreen-view-container{
    .fullscreen-view{
        .lyrics-col{
            width:100%;
            .lyric-body{
                width:100%;
            }
        }
        .lyric-line{
            font-size: 55px;
            margin-right: 20px;
            margin-left: 0px;
            margin-block-start: 50px;

            &:not(.active) {
                position: relative;
                transform: scale(1);
                filter: blur(1.5px) opacity(0.4);
            }
            
            &.active{
                position: sticky;
                transform: scale(1);
                backdrop-filter : blur(0px);
                transition: all 0.6s var(--appleEase);
            }
        }
    }
}

.fullscreen-view .artwork-col .app-playback-controls{
    .playback-info{
        .song-progress {
            bottom  : 40px;
            z-index : 30;
            overflow: hidden;

            input[type="range"] {
                width: 500px;
                border-radius: 5px;
                &::-webkit-slider-thumb {
                    border-radius: 3px;
                    width        : 6px;
                    height       : 14px;
                    border       : rgb(95, 95, 95) solid 1px;
                    background   : #b8b8b8;
                    margin-top   : -5px;
                }
                &::-webkit-slider-runnable-track {
                    background-color: rgba(200, 200, 200, 0.2);
                    height: 4px;
                }
            }
            .song-duration {
                color: rgb(200, 200, 200, 1);
                margin-left : 18px;
                margin-right: 22px;
                margin-bottom: 6px;
            }
        }
    }
}


.fullscreen-view .artwork-col .app-playback-controls .playback-info{
    background-color: unset;
    top: 55px;
}

.fullscreen-view .artwork-col .app-playback-controls .song-name{
    font-size: 14px;
}

.fullscreen-view .artwork-col .app-playback-controls .song-artist{
    margin-top: 1px;
    font-size: 13px;
    color:  rgb(200, 200, 200, 1);
}

.fullscreen-view .artwork-col .volume {
    display: none;
}

.fullscreen-view .artwork-col .playback-button{
    top: 30px;
}

.fullscreen-view .artwork-col .playback-button--small{
    display: none;
}


.fullscreen-view .tab-toggles div {
    width        : 5vh;
    height       : 5vh;
    padding      : 1.6vh;
    margin-bottom: 100px;
    border-radius: 5px;

    &.active {
        background-color:  rgba(200, 200, 200, 0.15);
    }
}

.fullscreen-view .tab-toggles div:hover {
    background-color   : var(--selected);
    transition-duration: 0.2s;
}

.fullscreen-view .tab-toggles {
    bottom: 2vh;
    right : 2vh;
}


&.modular-fs {
    .app-chrome:not(.chrome-bottom) {
        .app-chrome--left > div:nth-of-type(3) {
            margin-left: 0 !important;
        }

        &::before {
            width: 100%;
        }
    }

    .app-drawer {
        top: unset !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
    }

    .md-body.lyric-body {
        backdrop-filter: none;
        margin-inline: 5rem;
        .lyric-line {
            color: var(--textColorLight) !important;
            opacity: 1;
            transform: none;
            scale: 1.5;
            font-size: 60px;
            text-align: center;
            align-items: center;
            justify-content: center;
            .lyrics-translation{
                font-size: 2.8rem;
            }
        }

        .lyric-line.active {
                display         : contents;
                font-size       : 85px;
        }
    }

    .lyric-footer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
}

&:not(.modular-fs) {
    .app-drawer {
        border              : var(--border);
        background          : @backgroundMix;
        border-radius       : var(--borderadius);
        backdrop-filter     : var(--glassFilter4);
        top                 : calc(var(--chromeHeight1) + 1px);
        width               : 320px;
        height              : unset;

        .lyric-line {
            margin-block-start: 20px;
            filter: blur(1.5px) opacity(0.4);

            &:not(.active) {
                transform: scale(0.9);
                padding-block: 5px;
                transition      : all 0s var(--appleEase);
            }

            &.active {
                filter:blur(0px) opacity(1.5);
                transform       : scale(1);
                transform-origin: left center;
                transition      : all 0.5s var(--appleEase);
                position: sticky;
            }
        }

        .lyric-footer {
            background: var(--color1);
            backdrop-filter: var(--glassFilter2);
        }

        .queue-body {
            overflow-x: hidden;
            overflow-y: scroll;
    
            .cd-queue-item,
            .cd-mediaitem-list-item {
                width: 100% !important;
    
                .queue-info {
                    width: 190px;
                }
    
                .info-rect,
                .queue-info {
                    border-bottom: 0px solid var(--contentBorderColor);
                    width        : 100%;
                }
    
                .duration,
                .queue-duration,
                .queue-explicit-icon {
                    font-size    : 0.8rem;
                    border-bottom: 0px solid var(--contentBorderColor);
                }
            }
    
            .cd-queue-item {
                //width: 130% !important;
                padding                 : 0;
                height                  : 60px;
                display                 : flex;
                flex-direction          : column;
                flex                    : 0 0 auto;
                border-radius           : var(--borderadius);
    
                & .row {
                    height: 100%;
                }
            }
    
            .heart-icon {
                right: 0%;
                left: unset !important;
            }
        }

        .queue-footer{

            .btn-group > .md-btn:last-child{
                border-top-left-radius: 0px !important;
                border-bottom-left-radius: 0px !important;
                border-top-right-radius: 16px !important;
                border-bottom-right-radius: 16px !important;
            }         
    
            .btn-group > .md-btn:first-child {
                border-top-left-radius: 16px !important;
                border-bottom-left-radius: 16px !important;
                border-top-right-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
            }
        }
    }
}

#app-main {
    &.modular-fs {
        .app-chrome:not(.chrome-bottom) {
            &::before {
                width: 100%;
            }
        }

        .lyric-footer {
            bottom: var(--bottom);
        }
    }

    &:not(.modular-fs) {
        .app-drawer {
            bottom: var(--bottom);
        }
    }
}

#app.twopanel {
    .modular-fs {
        .app-drawer {
            top: 0 !important;
            z-index: 16;
            
            .lyric-footer {
                bottom: calc( var(--padding-bottom) + var(--bottom) ) !important;
            }
        }
    }

    &:not(.modular-fs) {
        .app-drawer {
            bottom: calc( var(--padding-bottom) + var(--bottom) ) !important;
        }
    }
}