18F/web-design-standards

@use "sass:math";

@use "uswds-core" as *;

/* 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(math.div($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 set-text-and-bg("white");
  @include typeset;
  @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(math.div($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-top($theme-card-padding-perimeter);
  @include u-padding-x($theme-card-padding-perimeter);
  padding-bottom: math.div(units($theme-card-padding-y), 2);

  &: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);
  padding-bottom: math.div(units($theme-card-padding-y), 2);
  padding-top: math.div(units($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-x($theme-card-padding-perimeter);
  padding-top: math.div(units($theme-card-padding-y), 2);
}

.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__body--exdent,
.usa-card__footer--exdent {
  margin-inline: units($theme-card-border-width) * -1;
}

.usa-card__header--exdent,
.usa-card__body--exdent,
.usa-card__footer--exdent {
  > * {
    @include u-padding-x($theme-card-border-width);
  }
}

.usa-card__media--exdent {
  margin-top: units($theme-card-border-width) * -1;

  .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-radius-top($theme-card-border-radius);
    margin-top: units($theme-card-border-width) * -1;
  }

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

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

    &--exdent {
      @include u-margin-top(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 {
      margin: units($theme-card-border-width) * -1;

      .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 {
        padding-bottom: math.div(units($theme-card-padding-y), 2);
      }

      .usa-card__body {
        padding-top: math.div(units($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__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;
  }
}