@import "../../../../../assets/css/abstracts/custom-variables.scss";

#ul-data {
	position: relative;
	top: -60px;
	display: inline-block;
	margin-left: 10%;
	width: 30%;
	margin-right: 6%;
}

#chart-container-outer {
	display: inline-block;
	overflow: hidden;
	width: 100%;
	min-height: 80vh;
    border: 1px solid $gray-200;
}

#chart-container {
	display: inline-block;
    background-color: $gray-200;

	/* Width of this element is set using javascript, see includes/org_chart_chart_view.html */
}

#ul-data li {
	font-size: 32px;
}

.orgchart {
	margin: auto;
	display: block;
	background-image: none;
	background-color: $gray-200;
	padding: 0;
    height: 0;

    table {
        border-collapse: initial;
    }

    &:hover, td:hover {
        cursor: move;
    }

	.node {
		margin: 0 10px;
		width: 270px;
		padding: 0.35rem;
        background-color: #fff;
        border: 4px solid #fff;
        border-radius: var(--theme-rounded-corners);
        box-shadow: var(--theme-card-shadow);

        &:hover, &.focused, {
            background-color: #fff;
        }

		.title {
			display: none;
		}

		.content {
            height: 100%;
            border: none;
            margin-bottom: 0;


            .orgchart-user-photo {
                width: 50px;
            }

			.oc-person-role, .oc-person-name {
				color: black;
                text-align: left;
				overflow: auto;
				text-overflow: initial;
				white-space: pre-wrap;
				word-wrap: break-word;
				word-break: break-word;
			}

			.oc-person-name {
				font-size: 16px;
				font-weight: 500;
			}

			.oc-person-role {
                margin-top: 2px;
				font-size: 15px;
				font-weight: 400;
			}

            //styling for extra profile fields
            .org-chart-profile-fields-list-group {
                font-size: 15px;

                .org-chart-profile-field-list-item {
                    &-title, &-value {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                    }
                }
            }
		}

        .toggleBtn {
            left: -28px;
            z-index: 9999;
        }
	}

    // Hides user profile button unless org chart card is hovered
    .org-chart-view-user {
        visibility: hidden;
        opacity: 0;
        transition: 0.3s;
    }

    .org-chart-profile-wrapper:hover {
        .org-chart-view-user {
            visibility: visible;
            opacity: 1;
            transition: 0.3s;
        }
    }

	tr.lines {
		td.topLine {
			border-top: 3px solid $gray-400;
		}

		td.rightLine {
			border-right: 2px solid $gray-400;
			float: none;
			border-radius: 0px;
		}

		td.leftLine {
			border-left: 2px solid $gray-400;
			float: none;
			border-radius: 0px;
		}

		.downLine {
			background-color: $gray-400;
			margin: -3px auto 0;
			height: 20px;
			width: 4px;
			float: none;
		}
	}

    //VERTICAL NODES
    .verticalNodes {
        margin-top: -3px;
        display: block;

        .node {
            margin: 0px 0px 0px 30px;
        }

        ul:first-child {
            margin-top: 11px;

            > li {
                margin-left: 122px;
            }
        }

        > td > ul > li:first-child::before {
            top: -13px;
            height: 37px;
            width: calc(50% - 64px);
        }

        ul > li::before {
            width: 36px;
        }

        ul > li:not(:first-child)::before {
            top: -9px;
            border-width: 0 0 4px 4px;
        }

        ul > li {
            margin-top: 10px;
        }

        ul > li > ul {
            padding-left: 48px;

            li:first-child {
                &::before {
                    top: -10px;
                    height: 31px;
                }

                &::after {
                    top: 17px !important;
                }
            }
        }

        ul > li:first-child::after, ul > li::before {
            width: 36px;
        }

        ul > li::after, ul > li::before, > td::before {
            border-color: $gray-400;
        }

        > td::before {
            border-width: 2px;
        }

        > td > ul > li:first-child::before, ul > li:first-child::after{
            border-width: 4px 0 0 4px;
        }

        ul > li:last-child::after {
            border-width: 4px 0 0 !important;
        }

        ul > li::before, ul > li::after{
            border-width: 0 0 4px 4px;
        }


        ul.list-group > li.list-group-item::before,
        ul.list-group > li.list-group-item::after {
          border: none;
        }
    }

    .oci-minus-circle::before, .oci-minus-square::before,
    .oci-plus-circle::before, .oci-plus-square::before{
        width: 1.1rem;
        height: 1.1rem;
        line-height: normal;
        border-radius: 0.2rem;
    }
}

.oc-export-btn {
    position: relative;
	right: auto;
    top: auto;
}

.hover-link-button {
	position: absolute;
	right: 10px;
	top: 10px;
	border: none;
	display: none;

	.btn {
		border: 0px;
	}
}
