@import "_Sizes.scss";

.divided-content {
    $divided-content-main-width: 70%;
    $divided-content-side-width: 30%;
    $divided-content-side-border-width: 2px;
    $divided-content-main-width-documents: 60%;
    $divided-content-side-width-documents: 40%;

    transition: all 1s ease;
    height: 100%;
    margin-right: -15px;
    margin-left: -15px;

    & > div {
        height: 100%;
    }

    .divided-content-main {
        background-color: $content-background-color;
        transition: width 500ms, max-width 500ms, min-width 500ms;
        position: relative;
        width: calc(100% - #{$divided-content-side-border-width});
        float: left;
        padding-right: 20px;
        padding-left: 20px;
        overflow: hidden;
        overflow-y: auto;

        &.p-r-md {
            padding-right: 40px;
        }

        &.overflow-visible {
            overflow: visible;
        }

        &.divided-content-main-documents {
            width: $divided-content-main-width-documents;
        }

        @media (max-width: $max-screen-sm) and (min-width:$min-screen-sm) {
            display: flex;
            flex-direction: column;
        }

        &.divided-content-full {
            min-width: 100%;
            max-width: 100%;
        }

        .divided-content-scrollable {
            max-height: calc(100vh - 320px);
            overflow-y: auto;
            overflow-x: hidden;
        }

        .divided-content-toggle {
            position: absolute;
            top: 120px;
            right: 0;
            transform: translate(100%, -50%);
            margin-right: 32px;
            display: block;
            height: 70px;
            line-height: 70px;
            min-width: 34px;
            text-align: center;
            background-color: $accent-color;
            @include text-unselectable();
            cursor: pointer;
            color: $icon-color;
            padding-left: 9px;
            padding-right: 9px;
            transition: all 200ms linear;
            z-index: 13;

            @media (max-width: $max-screen-xs) {
                position: fixed;
                top: 145px;
                margin-top: 54px;
            }

            i {
                font-size: 22px;
                vertical-align: middle;
                text-align: center;
            }

            span {
                margin-left: 9px;
            }

            &:hover {
                @media (pointer:fine) {
                    margin-right: 0;
                    transform: translate(0%, -50%);
                }
            }
        }
    }

    .divided-content-side {
        transition: width 500ms, max-width 500ms, min-width 500ms;
        width: $divided-content-side-border-width;
        float: right;
        border-left: $divided-content-side-border-width solid $divider-color;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 12;
        position: relative;

        &.border-top {
            border-top: $divided-content-side-border-width solid $divider-color;
        }

        & > .tab-content {
            height: calc(100% - 47px);
            overflow: auto;
        }

        &.divided-content-side-documents {
            width: $divided-content-side-width-documents;
        }

        .divided-content-resizer {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0px;
            width: 5px;
            z-index: 13;
            -webkit-touch-callout: none; /*for mobile*/
            -webkit-user-select: none; /*for chrome*/
            -khtml-user-select: none; /*for safari*/
            -moz-user-select: none; /*for Mozilla*/
            -ms-user-select: none; /*for mircosoft*/
            -o-user-select: none; /*for opera*/
            user-select: none; /*base css ,but not work in all browsers*/
            &:hover {
                background-color: rgba(113, 113, 113, 0.10);
                cursor: col-resize;
            }
        }

        .tabs-container {
            .horizontal-menu {
                margin: 0;
                padding: 0;

                a {
                    margin: 0;
                }
            }
        }

        .tab-content {
            padding: 0 15px;
        }

        input {
            padding-right: 3px;
            padding-left: 3px;
        }

        select {
            padding-right: 0;
            padding-left: 0;
        }

        h4.form-control {
            padding-right: 3px;
            padding-left: 3px;

            &.connectionContainer {
                padding-right: 15px;
                padding-left: 15px;
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    }

    .divided-content-resize-backdrop {
        position: fixed;
        z-index: 10000;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    &.divided-content-side-closed {
        .divided-content-main {
            $width: calc(100% - #{$divided-content-side-border-width});
            width: $width !important;
            position: relative;
            right: 0px;
        }

        .divided-content-side {
            width: $divided-content-side-border-width !important;
            padding: 0;
            overflow: hidden;
        }
    }

    &.divided-content-side-opened {
        .divided-content-main {
            $width: $divided-content-main-width;
            width: $width;
            position: relative;
            right: 0px;

            @media (max-width: $max-screen-sm) {
                width: 100% !important;
            }
        }

        .divided-content-side {
            width: $divided-content-side-width;
            padding: 0;
            overflow: hidden;

            @media (max-width: $max-screen-sm) {
                position: absolute;
                right: -15px;
                height: calc(100% - 47px);
                width: calc(100% + 30px) !important;
                background-color: $content-background-color;
            }
        }
    }

    .hr-dashed {
        margin-left: -15px;
        margin-right: -15px;
        border: 0;
        border-top: 1px dashed $divider-color;
        display: inline-block;
        width: calc(100% + 30px);
    }
}
