// Styling for the ingest dashboard
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';


// Ingest dashboard
// -------------------------------------------------

.ingest-dashboard {
    padding: 40px;
    overflow: auto;
    .card-list {
        display: flex;
        flex-wrap: wrap;        
    }
    .card-list > li {
        width: 240px;
        margin: 10px;
        padding: 0px;
        position: relative;
        flex: 0 0 auto;
        &:hover {
            cursor: default;
        }
        .card-list__controls {
            position: absolute;
            top: 7px;
            right: 1px;
        }
        .header {
            height: 110px;
            background: #2c2c2c;
            padding: 15px;
            color: $white;
            @include border-box();
            @include border-radius(2px 2px 0 0);
            .title {
                padding-bottom: 6px;
                @include text-semibold();
            }
            .sub-title {
                color: $gray;
                .text {
                    color: $grayLight;
                    @include text-semibold();
                }
            }
        }
        .status {
            color: $white;
            font-size: 14px;
            padding: 10px 15px;
            min-height: 36px;
            box-sizing: content-box;
            .time {
                font-size: 11px;
            }
            &.opened {
                background: #107401;
            }
            &.closed {
                background: #970000;
            }
            .uppercase {
                padding-right: .3em;
            }
        }
        .ingested-count {
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px  solid #e3e3e3;
            .count {
                font-size: 30px;
                line-height: 34px;
                @include text-bold();
            }
            .text {
                font-size: 11px;
                color: $gray;
            }
        }
        .update-time {
            padding: 0 15px 10px 15px;
            border-bottom: 1px  solid #e3e3e3;
            .text {
                margin-top: 10px;
                font-size: 12px;
                text-transform: uppercase;
                color: $gray;
                @include text-semibold();
            }
            .time {
                font-size: 11px;
            }
        }
        .error {
            word-wrap: break-word;
            color: $red;
            padding: 5px;
        }
        .toggle-box {
            margin: 10px;
            header {
                &:before {
                    display: none;
                }
                h6 {
                    background: none;
                }
                i {
                    @include opacity(60);
                }
                .chevron {
                    background-color: #fff;
                }
            }
        }
    }
}