/* 
    Popupi - splosno
*/


/* Popup info box (ki se pojavi npr. ob nastavitvi in ne na fade podlagi) */
@mixin popup_info() {
    padding: 16px;
	
    background-color: $white;
    box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.25);
	
    h2{
        width: 100%;
        margin-top: 3px;
        margin-bottom: 16px;
        padding-bottom: 8px;

        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;

        border-bottom: 1px $gray solid;
    }

	span, 
    p{
		display: block;
		padding-bottom: 16px;

        &:last-child{
            padding-bottom: 0;
        }
	}

	a{
		font-weight: 500;
	}

    &.warning_popup{

        h2::before{
            padding-right: 8px;

            font-family: $fontawesome;
            content: "\f071";

            font-size: 14px;
            color: $yellow;
        }   
    }
}


/* Standarden popup, ki se pojavi na fade podlagi */
@mixin popup_general() {
    /*max-height: 90vh;
    overflow-y: scroll;*/
    max-width: 90vw;

    padding: 16px;

    font-size: 16px;
    line-height: 20px;

    background-color: white;

    .popup_close{
        position: absolute !important;
        top: 10px;
        right: 10px;
        z-index: 9999;

        font-size: 12px !important;
        color: $very-dark-gray;

        &:hover{
            color: $black;
        }

        a{
            color: $very-dark-gray;
            text-decoration: none;
            
            &:hover{
                color: $black;
            }
        }
    }

    h2,
    .divPopUp_top{
        width: 100%;
        margin-bottom: 16px;
        padding-bottom: 8px;

        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;

        border-bottom: 1px $gray solid;

        margin-block-start: 0;

        span.faicon,
        span.fa-brands {
            margin-right: 6px;

            color: $blue;

            &:before{
                font-size: 14px;
            }
        }
    }

    p{
        line-height: 20px;
    }

    .popup_note{
        margin-bottom: 16px;
        padding: 8px;

        font-size: 16px;

        border: 1px $dark-gray solid;
    }

    .popup_main{
        display: flex;
        flex-direction: column;

        border-bottom: 1px $dark-gray solid;

        &.with_menu{
            flex-direction: row;
        }

        .popup_left{
            box-sizing: border-box;

            width: 216px;
            min-width: 216px;
            padding-right: 16px; 
            padding-bottom: 16px;
            margin-right: 16px; 

            border-right: 1px $dark-gray solid;

            .list{
                display: flex;
                flex-direction: column;

                .list-item{
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;

                    box-sizing: border-box;
                    padding: 8px;
                    margin-bottom: 8px;

                    font-size: 14px;

                    border: 1px $gray solid;
                    border-radius: 2px;

                    transition: 0.2s;
                    
                    &.active,
                    &:hover{
                        background-color: $light-gray;
                        border-color: $blue;
                    }

                    .profile_icons a{
                        margin-left: 8px;
                    }
                }
            }

            button{
                display: flex;
                align-items: center;

                width: 100%;
                font-weight: 400;

                .faicon{
                    font-size: 12px;
                    line-height: 14px;

                    &::before{
                        margin-right: 8px;
    
                        font-size: 14px;
                        color: $blue;
                    }
                }
            }
        }

        .popup_right{
            overflow-y: auto;
            max-height: 70vh;
            width: 100%;

            .popup_right_note{
                margin-bottom: 16px;
                font-size: 16px;
            }
        }

        fieldset{
            display: flex;
            flex-direction: column;

            padding: 16px 0 0 0;
            margin-bottom: 16px;

            border: 0;
            border-top: 1px $gray solid;

            legend{
                padding: 0 8px 0 0;
                font-size: 14px;
            }
        }

        span{
            font-size: 14px;
        }

        .setting_line{
            margin-bottom: 8px;

            font-size: 14px;

            &:last-of-type{
                margin-bottom: 0;
            }

            label,
            span{
                font-size: 14px;
            }
        }

        .settings_block{
            display: flex;
            flex-direction: column;

            margin-bottom: 16px;

            label,
            span{
                font-size: 14px;
            }
        }
    }

    .button_holder{
        justify-content: end !important;

        margin: 20px 0 0 0;

        button:last-child{
            margin-right: 0;
        }
    }

    &.warning_popup{

        h2::before{
            padding-right: 8px;

            font-family: $fontawesome;
            content: "\f071";

            font-size: 14px;
            color: $yellow;
        }   
    }
}


.divPopUp {
    @include popup_general();
}

.divPopUp_info{
    @include popup_info();
}


#fade {
	display: none;
	position: fixed;
    z-index: 79;
    
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    .popup_holder{
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        #fullscreen {
            display: none;
            position: relative;
            z-index: 81;

            .divPopUp {
                display: block !important;
            }
        }
    
        /* basic popup */
        .divPopUp {
            display: none;

            position: relative;
        }
    }    
}