//
// Card
// -----------------------------------------

.card {
  border-radius: $panel-border-radius;
  overflow: hidden;

  &-image {
    $size: $grid-unit-y * 20;

    height: $size;
    position: relative;
    overflow: hidden;
    text-align: center;

    @include themes(background-color, color-new-border);

    &:before {
      content: "\f03e";
      line-height: $size;
      text-align: center;
      font-family: $font-family-awesome;
      font-weight: 300;
      font-size: $font-size-h1;

      @include themes(color, color-new-body-light);
    }

    &-bg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }

    & + .card-body {
      border-bottom-left-radius: $panel-border-radius;
      border-bottom-right-radius: $panel-border-radius;

      @include themes-border-left(color-new-border);
      @include themes-border-right(color-new-border);
      @include themes-border-bottom(color-new-border);
    }
  }

  &-label {
    border-radius: $border-radius-base 0 0 0;
    position: absolute;
    right: 0;

    &-white {
      line-height: $grid-unit-y * 2;
      padding: 0 ceil($grid-unit-x * 0.5);
      background-color: $color-white;
      font-size: $font-size-small - 1;
      color: $color-new-body-dark;
      bottom: ceil($grid-unit-y * 2.5);

      &-down {
        bottom: 0;
      }
    }

    &-black {
      background-color: $color-new-body-dark;
      line-height: $grid-unit-y * 2;
      padding: ceil($grid-unit-y * 0.25) ceil($grid-unit-x * 0.5);
      color: $color-white;
      font-size: $font-size-small;
      font-weight: $font-weight-medium;
      bottom: 0;
    }
  }

  &-body {
    padding: $grid-unit-y * 3;
    line-height: $grid-unit-y * 2;

    @include themes(background-color, card-bg);

    &-padding-sm {
      padding: $grid-unit-y * 2;
    }
  }

  &-title {
    font-weight: $font-weight-medium;
    margin-bottom: $padding-xs-vertical;

    @include themes(color, color-new-heading);
  }

  &-subtitle {
    margin-bottom: $grid-unit-y * 2;
    font-size: $font-size-base;

    @include themes(color, color-new-body-light);
  }

  &-bg-grey {
    text-align: center;
    padding-top: $grid-unit-y * 7;
    padding-bottom: $grid-unit-y * 7;
    border-radius: $border-radius-base * 2;

    @include themes(background, color-new-bg);
  }
}