/* ****************************************************************************
 * MODULES: ADVANCED TOOLS
 */

@import "../common/mixins";

/* General tab */
.wpmud .box-advanced-general #cart_fragments_desc .sui-notice {
    margin-top: 10px;
}

/* Database cleanup tab */
.wpmud .box-advanced-db .wphb-border-frame {
    margin-top: 30px !important;

    .table-header,
    .table-row {
        padding: 20px 30px;

        @include bp(tablet) {
            padding: 15px 0;
        }
    }

    .table-header {
        @include bp(tablet) {
            padding: 15px 0 0;
        }
    }

    .table-header div {
        flex-basis: 20px;
    }

    .table-header div:first-child,
    .table-row div:first-child {
        flex-basis: 150px;
    }

    .table-row {
        div {
            height: 20px;
            font-size: 13px;
            line-height: 20px;

            &:first-child {
                color: #333;
                font-weight: 500;
            }

            &:last-child {
                display: flex;
                align-items: center;
            }
        }

        .sui-icon-info {
            font-size: 16px;
            margin-left: 10px;

            &:hover:before { color: #aaa; }
            &:before { vertical-align: middle; }
        }

        .sui-icon-loader {
            width: 30px;
            height: 30px;
            text-align: center;
            vertical-align: middle;
        }

        .wphb-db-row-delete:hover .sui-icon-trash:before {
            color: #FF6D6D;
        }
    }

    .sui-box-footer {
       border-top: none;
        @include bp(tablet) {
            padding: 20px 0;
        }
    }
}

/* Lazy Load Tab */
.wpmud .box-advanced-lazy {

    .sui-border-frame.sui-toggle-content {
        margin-bottom: 15px;
    }

    #wphb-load-method-desc {
        margin-bottom: 10px;
    }
    #button-style-header {
        color: #aaa;
        display: block;
        font-size: 12px;
        font-weight: 500;
        margin-top: 30px;
    }
    #wphb-button-styling {
        button.sui-tab-item {
            font-size: 12px;
        }
    }
    #button-width-block-label {
        margin-top: 28px;
    }

    #tab-content-btn-color {
        div.sui-form-field {
            padding-left: 0;
        }
    }

    #align-options {
        .sui-tab-item {
            padding: 9px 12px;
            .icon-align {
                font-size: 16px;
            }
            &.active {
                .icon-align {
                    &:before {
                        color: #17A8E3;
                    }
                }
            }
        }
    }
    #lazy_load-limit {
        .sui-label-note {
            font-weight: 500;
        }
    }
    #sui-upsell-gravtar-caching {
        margin-left: 44px;
    }
}

.wpmud .sui-wrap:not(.sui-color-accessible) .box-advanced-lazy {
    .sui-upsell-row {
        .sui-upsell-notice {
            p {
                border-left: 2px solid #17A8E3;
                &:first-of-type::before {
                    color: #17A8E3;
                }
            }
        }
    }
}

/* System information tab */
.wpmud .box-advanced-system-info,
.wpmud .box-advanced-site-health {
    .sui-table {
        &.wphb-sys-info-table {
            border: none;
            tr {
                height: 40px;
                &:nth-child(odd){
                    border-radius: 4px;
                    background-color: #FAFAFA
                }
                td {
                    height: 40px;
                    padding: 5px 20px;
                    border-bottom: none;
                    border-radius: 4px;
                    &:first-child {
                        color: #333;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

/* Health page tab */
.wpmud .sui-wrap .box-advanced-site-health {
    .wphb-sys-info-table tr td:first-child {
        font-weight: 400;
        width: 40%;

        @include bp(phone-large) {
            width: 60%;
        }

        strong {
            font-weight: 500;
        }
    }

    .sui-col-sm-9 {
        h4 {
            font-weight: 500;
            margin-bottom: 0;
        }
        .sui-description {
            margin-top: 0;
        }
    }

    .sui-col-sm-3 {
        text-align: right;
    }

    .wphb-sys-info-table {
        margin-top: 10px;

        tr td span {
            font-weight: 500;
        }

        .wphb-site-health-ai-icon {
            margin-left: 5px;
            .sui-icon-info.sui-warning {
                line-height: 12px;
                vertical-align: middle;
            }
        }

        @include bp(phone) {
            tr {
                display: flex;
                flex-wrap: wrap;
                height: auto;

                td {
                    height: auto;
                    flex-basis: 100%;
                }
            }
        }
    }
}