//
//  Amasty FPC Warmer Log
//  ____________________________________________

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amfpc-log-container {
        & {
            .lib-vendor-prefix-display(flex);
            margin-bottom: 30px;
            .lib-vendor-prefix-flex-wrap(wrap);
        }

        .amfpc-column {
            margin-bottom: 30px;
        }

        .amfpc-column:not(:last-of-type) {
            padding-right: 30px;
        }

        .amfpc-column.-left {
            box-sizing: border-box;
            min-width: 400px;
            width: 60%;
            .lib-css(flex, 1, 1);
        }

        .amfpc-column.-right {
            box-sizing: border-box;
            width: 40%;
            min-width: 600px;
        }

        .amfpc-panel {
            & {
                box-sizing: border-box;
                padding: 20px;
                width: 100%;
                border-radius: 4px;
                background: #fff;
                box-shadow: 0 2px 4px rgba(155, 178, 197, .3);
            }

            &:not(:last-of-type) {
                margin-bottom: 30px;
            }
        }

        .amfpc-panel.-with-tabs {
            padding: 0;
        }

        .amfpc-title {
            margin-bottom: 40px;
            font-size: 18px;
        }
    }

    .amfpc-cache-coverage {
        .amfpc-info {
            margin-top: 20px;
        }

        .amfpc-info .amfpc-item:last-of-type {
            margin-left: 25px;
        }
    }

    .amfpc-cache-relation  {
        .amprogressbar-progress-wrapper > .amprogressbar-progress {
            border: 0;
            background: #79b5d8;
        }


        .amprogressbar-progress-wrapper > .amprogressbar-progress::-webkit-progress-bar {
            border: 0;
            background: #79b5d8;
        }

        .amfpc-info {
            margin-bottom: 15px;
        }

        .amfpc-info .amfpc-item:last-of-type {
            margin-left: auto;
        }
    }

    .amfpc-info-wrapper {
        .lib-vendor-prefix-display(flex);
        .lib-vendor-prefix-flex-wrap(wrap);
    }

    .amfpc-status-info {
        height: 100%;
    }

    .amfpc-status-codes,
    .amfpc-time-data {
        & {
            .lib-vendor-prefix-display(flex);
            margin-top: 20px;
            padding: 0 20px 20px;
        }

        .amfpc-codes {
            overflow: auto;
            padding-right: 25px;
            max-height: 267px;
            border-right: 3px solid #f1f1f1;
        }
    }

    .amfpc-tablist-container {
        .amfpc-tab {
            display: inline-block;
            background: #eee;
        }

        .amfpc-tab.-active,
        .amfpc-tab.-active:not(:last-of-type) .amfpc-switch:after {
            background: #fff;
        }

        .amfpc-switch {
            & {
                position: relative;
                display: block;
                padding: 10px 15px;
                color: #000;
                font-size: 18px;
            }

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

        .amfpc-tab.-active .amfpc-switch {
            color: #1e79c2;
        }

        .amfpc-tab:not(:first-of-type) .amfpc-switch {
            padding-left: 25px;
        }

        .amfpc-tab:not(:last-of-type) .amfpc-switch:after {
            position: absolute;
            top: 0;
            right: -10px;
            bottom: 0;
            width: 20px;
            background: #eee;
            content: '';
            transform: skewX(20deg);
        }
    }

    .amfpc-codes-table {
        .amfpc-cell {
            padding: 5px 10px;
        }

        .amfpc-cell.-code {
            text-align: right;
        }

        .amfpc-cell.-count {
            font-weight: bold;
        }
    }

    .amfpc-statuscode-chart,
    .amfpc-time-chart {
        margin-left: 30px;
        width: 400px;
        min-width: 280px;
        height: 235px;
    }

    .amfpc-time-chart {
        height: 265px;
    }
}