@use "/resources/styles/config";
@use "/resources/styles/common" as *;

///
/// Simple card.
///
@mixin card() {
    $b: &;

    background-color: config.$white;
    box-shadow: config.$med-shadow;
    margin-bottom: config.$v-space;
    z-index: 1;

    &__container {
        display: grid;
        grid-gap: 1rem;
        grid-template: "icon" "heading" "content" 1fr "actions" / auto;
        height: 100%;
    }

    &__icon,
    &__heading,
    &__content,
    &__actions {
        justify-self: center; // For IE11 (instead of justify-items)
        padding-left: config.$h-space;
        padding-right: config.$h-space;
        position: relative;
    }

    &__tag {
        align-self: start;
        color: config.$meta-text;
        font-size: .875rem;
        font-weight: bold;
        grid-area: icon;
        justify-self: start;
        padding: config.$thin-padding;
        text-transform: uppercase;

        &.-overlay {
            color: config.$black;
        }
    }

    &__icon {
        grid-area: icon;
        padding-top: config.$v-space;
        text-align: center; // For IE11
    }

    &__heading {
        grid-area: heading;
    }

    &__content {
        grid-area: content;
        width: 100%;
    }


    &__background {
        background: config.$gray-100 center/cover;
        grid-column: 1;
        grid-row: icon / heading;
        height: 100%;
        justify-self: stretch;
    }

    &__actions {
        grid-area: actions;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-self: stretch;
        margin-top: auto;
        padding-bottom: config.$v-space;

        &.-attached {
            justify-content: stretch;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;

            .card__action {
                flex-grow: 1;
            }
        }
    }

    &__action {
        flex-basis: max(9rem, 50%);
    }

    &.-clickable {
        cursor: pointer;
    }

    &.-wide {
        #{$b}__container {
            grid-gap: 1rem 0;
            grid-template: "background heading" "background content" 1fr "background actions" / 1fr 1fr;
        }

        #{$b}__background {
            grid-area: background;
        }

        #{$b}__backgroundImg {
            height: 100%;
            object-fit: cover;
        }

        #{$b}__heading {
            padding-top: config.$v-space;
        }
    }
}

.card {
    @include card;
}