/* ****************************************************************************
 * 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 #wphb-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;
    }
    .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 {
    .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-database-stats {
        display: flex;
        & > div:first-child {
            flex-basis: 220px
        }
        h4 { margin-bottom: 0 }
    }

    .sui-table {
        table-layout: auto;
        margin-top: 15px;
        thead tr th:first-child { width: 60% }
        tbody:last-child>tr:last-child>td {
            border-bottom: 1px solid #E6E6E6;
        }

        .sui-table-item-title > span.sui-tooltip {
            margin-left: 5px;
            .sui-icon-info { vertical-align: sub }
        }
    }

    #wphb-health-icon-cache-purge:hover {
        background-color: #FFE5E9;
        .sui-icon-trash:before { color: #FF6D6D }
    }

    .sui-box-body>.sui-tabs-flushed>.sui-tabs-content>.sui-tab-content {
        padding-left: 0;
        padding-right: 0;

        & > * {
            padding-left: 30px;
            padding-right: 30px;
        }
    }
}