Asymmetrik/ngx-starter

@use 'sass:math';
@import 'shared';

$card-color-highlight: var(--bs-primary) !default;
$card-color-hover: var(--bs-primary-border-subtle) !default;
$card-selected-check-size: 2rem !default;
$card-header-height: 4rem !default;

.cards.row > .col:not(:last-child) {
    margin-bottom: $spacer * 2;
}

.card {
    .card-header {
        display: flex;
        align-items: center;
        height: $card-header-height;

        h1,h2,h3,h4,h5,h6 {
            margin-bottom: 0;
        }
    }

    &.flex-row {
        .card-header {
            height: auto;
            border-bottom: 0;
            border-right: $border-width solid var(--bs-border-color);
        }
    }
}

.card-selectable {
    &:hover,
    &.hover {
        box-shadow: 0 0 0 $btn-focus-width $card-color-hover;
        border-color: $card-color-hover;
    }

    &.selected {
        box-shadow: 0 0 0 $btn-focus-width $card-color-highlight;
        border-color: $card-color-highlight;

        &:before {
            font: var(--fa-font-solid);
            font-size: math.div($card-selected-check-size, 2);
            color: var(--bs-light);
            content: '\f00c';
            position: absolute;
            right: math.div($card-selected-check-size, -2);
            top: math.div($card-selected-check-size, -2);
            width: $card-selected-check-size;
            height: $card-selected-check-size;
            border-radius: 100%;
            background: $card-color-highlight;
            padding-top: math.div($card-selected-check-size, 4);
            box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
        }
    }

    cursor: pointer;
}