@mixin card() {
    .card {
        box-shadow: $bd-shadow-1;

        .card-header {
            display: flex;
            align-items: center;
            background-color: transparent;
            border: none;

            .card-header-avatar {
                font-size: 20px;
                @include marginEnd(-16px);
            }

            .card-header-content {
                font-size: 14px;

                .card-header-title {
                }

                .card-header-subtitle {
                }
            }

            .card-header-actions {
                flex: 0 0 auto;
                align-self: flex-start;
                margin-top: -8px;
                @include marginEnd(-8px);
            }
        }

        .theme-bd & {
            transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

            &.outline-0 {
                border: 0;
            }

            &.shadow-sm {
                box-shadow: rgba(60, 75, 100, 0.14) 0px 1px 1px 0px, rgba(60, 75, 100, 0.12) 0px 2px 1px -1px,
                    rgba(60, 75, 100, 0.2) 0px 1px 3px 0px !important;
            }

            &.shadow {
                box-shadow: $bd-shadow-1 !important;
            }

            &.shadow-md {
                box-shadow: $bd-shadow-2 !important;
            }

            &.shadow-lg {
                box-shadow: $bd-shadow-3 !important;
            }

            &.shadow-xl {
                box-shadow: $bd-shadow-4 !important;
            }

            &.shadow-xxl {
                box-shadow: $bd-shadow-5 !important;
            }
        }
    }

    .card-media {
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .card-media-img {
        object-fit: cover;
    }
}

@mixin cardTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $bg: map-get($palette, bg, main);

    .card {
        background-color: light-color($bg, 0.15);
        color: $text-primary;
    }
}

@include card();

.theme-bd.theme-light {
    @include cardTheme(map-get($theme, light));
}

.theme-bd.theme-dark {
    @include cardTheme(map-get($theme, dark));
}