@if $css-variable-enabled {
  $card-border-radius: var(--card-border-radius);
  $card-border-width: var(--card-border-width);
  $card-box-shadow: var(--card-box-shadow);
  $card-hover-translate: var(--card-hover-translate);
  $card-hovered-box-shadow: var(--card-hovered-box-shadow);
  $card-landscape-max-width: car(--card-landscape-max-width);
  $card-landscape-min-width: car(--card-landscape-min-width);
  $card-margin: var(--card-margin);
  $card-max-width: var(--card-max-width);
  $card-min-width: var(--card-min-width);
  $card-padding: var(--card-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}card {
  background-color: var(--card-bg-color);
  border-color: var(--card-border-color);
  box-sizing: content-box;
  padding: $card-padding;
  margin: $card-margin;
  max-width: $card-max-width;
  min-width: $card-min-width;
  box-shadow: $card-box-shadow;
  border-radius: $card-border-radius;
  display: flex;
  flex-direction: column;
  transition: $primary-transition;

  &.#{$prefix}flat {
    border-style: solid;
    box-shadow: 0 0 $transparent;
    border-width: $card-border-width;
  }

  &.#{$prefix}landscape {
    max-width: $card-landscape-max-width;
    min-width: $card-landscape-min-width;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 10px 0;
  }

  footer {
    margin: 0 -10px 0 -10px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    flex-grow: 1;

    @include clearfix;
  }

  &.#{$prefix}hoverable {
    &:hover, &.#{$prefix}hovered, &:focus-within {
      border-color: $transparent;
      transform: translateY($card-hover-translate);
      box-shadow: $card-hovered-box-shadow;
    }
  }

  &.#{$prefix}rtl {
    text-align: right;

    footer {
      &:not(.#{$prefix}center):not(.#{$prefix}text-center) {
        * {
          float: left;
        }
      }
    }
  }
}