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

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

/**
 * 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/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/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";

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

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

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

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


/* ****************************************************************************
 * 1. EXTEND/OVERRIDE WPMUDEV DASHBOARD/WP STYLES
 */
#wpbody-content {
    padding-bottom: 25px;
}

.sui-header .sui-button i {
    margin-right: 5px;
}

.wpmud .wrap-wp-hummingbird {
    .clear {
        padding: 0;
    }
}

.wpmud .dev-list-stats > li {
    &.standalone {
        margin: 0;
    }

    &.small > li {
        .list-label-stats {
            line-height: 26px;
        }
    }

    .list-label-stats {
        color: #333;
        font: 500 13px/30px $font;
    }
}

.wpmud input[type="checkbox"] {
    border-radius: 4px;
    border: 1px solid #E6E6E6;
    background-color: #F8F8F8;
}

.wpmud [tooltip]:after {
    font: 500 12px/18px $font;
    padding: 8px 12px;
    background: #333333;
    min-width: 50px;
    max-width: 250px;
    transition: all 0.2s ease;
    text-transform: none;
}

.wpmud .radio-group input[type="radio"] + label > [tooltip] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
}

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

/* ****************************************************************************
 * 2. COMMON/GENERAL STYLES
 */

/* Lists */
.wpmud .wphb-listing {
    margin: 0;

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

    &.wphb-listing-ordered {
        padding-left: 20px;
    }

    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;
        }

        strong {
            font-weight: 500;
        }

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

/* ****************************************************************************
 * 3. COMPONENTS/MODULES
 */
/* Progress bar */
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

/* Asset Optimization - changed file */
@keyframes pop{
    50%  {
        transform: scale(1.2);
    }
}

/* Filename Extensions Icons */
.wphb-filename-extension {
    border-radius: 4px;
    display: block;
    float: left;
    font-family: $font;
    font-size: 9px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 43px;
    height: 30px;
    margin: 0 10px 0 0;
    width: 30px;

    &.wphb-filename-extension-html {
        background-color: #F56418;
    }

    &.wphb-filename-extension-other {
        background-color: #AAAAAA;
    }

    &.wphb-filename-extension-css {
        background-color: #25A8DE;
    }

    &.wphb-filename-extension-media {
        background-color: #55DDB8;
    }

    &.wphb-filename-extension-images {
        background-color: #BDF2F7;
        color: #333333;
    }

    &.wphb-filename-extension-javascript,
    &.wphb-filename-extension-js {
        background-color: #F7E100;
        color: #333333;
    }
}

.sui-list-label {
    .wphb-filename-extension {
        margin: -5px 10px -5px 0px;
    }
    .wphb-filename-extension-label {
        line-height: 22px;
    }
}

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