@use "../../../../styles/int.scss";

.cardContainer{
    padding: int.$spacing-2;
    @include int.is-desktop {
        padding: int.$spacing-5;
    }
}

.closedCard{
    background: white;
    @include int.shadow();
}

.cardTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: int.$spacing-2;
}

.state{
    @include int.sans($size: "200", $role: "component");
}

.statesContainer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: int.$spacing-3;
    padding: int.$spacing-3 0 int.$spacing-3;
    @include int.is-desktop {
        grid-template-columns: repeat(4, 1fr);
    }
}

.partialClosuresText{
    color: int.$warmgray-60;
    @include int.sans($size: "100", $role: "component");
}

.timeStamp{
    @include int.title($size: "500", $weight: "bold", $outlet: "interactive");
}

.line{
    border: 0;
    height:1px;
    background: int.$warmgray-60;
}

.label{
    @include int.overline(){
        font-weight: normal;
    }
}

.closed{
    color: int.$warmgray-60;
}

.justClosed{
    color: int.$red-60;
}