/* -------------------------------------------
    Critical Wizard
        1. Form Style
        2. Table Form
        3. Progress Bar
        4. Temp Iframe
---------------------------------------------- */

$dir: ltr !default; 
@import '../assets/sass/direction';

// 1. Form Style
#riode-critical-form {
    label {
        margin-bottom: 5px;
        &.disabled,
        &.disabled ~ .select2-container,
        &.disabled ~ br {
            display: none;
        }
    }
    .form-control,
    .select2-container {
        display: block;
        width: 100%;
        height: 43px;
    }
    .select2-container--default .select2-selection--multiple {
        border-color: #ccc;
        border-radius: 3px;
    }
}
// 2. Table Form
.riode-pd-custom {
    padding-top: 30px;
    padding-bottom: 30px;
}
#riode-critical-table-form {
    .tablenav select {
        margin-#{$right}: 10px;
        text-transform: capitalize;
    }
    .button {
        background-color: #333;
        border-color: #333;
        color: #fff;
    }
    .search-box input, .search-box select, .tablenav input[type="submit"], .tablenav select {
        height: 40px;
    }
    .tablenav .actions {
        margin-bottom: 7px;
    }
    input[type=checkbox] {
        top: -1px;
        margin-#{$left}: 10px;
        width: 18px;
        height: 18px;
    }
    .tablenav {
        height: auto;
    }
    .no-pages + br {
        display: none;
    }
}
body[class*="_page_riode-critical"] {
    .riode-admin-panel-body h2 {
        font-size: 22px;
    }
}

// 3. Progress Bar 
.riode-admin-panel-body {
    position: relative;
    overflow: hidden;
}
.riode-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
}
.riode-progress-bar {
    background-color: #2879fe;
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    transition: width .6s;
    &.failed {
        background-color: #a94442;
    }
    &.animate-progress {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 5rem 5rem;
        animation: 2s ease-in-out infinite progress-bar-stripes;
        @keyframes progress-bar-stripes {
            0% {
                background-position-x: 5rem;
            }
        }
    }
}

// 4. Temp Iframe
.temp-iframe {
    position: fixed;
    z-index: -1000;
    opacity: 0;
    top: 50px;
}