@import 'constants';
@import 'styling';


.card {
    @include card-base;

    .card-header {
        @include card-header-base;

        &.borderless {
            border-bottom: none;
            
            .card-header-title {
                padding-bottom: 0;
            }
        }
    }

    .card-image {
        display: block;
        position: relative;

        img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            border-top-left-radius: $card-outer-border-radius;
            border-top-right-radius: $card-outer-border-radius;
        }

    }

    .card-content {
        padding: $card-padding-default;

        &.no-top-padding {
            padding-top: 0;
        }
    }

    .card-footer {
        @include card-footer-base;

        &.borderless { 
            border-top: 0;

            .card-footer-item {
                padding-top: 0;
                border: 0;
            }
        }

        &.align-items-left {
            justify-content: flex-start;

            .card-footer-item {
                @include borderless-card-footer;
            }
        }

        &.align-items-right {
            justify-content: flex-end;

            .card-footer-item {
                @include borderless-card-footer;
            }
        }
    }
}