@use '../utilities/main_utilities' as *;

/* Cards is a row */
/* Best to do this with grid, but there's less browser support... */
.card{
    /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
    border: 1px solid $color-bg-secondary;
    border-radius: $border-radius;
    box-shadow: $box-shadow $color-shadow;
    padding: 1.25rem;
    /* flex: 0 0 $width-card; */
    background: $color-card;
    
    display: block !important; /* Unset row/col default */

    @include color-scheme(dark) {
        border-color: $color-bg-secondary--dark;
        box-shadow: $box-shadow $color-shadow--dark;
        background: $color-card--dark;
    }
}
.card:hover {
    box-shadow: $box-shadow $color-bg-secondary;

    @include color-scheme(dark) {
        box-shadow: $box-shadow $color-bg-secondary--dark;
    }
}

.row--cards{
    align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
}
.row--cards .card{
    height: 100%; /* To make multiple cards next to each other 'same' height */
}