//@import "../../../abstracts/abstracts";

.dbqdbeec-editor {
    float: left;
    width: 100%;
    background: $modal-input-background;
    border-radius: 0 0 $border-radius-default $border-radius-default;
}

.dbscrollview {
	border: 2px solid $modal-border-color;
	border-radius: $border-radius-default;
    .dbscrollview-content {
        margin: 10px;
        overflow-y: auto;
        height: calc(100% - 20px);
    }
}

.dbqdb-expression-editor-container {
    .dbq-card {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        width: 100%;
    }
    .element-visibility-expression-add-view {
        float: left;
        width: 100%;
        padding: 10px;
        border: 2px solid $modal-border-color;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        background: $modal-label-background;
        .form-group {
            margin-bottom: 10px !important;
            select {
                background: $modal-input-background;
                border: 2px solid $modal-border-color;
            }
            .form-inline {
                clear: both;
                width: 100%;
            }
        }
        .element-visibility-expression-submit-button {
            float: right;
        }
        .element-visibility-expression-cancel-button {
            float: right;
            margin-right: 10px;
        }
        .element-visibility-expression-value {
            input[type="text"] {
                width: 100%;
            }
            input[type="checkbox"] {
                display: none;
            }
            select {
                width: 100%;
            }
        }
        .element-visibility-expression-code {
            select {
                width: 100%;
            }
            input[type="text"] {
                width: 100%;
            }
            input[type="checkbox"] {
                display: inline-block;
                width: 25px;
                height: 25px;
                margin-left: 10px;
                margin-right: 0px;
            }
        }
        .element-visibility-expression-value.expression-compare-to-input-property {
            input[type="text"] {
                width: 100%;
            }
            input[type="checkbox"] {
                display: inline-block;
                width: 25px;
                height: 25px;
                margin-left: 10px;
                margin-right: 0px;
            }
        }
    }
    .element-visibility-expression-function-button-add-container {
        background: 0;
        border: 2px solid $modal-border-color;
        border-top: 0;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        width: 100%;
        .element-visibility-expression-function-button-add {
            border-radius: 0 0 8px 8px;
            background: $modal-label-background;
            border: 0;
            box-shadow: none;
            padding: 10px;
            width: 100%;
            text-align: left;
            span {
                color: $color-primary;
                margin-left: 10px;
            }
            svg {
                fill: $color-primary;
                width: $svg-icon-size;//20px;
                height: $svg-icon-size;//20px;
            }
            &:hover {
                background: $color-primary;
                span {
                    color: #ffffff;
                }
                svg {
                    fill: #ffffff;
                }
            }
        }
    }
    .element-visibility-expressions-toolbar {
        width: 100%;
        margin: 0 15px 15px 15px;
        button {
            float: right;
        }
    }
    .element-visibility-expressions-container {
        .dbscrollview {
            float: left;
            min-height: 300px;
            max-height: 600px;
            width: 100%;
            border-radius: 0px;
        }
        .element-visibility-expression {
            float: left;
            position: relative;
            margin: 10px 5px 0px 5px;
            width: calc(100% - 10px);
            border-radius: 5px;
            padding: 7px 5px 5px 5px;
            cursor: pointer;
            min-height: 34px;
            &:nth-of-type(1) {
                margin-top: 5px;
            }
            &:nth-last-child(1) {
                margin-bottom: 5px;
            }
            &:hover {
                background-color: $color-primary;
                color: #fff;
                .element-visibility-expression-options {
                    opacity: 1;
                    transition: 0.5s;
                }
            }
            .element-visibility-expression-code {
                margin-left: 5px;
            }
            .element-visibility-expression-operator {
                float: left;
                background-color: $color-primary;
                border-color: $color-primary;
                color: #fff;
                height: 24px;
                line-height: 24px;
                padding: 0 10px;
                border-radius: 3px;
            }
            .element-visibility-expression-options {
                position: absolute;
                top: 0;
                right: 0;
                opacity: 0;
                button {
                    width: 26px;
                    height: 26px;
                    margin: 4px 5px 2px 0;
                }
            }
        }
        .element-visibility-expression.active {
            background-color: $color-primary;
            color: #fff;
        }
        .element-visibility-expression[data-expression-level="1"] {
            padding-left: 0px;
        }
        .element-visibility-expression[data-expression-level="2"] {
            padding-left: 15px;
        }
        .element-visibility-expression[data-expression-level="3"] {
            padding-left: 30px;
        }
        .element-visibility-expression[data-expression-level="4"] {
            padding-left: 45px;
        }
        .element-visibility-expression[data-expression-level="5"] {
            padding-left: 60px;
        }
        .element-visibility-expression[data-expression-level="6"] {
            padding-left: 75px;
        }
        .element-visibility-expression[data-expression-level="7"] {
            padding-left: 90px;
        }
        .element-visibility-expression[data-expression-level="8"] {
            padding-left: 105px;
        }
        .element-visibility-expression[data-expression-level="9"] {
            padding-left: 120px;
        }
        .element-visibility-expression[data-expression-level="10"] {
            padding-left: 135px;
        }
        .element-visibility-expression[data-expression-level="11"] {
            padding-left: 150px;
        }
        .element-visibility-expression[data-expression-level="12"] {
            padding-left: 165px;
        }
        .element-visibility-expression[data-expression-level="13"] {
            padding-left: 180px;
        }
        .element-visibility-expression[data-expression-level="14"] {
            padding-left: 195px;
        }
        .element-visibility-expression[data-expression-level="15"] {
            padding-left: 210px;
        }
        .element-visibility-expression[data-expression-level="16"] {
            padding-left: 225px;
        }
        .element-visibility-expression[data-expression-level="17"] {
            padding-left: 240px;
        }
        .element-visibility-expression[data-expression-level="18"] {
            padding-left: 255px;
        }
        .element-visibility-expression[data-expression-level="19"] {
            padding-left: 270px;
        }
        .element-visibility-expression[data-expression-level="20"] {
            padding-left: 285px;
        }
        .element-visibility-expression[data-expression-level="21"] {
            padding-left: 300px;
        }
        .element-visibility-expression[data-expression-level="22"] {
            padding-left: 315px;
        }
        .element-visibility-expression[data-expression-level="23"] {
            padding-left: 330px;
        }
        .element-visibility-expression[data-expression-level="24"] {
            padding-left: 345px;
        }
        .element-visibility-expression[data-expression-level="25"] {
            padding-left: 360px;
        }
        .element-visibility-expression[data-expression-type="2"] {
            .element-visibility-expression-options {
                .element-visibility-expression-function-button-add {
                    display: none;
                }
            }
        }
    }
    .selected-element-visibility-expressions-container {
        .element-visibility-expression {
            .element-visibility-expression-function-button-add {
                display: none;
            }
        }
    }
    .available-element-visibility-expressions-container {
        .element-visibility-expression {
            .element-visibility-expression-function-button-remove {
                display: none;
            }
        }
    }
}