@use '../function' as *;
@use '../settings';
@use 'sass:color';

@mixin roolith-card() {
    .card {
        box-shadow: var(--r-card-shadow);
        border-radius: var(--r-card-radius);
        overflow: hidden;
        margin-bottom: rem(20);
        background: var(--r-card-background);
    }

    .card-img {
        @extend .img-full-width;
    }

    .card-body-img {
        @extend .img-full-width;
        margin: rem(10) 0;
    }

    .card-body {
        padding: rem(25);
    }

    .card-title {
        padding-bottom: rem(5);
    }

    .card-text {
        font-size: rem(14);
        line-height: rem(22);
        padding-bottom: rem(20);
    }

    .card-information {
        @extend .dimmed;
        font-size: 80%;
        display: block;
        padding: rem(20) 0 0 0;
    }

    .card-subtitle {
        @extend .dimmed;
        padding-bottom: rem(10);
    }

    .card-header {
        padding: rem(15) rem(25);
        border-bottom: rem(1) solid var(--r-card-header-footer-border);
        font-size: rem(14);
        color: var(--r-card-header-footer-color);
    }

    .card-footer {
        padding: rem(15) rem(25);
        border-top: rem(1) solid var(--r-card-header-footer-border);
        color: var(--r-card-header-footer-color);
        font-size: rem(14);
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .card-#{'' + $name} {
                background: var(--r-color-#{$name});
                color: var(--r-color-white);

                .card-subtitle,
                .card-information {
                    color: var(--r-color-white);
                    opacity: 0.7;
                }

                .card-header,
                .card-footer {
                    border-color: color-lighten(var(--r-color-#{$name}), 10%);
                    color: var(--r-color-white);
                }
            }
        }
    }
}