/**
 * Color variants
 */

.card {
    &.-primary {
        --card--background: var(--card--primary--background, var(--color-primary));
        --card--border-top-color: var(
            --card--primary--border-top-color,
            var(--color-primary-shade-50)
        );
        --card--border-right-color: var(
            --card--primary--border-right-color,
            var(--color-primary-shade-50)
        );
        --card--border-bottom-color: var(
            --card--primary--border-bottom-color,
            var(--color-primary-shade-50)
        );
        --card--border-left-color: var(
            --card--primary--border-left-color,
            var(--color-primary-shade-50)
        );
        --card--color: var(--card--primary--color, var(--contrast-text-color-primary));
        --card--header--background: var(
            --card--primary--header--background,
            var(--color-primary-shade-50)
        );
        --card--footer--background: var(
            --card--primary--footer--background,
            var(--color-primary-shade-50)
        );
    }

    &.-secondary {
        --card--background: var(--card--secondary--background, var(--color-secondary));
        --card--border-top-color: var(
            --card--secondary--border-top-color,
            var(--color-secondary-shade-50)
        );
        --card--border-right-color: var(
            --card--secondary--border-right-color,
            var(--color-secondary-shade-50)
        );
        --card--border-bottom-color: var(
            --card--secondary--border-bottom-color,
            var(--color-secondary-shade-50)
        );
        --card--border-left-color: var(
            --card--secondary--border-left-color,
            var(--color-secondary-shade-50)
        );
        --card--color: var(--card--secondary--color, var(--contrast-text-color-secondary));
        --card--header--background: var(
            --card--secondary--header--background,
            var(--color-secondary-shade-50)
        );
        --card--footer--background: var(
            --card--secondary--footer--background,
            var(--color-secondary-shade-50)
        );
    }

    &.-light {
        --card--background: var(--card--light--background, var(--color-white));
        --card--border-top-color: var(--card--light--border-top-color, var(--color-light-shade-50));
        --card--border-right-color: var(
            --card--light--border-right-color,
            var(--color-light-shade-50)
        );
        --card--border-bottom-color: var(
            --card--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --card--border-left-color: var(
            --card--light--border-left-color,
            var(--color-light-shade-50)
        );
        --card--color: var(--card--light--color, var(--contrast-text-color-light));
        --card--header--background: var(--card--light--header--background, var(--color-light-250));
        --card--footer--background: var(--card--light--footer--background, var(--color-light-250));
    }

    &.-dark {
        --card--background: var(--card--dark--background, var(--color-dark));
        --card--border-top-color: var(--card--dark--border-top-color, var(--color-dark-tint-50));
        --card--border-right-color: var(
            --card--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --card--border-bottom-color: var(
            --card--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --card--border-left-color: var(--card--dark--border-left-color, var(--color-dark-tint-50));
        --card--color: var(--card--dark--color, var(--contrast-text-color-dark));
        --card--header--background: var(
            --card--dark--header--background,
            var(--color-dark-tint-50)
        );
        --card--footer--background: var(
            --card--dark--footer--background,
            var(--color-dark-tint-50)
        );
    }

    &.-info {
        --card--background: var(--card--info--background, var(--color-info));
        --card--border-top-color: var(--card--info--border-top-color, var(--color-info-shade-50));
        --card--border-right-color: var(
            --card--info--border-right-color,
            var(--color-info-shade-50)
        );
        --card--border-bottom-color: var(
            --card--info--border-bottom-color,
            var(--color-info-shade-50)
        );
        --card--border-left-color: var(--card--info--border-left-color, var(--color-info-shade-50));
        --card--color: var(--card--info--color, var(--contrast-text-color-info));
        --card--header--background: var(
            --card--info--header--background,
            var(--color-info-shade-50)
        );
        --card--footer--background: var(
            --card--info--footer--background,
            var(--color-info-shade-50)
        );
    }

    &.-success {
        --card--background: var(--card--success--background, var(--color-success));
        --card--border-top-color: var(
            --card--success--border-top-color,
            var(--color-success-shade-50)
        );
        --card--border-right-color: var(
            --card--success--border-right-color,
            var(--color-success-shade-50)
        );
        --card--border-bottom-color: var(
            --card--success--border-bottom-color,
            var(--color-success-shade-50)
        );
        --card--border-left-color: var(
            --card--success--border-left-color,
            var(--color-success-shade-50)
        );
        --card--color: var(--card--success--color, var(--contrast-text-color-success));
        --card--header--background: var(
            --card--success--header--background,
            var(--color-success-shade-50)
        );
        --card--footer--background: var(
            --card--success--footer--background,
            var(--color-success-shade-50)
        );
    }

    &.-warning {
        --card--background: var(--card--warning--background, var(--color-warning));
        --card--border-top-color: var(
            --card--warning--border-top-color,
            var(--color-warning-shade-50)
        );
        --card--border-right-color: var(
            --card--warning--border-right-color,
            var(--color-warning-shade-50)
        );
        --card--border-bottom-color: var(
            --card--warning--border-bottom-color,
            var(--color-warning-shade-50)
        );
        --card--border-left-color: var(
            --card--warning--border-left-color,
            var(--color-warning-shade-50)
        );
        --card--color: var(--card--warning--color, var(--contrast-text-color-warning));
        --card--header--background: var(
            --card--warning--header--background,
            var(--color-warning-shade-50)
        );
        --card--footer--background: var(
            --card--warning--footer--background,
            var(--color-warning-shade-50)
        );
    }

    &.-danger {
        --card--background: var(--card--danger--background, var(--color-danger));
        --card--border-top-color: var(
            --card--danger--border-top-color,
            var(--color-danger-shade-50)
        );
        --card--border-right-color: var(
            --card--danger--border-right-color,
            var(--color-danger-shade-50)
        );
        --card--border-bottom-color: var(
            --card--danger--border-bottom-color,
            var(--color-danger-shade-50)
        );
        --card--border-left-color: var(
            --card--danger--border-left-color,
            var(--color-danger-shade-50)
        );
        --card--color: var(--card--danger--color, var(--contrast-text-color-danger));
        --card--header--background: var(
            --card--danger--header--background,
            var(--color-danger-shade-50)
        );
        --card--footer--background: var(
            --card--danger--footer--background,
            var(--color-danger-shade-50)
        );
    }
}