
ul.checklist {
    list-style: none;
    margin: 0;
    padding: 20px;

    li {
        display: flex;
        flex-direction: row;
        flex-flow: row nowrap;
        flex-grow: 1;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        &.status-loading, &.status-optional {
            border: 1px solid $running-dark-color;
            background: $running-color;
        }
        &.status-success {
            border: 1px solid $success-dark-color;
            background: $success-color;
        }
        &.status-disabled {
            border: 1px solid $pending-dark-color;
            background: $pending-color;
        }
        &.status-error {
            border: 1px solid $failure-dark-color;
            background: $failure-color;
        }

        h3 {
            margin-bottom: 0;
        }

        div.icon, div.status {
            text-align: center;
        }

        div.icon {
            flex: 0 0 6em;

            i {
                font-size: 2em;
            }
        }

        div.description {
            flex: 1;
            padding: 5px 0;
        }
        
        div.status {
            flex: 0 0 4em;
            padding: 10px;
        }
    }
}
