// Card styles for dark theme
@mixin dark-theme-card {
    .card,
    &.card {
        background-color: $dark;
        color: $light;
    }
}

// Card styles for light theme
@mixin light-theme-card {
    .card,
    &.card {
        background-color: $light;
        color: $dark;
    }
}

// Base card styles
.card {
    position: relative;
    overflow: hidden;
    border-radius: $base-border-radius;

    border-style: solid;
    border-width: $base-border-sickness / 2;
    border-color: generate-shade(map-get($base-color-palette, "gray"), 30, 'lighten');


    // Apply card light theme as a default one
    @include light-theme-card;

    // Card image styles
    .card-img {
        &.placeholder {
            width: 100%;
        }
    }

    // Card content wrap
    .card-content {
        padding: $base-padding 0;

        // Divider
        .card-divider {
            @extend .divider;
            margin-bottom: $base-padding;
        }

        // Card header
        .card-header {
            padding: 0 $base-padding;
            margin: $base-margin 0;

            // Card title
            .card-title {
                font-size: 20px;
            }
        }

        // Card body
        .card-body {
            padding: 0 $base-padding;
            padding-bottom: $base-padding;
        }

        // Card footer
        .card-footer {
            padding: 0 $base-padding;
        }

        // Image overlay styles
        &.card-img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }
    }
}


// Apply different card themes
body[data-theme="dark"] {
    @include dark-theme-card;
}

body[data-theme="light"] {
    @include light-theme-card;
}

.card[data-theme="dark"] {
    @include dark-theme-card;
}

.card[data-theme="light"] {
    @include light-theme-card;
}