@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-size: calc(8 * (100vw / 720));
    font-family: "articulat-cf", "LINE Seed JP", sans-serif;
    font-weight: 700;
}

:root{
    --base: #f0f0f0;
    --acc: #ff334a;
    --bk10: hsl(0, 0%, 90%);
    --bk25: hsl(0, 0%, 75%);
    --bk35: hsl(0, 0%, 65%);
    --bk50: hsl(0, 0%, 50%);
    --bk100: hsl(0, 0%, 0%);
    --sdw: 0 0.5rem 1rem var(--bk10);
}

body{
    width: 100%;
    min-height: 100vh;
    display: block;
    background-color: var(--base);
    position: relative;
}


.spinner {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--bk25);
    border-radius: 50%;
    border-top-color: var(--acc);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

main,
.playerbar-wrapper,
nav{
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .2s; 

    &.is-login{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

.login-wrapper{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    padding: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: .2s; 

    &.is-login{
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }

    .login-wrapper__container{
        width: 100%;
        height: fit-content;
        padding: 4rem;
        background-color: white;
        box-shadow: var(--sdw);
        border-radius: 1rem;

        div.spinner{
            width: 4rem;
            height: 4rem;
        }
    }

}

main{
    .main-spaarea{
        width: 100%;
        height: calc(100vh + 23rem);
        padding: 6rem;
        
        .main-spaarea__returnbtn{
            width: 6rem;
            height: 6rem;
            aspect-ratio: 1 / 1;
            display: flex;   
            background-color: var(--bk100);
            mask-image: url(../images/chevron_backward_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg);
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
        }

        .main-spaarea__header,
        .main-spaarea__midheader,
        .main-spaarea__smallheader{
            display: flex;
            align-items: center;
            justify-content: start;
            width: 100%;
        }

        .main-spaarea__header{
            height: 4rem;
            font-size: 4rem;
            margin-top: 6rem;
            margin-bottom: 2rem;
        }

        .main-spaarea__midheader{
            height: 3rem;
            font-size: 3rem;
            line-height: 3rem;
            margin-bottom: 1rem;
        }

        .main-spaarea__smallheader{
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
        }

        .main-spaarea__grid{
            width: 100%;
            height: max-content;
            display: grid;

            &.newrelease,
            &.recently,
            &.toptrack,
            &.artist{
                margin-bottom: 6rem;
            }
        }

        &.is-play{
            padding-bottom: calc(23rem + 6rem);
        }

        &.is-home{
            display: flex;
            flex-direction: column;
            height: 100%;

            .viewmore-btn{
                width: 100%;
                height: 4rem;
                text-align: right;
                text-decoration: underline;
                color: var(--bk50);
                font-size: 2.5rem;
                line-height: 4rem;
                margin-bottom: 2rem;
            }

            .main-spaarea__logo{
                width: 100%;
                height: 6rem;
                display: flex;   
                font-size: 4rem;
                gap: 2rem;

                &::before{
                    content: "";
                    width: auto;
                    height: 100%;
                    aspect-ratio: 1 / 1;
                    background-image: url(../images/libra_icon.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }

            .main-spaarea__grid{
                &.newrelease,
                &.recently,
                &.toptrack{ width: 100%; }

                &.newrelease{
                    display: grid;
                    grid-template-rows: 1fr;
                    grid-template-columns: repeat(3, 1fr);
                    column-gap: 4rem;

                    .newrelease-cardwrap{
                        width: 100%;
                        min-width: 0;
                        aspect-ratio: 186.667 / 242.667;
                        text-decoration: none;
                        background-color: white;
                        box-shadow: var(--sdw);
                        display: grid;
                        grid-template-rows: 1fr 7rem;
                        border-radius: 1rem;

                        .newrelease-cardwrap__image,
                        .newrelease-cardwrap__text{
                            width: 100%;
                            height: 100%;
                        }

                        .newrelease-cardwrap__image{
                            aspect-ratio: 1 / 1;
                            border-radius: 1rem;
                            background-color: var(--bk100);
                            display: block;
                            object-fit: cover;
                        }

                        .newrelease-cardwrap__text{
                            padding: 0 1rem 1rem 1rem;
                            display: grid;
                            grid-template-rows: 4rem 2rem;

                            p{
                                display: block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                    
                                &:first-child{ 
                                    font-size: 2.5rem;
                                    line-height: 4rem;
                                    height: 4rem;
                                    color: var(--bk100);
                                }

                                &:last-child{
                                    font-size: 2rem;
                                    line-height: 2rem;
                                    height: 2rem;
                                    color: var(--bk35);
                                }
                            }
                        }
                    }
                }

                &.recently{
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(3, 1fr);
                    gap: 2rem;

                    .recently-cardwrap{
                        width: 100%;
                        height: 100%;
                        text-decoration: none;
                        background-color: white;
                        box-shadow: var(--sdw);
                        border-radius: 1rem;
                        display: grid;
                        grid-template-columns: 10rem 1fr;
                        grid-template-rows: 1fr;

                        .recently-cardwrap__image,
                        .recently-cardwrap__text{
                            width: 100%;
                            height: 100%;
                        }

                        .recently-cardwrap__image{
                            aspect-ratio: 1 / 1;
                            border-radius: 1rem;
                            background-color: var(--bk100);
                            display: block;
                            object-fit: cover;
                        }

                        .recently-cardwrap__text{
                            padding: 1rem 1rem 1rem 2rem;
                            display: grid;
                            grid-template-rows: 4rem 4rem;

                            p{
                                height: 4rem;
                                line-height: 4rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                    
                                &:first-child{ 
                                    font-size: 2.5rem;
                                    color: var(--bk100);
                                }

                                &:last-child{
                                    font-size: 2rem;
                                    color: var(--bk35);
                                }
                            }
                        }
                    }
                }

                &.toptrack{
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    grid-template-rows: 1fr;
                    gap: 2rem;

                    .toptrack-cardwrap{
                        width: 100%;
                        height: auto;
                        text-decoration: none;
                        aspect-ratio: 7 / 9;
                        display: grid;
                        grid-template-rows: auto 4rem;

                        .toptrack-cardwrap__image,
                        .toptrack-cardwrap__title{
                            width: 100%;
                            height: 100%;
                        }

                        .toptrack-cardwrap__image{
                            aspect-ratio: 1 / 1;
                            border-radius: 1rem;
                            background-color: var(--bk100);
                            display: block;
                            object-fit: cover;
                            box-shadow: var(--sdw);
                        }

                        .toptrack-cardwrap__title{
                            text-align: center;
                            font-size: 2rem;
                            line-height: 4rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: var(--bk100);
                        }

                    }

                }

                &.artist{
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: 1fr;
                    gap: calc(0.125rem * (64 / 3));

                    .artist-cardwrap{
                        width: 100%;
                        height: auto;
                        text-decoration: none;
                        aspect-ratio: 140 / 180;
                        display: grid;
                        grid-template-rows: auto 5rem;

                        .artist-cardwrap__image,
                        .artist-cardwrap__title{
                            width: 100%;
                            height: 100%;
                        }

                        .artist-cardwrap__image{
                            aspect-ratio: 1 / 1;
                            border-radius: 100%;
                            background-color: var(--bk100);
                            display: block;
                            object-fit: cover;
                            box-shadow: var(--sdw);
                        }

                        .artist-cardwrap__title{
                            text-align: center;
                            font-size: 2rem;
                            line-height: 5rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: var(--bk100);
                            padding: 0 1rem;
                        }

                    }

                }
            }
        }

        &.is-search{
        }

        &.is-playlist{
        }

        &.is-setting{
        }

        &.is-uploader{
            display: flex;
            flex-direction: column;

            .main-spaarea__grid{
                &.audioupload,
                &.createrecord{
                    width: 100%;
                    padding: 2rem;
                    border-radius: 1rem;
                    box-shadow: var(--sdw);
                    background-color: white;
                    height: max-content;
                    display: grid;
                    
                    input[type="file"]{ display: none; }
                }

                &.audioupload{
                    grid-template-rows: repeat(3, auto);
                    grid-template-columns: 1fr;
                    row-gap: 4rem;

                    .audioupload-fileselector{
                        width: 100%;
                        height: 6rem;
                        background-color: var(--bk100);
                        border-radius: 1rem;
                        font-size: 2rem;
                        line-height: 6rem;
                        text-align: center;
                        color: white;
                        transition: .1s;

                        &:hover{ background-color: var(--acc); }
                    }

                    .audioupload-selectedfiles{
                        width: 100%;
                        display: grid;

                        .selectedfiles-link{
                            width: 100%;
                            height: max-content;
                            display: grid;
                            grid-template-columns: 424fr 160fr;
                            column-gap: 2rem;

                            .main-spaarea__smallheader{ color: var(--bk50); }

                            .selectedfiles-link__inputarea{
                                width: 100%;
                                height: max-content;
                                grid-column: 1 / 3;
                                display: grid;
                                grid-template-columns: inherit;
                                column-gap: inherit;

                                .inputarea-container{
                                    width: 100%;
                                    height: max-content;
                                    grid-column: 1 / 3;
                                    display: grid;
                                    grid-template-columns: inherit;
                                    column-gap: inherit;

                                    &:not(:last-child){
                                        padding-bottom: 1rem;
                                        border-bottom: 0.125rem solid var(--bk25);
                                        margin-bottom: 1rem;
                                    }

                                    input[type="text"]{
                                        width: 100%;
                                        height: 4rem;
                                        border-radius: 1rem;
                                        background-color: var(--base);
                                    }
                                }
                            }
                        }
                    }

                    .audioupload-sendbtn{
                        width: fit-content;
                        height: 4rem;
                        background-color: var(--acc);
                        color: white;
                        border-radius: 4rem;
                        font-size: 2rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 4rem;
                        margin: 0 auto;
                        border: 0.125rem solid transparent;
                        transition: .1s;

                        &:not(:disabled):hover{
                            background-color: transparent;
                            color: var(--acc);
                            border-color: var(--acc);
                        }

                        &:disabled{
                            filter: saturate(0);
                        }
                    }
                }

                &.createrecord{
                    gap: 6rem;
                    .createrecord-maindata{
                        width: 100%;
                        height: max-content;
                        display: grid;
                        grid-template-columns: 160fr 416fr;
                        grid-template-rows: 1fr 1fr;
                        gap: 2rem;

                        .createrecord-fileselector{
                            width: 100%;
                            height: auto;
                            aspect-ratio: 1 / 1;
                            grid-row: 1 / 3;
                            background-color: var(--bk100);
                            color: white;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            font-size: 2rem;
                            padding: 2rem;
                            border-radius: 1rem;
                            transition: .1s;

                            &:hover{ background-color: var(--acc); }
                        }

                        .createrecord-maindatainput{
                            width: 100%;
                            height: auto;
                            display: grid;
                            grid-template-rows: repeat(2, max-content);

                            input{
                                width: 100%;
                                height: 6rem;
                                background-color: var(--base);
                                border-radius: 1rem;
                            }

                        }
                    }

                    .createrecord-audiodata{
                        .createrecord-audioselector{
                            width: 100%;
                            height: 4rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 2rem;
                            border-radius: 4rem;
                            background-color: var(--acc);
                            color: white;
                            margin-bottom: 2rem;
                            border: 0.125rem solid transparent;
                            transition: .1s;

                            &:not(:disabled):hover{
                                background-color: transparent;
                                color: var(--acc);
                                border-color: var(--acc);
                            }

                            &:disabled{
                                filter: saturate(0);
                            }
                        }

                        .createrecord-recordsetarea{
                            width: 100%;
                            height: fit-content;
                            display: grid;
                            grid-template-columns: 88fr 304fr 144fr 56fr;

                            .recordsetarea-index{
                                width: 100%;
                                height: 3rem;
                                display: grid;
                                grid-column: 1 / 5;
                                grid-template-columns: inherit;

                                p{
                                    color: var(--bk50);
                                }
                            }

                        }

                    }
                }
            }
        }
    }
}

.playerbar-wrapper{
    width: calc(100% - (6rem * 2));
    height: 11rem;
    display: block;
    background-color: white;
    padding: 1.5rem;
    border-radius: 11rem;
    box-shadow: var(--sdw);
    position: fixed;
    bottom: 0;
    left: 6rem;
    z-index: 20;

    &.is-play{ bottom: 18rem; }

}

nav{
    width: 100%;
    height: 12rem;
    padding: 0 6rem;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 30;

    .nav-accountarea,
    .nav-navigatearea{
        width: 100%;
        height: 100%;
    }

    .nav-accountarea{
        width: 100%;
        height: 100%;
        padding: 3rem 0;
        
        button{
            display: flex;
            width: 100%;
            height: 100%;
            background-color: transparent;
            appearance: none;
            cursor: pointer;
            position: relative;

            &::before{
                content: "";
                width: calc(100% + 2rem);
                height: calc(100% + 2rem);
                top: -1rem;
                left: -1rem;
                display: block;
                position: absolute;
                background-color: var(--base);
                z-index: 0;
                border-radius: 6rem;
                visibility: hidden;
                pointer-events: none;
                opacity: 0;
                transition: .2s; 
            }

            &:hover::before{
                visibility: visible;
                opacity: 1;
            }
        }

        .accountarea-icon,
        .accountarea-nameuid{ z-index: 40; }

        .accountarea-icon{
            width: auto;
            height: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            &.is-default{
                &::before{
                    content: "";
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-color: white;
                    mask-image: url(../images/music_note_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                }
            }
        }

        .accountarea-nameuid{
            width: 100%;
            max-width: 16rem;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: start;

            .account-name,
            .account-uid{
                width: 100%;
                display: block;
                text-align: left;
                padding: 0 1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
            }

            .account-name{
                height: calc(100% * (28 / 48));
                line-height: calc(6rem * (28 / 48));
                font-size: 2.5rem;
            }

            .account-uid{
                height: calc(100% * (20 / 48));
                line-height: calc(6rem * (20 / 48));
                font-size: 2rem;
                font-weight: 400;
                color: var(--bk50);
            }
        }
    }

    .nav-navigatearea{
        padding-left: 7rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;

        input[type="radio"]{
            display: none;

            &:not(:checked) + label:hover{
                p{ color: var(--bk100); }
                &::before{ background-color: var(--bk100); }
            }
            
            &:checked + label{ 
                background-color: var(--base);
                
                p{ color: var(--bk100); }
                &::before{ background-color: var(--bk100); }
            }
        }

        label{
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: filter .2s;

            p{  
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 1;
                font-size: 1.5rem;
                line-height: 2rem;
                text-align: center;
                color: var(--bk25);
            }

            &::before{
                content: "";
                width: calc(100% * (64 / 96)); 
                height: auto;
                aspect-ratio: 2 / 1;
                display: block;
                background-color: var(--bk25);
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
            }

            &[for="navHomeBtn"]::before{ mask-image: url(/images/home_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navSearchBtn"]::before{ mask-image: url(/images/search_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navPlayListBtn"]::before{ mask-image: url(/images/list_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
            &[for="navSettingBtn"]::before{ mask-image: url(/images/settings_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg); }
        }
    }
}

.accountcard-wrapper{
    width: 30rem;
    height: fit-content;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 11rem;
    left: 6rem;
    z-index: 40;
    background-color: white;
    box-shadow: var(--sdw);
    border-radius: 1rem;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .2s; 

    &.is-open{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .accountcard-wrapper__mainarea,
    .accountcard-wrapper__rolearea,
    .accountcard-wrapper__btnarea{
        width: 100%;
    }

    .accountcard-wrapper__mainarea,
    .accountcard-wrapper__rolearea{
        grid-template-rows: 1fr;
    }

    .accountcard-wrapper__mainarea{
        height: 7rem;
        display: grid;
        grid-template-columns: 56fr 152fr;

        .mainarea-icon{
            width: auto;
            height: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            &.is-default{
                &::before{
                    content: "";
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-color: white;
                    mask-image: url(../images/music_note_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                }
            }
        }

        .mainarea-nameuid{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: start;

            .account-name,
            .account-uid{
                width: 100%;
                height: calc(100% * (28 / 56));
                line-height: calc(7rem * (28 / 56));
                display: block;
                text-align: left;
                padding: 0 1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
            }

            .account-name{
                font-size: 2.5rem;
            }

            .account-uid{
                font-size: 2rem;
                font-weight: 400;
                color: var(--bk50);
            }
        }
    }

    .accountcard-wrapper__rolearea{
        height: 7rem;
        padding: 2rem 0;
        display: grid;
        grid-template-columns: 10fr 15fr;
        column-gap: 1rem;
        border-bottom: 0.125rem solid var(--bk10);

        .rolearea-current,
        .rolearea-req{
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
        }

        .rolearea-current{
            background-color: var(--bk100);
            font-size: 2rem;
            color: white;
        }

        .rolearea-req{
            font-size: 1.5rem;
            background-color: var(--acc);
            color: white;
            border: 0.125rem solid transparent;
            transition: .1s;

            &:not(:disabled):hover{
                background-color: transparent;
                color: var(--acc);
                border-color: var(--acc);
            }

            &:disabled{
                filter: saturate(0);
            }
        }
    }

    .accountcard-wrapper__btnarea{
        height: fit-content;
        margin-top: 2rem;
        gap: 2rem;
        display: flex;
        flex-direction: column;

        button{
            width: 100%;
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
            text-align: left;
            padding-left: 1rem;
            font-weight: 400;
            background-color: transparent;
            border-radius: 0.5rem;

            &:disabled{ color: var(--bk35); }

            &#logOutBtn{ color: var(--acc); }

            &:not(:disabled){
                &:hover{
                    background-color: var(--base);
                
                }
            }
        }
    }
}

.errordialog-wrapper{
    width: 100%;
    height: 100%;
    background-color: var(--base);
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: .2s; 

    &.is-error{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    p{
        display: flex;
        justify-content: start;

        &:nth-child(1){
            height: 9rem;
            font-size: 9rem;
            align-items: center;
        }

        &:nth-child(2){
            height: 4rem;
            font-size: 4rem;
            align-items: center;
        }

        &:nth-child(3){
            min-height: 20rem;
            height: fit-content;
            font-size: 2.5rem;
            line-height: 4rem;
            font-weight: 400;
        }

        &:nth-child(4){
            height: 2rem;
            font-size: 2rem;
            align-items: center;

            &::after{
                content: '秒後にホームへ自動で戻ります。';
                width: 100%;
                height: 2rem;
                display: flex;
                justify-content: start;
                align-items: center;
                font-size: 2rem;
                font-weight: 400;
            }
        }
        
    }
}

.modalbase-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    transition: .2s;
    visibility: hidden;
    background-color: rgb(from var(--bk100) r g b / 0);
    backdrop-filter: blur(0rem);
    pointer-events: none;
    padding: 6rem;
    opacity: 0;

    &.is-open{
        visibility: visible;
        background-color: rgb(from var(--bk100) r g b / 0.25);
        backdrop-filter: blur(16px);
        pointer-events: auto;
        opacity: 1;
    }

    .modalbase-wrapper__container{
        width: 100%;
        height: fit-content;
        max-height: 100%;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        background-color: white;
        box-shadow: var(--sdw);
        border-radius: 1rem;
        
        .modalbase-wrapper__closebtn{
            width: 6rem;
            height: 6rem;
            background-color: var(--base);
            display: block;
            border-radius: 100%;
            transition: .2s;
            margin-left: auto;
            margin-right: 0;

            &::before{
                content: "";
                width: 100%;
                height: 100%;
                display: block;
                background-color: var(--bk100);
                mask-image: url(../images/close_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg);
                mask-position: center;
                mask-size: 50%;
                mask-repeat: no-repeat;
            }

            &:hover{
                background-color: var(--acc);

                &::before{ background-color: white;}
            }

        }
    }

}