/* ****************************************************************************
 * MODULES: CACHING MODULES
 */

@import "../common/variables";
@import "../common/mixins";

/**
 * Common styles for caching meta boxes
 */
.wpmud .wrap-wphb-caching {
    /* Expiration table */
    .wphb-border-frame {
        .table-header .wphb-caching-summary-heading-type {
            flex-basis: 85px;
        }

        .table-row {
            .wphb-gzip-summary-item-type,
            .wphb-caching-summary-item-type {
                flex-basis: 100px;
            }

            .wphb-caching-summary-item-expiry,
            .wphb-caching-summary-item-status {
                flex-basis: auto;
            }

            .wphb-caching-summary-item-type {
                font-size: 13px;
                font-weight: 500;
                color: #333333;
            }
        }
    }
}

/**
 * Summary meta box
 */
.wpmud #wphb-box-summary {
    .sui-summary-segment {
        overflow: visible !important;
    }

    .sui-icon-info {
        top: 2px !important;
    }

    .sui-summary-details .sui-summary-detail {
        overflow: visible !important;
    }
}

.wpmud .wrap-wphb-caching .box-summary.sui-summary:not(.sui-rebranded):not(.sui-unbranded):not(.sui-summary-sm) {
    @if variable-exists(summary-image) {
        @include background-2x("#{$image--path}/graphic-caching-top", 'png', 192px, 172px, 30px 100%);
    }

    @include media(max-width, md) {
        background-image: unset;
    }
}

/**
 * Page caching meta box
 */
.wpmud .box-caching-page {
    /* Two column layouts: used in page types table */
    .wphb-dash-table.three-columns > .wphb-dash-table-row > div {
        flex-basis: 25%;
    }

    .wphb-dash-table-row {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        height: 60px;
        border-top: 1px solid #E6E6E6;

        &:first-child {
            border-top: 0;
        }

        &:last-child {
            margin-bottom: -10px;
        }

        > div {
            text-align: center;

            &:first-child {
                display: flex;
                align-items: center;
                align-content: center;
                flex-basis: 50% !important;
                text-align: left;
                font-size: 13px;
                color: #333333;
                font-weight: 500;
                line-height: 16px;
            }

            &:last-child {
                text-align: right;
            }
        }
    }
}

/**
 * Browser caching meta box
 */
.sui-wrap .box-caching-status .sui-upsell-notice span {
    display: block;
    margin-top: 10px;
}
.sui-wrap:not(.sui-color-accessible) .box-dashboard-browser-caching-module .sui-upsell-notice p,
.sui-wrap:not(.sui-color-accessible) .box-caching-status .sui-upsell-notice p {
    border-left: 2px solid #17a8e3 !important;
    &:before { color: #17a8e3 !important; }
    a {
        color: #888 !important;
        &:hover { color: #fff !important }
    }
    a:not(.sui-button) { color: #17a8e3 !important; }
}

.sui-wrap .box-caching-status {
    .wphb-caching-summary-item-expiry .sui-tag {
        color: #333333;
    }
}

/**
 * Browser caching configure meta box
 */
.wpmud .box-caching-settings {
    .sui-border-frame .sui-form-field {
        margin-bottom: 10px;
    }

    .wphb-expiry-changes .update-htaccess {
        margin-top: 10px;
    }

    .wphb-server-instructions p,
    .wphb-server-instructions .wphb-listing li {
        color: #888888;
        font-size: 13px;
        line-height: 22px;
    }
    .wphb-server-instructions .sui-notice p {
        color: #333;
    }

    .wphb-server-instructions .wphb-listing li {
        margin-top: 0;
    }

    .cloudflare-submit {
        .cloudflare-how-to-title {
            font-size: 13px;
        }

        margin-top: 30px;
    }

    .wphb-block-content-blue {
        background-color: #e0f6ff;
        border-radius: 5px;
        padding: 20px 30px;
        margin-left: 0;
        font-size: 13px;
        line-height: 22px;
    }

    .cloudflare-step .sui-notice-warning .sui-button {
        color: #fff;
    }
}

/**
 * Integrations meta box
 * @since 2.5.0
 */
.wpmud .box-integrations {
    .sui-accordion:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields).sui-accordion-flushed {
        margin: 0 -30px;
        border-top: 0;

        &:last-child { border-bottom: 1px solid #E6E6E6; }
        .sui-image { margin-right: 10px; }
        .sui-accordion-item .sui-accordion-item-header .sui-icon-plus { margin-right: 0; }
    }

    .sui-accordion:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) .sui-accordion-item.sui-accordion-item--disabled .sui-accordion-item-header [class*="sui-icon-"]:before {
        color: #888;
    }
    .sui-accordion-item-header .sui-icon-info {
        margin-top: 5px;
        margin-left: 10px;
    }
}