
/*
 * Service Status List
 *
 * Structure:
 * .tb-snowreport-service-status-list
 *     .tb-snowreport-service-status (1 or many)
 */

// Remove list style (bullet points) from status list
.tb-snowreport-service-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*
 * Service Status Item
 *
 * Structure:
 * .tb-snowreport-service-status
 *     .tb-snowreport-service-status__icon.tb-snowreport-service-status__icon--status-[STATE]
 *     .tb-snowreport-service-status__icon.tb-snowreport-service-status__icon--type-[TYPE]
 *     .tb-snowreport-service-status__name
 */

// Style for service status items within status list.
.tb-snowreport-service-status {
    display: flex;
    align-items: center;
    padding-top: config('padding.2');
    padding-right: config('padding.4');
    padding-bottom: config('padding.2');
    padding-left: config('padding.4');
    border-bottom: 1px solid config('colors.grey-lightest');
}

// Common styles for status and type icons.
.tb-snowreport-service-status__icon {
    margin-right: config('margin.4');
}

// Type icon should be a bit larger than the status icon.
.tb-snowreport-service-status__icon--type {
    font-size: 1.5rem;
}

// Green color of status icon indicating service status 'open'.
.tb-snowreport-service-status__icon--status-open {
    color: config('colors.positive');
}

// Red color of status icon indicating service status 'closed'.
.tb-snowreport-service-status__icon--status-closed {
    color: config('colors.negative');
}

// Yellow color of status icon indicating service status 'pending'.
.tb-snowreport-service-status__icon--status-pending {
    color: config('colors.neutral');
}


/*
 * Service Status Legend
 *
 * Structure:
 * .tb-snowreport-service-status-legend
 *     .tb-snowreport-service-status-legend__item.tb-snowreport-service-status-legend__item--status-[STATE] (1 or many)
 *         .c-icon
 *         span (can be any text element)
 */

// Block
.tb-snowreport-service-status-legend {
    padding-top: config('padding.4');
    padding-bottom: config('padding.4');
}

// Legend item styles
.tb-snowreport-service-status-legend__item {
    display: inline-flex;
    align-items: center;
    margin-right: config('margin.6');
}

// Add margin between icon and text label
.tb-snowreport-service-status-legend__item .c-icon {
    margin-right: config('margin.2');
}

// Green color of status icon indicating service status 'open'.
.tb-snowreport-service-status-legend__item--status-open .c-icon {
    color: config('colors.positive');
}

// Red color of status icon indicating service status 'closed'.
.tb-snowreport-service-status-legend__item--status-closed .c-icon {
    color: config('colors.negative');
}

// Yellow color of status icon indicating service status 'pending'.
.tb-snowreport-service-status-legend__item--status-pending .c-icon {
    color: config('colors.neutral');
}
