body{
    --description-width:400px;
}

@keyframes fade-in {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}


@keyframes zoom {
    0%{
        opacity: 0;
    }
    70%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes zoom {
    0%{
        transform: scale(70%);
        opacity: 0;
        clip-path: circle(75%);
    }
    70%{
        opacity: 1;
    }
    100%{
        transform: scale(100%);     
        opacity: 1;       
    }
}


@keyframes height_adjust {
    0%{
        height:0em;
    }
    100%{
        height:5em;
    }
}

@media (min-width:1100px){
    @keyframes zoom {
        0%{
            transform: scale(30%);
            opacity: 0.5;
            clip-path: circle(75%);
        }
        70%{
            opacity: 1;
        }
        100%{
            transform: scale(100%);     
            opacity: 1;       
        }
    }
    @keyframes height_adjust {
        0%{
            height:0em;
            opacity: 0.5;
        }
        100%{
            height:8em;
            opacity: 1;
        }
    }
}

/* @media (max-width:500px){ */
@keyframes viewer_background_animation{
    0%{
        background-color: rgba(0,0,0,0.6);;
    }
    100%{
        background-color: transparent;
    }
}


@keyframes viewer_closing {
    0%{
        transform: translateY(0) scale(100%);
        opacity:1;
    }
    99%{
        opacity: 0.6;
    }
    100%{
        transform: translateY(5em) scale(90%);
        opacity:0;
    }
}


@keyframes viewer_closing {
    0%{
        transform: translate(0px, 0px) scale(100%);
        transform-origin: 0 0;
        opacity:1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        padding-left:0;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform:translate(var(--xpos1), calc(var(--ypos) + 1em)) scale(40%);
        transform-origin: 50% 50%;
        opacity:0;
        clip-path: polygon(0 0, calc(100% - var(--description-width)) 0, calc(100% - var(--description-width)) 100%, 0% 100%);
        padding-left:15em;
    }
}

@media (max-width:1100px) {
    @keyframes viewer_closing {
        0%{
            transform: translate(0px, 0px) scale(100%) ;
            transform-origin: 0 0;
            opacity:1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            padding-top: 0;
        }
        50%{
            opacity: 1;
        }
        100%{
            transform:translate(var(--xpos1), calc(var(--ypos) + 1em)) scale(40%) ;
            transform-origin: 50% 50%;
            opacity:0;
            
            clip-path: polygon(0 1.5em, 100% 1.5em, 100% 50%, 0% 50%);
            padding-top: 5em;
        }
    }
}

@keyframes viewer_bg_show {
    0%{
        background-color: transparent;
    }
    100%{
        background-color: transparent;
    }
}


#viewer_background{
    background-color:rgba(0,0,0,0.6);
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    display:none;
    z-index:2;
    overflow:auto;
    overscroll-behavior:contain;
    --open-speed: 0.3s;
    --close-speed: 0.3s;
}

@media (max-width:500px){
    #viewer_background{
        animation:viewer_bg_show var(--open-speed);
    }
}

#viewer_background.viewer_closing{
    animation: viewer_background_animation var(--close-speed);
    animation-fill-mode: forwards;
    overflow: hidden;
}
@media (max-width:1100px){
    #viewer_background.viewer_closing{
        background-color: transparent;
        animation:none
    }
}

#viewer_container{
    padding:0;
    margin:auto;
}

#viewer_full{
    border-radius:0.3em;
    background-color:var(--secondary-bg);
    margin:auto;
    display:grid;
    grid-template-areas:
		'image title'
        'image description'
        'overview description';
    grid-template-rows:0fr 1fr 0fr;
    align-items:stretch;
    max-height:80%;
    /* transition:width 0.5s; */
    position:relative;
    animation-name: zoom;
    animation-duration: var(--open-speed);
    animation-timing-function: cubic-bezier(0.430, 0.890, 0.510, 0.955);
}

#viewer_full:where(.left_align){
    grid-template-areas:
    'title image'
    'description image'
    'description overview';
}

#viewer_background.viewer_closing #viewer_full{
    animation: viewer_closing var(--close-speed);
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

#viewer_image_overview_parent{
    grid-area: overview;
    position:absolute;
    width:100%;
    box-sizing: border-box;
    transform: translateY(-100%);
    display:block;
    padding:0.5em;
    min-height: 4em;
    height: max-content;
    overflow:hidden;
    max-width: calc(90vw - var(--description-width));
}

#viewer_image_overview_parent.open:not(.pinned){
    min-height: 0;
    background-color: rgba(0,0,0,0.6);
    animation: height_adjust 0.2s;
}

#viewer_image_overview_parent:not(.open) #viewer_image_overview_pin{
    display: none;
}

/* repaste this code for media query */
#viewer_image_overview_parent.pinned{
    position: relative;
    transform: translateY(0);
    background-color: var(--secondary-bg);
}

#viewer_image_overview{
    height:8em;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    display:none;
    max-width: calc(90vw - var(--description-width));
}

#viewer_image_overview_parent.open > #viewer_image_overview{
    display:block;
}


#viewer_image_overview > img{
    height:100%;
    margin-right:0.5em;
    border-radius: 0.3em;
    cursor: pointer;
    box-sizing: border-box;
}

#viewer_image_overview > img.selected{
    outline: 4px solid var(--accent-clr);
    outline-offset: -4px;
}

#viewer_image_overview_options{
    position: fixed;
    right:0.5em;
    top:0.5em;
    background-color: var(--secondary-bg);
    border-radius: 0.3em;
    line-height: 1;
    padding:0.2em;
    display:flex;
    align-items: center;
}

#viewer_image_overview_parent:not(.open) #viewer_image_overview_options{
    bottom: 0.5em;
    top:unset;
}

#viewer_image_overview_options > img{
    cursor: pointer;
    height:2em;
    aspect-ratio: 1 / 1;
}

#viewer_image_counter{
    padding:0 0.4em;
}

#viewer_image_overview_parent.open #viewer_image_counter{
    display:none;
}

/* #viewer_image_counter{
    position:absolute;
    bottom:0.7em;
    left:50%;
    transform: translateX(-50%);
    display:none;
    background-color:var(--secondary-bg);
    border-radius:0.3em;
    padding:0.2em 0.4em;
} */

#viewer_image_div{
    position:relative;
    line-height:0;
    grid-area: image;
    height:100%;
    border-radius:0.3em;
    overflow:hidden;
}

#viewer_image{
    height:100%;
    width:100%;
}

#viewer_image_buttons{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height: 1.6;
    animation-name: fade-in;
    animation-duration: 0.2s;
    display:flex;
}

#viewer_image_back,
#viewer_image_next{
    height:clamp(1.3rem,5%,1.9rem);
    aspect-ratio:1 /1;
    /* width:1.9rem; */
    object-fit:contain;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color:var(--secondary-bg);
    border-radius:50%;
    padding:0.7rem;
    cursor:pointer;
}

#viewer_image_back{
    left:1rem;
}

#viewer_image_next{
    right:1rem;
}

#viewer_image_div:not(:hover) #viewer_image_counter{
    display:inline;
}

#viewer_like_animation{
    margin:auto;
    height: 5em;
    display:none;
    animation:like_animation 0.3s;
}

.viewer_like_animation{
    animation: like_button_animation 0.3s;
}

@keyframes like_animation {
    0%{
        transform: scale(60%);
    }
    60%{
        transform: scale(110%);
    }
    85%{
        transform: scale(90%);
    }
    100%{
        transform: scale(100%);
    }
}

@keyframes like_button_animation {
    0%{
        transform: scale(80%);
    }
    60%{
        transform: scale(115%);
    }
    85%{
        transform: scale(90%);
    }
    100%{
        transform: scale(100%);
    }
}

#viewer_title{
    grid-area:title;
    align-self: start;
    position: sticky;
    top: 0;
    padding:1em 1em 0.2em 1em;
    box-sizing:border-box;
    width:var(--description-width);
    display:none;
    /* align-items: center; */
}

#viewer_close{
    height:1.4em;
    width:1.4em;
    flex:0;
    cursor:pointer;
}

#viewer_back_button{
    height:2.2em;
    width:2.2em;
    flex:0;
    margin-right:0.5em;
    display:none;
    cursor:pointer;
    aspect-ratio: 1 / 1;
}

#viewer_title_text{
    flex:1;
    font-size:1.15em;
}

#viewer_description{
    grid-area:description;
    width:var(--description-width);
    color:var(--subtle-font);
    padding:0 0.5em 0.5em 0.5em;
    box-sizing:border-box;
    display:none;
    flex-direction: column;
    /* overflow:auto; */
    overscroll-behavior: contain;
    max-width: 99vw;
}

#viewer_description_text{
    flex:1;
    padding:0 0.5em;
    margin-bottom:0.5em;
    overflow:auto;
    min-height: 6em;
}

#viewer_description_text a{
    text-decoration-color: var(--subtle-font);
    color:var(--subtle-font);
}

#viewer_steps_title{
	display:none;
	flex:0;
    padding:0 0.5em;
	font-size:1.15em;
	color:white;
	margin-top:0.5em;
}


#viewer_translation_wrapper{
    display: none;
}

#viewer_translation_button{
    text-decoration: underline;
    color:var(--accent-clr);
    cursor: pointer;
}


#viewer_description_options{
    flex:0;
    display: flex;
    height:2em;
    margin:0.5em 0;
    align-items: center;
}

#viewer_description_options img,
#viewer_more_option_desktop > img{
    height:2em;
    margin-right:0.5em;
    cursor:pointer;
    aspect-ratio: 1 / 1;
    vertical-align: middle;
}

.viewer_metric[data-value]:not([data-value=""])::after {  
    content: attr(data-value);
    margin-right: 1em;
    color: var(--subtle-font);
}

#viewer_more_option_desktop{
    height: 100%;
    text-align: right;
    position: relative;
}

#viewer_more_option_desktop > div{
    position: absolute;
    bottom:100%;
    left:0;
    background-color: var(--primary-bg);
    width:max-content;
    border-radius: 0.3em;
    display: none;
    text-align: left;
}

.viewer_desktop_options > img{
    vertical-align: middle;
    height:1.7em;
    margin-right:0.3em
}

.viewer_desktop_options{
    padding:0.5em;
    padding-right: 2em;
    cursor: pointer;
    border-radius: 0.3em;
    min-width: 6em;
}

.viewer_desktop_options:hover{
    background-color: rgba(255, 255, 255, 0.1);
}



#viewer_description_abilities{
    flex:0;
    background-color: var(--tertiary-bg);
    border-radius:0.4em;
    padding:0.4em;
    line-height: 0;
    display:grid;
    grid-template-columns: repeat( auto-fit, 3em );
    place-items: center;
    gap:0.5em;
}

#viewer_description_abilities > img{
    height:3em;
    border-radius: 50%;
}

#viewer_description_abilities > div{
    line-height: 1;
}

#viewer_unlisted_alert{
    display:none;
    border-radius:0.4em;
    background-color: #E43A3A;
    color:white;
    padding:0.5em 1em;
    margin:0 0 0.5em 0;
}

#viewer_loading{
    width:120vh;
    position:relative;
    top:0px;
    left:0px;
    /* height:80vh; */
    height:100%;
    background-color:var(--tertiary-bg);
    border-radius:0.3em;
    overflow:hidden;
    margin-bottom:1em;
}


/* viewer mobile options styling */
#viewer_options_bg{
    width:100%;
    height:100vh;
    position:fixed;
    background-color: rgba(0,0,0,0.6);
    z-index:2;
    top:0;
    left:0;
}

#viewer_options{
    background-color: var(--secondary-bg);
    width:100%;
    padding-bottom:5em;
    position:absolute;
    bottom:-10vh;
    left:0;
    border-radius: 1em 1em 0 0;
    opacity:0;
}

.viewer_option{
    height:2.5em;
    display:flex;
    align-items:center;
    margin:0.5em;
    border-radius:0.4em;
    padding:0.5em;
}

.viewer_option:hover{
    background-color:var(--primary-bg);
}

.viewer_option > img{
    height:100%;
    margin-right:1em;
}

#viewer_owner_link{
    display:flex;
    height:3em;
    color:var(--subtle-font);
    text-decoration: none;
    margin-bottom: 0.5em;
}

#viewer_owner_link > img{
    height:100%;
    border-radius: 50%;
    margin-right: 0.5em;
}

#viewer_username_text{
    color:white;
    display:inline;
    text-decoration: underline;
}

#report_lineup_confirmation input{
    position: relative;
    width: 1.2em!important;
    height: 1.2em!important;
}

.report_option{
    accent-color: var(--accent-clr);
}

#viewer_report_comment{
    resize: none;
    background-color: var(--tertiary-bg);
    border-radius: 0.3em;
    width:100%;
    color:white;
    font-size: inherit;
    font-family: inherit;
    border: 2px solid var(--tertiary-bg);
    box-sizing: border-box;
    outline: none;
    height:5em;
    padding:0.5em 0.6em;
}

#viewer_report_comment:hover,
#viewer_report_comment:focus {
    border: 2px solid var(--accent-clr);
}


#setups_abilities_parent{
    display: flex;
    overflow: auto;
    min-height: min-content;
    width: max(100%, max-content);
    padding:0.1em;
    margin-bottom: 0.5em;
}

.setups_abilities{
    color:white;
    flex-shrink:0;
    border-radius: 0.3em;
    padding: 0.4em 0.6em;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.setups_abilities.selected{
    background-color: var(--tertiary-bg);
}

.setups_abilities.selected > img{
    margin-right: 0.5em;
}

@supports (gap:0.5em){
    #setups_abilities_parent{
        gap:0.5em
    }
}

@supports not (gap:0.5em){
    .setups_abilities{
        margin-left: 0.5em;
    }
}

.setups_abilities > img{
    height:2em;
    vertical-align: middle;
}

.setups_abilities > span{
    display: none;
}

.setups_abilities.selected > span{
    display: inline-block;
}




@media (max-width:1100px){
    #viewer_full{
        border-radius:0.3em;
        margin:auto;
        display:grid;
        grid-template-areas:
            'title'
            'image'
            'overview'
            'description';
        grid-template-rows:auto auto auto auto;
        max-height:auto;
        width:clamp(40ch,80%,70ch);
        
    }
    #viewer_image_div{
        height:auto;
        width:100%;
    }
    #viewer_title,
    #viewer_description{
        width:100%;
    }

    #viewer_title{
        margin-bottom:0.5em;
    }

    #viewer_description{
        margin-top:0.5em;
    }

    #viewer_loading{
        height:unset;
        width:100%;
        aspect-ratio:16/9;
    }
    #viewer_container{
        padding:5em 0;
        margin:auto;
    }
    #viewer_image_overview{
        height:5em;
    }
    #viewer_image_overview_parent,
    #viewer_image_overview{
        max-width: none;
    }
}

@media (max-width:500px){
    #viewer_full{
        width:100%;
        margin:0;
		background-color:var(--primary-bg);
        min-height: 100vh;
        grid-template-rows:max-content max-content max-content auto;
    }
    #viewer_loading{
        background-color:var(--secondary-bg);
    }
    
    #viewer_background{
        background-color: var(--primary-bg);
    }
    .setups_abilities.selected{
        background-color: var(--secondary-bg);
    }
    #viewer_container{
        padding:0;
        margin:0 auto;
    }
    #viewer_close{
        display:none;
    }
    #viewer_back_button{
        display:inline;
    }

    #viewer_description > *{
        order:2;
    }
    #viewer_description_options{
        order: 1;
        height:2.3em;
    }
    #viewer_description_text{
        margin:0 0 3em 0;
        overflow:unset;
        min-height:max-content;
    }
    #viewer_title{
        background-image: linear-gradient(var(--primary-bg) 60%, rgba(0,0,0,0) 100%) !important;
    }
	#viewer_title_text{
		font-size:1.2em;
	}
	#viewer_description_text{
		font-size:1.05em;
		margin-top:0.3em;
	}
	#viewer_description_abilities{
		background-color:var(--secondary-bg);
		padding:0.5em 1em;
		margin:0 0.5em;
	}
    #viewer_owner_link{
		margin:0.5em;
    }
	#viewer_steps_title{
		display:block;
		margin-top:0.7em;
	}
    #viewer_more_option_desktop{
        flex:1;
    }
    /* perma pin the image overview for mobile */
    #viewer_image_overview_parent{
        width:calc(100vw - 4px);
    }
    #viewer_image_overview_parent.open{
        position: relative;
        transform: translateY(0);
        background-color: var(--secondary-bg);
    }
    #viewer_image_overview_parent:not(.open){
        display:none;
    }
    #viewer_image_overview_pin{
        display:none;
    }
}