/*
  Cards

  Structure:

  titles
  lists
*/

/// @Foundation.settings
// Card
$card-background: #fff !default;
$card-color: isitlight($card-background) !default;
$card-border: 1px solid smartscale($card-background, 7%) !default;
$card-radius: $global-radius !default;
$card-shadow: 0 1px 2px rgba(#000, 0.2) !default;
$card-padding: $global-padding !default;
$card-margin: 0.5rem !default;

$card-divider-background: smartscale($card-background, 7%) !default;
///

@mixin card-container(
    $background: $card-background,
    $color: $card-color,
    $border: $card-border,
    $radius: $card-radius,
    $shadow: $card-shadow,
    $padding: $card-padding,
    $margin: $card-margin
) {
    border: $border;
    margin-bottom: $margin;
    background: $background;
    color: $color;
    border-radius: $radius;
    box-shadow: $shadow;
    overflow: hidden;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: inherit;
    }
    ul {
        margin-bottom: 0;
    }
    img {
        width: 100%;
    }
}
@mixin card-divider(
    $background: $card-divider-background,
    $padding: $card-padding
) {
    background: $background;
    padding: $padding;
}
@mixin card-section($padding: $card-padding) {
    padding: $padding;
}
@include exports(card) {
    .card {
        @include card-container;
        @each $color in map-keys($foundation-colors) {
            &.#{$color} {
                $color-value: map-get($foundation-colors, $color);
                @include card-container(
                    $background: $color-value,
                    $color: isitlight($color-value),
                    $border: 0
                );
                .card-divider {
                    @include card-divider(
                        $background: smartscale($color-value, 7%)
                    );
                }
            }
        }
    }
    .card-divider {
        @include card-divider;
    }
    .card-section {
        @include card-section;
    }
}
