@import "theme/modal.less";
@import "theme/macos-menu.less";
@import "theme/mica.less";
@import "theme/fullscreen.less";
@import "theme/sidebar.less";
@import "theme/maverick.less";
@import "theme/mojave.less";


/* Colors */
@colorMixRate    : 1%;
@transparencyRate: 55%;
@appOpacity      : 0;

@baseColor           : rgb(31, 31, 31);
@baseColorMix        : mix(@baseColor, transparent, 85%);
@background          : rgba(0, 0, 0, 0);
@background2         : rgb(0,0,0);
@backgroundMix       : mix(@background2, transparent, 45%);
@sidebarColor        : rgb(15, 15, 15);
@sidebarColorMix     : mix(@sidebarColor, transparent, @transparencyRate);
@mediaColor          : rgb(85, 85, 85);
@mediaColorMix       : mix(@mediaColor, transparent, @transparencyRate);
@mediaContainerColor : rgb(46, 46, 45);
@songProgressColor   : rgb(184, 184, 184);
@volumeThumbColor    : rgb(44, 44, 44);
@glassFilter         : blur(32px) saturate(260%);
@glassFilter2        : blur(36px) saturate(200%);
@glassFilter3        : blur(28px) saturate(180%);
@glassFilter4        : blur(15px) saturate(160%);

:root {

    .modal.show {
    
        .modal-dialog {

            .modal-content {
                backdrop-filter: var(--glassFilter);
                background: transparent;

                input[type=checkbox][switch]:checked{
                    background: var(--keyColor) !important;
                }
            }
        }
    }

    --checked: var(--keyColor);

        /* Less Variables */
        --baseColor             : @baseColor;
        --baseColorMix          : @baseColorMix;
        --background            : @background;
        --sidebarColor          : @sidebarColor;
        --sidebarColorMix       : @sidebarColorMix;
        --mediaColor            : @mediaColor;
        --mediaColorMix         : @mediaColorMix;
        --mediaContainerColor   : @mediaContainerColor;
        --songProgressColor     : @songProgressColor;
        --volumeThumbColor      : @volumeThumbColor;
        /* Glasses */
        --glassFilter           : @glassFilter;
        --glassFilter2          : @glassFilter2;
        --glassFilter3          : @glassFilter3;
        --glassFilter4          : @glassFilter4;
        /* Colors */
        --keyColor              : #e33165;
        --ciderColor            : #d11950;
        --artistHoverColor      : rgb(185, 25, 73);
        --activeTabColor        : rgba(250, 88, 106, 0.1);
        --volumeTrackColor      : rgba(200, 200, 200, 0.3);
        --categoriesColor       : rgba(50, 50, 50, 25%);

        /* Text */
        --textColor             : #fafafa;
        --textColorLight        : #fff;

        /* Borders */
        --modalBorderColor      : rgba(68, 68, 68, 0.4);
        --modalBorderSubtleColor: hsla(0, 0%, 50%, 0.2);
        --appBorderColor        : hsla(0, 0%, 50%, 0.5);
        --contentBorderColor    : hsla(0, 0%, 50%, 0.4);
        --borderadius           : 16px;
        --border                : 0px;
        --buttonborder          : 1px solid rgba(118, 118, 118, 15%);

        /* Layout */
        --contentWidth          : calc(100vw - 346px);
        --sidebarWidth          : 260px;
        --bottom                : 16px;
}

#app {

    .app-chrome--right {
        .app-mainmenu {
            margin-right    : 16px;
        }
    }

    .app-mainmenu {
        background-image: none;
        //padding-right   : 120px;
        border-radius   : 10px;
        outline         : none;

        &:before {
            content         : "";
            background-image: var(--cvar-userprofileimg, url('/assets/cider-round.svg'));
            position        : absolute;
            top             : -1px;
            left            : 2px;
            width           : 37px;
            height          : 37px;
            border-radius   : 25%;
            background-size : contain;
            z-index         : -1;
        }

        &:focus {
            background-image: none;
            border-radius   : 10px;
            outline         : none;
        }

    }

    .app-mainmenu.active {
        background           : none;
        border-radius        : 25%;
        background-repeat    : no-repeat;
        background-size      : contain;
    }

    .usermenu-container{

        .usermenu-body {
            background-color: var(--background);
            backdrop-filter: var(@glassFilter4) !important;
    
            .app-sidebar-button {
                background: var(--background);
                color     : var(--textColor);
            }
    
            .usermenu-item {
                color: var(--textColor);
        
                svg {
                    color: var(--keyColor);
                }
        
                &:hover {
                    background: var(--keyColor);
                    color     : var(--textColorLight);
        
                    svg {
                        color: var(--textColorLight);
                    }
                }
            }
        }
    }

    .md-btn {
        &.md-btn-primary {
            background: var(--keyColor);
        }

        &:not(.md-btn-primary):not(.md-btn-replay):not(.md-btn-replay--hero) {
            background: var(--background);
            border    : var(--buttonborder);
            color     : var(--textColor);
            border-radius: var(--borderadius);
        }

        &:not(.md-btn-replay):not(.md-btn-replay--hero):not(.teamBtn):hover {
            background: var(--keyColor, saturate(0.2));
            
        }

        .md-ico-remove {
            filter: unset;
        }

        .md-ico-add {
            filter: unset;
        }
    }

    .installed-themes-page {
        border      : var(--border) !important;
        
        .repos-list {
            padding-left: 16px;

            .repo-header {
                border-radius: var(--borderadius);
                backdrop-filter: none;
                border: var(--border);
                width: 95%;
            }

            .list-group-item {
                background      : transparent;
                border          : var(--border) !important;
                border-radius   : var(--borderadius);
            }
        }
    }

    #app-content{
        border-left: var(--border);
        backdrop-filter: var(--glassFilter3) !important;
        transition      : background-color 0.2s var(--appleEase);

        .content-inner{

            .well,
            .mediaitem-list-item__grid {
                background-color: rgba(0 0 0 / 10%);
                box-shadow      : none;
                border-radius   : var(--borderadius);
            }

            .well {
                border-radius: var(--borderadius);
            }

            .col {
                .item-navigate{
                    z-index: 30;
                    &:hover{
                        text-decoration: none;
                        h3{
                            text-decoration: underline;
                        }
                    }
                }
            }

            .item-navigate{
                z-index: 30;
                &:hover{
                    text-decoration: none;
                    h3{
                        text-decoration: underline;
                    }
                }
            }

            .cd-mediaitem-square-container {
                align-self: flex-start;
            }

            .cd-mediaitem-square {
                .info-rect {
                    .title {
                        font-size: 0.95em;
                    }

                    .subtitle {
                        font-size: 0.95em;
                    }
                }
            }

            .cd-mediaitem-square {
                padding  : 0;
                min-width: 160px;
                // width:100%;

                .artwork-container {
                    width: 95%;

                    .artwork {
                        width       : auto;
                        height      : auto;
                        aspect-ratio: 1;
                    }
                }

                .title,
                .subtitle {
                    text-align     : left;
                    justify-content: left;

                    >div {
                        // -webkit-box-orient: horizontal !important;
                        -webkit-line-clamp: 2;
                    }
                }

                .title+.subtitle {
                    opacity: 0.7;
                }

                &.mediaitem-card {
                    min-width   : 195px;
                    max-width   : 288px;
                    aspect-ratio: 57/74;

                    .artwork-container {
                        width: 100%;

                        .artwork {
                            width       : auto;
                            height      : auto;
                            aspect-ratio: 1;
                        }
                    }

                    .title {
                        text-overflow: ellipsis;
                        white-space  : nowrap;
                        overflow     : hidden;
                    }

                    .title,
                    .subtitle {
                        text-align        : center;
                        justify-content   : center;
                        margin-block-start: 0.5em;
                        max-height        : 3.8em;
                    }

                    .title+.subtitle {
                        opacity: 1;
                    }
                }

                &.mediaitem-brick {

                    .artwork {
                        aspect-ratio: 290/163;
                    }
                }

                &.mediaitem-video {

                    .artwork {
                        aspect-ratio: 16/9;
                    }
                }
            }

            .grouping-btn {
                background-color: var(--categoriesColor);
            }
    
            .cd-btn-seeall, .v-hl-btn {
                z-index: 2;
            }

            .top-fab {
                position: sticky;
                left: 100%;
                background: #3c3c3c00;
            }

            .cd-mediaitem-list-item {

                &:not(:last-of-type) .info-rect,
                &:not(:last-of-type) .metainfo,
                &:not(:last-of-type) .duration,
                &:not(:last-of-type) .explicit-icon {                
                    border-radius: 0;
                }

                .explicit-icon {
                    height             : 100%;
                    background-size    : 12px;
                    background-position: center;
                }
            }

            .list-group-item-dark:hover,
            .list-group-item-dark.active {
                background-color: var(--keyColor);
                color           : var(--textColorLight);
                border-radius   : 0px;
            }

            .list-group-item-dark.applied {
                background: var(--keyColor-disabled);
            }

            .listitem-horizontal {
                .cd-mediaitem-list-item {
                    overflow-x: visible;

                    .heart-icon {
                        left: -15px;
                    }
                }
            }

            &.library-recentlyAdded {
                .cd-mediaitem-square {
                    width         : calc(var(--contentWidth) / 6.1);
                    max-width     : 300px;
                    padding-bottom: 20px;
                }
            }

            &.podcasts-page {
                .podcasts-search {
                    background: transparent;
                }
            }

            &.artist-page {
                --contentWidth: calc(100vw - var(--sidebarWidth) - 72px);
                .artist-title{
                    color: var(--textColor);
                }

                .artist-header {
                    color: var(--textColor);

                    .row {
                        padding-left: 0;
                    }
                }

                .floating-header {
                    border-radius: var(--borderadius);

                    .row {
                        padding-left: 0;
                    }
                }
                
                .artist-body {
        
                    .well:not(.artistfeed-well){
                        .latestRelease{
                            margin-left: 15px;
                        }
        
                        .topSongs {
                            .row {
                                padding-left: 16px;
                            }
                            .col.flex-center{
                                height: 311px;
            
                                .mediaitem-list-item__grid{
                                    height: inherit;
                                    padding: 25px;
                                    padding-left: 0px;
            
                                    .listitem-horizontal {
                                            
                                        .vue-horizontal[data-v-45080727]{
                                            display: grid !important;
                                        }
                                    }

                                    .heart-icon {
                                        left: -15px;
                                    }
                                }
                            }
                        }
                    }
                }               

                .more-btn-round{
                    background  : var(--keyColor);
                    color       : var(--textColorLight);
                }

                .cd-mediaitem-square {
                    width: calc(var(--contentWidth) / 6);
                    height: calc((var(--contentWidth) / 6) + 50px);

                    &.mediaitem-card {
                        width: 240px;
                        height: unset;
                    }

                    &.mediaitem-video {
                        width: calc(var(--contentWidth) / 5);
                        height: auto;
                        aspect-ratio: 16/11;
                    }
                }

                &.animated {
                
                    .artist-header {
                        min-height: 70vh;
                    }

                    .artist-header-compact {
                        min-height: 35vh;
                    }
                }
            }

            &.search-page {

                .md-btn:first-child {
                    border-top-left-radius: 16px;
                    border-bottom-left-radius: 16px;
                    border-top-right-radius: 0px;
                    border-bottom-right-radius: 0px;
                }

                .md-btn:last-child{
                    border-top-left-radius: 0px;
                    border-bottom-left-radius: 0px;
                    border-top-right-radius: 16px;
                    border-bottom-right-radius: 16px;
                }

                .cd-mediaitem-square {
                    .artwork-container{
                        width: 100%;
                    }
                    
                    .mediaitem-brick {
                        .info-rect {
                            .title {
                                font-size: 1.1rem;
                                color    : var(--textColorLight);
                            }
                        }
                    }
                }
            }

            &.home-page {
                .well.artistfeed-well{
                    display         : block;
                    border-radius   : var(--borderadius);
                    background      : rgb(128 128 128 / 10%);
                }
            }

            &.playlist-page {

                &[is-album="true"] {
                    
                    .subtitle {
                        display: none !important;
                    }

                    .info-rect {
                        justify-content: flex-start;
                    }
                }

                &[is-album="false"] {
                    
                }

                .artist-chip {
                    color: var(--textColor);

                    .artist-chip__follow {
                        color           : var(--keyColor);
                        background-color: transparent;
                        transition      : background-color 0.3s 0.3s var(--appleEase), color 0.3s 0.3s var(--appleEase);

                        &:hover {
                            background-color: var(--keyColor);
                            color           : var(--textColorLight);
                            transition      : background-color 0.3s var(--appleEase);
                        }
                    }
                }

                .more-btn-round {
                    background: var(--keyColor);
                }

                .playlist-display {
                    border-radius       : 16px;
                    border              :var(--border);
                    box-shadow          : none;

                    .artworkContainer {
                        position: unset;
                    }

                    .playlistInfo {
                        background: var(--color3);

                        .playlist-info { 
                            .playlist-desc {    
                                height      : 6vh;
                            }
                        }
                    }
                }

                .playlist-time {
                    margin-bottom: 10px !important;
                }

                .playlist-body {
                    .scrollbody { 
                        .tabs {
                            .tab-content {
                                .tab-pane {
                                    .listitem-content {
                                        .info-rect {
                                            .title {
                                                position: absolute;
                                            }
                                            .subtitle {
                                                margin-left: 20%;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .cd-mediaitem-list-item {
                    height: 60px;
                    border-radius: var(--borderadius);

                    &:nth-child(odd) {
                        background-color    : rgba(255, 255, 255, 0.05);
                        border-radius       : var(--borderadius);

                    }

                    .info-rect,
                    .heart-icon,
                    .explicit-icon,
                    .duration {
                        border-bottom: none !important;
                    }

                    .info-rect {
                        flex-flow  : row;
                        align-items: center;

                        .title {
                            width: 60ch;
                        }

                    }

                    .subtitle {
                        opacity  : 0.85;
                        font-size: 0.9em;

                        display: flex;
                    }

                    .mediaitem-selected {
                        border-radius: var(--borderadius);
                    }
                }

                .hero-tint {
                    opacity: 0;
                }

                .playlist-hero {
                    .mediaitem-artwork {
                        right: 12%;
                    }
                }

                .playlist-name {
                    filter: none !important;
                }
            }

            &.collection-page {
                padding-bottom: 32px;
            }
            
            &.library-page {
                .heart-icon {
                    left: -15px;
                }

                .well {
                    display: block;
                }
            }

            &.library-artists-page {

                .list-container {
                    border-right: 0px solid var(--contentBorderColor);
                }

                .podcasts-list {
                    background: transparent;
                    --color2  : transparent;
                }


                .cd-mediaitem-list-item {
                    background-color: transparent;
                    margin          : 0;
                    width           : 100%;

                    &:not(:last-of-type) {
                        border-bottom: 0px solid var(--contentBorderColor);
                        border-radius: var(--borderadius);
                    }

                    &:not(:last-of-type) .info-rect,
                    &:not(:last-of-type) .metainfo,
                    &:not(:last-of-type) .duration,
                    &:not(:last-of-type) .explicit-icon {
                        border-bottom: none;
                    }

                    .artwork {
                        // box-shadow   : 0px 0px 12px;
                        border-radius: 50%;
                    }

                    &:hover,
                    &.active {
                        width           : 95%;
                        background-color: var(--artistHoverColor);
                        color           : var(--textColorLight);
                        transition      : 0.1s ease-in-out;
                    }

                }

                .cd-mediaitem-list-item {
                    width           : 95% ;
                }
            }

            &.about-page {
                button.sponsorBtn{
                    color:var(--textColorLight) !important;
                }

                .githubBtn {
                    background-color: #211F1F !important;
                }

                .kofiBtn {
                    background-color: #FBAA19 !important;
                }

                .opencollectiveBtn {
                    background-color: #7fadf2 !important;
                }

                .discordBtn {
                    background-color: #5865F2 !important;
                }
                
                .twitterBtn {
                    background-color: #1D9BF0 !important;
                }
            }

            .albums-square-container {
                .cd-mediaitem-square-container {
                    .cd-mediaitem-square {
                        width: calc(145px * var(--windowRelativeScale));
                        height: calc(185px * var(--windowRelativeScale));
                    }
                }
            }

            .well.itemContainer.collection-list-square {
                display: grid;
                grid-template-columns: repeat(7, minmax(150px, 1fr));
                margin-inline: 0px;

                .cd-mediaitem-square-container {
                    margin-bottom: 1vw;
                    width:100%;
                    > .cd-mediaitem-square {
                        width: 100%;
                    }
                }
            }

            @media screen and (max-width: 1400px) {
                .well.itemContainer.collection-list-square {
                    grid-template-columns: repeat(6, minmax(150px, 1fr)); // nah wait this works like its good, no scrolling bug for this... lemee show

                }
            }

            @media screen and (max-width: 1300px) {
                .well.itemContainer.collection-list-square {
                    grid-template-columns: repeat(5, minmax(150px, 1fr)); // nah wait this works like its good, no scrolling bug for this... lemee show

                }
            }

            @media screen and (max-width: 1200px) {
                .well.itemContainer.collection-list-square {
                    grid-template-columns: repeat(4, minmax(150px, 1fr));
                }
            }       
            
            @media screen and (max-width: 900px) {
                .well.itemContainer.collection-list-square {
                    grid-template-columns: repeat(3, minmax(150px, 1fr)); // nah wait this works like its good, no scrolling bug for this... lemee show

                }
            }

            .v-hl-container[data-v-45080727]:not(.v-hl-scroll) {
                .cd-mediaitem-square.mediaitem-small {
                    width: calc(160px * var(--windowRelativeScale));
                    height: calc(200px * var(--windowRelativeScale));
                }
            }

        }

        .v-hl-btn-next[data-v-45080727] {
            right: 0px !important;
            
            .v-hl-svg[data-v-45080727] {
                background: var(--keyColor);
                backdrop-filter: blur(var(--blurSmall));
                color: hsla(0, 0%, 0%, 50%);
                fill: currentColor;
                box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
            }
    
            .v-hl-container[data-v-45080727] {
                overflow-y: visible;
    
                &:not(.v-h1-scroll) {
                    clip-path: none;
                }
            }
    
        }
    
        .v-hl-btn-prev[data-v-45080727] {
            transform       : rotate(0deg) !important;
            left            : -26px !important;
    
            .v-hl-svg[data-v-45080727] {
                background: var(--keyColor);
                backdrop-filter: blur(var(--blurSmall));
                color: rgba(0, 0, 0, 50%);
                fill: currentColor;
                box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
            }
    
            .v-hl-container[data-v-45080727] {
                overflow-y: visible;
    
                &:not(.v-h1-scroll) {
                    clip-path: none;
                }
            }
        }

    }

    input[type=checkbox][switch]:checked {
        background-color: var(--keyColor) !important;
    }

    .heart-icon {
        .heart-filled {
            background-color: var(--keyColor);
        }
    }

    .settings-panel {
        backdrop-filter: blur(16px) brightness(0.5);
        z-index: 20;

        .settings-window {
            background: transparent;
            backdrop-filter: var(--glassFilter2);
            border-radius: var(--borderadius);

            .md-option-container .md-option-line:not(:last-child){
                border-bottom:var(--border) ;
            }
    
            .md-option-line.child{
                border-radius: var(--borderadius);
            }
        }

        .md-option-container{
            .md-option-line:not(:last-child) {
                border-bottom: var(--border);
            }
        }

        ._svg-icon {
            background: var(--keyColor);
        }

        .keybinds-page {
            padding-bottom  : 16px;
            display         : flex;

            .md-option-header {
                position    : fixed;                
            }

            .settings-option-body {
                width       : -webkit-fill-available;
                padding-top : 48px;
            }
        }
    }
}

.bg-artwork--placeholder {
    background: transparent;
}

.app-navigation {
    --color1: transparent !important;
    --color2: transparent !important;
    display : flex;
}

.menu-panel .menu-panel-body {
    background-color        : var(--background);
    backdrop-filter         : blur(16px);;       
    color                   : var(--textColor);
    border-radius           : var(--borderadius);

    & .menu-body {
        padding: 0;

        .svg-icon {
            color  : var(--keyColor);
            --color: var(--keyColor);
        }
    }

    & .menu-option {
        border-radius       : 0;
        width               : 100%;
        padding-inline-start: 14px;
        padding-block       : 10px;

        &::before {
            --sizeX      : 0px;
            --sizeY      : 0px;
            border-radius: 0;
        }

        +.menu-option {
            margin-top: -1px;
        }

        &:not(:last-of-type) {
            border-bottom: 0px solid var(--selected);
            padding-bottom: 11px;
        }

    }
}

@media (prefers-color-scheme: dark) {
    @import "theme/darkmode.less";
}

#apple-music-video-container {

    // Style Captions
    #captions:not(:empty) {
        color         : var(--textColorLight);
        font-size     : 1.75rem;
        padding-inline: 10px;
        padding-block : 5px;
        border-radius : 10px;
        font-family   : var(--fontStyle);
        margin-top    : 6vh;
    }

    // AM Web Style Fullscreen Button
    #player-fullscreen {
        background         : url("icons/fullscreen.svg");
        background-size    : 50%;
        background-position: center;
        background-repeat  : no-repeat;
        filter             : opacity(0.6);
        // filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%));
        background-color   : var(--mediaBarColor);
        border-radius      : 10px;
        transition         : 0.2s ease-in-out filter;
        bottom             : 0;

        &:hover {
            filter    : opacity(1);
            transition: 0.2s ease-in-out filter;
        }

        svg {
            display: none;
        }
    }

    // AM Web Style PiP Button
    #player-pip {
        background-color: var(--mediaBarColor);
        border-radius   : 10px;
        bottom          : 0;
        filter          : opacity(0.6);
        transition      : 0.2s ease-in-out filter;

        &:hover {
            filter    : opacity(1);
            transition: 0.2s ease-in-out filter;
        }
    }

    .playback-info {
        width           : 100%;
        bottom          : 0;
        left            : 0;
        padding         : 20px 40px;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);
    }

    input[type="range"] {
        align-self   : center;
        height       : 4px;
        border-radius: .5rem;
        margin-inline: 10px;
    }

    p {
        color: rgb(255, 255, 255, 1);
    }

    .song-artist {
        font-size  : 1.7rem;
        font-weight: bold;
        color      : rgb(255, 255, 255, 1);
    }

    .song-name {
        font-size  : 1.2rem;
        font-weight: bold;
        color      : rgb(255, 255, 255, 0.8);
    }

    .song-progress input[type="range"] {
        appearance: initial;

        &::-webkit-slider-thumb {
            box-shadow        : 0px 0px 0px #000000;
            border            : 1px solid #39404D;
            background        : #fff;
            height            : 0.7rem;
            width             : 0.7rem;
            border-radius     : 50%;
            cursor            : pointer;
            -webkit-appearance: none;
        }
    }
}

@media only screen and (max-width: 1120px) {
    #app {
        .app-chrome--left .app-chrome-item:nth-of-type(2) {
            margin-left: 115px !important;
        }
    }

    #app.macosemu {
        .app-chrome--left .app-chrome-item:nth-of-type(2) {
            margin-left: 180px !important;
        }

        .app-chrome--right {
            width: 20% !important;
        }
    }
}