$summary-image: '../../admin/assets/image/hb-icon@2x.png';
$summary-image-sm: '../../admin/assets/image/hb-icon@2x.png';
$upgrade-image: '../../admin/assets/image/hero.png';
$upgrade-image-mobile: '../../admin/assets/image/hero-mobile.png';

// Overwrite image size
$summary-image-sm--width: 96px;
$summary-image-sm--height: 96px;
$summary-image-sm--position-y: 30px;

$summary-image--width: 96px;
$summary-image--height: 96px;
$summary-image--position-y: center;

$cross-sell-1: 'smush';
$cross-sell-2: 'defender';
$cross-sell-3: 'smartcrawl';

/* ****************************************************************************
 * MAIN APP SCSS FILE
 */

$sui-image-path: '~@wpmudev/shared-ui/dist/images/';
$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';

/**
 * Shared UI CSS. To minimize the end CSS file, we take only the modules that we use.
 */
@import "~@wpmudev/shared-ui/scss/functions";
@import "~@wpmudev/shared-ui/scss/colors";
@import "~@wpmudev/shared-ui/scss/variables";
@import "~@wpmudev/shared-ui/scss/mixins";
@import "~@wpmudev/shared-ui/scss/icons";
@import "~@wpmudev/shared-ui/scss/accessibility";
@import "~@wpmudev/shared-ui/scss/animations";
@import "~@wpmudev/shared-ui/scss/typography";
@import "~@wpmudev/shared-ui/scss/icons";
@import "~@wpmudev/shared-ui/scss/buttons";
@import "~@wpmudev/shared-ui/scss/toggles";
@import "~@wpmudev/shared-ui/scss/boxes";
@import "~@wpmudev/shared-ui/scss/box-settings";
@import "~@wpmudev/shared-ui/scss/box-builder";
@import "~@wpmudev/shared-ui/scss/layout";
@import "~@wpmudev/shared-ui/scss/notifications";
@import "~@wpmudev/shared-ui/scss/header";
@import "~@wpmudev/shared-ui/scss/summary";
@import "~@wpmudev/shared-ui/scss/list";
@import "~@wpmudev/shared-ui/scss/tooltips";
@import "~@wpmudev/shared-ui/scss/select";
@import "~@wpmudev/shared-ui/scss/tags";
@import "~@wpmudev/shared-ui/scss/forms";
@import "~@wpmudev/shared-ui/scss/radio-checkbox";
@import "~@wpmudev/shared-ui/scss/tabs";
@import "~@wpmudev/shared-ui/scss/sidenav";
@import "~@wpmudev/shared-ui/scss/scores";
@import "~@wpmudev/shared-ui/scss/footer";
@import "~@wpmudev/shared-ui/scss/progress-bars";
@import "~@wpmudev/shared-ui/scss/tables";
@import "~@wpmudev/shared-ui/scss/accordions";
@import "~@wpmudev/shared-ui/scss/code-snippet";
@import "~@wpmudev/shared-ui/scss/modals";
@import "~@wpmudev/shared-ui/scss/listing";
@import "~@wpmudev/shared-ui/scss/select2";
@import "~@wpmudev/shared-ui/scss/utility";
@import "~@wpmudev/shared-ui/scss/wp-admin-notices";
@import "~@wpmudev/shared-ui/scss/recipient";
@import "~@wpmudev/shared-ui/scss/color-accessibility";
@import "~@wpmudev/shared-ui/scss/upgrade-page";
@import "~@wpmudev/shared-ui/scss/reviews";
@import "~@wpmudev/shared-ui/scss/colorpickers";
@import "~@wpmudev/shared-ui/scss/upload";
@import "~@wpmudev/shared-ui/scss/dropdowns";
@import "~@wpmudev/shared-ui/scss/upsells";

// Common
@import "common/variables";
@import "common/mixins";
@import "common/overwrites";
@import "common/buttons";
@import "common/extensions";

// Components
@import "components/notices";
@import "components/pills";
@import "components/border_frame";
@import "components/accordions";
@import "components/performance_summary";

// Modules
@import "modules/dashboard";
@import "modules/performance";
@import "modules/caching";
@import "modules/minification";
@import "modules/uptime";
@import "modules/advanced";
@import "modules/notifications";

// Color Accessibility
@import "common/color-accessibility";

.wpmud .wrap-wp-hummingbird .wphb-label-notice-inline {
    display: inline-block;
    font-size: 13px;
    color: #888888;
    margin: 0 15px;
}

.wpmud .wphb-listing {
    margin: 0;

    &.bold li,
    li strong {
        font-weight: 500;
    }

    li {
        font-family: $font;
        font-size: 15px;
        font-weight: 400;
        line-height: 21px;
        margin-top: 10px;
        margin-bottom: 0;

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

        :before {
            color: #17A8E3;
            top: 0;
        }

        p {
            font-size: 13px;
            line-height: 22px;
            margin-top: 5px;
        }
    }
}

.sui-list-label {
    display: flex;
    align-items: center;

    .wphb-filename-extension {
        margin: -5px 10px -5px 0px;
    }

    .wphb-filename-extension-label {
        line-height: 22px;
    }

    .sui-tag {
        margin-left: 10px !important;
    }
}

.sui-recipient .sui-recipient-email,
.sui-recipient .sui-recipient-name {
    flex-basis: 45%;
}

.sui-box {
    a.wphb-upsell-link:not(#manual_css_switch_now) {
        margin-left: 44px;
    }

    a.wphb-upsell-link,
    a.wphb-upsell-link span.sui-icon-open-new-window:before {
        font-size: 11px;
        color: #8D00B1;
    }

    a.wphb-upsell-link:hover {
        color: #64007e !important;
    }
}

.wp-hb-upsell-modals {
    .sui-box-body {
        .sui-description {
            margin-top: 8px !important;
            margin-bottom: 20px !important;
        }
    }

    .sui-box-footer {
        flex-direction: column;
    }

    .sui-box-footer {
        .sui-box-title {
            font-size: 13px !important;
            font-weight: 500 !important;
            width: 100% !important;
            margin-bottom: 11px !important;
            // padding-left: 7px;
        }

        .wp-hb-pro-features {
            display: flex;

            ul {
                font-size: 12px;
                margin: 0;
                padding: 0;

                li {
                    display: flex;
                    flex-direction: column;

                    .wp-hb-pro-features_item {
                        display: flex;
                        align-self: stretch;
                        align-items: flex-start;
                        width: 100%;
                        gap: 10px;
                        margin-bottom: 7px;

                        // padding-left: 7px;
                        .sui-icon-box {
                            display: block;
                            border-radius: 6px;
                            padding: 3px;
                            border: 1px solid #ddd;
                            justify-content: center;

                            >span {
                                width: 20px;
                                height: 20px;
                                justify-content: center;
                                align-items: center;
                                display: flex;
                            }
                        }

                        .sui-content-box {
                            margin: 0;

                            h5 {
                                line-height: 16px;
                                margin: 0 0 3px 0;
                                font-weight: 600;
                                font-size: inherit;
                                display: flex;
                                align-self: stretch;
                                letter-spacing: 0;
                            }

                            p {
                                margin: 0;
                                font-size: 12px;
                                line-height: 20px;
                            }
                        }
                    }

                    @media screen and (min-width: 480px) {
                        flex-direction: row;

                        .wp-hb-pro-features_item {
                            width: 50%;

                            &:last-child {
                                padding-left: 7px;
                            }
                        }
                    }
                }
            }
        }

        >p {
            --purple: #8D00B1;
            width: 100%;
            margin-top: 16px;

            .sui-button-ghost {
                font-size: 13px;
                display: block;
                color: var(--purple);
                background-color: #F8F8F8;
                text-align: center;
                padding: 7px 12px;
                transition: all 0.3s ease;
                line-height: 22px;

                span {
                    &:before {
                        color: var(--purple);
                    }
                }

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

#wphb-switch-page-cache-method-summary-box.sui-button-onload-text {
    .sui-description {
        display: none !important;
    }

    .sui-button-text-onload {
        display: block !important;
    }
}

.wpmud .wrap-wp-hummingbird {
    .wphb-mt-5px {
        margin-top: 5px !important;
    }

    .wphb-mt-10px {
        margin-top: 10px !important;
    }

    .wphb-mt-15px {
        margin-top: 15px !important;
    }

    .wphb-mt-20px {
        margin-top: 20px !important;
    }

    .wphb-mb-5px {
        margin-bottom: 5px !important;
    }

    .wphb-mb-10px {
        margin-bottom: 10px !important;
    }

    .wphb-mb-15px {
        margin-bottom: 15px !important;
    }

    .wphb-mb-20px {
        margin-bottom: 20px !important;
    }
}

.wphb-deactivation-survey-modal .wphb-deactivation-field-row {
    margin-bottom: 5px;
}

.sui-modal {
    #wphb-hub-connection-success-modal {
        .sui-box-body {
            padding-top: 15px;

            p {
                font-size: 13px;
                line-height: 22px;
                margin-bottom: 0;
            }

            strong {
                color: #666666;
            }

            ul {
                margin-bottom: 0;

                li {
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 24px;
                    color: #333333;

                    span:before {
                        color: #333333;
                        margin-right: 5px;
                    }
                }
            }

        }
    }

    #wphb-disconnect-site-modal {
        .sui-box-header {
            padding-top: 40px;
        }

        .sui-box-body {
            padding-top: 15px;

            .sui-notice {

                &>p.sui-description {
                    margin-bottom: 20px;
                }

                .sui-notice-content {
                    box-shadow: 0px 0px 0px 1px #E6E6E6 inset;
                    border: 1px solid #F9C101;
                    border-radius: 5px;
                    padding-top: 13px;
                    padding-right: 20px;
                    padding-bottom: 13px;
                    padding-left: 20px;
                    background-color: #FFFBF0;
                    color: #333333;

                    .sui-description {
                        font-weight: 700;
                    }

                    ul {
                        margin-top: 10px;
                        margin-bottom: 0;

                        li {
                            font-size: 13px;
                            color: #333333;
                            margin-bottom: 0;
                            display: flex;

                            &:not(:last-child) {
                                margin-bottom: 8px;
                            }

                            div {
                                display: inline-block;
                                margin-left: 8px;
                            }

                            .cross-icon {
                                font-family: wpmudev-plugin-icons;
                                font-weight: 400;
                                font-size: 14px;
                                color: #666666;
                            }
                        }
                    }
                }

                #wphb-disconnect-reason-input {
                    margin-top: 20px;
                }
            }

            .sui-block-content-center {
                margin-bottom: 10px;
            }
        }
    }
}

.sui-form-field-safe-mode {
    display: inline-flex;
    align-items: center;
    padding: 4px 0px 4px 10px;

    label {
        margin-right: 0px !important;
    }

    #safe_mode-label {
        color: #666666;
    }

    .safe-mode-seperator {
        height: 30px;
        position: relative;
        border: 1px solid #AAAAAA;
        margin-left: 20px;
        margin-right: 20px;
    }
}

.notice-wphb-safe-mode a.wphb-dismiss {
    display: none;
}