/* WPB Editor */

@import '../theme/mixins';
@import '../theme/direction';

/* WPBakery Editor Style */
#vc_inline-frame-wrapper {
    background-color: #222;
}
.vc_editor #vc_inline-frame {
    transition: width .3s;
}
.vc_edit_form_elements .vc_column+.vc_column, .vc_edit_form_elements .vc_column-with-padding {
    padding-top: 20px;
}
// Edit Form
#vc_ui-panel-edit-element.vc_active {
    .vc_ui-panel-header-content {
        position: absolute;
        #{$left}: 0;
        bottom: 84px;
        top: 57px;
        z-index: 1;
        width: 200px;
        background: #1c9ad8;
        overflow-y: auto;

        .vc_ui-tabs-line {
            > li {
                float: none;
                .vc_ui-tabs-line-trigger {
                    width: 100%;
                    border-radius: 0;
                }
            }
        }
    }
    .vc_ui-panel-content-container {
        margin-#{$left}: 200px;
    }
    .vc_ui-tabs-line .vc_ui-tabs-line-dropdown {
        position: static;
        display: block;
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .vc_general.vc_ui-tabs-line .vc_ui-tabs-line-dropdown-toggle > .vc_ui-tabs-line-trigger {
        display: none;
    }
    .vc_ui-tabs-line-dropdown-toggle {
        width: 100%;
        .vc_ui-tabs-line-trigger {
            color: #fff;
        }
        .vc_edit-form-tab-control {
            .vc_ui-tabs-line-trigger {
                padding: 15px 10px;
                font-size: 14px;
                font-weight: 400;
                color: #fff;
                &:hover {
                    background-color: #0473aa;
                }
            }
            &.vc_active {
                .vc_ui-tabs-line-trigger {
                    background: #fff;
                    color: #222;
                }
            }
        }
    }
    .vc_ui-panel-content-container .vc_ui-panel-content {
        min-height: 30vh;
        overflow-y: auto;
    }
}

// Input
.vc_ui-panel-window {
    .vc_properties-list input {
        padding-#{$left}: 15px;
    }
}
.vc_properties-list input,
.vc_properties-list select {
    max-width: 400px;
    border-color: #ccc;
}
.vc_properties-list select {
    padding-#{$left}: 15px;
}
.vc_properties-list textarea {
    padding-#{$left}: 15px;
    border-color: #ccc;
}
.vc_shortcode-param .vc_autocomplete-field .vc_autocomplete {
    padding-left: 12px;
    padding-right: 12px;

    li.vc_autocomplete-label {
        padding: 4px 8px;

        .vc_autocomplete-remove {
            top: 7px;
        }
    }
}
.vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value,
.vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value option,
.vc_shortcode-param[data-param_type="riode_dropdown"] select.riode-wpb-dropdown,
.vc_shortcode-param[data-param_type="riode_dropdown"] select.riode-wpb-dropdown option,
.vc_shortcode-param[data-param_type="riode_dropdown_group"] select.wpb_vc_param_value,
.vc_shortcode-param[data-param_type="riode_dropdown_group"] select.wpb_vc_param_value {
    padding-#{$left}: 15px;
}

.vc_shortcode-param input[disabled] {
    background: #f1f1f1;
}

.wpb_edit_form_elements {
    .wp-color-result-text {
        padding: 0 10px;
    }
    // Checkbox
    .vc_checkbox-label {
        color: rgba(0,0,0,0);
    }
    .wpb_vc_param_value.checkbox {
        display: inline-block;
        position: relative;
        margin-#{$right}: 10px;
        width: 50px;
        height: 30px;
        border-radius: 15px;
        background: #ccc;
        box-shadow: none;
        border: none;
        margin-#{$left}: 0;
        transition: background .3s;
        &:checked {
            background: #0473aa;
        }
        &:checked::before {
            content: '';
            margin: 0;
            height: 26px;
            width: 26px;
            transform: translateX(20px);
        }
        &::before {
            content: '';
            display: block;
            width: 26px;
            height: 26px;
            background: #fff;
            border-radius: 50%;
            #{$left}: 2px;
            top: 2px;
            position: absolute;
            transition: transform .3s, background .3s;
        }
    }

    // Riode Button Group
    .riode-wpb-button-group {
        .options-wrapper {
        display: flex;
            margin: 0;
            flex-wrap: wrap;

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1px;
            padding: 0 15px;
            min-width: 50px;
            height: 40px;
            background-color: #eee;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: color .3s, background-color .3s;
            &:first-child {
                border-radius: corner-values(6px 0 0 6px);
            }
            &:last-child {
                border-radius: corner-values(0 6px 6px 0);
            }
            &.active {
                background-color: #0473aa;
                color: #fff;
            }
        }
        }

        &.icon-button {
            .options-wrapper li {
                min-width: 40px;
                padding: 0;
            }
        }

        &.color-button {
            .options-wrapper li {
                min-width: 24px;
                height: 24px;
                margin: 3px;
                padding: 0;
                border: 2px solid #eee;
                border-radius: 4px !important;
                transition: border-color .3s;

                &.active {
                    border-color: #666;
                }
            }
        }

        &.image-button {
            .options-wrapper li {
                width: 600px;
                height: auto;
                border-radius: 3px;
                background: none;
                border: 1px solid #e1e1e1;
                padding: 8px;
                margin: 5px;

                img {
                    display: block;
                    width: 100%;
                }

                &.active {
                    background: #0473aa;
                }
            }
        }
    }
    .attr-icon-square {
        &::before {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            border: 2px solid;
            vertical-align: middle;
        }
    }
    .attr-icon-rounded {
        &::before {
            content: '';
            display: inline-block;
            width: .9em;
            height: .9em;
            border: 2px solid;
            border-radius: 5px;
            vertical-align: middle;
        }
    }
    .attr-icon-ellipse {
        &::before {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            border: 2px solid;
            border-radius: 50%;
            vertical-align: middle;
        }
    }
    // Dimension
    .riode-wpb-dimension-container {
        display: flex;
        align-items: center;
        max-width: 400px;
        .riode-wpb-dimension-wrap {
            flex: 1;
            text-align: center;
            &:not(:first-child) {
                margin-#{$left}: 10px;
            }
        }
    }
    // Number
    .riode-wpb-number-container {
        display: flex;
        align-items: center;
        max-width: 400px;
    }
    .riode-wpb-number {
        flex: 1;
        max-width: 100%;
    }
    .riode-wpb-units {
        max-width: 80px;
        margin-#{$left}: 10px;
        padding-#{$left}: 10px;
        background-position-y: 54%;
    }
    // Responsive Control
    .riode-responsive-control {
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-top: 7px;
        .riode-wpb-number {
            max-width: 400px;
            min-width: 250px;
        }
        .riode-responsive-dropdown {
            position: absolute;
            margin: 0;
            #{$right}: 0;
            top: -28px;
            &.show {
                .riode-responsive-span {
                    top: calc(100% + 5px);
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .riode-responsive-toggle {
                cursor: pointer;
                font-size: 16px;
            }
        }
        .riode-responsive-span {
            display: flex;
            align-items: center;
            position: absolute;
            #{$right}: -10px;
            top: -9999px;
            opacity: 0;
            transition: opacity .3s, transform .3s;
            transform: translateY(-5px);
            margin: 0;
            padding: 5px;
            background: #222;
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
            li {
                padding: 0 7px;
                margin-bottom: 0;
                cursor: pointer;
                transition: color .3s;
                &:hover {
                    color: #0473aa;
                }
                &:nth-child(1) {
                    font-size: 16px;
                }
                &:nth-child(2) {
                    font-size: 15px;
                }
                &:nth-child(3) {
                    font-size: 15px;
                }
                &:nth-child(4) {
                    font-size: 12px;
                }
                &:nth-child(5) {
                    font-size: 12px;
                }
            }
            &::before {
                content: '';
                position: absolute;
                #{$right}: 13px;
                top: -4px;
                border-bottom: 5px solid #222;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
        }
    }
    // Typography Control
    .riode-wpb-typography-container {
        max-width: 400px;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
        overflow: hidden;
        &.show {
            .riode-wpb-typography-toggle::after {
                transform: translateY(-50%) rotateZ(540deg);
            }
        }
    }
    .riode-wpb-typography-controls {
        display: flex;
        flex-wrap: wrap;
        max-width: 410px;
        padding: 10px;
        margin-left: -5px;
        margin-right: -5px;
        box-sizing: border-box;
        .riode-wpb-typoraphy-form {
            margin-bottom: 10px;
            padding-left: 5px;
            padding-right: 5px;
            flex: 0 0 100%;
            max-width: 100%;
            box-sizing: border-box;

            input {
                min-height: 46px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            &.cols-2 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
    }
    .riode-wpb-typography-toggle {
        display: flex;
        position: relative;
        padding: 0 10px;
        color: #0473aa;
        font-weight: 500;
        cursor: pointer;
        &::after {
            content: '\f107';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: transform .4s;
            #{$right}: 15px;
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            font-weight: 900;
            font-size: 14px;
        }
    }
}

/* Color Group Control */
.riode-wpb-color-group {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    margin-top: 25px;
    padding: 15px;

    .nav-tabs {
        display: flex;
        margin-top: -35px;
    }

    .nav-link {
        text-decoration: none;
        border: 1px solid #e1e1e1;
        padding: 8px 15px;
        margin-#{$right}: 5px;
        border-radius: 5px;
        color: #333;
        display: block;
        background: #fff;

        &.active {
            background: #333;
            color: #fff;
            border-color: #333;
        }

        &:focus {
            box-shadow: none;
        }
    }

    .tab-content {
        position: relative;
    }

    .tab-pane {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        transition: opacity .3s, visibility .3s, position .3s, transform .3s;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        top: 0;
        #{$left}: 0;

        &.active {
            position: static;
            visibility: visible;
            opacity: 1;
            transform: none;
        }
    }

    .color-group-wrapper {
        margin-#{$right}: 20px;

        > label {
            display: block;
            margin-bottom: 5px;
        }
    }
}

// WP Bakery's riode studio button
.vc_navbar-nav .riode-mini-logo {
    &::before {
        content: "";
        display: block;
        box-shadow: -2px 2px 0 6px;
        width: 8px;
        height: 8px;
        transform: rotate(45deg) scale(0.9);
    }
    &::after {
        position: absolute;
        #{$left}: 0;
        top: -10px;
        content: "!";
        display: inline-block;
        vertical-align: middle;
        font-size: 1.2em;
        transform: translate(15px,-8px);
        color: #fff;
        animation: fade-in 2s infinite linear;
    }
}
.vc_navbar-nav {
    .riode-wpb-addons {
        position: relative;

        &:hover {
            .riode-addons-dropdown {
                display: block;
            }
        }

        .riode-wpb-addons-trigger {
            background: #036291;
        }
    }

    .riode-addons-dropdown {
        position: absolute;
        top: 100%;
        #{$left}: 0;
        width: auto;
        white-space: nowrap;
        background: #036291;
        z-index: 1000;
        display: none;

        li {
            margin-bottom: 0;
        }
    }

    .riode-wpb-addon-item {
        display: flex;
        align-items: center;
        padding: 16px;
        color: #fff;
        cursor: pointer;
        transition: color .3s, background .3s;
        font-weight: 600;

        i {
            font-size: 20px;
            margin-#{$right}: 10px;
        }

        &:hover {
            color: #fff;
            background: #f3af1c;
        }
    }
}

@keyframes appearAlert {
    from {
        transform: translateX( 200px );
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.wpb-alert {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 20px;
    font-size: 16px;
    font-weight: 700;
    animation: appearAlert cubic-bezier(0, 0.31, 0.65, 0.99) 0.5s;
    border-radius: 3px;
    cursor: pointer;

    &.wpb-alert-success {
        background: #d8edc7;
        color: #8a987e;
    }

    &.wpb-alert-fail {
        background: #f6d6d5;
        color: #6d1a17;
    }
}

.riode-logo-icon {
    position: relative;
    &::before {
        content: '';
        display: block;
        top: 50%;
        #{$left}: 0;
        width: 25%;
        height: 25%;
        background: #fff;
        box-shadow: -5px 5px 0 9px #26b;
        transform: rotateZ(45deg) translate(23px,-4px);
    }
    
    &::after {
        content: attr(title);
        font-size: 12px;
        font-style: normal;
        font-family: 'Poppins';
        font-weight: 400;
        white-space: nowrap;
        position: absolute;
        top: -31px;
        #{$left}: 20px;
        color: #999;
    }
    &.vc_element-icon {
        background-image: none;
    }
}

/* Riode Heading Control */
.wpb_el_type_riode_heading {
    .riode-wpb-heading-container {
        margin: 0;
    }
}

/* Riode Accordion Header */
.wpb_el_type_riode_accordion_header {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 18px;
    color: #222;
    cursor: pointer;

    .vc_edit_form_elements .vc_panel-tabs & {
        padding: side-values(15px 30px 15px 15px);
        background: #eee;
    }

    .wpb_element_label {
        margin-bottom: 0;
        font-size: 16px;
        font-weight: 400;
    }

    &::before,
    &::after {
        content: "\f28f";
        font-family: 'riode';
        position: absolute;
        #{$right}: 20px;
        top: 35%;
        font-size: 24px;
    }

    &::after {
        transition: transform .2s;
        transform: rotate(90deg);
    }

    &.opened::after {
        transform: none;
    }

    ~ .vc_column:not(.wpb_el_type_riode_accordion_header) {
        padding-left: 30px;
        padding-right: 30px;
        display: none;
    }

    ~ .vc_column:last-child {
        margin-bottom: 15px;
    }

    ~ .vc_column.show {
        display: block;
    }

    .vc_column ~ & {
        margin-top: 10px;
    }
    .vc_column.show + & {
        margin-top: 40px;
    }

    + .vc_column.show {
        margin-top: 15px;
    }
}

/* WPB Header Builder */
.wpb-riode-header-builder {
    .wpb_column_container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .vc_row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .wpb_vc_column {
        padding-left: 10px;
        padding-right: 10px;

        > .wpb_element_wrapper {
            margin-bottom: -15px;
        }
    }

    .wpb_column_container > div {
        margin: side-values(0 15px 15px 0);
    }
}

/* WPB Carousel */
.wpb_wpb_riode_carousel {
    > .wpb_element_wrapper > .vc_container_for_children {
        display: flex;

        &:not(.vc_empty-container)::before, &:not(.vc_empty-container)::after {
            content: none;
        }

        > * {
            margin-top: 0;
            flex: 1;
        }
    }
}

// Responsive Control
.riode-wpb-responsive-container {
    ul {
        display: inline-flex;
        align-items: flex-end;
        li {
            text-align: center;
            &:not(:last-child) span {
                border-#{$right}: none;
            }
            span {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                margin-top: 5px;
                min-width: 50px;
                height: 35px;
                border: 1px solid #e1e1e1;
                &::after {
                    content: "\f06e";
                    font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
                    font-weight: 900;
                    position: absolute;
                    top: 0;
                    #{$left}: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    color: #222;
                }
                &.hide {
                    &::after {
                        content: "\f070";
                        color: #ccc;
                    }
                }
            }
        }
    }
    .vc-c-icon-layout_default,
    .vc-c-icon-layout_landscape-tablets,
    .vc-c-icon-layout_portrait-tablets {
        font-size: 17px;
    }
}

// WPB Default CSS Editor
.vc_css-editor {
    .vc_layout-onion {
        margin-bottom: 20px;
    }
    .vc_col-xs-5 {
        min-width: 350px;
    }
    .wp-picker-input-wrap:not(.hidden) {
        display: inline-flex;
    }
    .vc_settings .color-group .wp-picker-container .wp-picker-holder {
        #{$left}: 0;
    }
}

/* Riode datepicker */
.riode-datetime {
    .add-on {
        font-size: 18px;
        line-height: 1em;
        border: 1px solid #AFAFAF;
        border-radius: corner-values(0 5px 5px 0);
        background: #E6E6E6;
        margin-#{$left}: -1px;
        margin-top: 1px;
        display: inline-block;
        padding: 7px;
        position: relative;
        top: 2px;
        cursor: pointer;
    }
    
    input.wpb_vc_param_value.datetime.datetimepicker:read-only {
        border: 1px solid #AFAFAF;
    }
}

// Riode WPB Dropdown
.riode-wpb-dropdown {
    min-width: 350px;
}

// Admin Label
.vc_admin_label {
    word-break: break-all;
}

.vc_shortcodes_container>.controls_column {
    position: relative;
    z-index: 1;
}