@import './../../../style/variables.css';

:root {
    --cardunit: 120px;
    --card-height: calc(var(--cardunit)*3);
    --body-height: calc(var(--cardunit)*5/3);
    --footer-height: calc(var(--cardunit)*1/3);
}
 
@component Card {
    position: relative;
    color: var(--silver);
    width: calc(var(--cardunit)*2);
    margin: 10px 30px;

    @descendent head {
        background-color: var(--silver);
        height: var(--cardunit);
        lost-flex-container: row;
        align-items: center;
        justify-content: center;
        & i.fa{
            color: var(--mineshaft-dark);
            height: calc(var(--cardunit)*1/2);
            width: calc(var(--cardunit)*1/2);
            font-size: 6rem;
        }
    }

    @descendent body {
        background-color: white;
        height: var(--body-height);
        font-size: 12px;
        padding: 10px;
        & .status-label {
            text-transform: uppercase;
            & .status{
                color: var(--mineshaft-dark);
            }
        }
        & .title {
            color: var(--mineshaft-dark);
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: bold;
        }
    }

    @descendent footer {
        background-color: white;
        height: var(--footer-height);
        lost-flex-container: row;
        justify-content: flex-end;
        padding: 10px;
        & .action {
            text-transform: uppercase;
            font-size: 12px;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    @descendent badge {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 calc(var(--cardunit)*1/2) calc(var(--cardunit)*1/2) 0;
        & .fa{
            color: white;
            margin-left: 33px;
            margin-top: 8px;
            font-size: 20px;
        }
        &.not-ready{
            border-color: transparent transparent transparent transparent;
        }
        &.ready{
            border-color: transparent var(--mineshaft-dark) transparent transparent;
        }
        &.working{
            border-color: transparent var(--cyan-w) transparent transparent;
        }
        &.done{
            border-color: transparent var(--green-d) transparent transparent;
        }
        &.error{
            border-color: transparent var(--red-e) transparent transparent;
        }
        &.warning{
            border-color: transparent var(--orange-w) transparent transparent;
        }
    }
    @when running{
        & .Card-footer {
            & .action {
                color: var(--seashell);
                cursor: text;
            }
        }
    }
}
