/*
    Osnova za branching
*/


$branching_settings_size: 401px;

// Layout mere - razsirjen toolbox
$branching_toolbox_size_big: 240px;
$branching_main_space_left_big: 304px;

// Layout mere - skrcen toolbox
$branching_toolbox_size_small: 40px;
$branching_main_space_left_small: 104px;

$branching_main_size_big: calc(100% - 725px);
$branching_main_size_small: calc(100% - 525px);


#placeholder{
    display: flex;
    box-sizing: border-box;

    width: 100%;
    //max-width: 1500px;

    margin: 0 0 0 0;
}

#branching {
	min-height: 400px;
    width: $branching_main_size_big;
    margin: 0 0 0 $branching_main_space_left_big;

    @media only screen and (max-width: 1200px) {
        width: $branching_main_size_small;
        margin: 0 0 0 $branching_main_space_left_small;
    }

    background-color: white;
    
	ul {
        display: flex;
        flex-direction: column;

		padding: 0;
		margin: 0;

        li {
            position: relative;
            
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: 0;
            
            list-style: none;            

            // Drop in no drop polja
            &.drop{
                height: 32px;

                &:hover{
                    .pb_new {
                        display: flex;

                        .pb_page_hover{
                            display: flex;
                        }
                    }

                    .pb_icon{
                        display: block;
                    }
                }
            }
            &.nodrop{
                height: 16px;

                &:hover{
                    .pb_new {
                        display: flex;
                    }

                    .not-permanent{

                        .pb_page{
                            display: none;
                        }
                        .pb_page_hover{
                            display: flex;
                        }
                    }    
                }
            }
            
            // Page break polje in dodajanje page breaka
            .pb_on,
            .pb_new{
                cursor: pointer;
                display: flex;
                align-items: center;

                &.pb_new{
                    height: 16px;
                }

                &.pb_new{
                    display: none;
                    height: 32px;
                }

                &.permanent{
                    cursor: default;
                }

                .pb_page{
                    display: flex;
                    align-items: center;

                    width: 140px;

                    font-size: 16px;
                    font-weight: 600;
                    line-height: 16px;

                    color: #A9A9A9;
                }

                .pb_page_hover{
                    display: none;
                    align-items: center;
                    width: 200px;

                    font-weight: 400;
                    font-size: 12px;

                    .faicon{
                        margin-right: 8px;
                        line-height: 12px;

                        &::before{
                            font-size: 12px;
                            color: $blue;
                        }
                    }
                }

                .pb_line{
                    width: 100%;
                    height: 1px;

                    border-bottom: 1px $dark-gray2 solid;
                }
                
            }
            // Brez page breaka
            .pb_off {

            }            
        }
	}

	div.spr.uni-draggable-dragging,
    li.spr.ui-draggable-dragging {
		z-index: 99999;
	}

	li.drop.branchinghover {
		background-color: $gray !important;
		a {
			display: none;
		}
	}
	li.nodrop.branchinghover {
		background-color: $gray !important;
		a {
			display: none;
		}
	}

	.variable_name {
		cursor: move;
        margin-top: -2px;
	}


    /* Okno za drop vprasanja, ko je anketa prazna */
    .empty_vrivanje {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        height: auto !important;
        box-sizing: border-box;
        margin: 32px 0 24px 0;
        padding: 60px 0;
        
        text-align: center;
        font-weight: 400;
        font-size: 18px;
        
        background: $white;
        border: 1px solid $gray;
        
        .empty_vrivanje_title {
            margin: 0 auto 32px auto;
        }
        
        .empty_vrivanje_buttons{
            display: flex;
            justify-content: center;

            button{
                margin: 0 8px;

                font-weight: 400;
            }
        }
    }
    .empty_vrivanje.branchinghover {
        background: 0 !important;
        background-color: $gray;
    }


    #bottom_icons_holder{

        .forma_bottom{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            width: 100%;
            height: auto;
            padding: 43px 0 0 0;

            .forma_bottom_inner{
                display: flex;
                align-items: center;

                padding: 0;
                margin: 0;

                button{
                    margin-left: 8px;
                }

                > span{
                    font-size: 14px;
                    color: $black;
                }

                &.changes{
                    font-size: 14px;

                    .faicon{
                        margin-right: 8px;

                        &:before{
                            color: $blue;
                            font-size: 13px;
                            font-weight: 700;
                        }
                    }
                }

                &.links{

                }
            }
        }
    }
}


.blockSwitch {
	position: relative;
	margin: 10px auto 0;
	text-align: center;
	p {
		display: inline;
		font-size: 14px;
	}
}