/* TRISITE CSS 4.0  */
/* (C) 2023 TRISITE */
/* Nav module       */

html.open body {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}
html.open.no-scroll body {
    overflow-y: auto;
}

.button-nav {
    margin-left:0;
    list-style:none;
    gap:40px;
}
.button-nav > li {
    display:flex;
    align-items: center;
    justify-content: center;
    width:50px;
    margin:0 auto;
}
.button-nav > li > div {
    display:flex;
    align-items: center;
    display:flex;
    align-items: center;
    justify-content: center;
    border:solid 1px var(--color-dark-glass);
    border-radius:100%;
    width:48px;
    height:48px;
    overflow:hidden;
    cursor: pointer;
}
.button-nav > li > div:hover ,
.button-nav > li.open > div {
    background:var(--color-blue);
    color:var(--color-super-white);
    border:solid 1px var(--color-super-white);
}
.button-nav > li > div > span {
    font-size:36px;
}
.button-nav > li:first-of-type > div > span {
    font-size:32px;
}
.button-nav > li:last-of-type > div > span {
    font-size:44px;
}
.button-nav > li:last-of-type > div > figure {
    width:100%;
    height:100%;
    background-size:cover;
    background-color:var(--color-white);
    position:absolute;
    top:0;
    left:0;
}
.button-nav > li em {
    display:none;
}
.button-nav > li i {
    position:absolute;
    top:-6px;
    right:calc(50% - 38px);
    font-size:0.8em;
    font-style:normal;
    color:var(--color-white);
    background:var(--color-red);
    border:solid 3px var(--color-white);
    border-radius:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height:30px;
    overflow:hidden;
}

.button-nav > li ul {
    display:none;
}
.button-nav > li ul li a {
    padding:10px 5px;
    border-top:solid 1px var(--color-dark-glass);
    display:block;
}
.button-nav > li ul li a.new {
    font-weight:bold;
}
.button-nav > li ul li a:hover {
    background:var(--color-lightgray);
}
.button-nav > li.account ul li a {
    font-weight:bold;
    text-align:center;
}
.button-nav > li.account ul li:first-of-type {
    width:80px;
    margin:20px auto;
}
.button-nav > li.account ul li > div {
    width:80px;
    height:80px;
    border-radius:40px;
    border:solid 1px var(--color-dark-glass);
    display:flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}
.button-nav > li.account ul li > div span {
    font-size:60px;
}
.button-nav > li.account ul li > div figure {
    width:100%;
    height:100%;
    background-size:cover;
    background-color:var(--color-white);
    position:absolute;
    top:0;
    left:0;
}
.button-nav > li.account ul li.logout a {
    background:var(--color-red);
    color:var(--color-white);
}
.button-nav > li.account ul li:last-of-type {
    padding:5px;
    text-align:center;
    background:var(--color-dark-glass);
    color:var(--color-white);
    border-radius:0 0 7px 7px;
}
.button-nav > li ul li:first-of-type a {
    border-top:none;
}

.button-nav > li.open ul {
    position:absolute;
    top:calc(100% + 10px);
    right:20px;
    background:var(--color-white);
    border:solid 1px var(--color-dark-glass);
    border-radius:8px 0 8px 8px;
    display:block;
    width:200px;
    list-style:none;
}
.button-nav > li.open ul::after {
    content:'';
    background:var(--color-white);
    width:20px;
    height:20px;
    clip-path: polygon(100% 0,100% 100%,0 100%);
    position:absolute;
    top:-19px;
    right:0;
}
.button-nav > li.open ul::before {
    content:'';
    background:var(--color-dark-glass);
    width:22px;
    height:20px;
    clip-path: polygon(100% 0,100% 100%,0 100%);
    position:absolute;
    top:-20px;
    right:-1px;
}


.login-button .button {
    border:solid 1px var(--color-dark-glass);
    border-radius:8px;
    padding:10px;
}
.login-button li:last-of-type .button ,
.login-button .button:hover {
    border:solid 1px var(--color-blue);
    background:var(--color-blue);
    color:var(--color-white);
}


#nav-cover {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    background: var(--color-light-glass);
    backdrop-filter: blur(4px);
    will-change: opacity, backdrop-filter;
    display: none;
    z-index: 3;
}

/* Media Query */
@media (max-width:720px ) {
    .login-button {
        position:fixed;
        width:100%;
        bottom:0;
        left:0;
        background:var(--color-white);
        box-shadow:var(--shadow);
        padding:10px;
    }
    .login-button .button {
        min-width:auto;
        width:100%;
    }

    .button-nav.flex {
        gap:20px;
    }
}
@media (max-width:520px ){
    .button-nav.flex {
        position:fixed;
        width:100%;
        bottom:0;
        left:0;
        background:var(--color-white);
        box-shadow:var(--shadow);
        padding:10px;
    }
    .button-nav > li {
        width:40px;
    }
    .button-nav > li div {
        width:38px;
        height:38px;
    }
    .button-nav > li div:hover {
        background:var(--color-blue);
        color:var(--color-super-white);
        border:solid 1px var(--color-super-white);
    }
    .button-nav > li span {
        font-size:26px !important;
    }
    .button-nav > li:last-of-type span {
        font-size:34px !important;
    }
    .button-nav > li.open ul {
        position:fixed;
        width:calc(100% - 40px);
        bottom:100px;
        top:auto;
        border-radius:8px;
    }
    .button-nav > li.open ul::after {
        clip-path: polygon(0 0,100% 0,50% 100%);
        top:auto;
        bottom:-20px;
        right:calc(50% - 10px);
    }
    .button-nav > li:first-of-type.open ul::after {
        left:30px;
        right:auto;
    }
    .button-nav > li:last-of-type.open ul::after {
        background:var(--color-gray);
        right:30px;
    }
    .button-nav > li.open ul::before {
        clip-path: polygon(0 0,100% 0,50% 100%);
        top:auto;
        bottom:-21px;
        right:calc(50% - 11px);
    }
    .button-nav > li:first-of-type.open ul::before {
        left:29px;
        right:auto;
    }
    .button-nav > li:last-of-type.open ul::before {
        right:29px;
    }
}