// stylelint-disable

/*
 * Region Preview
 *
 * Structure:
 * table.tb-snowreport-region-preview
 *     thead
 *         tr
 *             td (x6)
 *     tbody
 *         tr.tb-snowreport-region-preview-item (1 or many)
 *             td.tb-snowreport-region-preview-item__cell[tb-snowreport-region-preview-item__cell--title] (x6)
 *                 .tb-snowreport-region-preview-item__cell-label
 *                 .tb-snowreport-region-preview-item__cell-content
 *                     .tb-snowreport-region-preview-service-state[data-tb-snowreport-services-active="NUMBER"]
 */

// Block
.tb-snowreport-region-preview {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: config('textSizes.sm');
}
.tb-snowreport-region-preview thead th,
.tb-snowreport-region-preview-item__cell {
    padding: config('padding.2');
}

// Hide table headings on smaller viewports (cell label is used there).
@media screen and (max-width: 767px) {
    .tb-snowreport-region-preview thead {
        display: none;
    }
}

// Add default padding and text-alignment to cells
.tb-snowreport-region-preview td,
.tb-snowreport-region-preview th {
    padding: config('padding.2');
    text-align: left;
}

// Table rows
.tb-snowreport-region-preview-item {}

// Table cells (title)
.tb-snowreport-region-preview-item__cell {}

// Table cells (title)
.tb-snowreport-region-preview-item__cell--title {
    margin-top: config('margin.4');
}

// Show cell label and content side by side on smaller viewports.
@media screen and (max-width: 767px) {
    .tb-snowreport-region-preview-item__cell {
        display: flex;
    }

    .tb-snowreport-region-preview-item__cell-label {
        display: inline-block;
        width: 50%;
    }

    .tb-snowreport-region-preview-item__cell-content {
        width: 50%;
        font-weight: bold;
    }
}

// Hide cell label on larger viewports.
@media screen and (min-width: 768px) {
    .tb-snowreport-region-preview-item:nth-child(odd) {
        background-color: #f9f9f9;
    }
    .tb-snowreport-region-preview-item__cell-label {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    // Override odd-even row coloring if it exists on th/td.
    .tb-snowreport-region-preview-item:nth-child(odd),
    .tb-snowreport-region-preview-item:nth-child(even) {
        background-color: transparent;
    }

    // Add odd-even row (cells in this case) coloring for smaller viewports.
    .tb-snowreport-region-preview-item__cell:nth-child(even) {
        background-color: #f9f9f9;
    }
}

// Default display block on service state label and default green color.
.tb-snowreport-region-preview-service-state {
    color: config('colors.positive');
    font-weight: normal;

    @media screen and (min-width: 768px) {
        display: block;
    }
}

// Only if no service is active, use grey color.
.tb-snowreport-region-preview-service-state[data-tb-snowreport-services-active='0'] {
    color: #999;
}
