/* TODO:

* Add a way to change the flag breakpoint as a modifier/class?
*/

@mixin card-inner-radius {

border-top-left-radius: calc(
  #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}
);
border-top-right-radius: calc(
  #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}
);

}

@include override-prose {

.usa-card-group {
  @include add-list-reset;
}

}

.usa-card-group {

@include u-display("flex");
@include u-flex("column", "wrap", "align-stretch");
@include u-margin-x($theme-card-gap / -2);
@include at-media($theme-card-flag-min-width) {
  @include u-flex("row");
}

}

@include override-prose {

.usa-card {
  @include u-margin-bottom($theme-card-margin-bottom + 1);
  @include u-maxw("none"); // override prose scope
  &:last-child {
    @include u-margin-bottom(
      $theme-card-margin-bottom + 1
    ); // override prose scope
  }
  @include at-media("tablet") {
    @include u-margin-bottom($theme-card-margin-bottom);
    &:last-child {
      @include u-margin-bottom(
        $theme-card-margin-bottom
      ); // override prose scope
    }
  }
}

}

.usa-card__container {

@include border-box-sizing;
@include typeset;
@include u-bg("white");
@include u-border($theme-card-border-width, $theme-card-border-color);
@include u-display("flex");
@include u-height("full");
@include u-flex("column");
@include u-margin-x($theme-card-gap / 2);
@include u-position("relative");
@include u-radius($theme-card-border-radius);

}

.usa-card:not(.usa-card–flag) .usa-card__container > :only-child {

@include u-padding($theme-card-padding-perimeter);

}

.usa-card .usa-card__img {

@include u-display("block");

}

// Header // ——————————— .usa-card__header {

@include u-padding-bottom($theme-card-padding-y / 2);
@include u-padding-top($theme-card-padding-perimeter);
@include u-padding-x($theme-card-padding-perimeter);

&:last-child {
  @include u-padding-bottom($theme-card-padding-perimeter);
}

}

.usa-card__heading {

@include typeset($theme-card-header-typeset);
@include u-margin(0);

}

// Media // ——————————— .usa-card__media {

@include u-order("first");
// IE 11
// http://github.com/philipwalton/flexbugs/issues/75
min-height: 1px;

}

.usa-card__img {

@include card-inner-radius;
@include u-bg("base-lightest");
@include u-position("relative");
overflow: hidden;

img {
  @include u-display("block");
  @include u-height("full");
  @include u-width("full");
  object-fit: cover;
}

}

.usa-card__media–inset {

@include u-padding-top($theme-card-padding-perimeter);
@include u-padding-x($theme-card-padding-perimeter);

.usa-card__img {
  @include u-radius(0);
}

}

// Body // ——————————— .usa-card__body {

@include u-flex("fill");
@include u-padding-x($theme-card-padding-perimeter);
@include u-padding-y($theme-card-padding-y / 2);
// IE 11
flex-basis: auto;

// adjust spacing if body lack siblings
&:last-child {
  @include u-padding-bottom($theme-card-padding-perimeter);
}

&:first-child {
  @include u-padding-top($theme-card-padding-perimeter);
}

&:only-child {
  @include u-padding-y($theme-card-padding-perimeter);
}

}

// Footer // ——————————— .usa-card__footer {

@include u-padding-bottom($theme-card-padding-perimeter);
@include u-padding-top($theme-card-padding-y / 2);
@include u-padding-x($theme-card-padding-perimeter);

}

.usa-card__footer .usa-button:only-of-type {

@include u-margin-right(0);

}

.usa-card__header, .usa-card__body {

// strip spacing from first and last content
> :last-child {
  @include u-padding-bottom(0);
  @include u-margin-bottom(0);
}

> :first-child {
  @include u-margin-top(0);
  @include u-padding-top(0);
}

> :only-child {
  @include u-margin-y(0);
  @include u-padding-y(0);
}

}

// ——————————— // Variations // ———————————

// Exdent .usa-card__header–exdent, .usa-card__media–exdent, .usa-card__footer–exdent {

@include u-margin-x(-$theme-card-border-width);

}

.usa-card__header–exdent, .usa-card__footer–exdent {

> * {
  @include u-padding-x($theme-card-border-width);
}

}

.usa-card__media–exdent {

@include u-margin-top(-$theme-card-border-width);

.usa-card__img {
  @include u-radius-top($theme-card-border-radius);
}

}

// Header first // ——————————— .usa-card–header-first {

.usa-card__header {
  @include card-inner-radius;
  @include u-padding-bottom($theme-card-padding-y);
}

.usa-card__header--exdent {
  @include u-margin-top(-$theme-card-border-width);
  @include u-radius-top($theme-card-border-radius);
}

.usa-card__media--inset {
  @include u-padding-top(0);
}

.usa-card__media {
  @include u-order(0);
}

.usa-card__img {
  @include u-radius(0);
}

.usa-card__body {
  @include u-padding-top($theme-card-padding-y);
}

}

.usa-card–flag {

@include at-media($theme-card-flag-min-width) {
  .usa-card__media {
    @include u-display("flex");
    @include u-overflow("hidden");
    @include u-pin-y;
    @include u-pin-left;
    @include u-position("absolute");
    @include u-width($theme-card-flag-image-width);
  }
  .usa-card__img {
    @include u-radius(0);
    border-top-left-radius: calc(
      #{radius($theme-card-border-radius)} - #{units(
          $theme-card-border-width
        )}
    );
    border-bottom-left-radius: calc(
      #{radius($theme-card-border-radius)} - #{units(
          $theme-card-border-width
        )}
    );
  }

  .usa-card__header,
  .usa-card__body,
  .usa-card__footer {
    @include u-margin-left($theme-card-flag-image-width);
  }

  .usa-card__media--exdent {
    @include u-margin-left(-$theme-card-border-width);
    @include u-margin-right(0);
    @include u-margin-y(-$theme-card-border-width);

    .usa-card__img {
      @include u-radius-left($theme-card-border-radius);
    }
  }

  .usa-card__media--inset {
    @include u-padding-right(0);
    @include u-padding-bottom($theme-card-padding-perimeter);

    .usa-card__img {
      @include u-radius(0);
    }
  }

  &.usa-card--header-first {
    .usa-card__header {
      @include u-padding-bottom($theme-card-padding-y / 2);
    }
    .usa-card__body {
      @include u-padding-top($theme-card-padding-y / 2);
    }
    .usa-card__media--inset {
      @include u-padding-top($theme-card-padding-perimeter);
    }
  }

  &.usa-card--media-right {
    .usa-card__media {
      @include u-left("auto");
      @include u-right(0);
    }

    .usa-card__media--inset {
      @include u-padding-left(0);
      @include u-padding-right($theme-card-padding-perimeter);

      .usa-card__img {
        @include u-radius(0);
      }
    }

    .usa-card__img {
      @include u-radius(0);
      border-top-right-radius: calc(
        #{radius($theme-card-border-radius)} - #{units(
            $theme-card-border-width
          )}
      );
      border-bottom-right-radius: calc(
        #{radius($theme-card-border-radius)} - #{units(
            $theme-card-border-width
          )}
      );
    }

    .usa-card__header,
    .usa-card__body,
    .usa-card__footer {
      @include u-margin-left(0);
      @include u-margin-right($theme-card-flag-image-width);
    }

    .usa-card__media--exdent {
      @include u-margin-right(-$theme-card-border-width);
      @include u-margin-left(0);

      .usa-card__img {
        @include u-radius(0);
        @include u-radius-right($theme-card-border-radius);
      }
    }
  }
}

}

.usa-card:not(.usa-card–flag).usa-card__media–set-aspect {

@include add-aspect("16x9");
@include u-position("relative");

.usa-card__img {
  @include u-pin-all;
}

}