SU-SWS/decanter

///
/// Mixin for base card styling
///
/// @param {String} image-hover - Image link hover effect. Use 'zoom' for an image zoom-in effect. Use 'opacity'
///
/// @name card
///
/// @group mixin

@mixin card($image-hover: 'zoom') {
  @include box-shadow(shallow, 1px solid color(card-border));
  display: block;
  background-color: color(bg);

  img,
  figure {
    /// Hide the media element on the smallest screen sizes.
    @include grid-media-only('xs') {
      display: none;
    }
  }

  .su-card__contents {
    @include responsive-spacing('padding', 2);
    @include sans;

    p {
      @include small-paragraph;
    }

    /// Ensure no top padding or margin on first item.
    > *:first-child {
      @include padding(0 null null);
      @include margin(-0.3em null null);
    }

    /// Ensure no bottom padding or margin on last item unless it is a button.
    > *:last-child:not(.su-card__button) {
      @include padding(null null 0);
      @include margin(null null 0);
    }

    /// Super Headline.
    > span {
      @include responsive-spacing('margin', null null -2);
      @include types;
      @include type-f;
      display: block;
    }

    /// Headline.
    > h2 {
      @include responsive-spacing('margin', null null -1);
      @include type-c;

      > a {
        font-weight: $su-font-bold;
        transition: color 0.3s ease-out;

        &:hover,
        &:focus {
          color: color(brand--bright);
          text-decoration: underline;
        }
      }
    }

    /// Card body - open field, any p or div (that are not part of the button)
    > div:not(.su-card__button) {
      line-height: $su-base-line-height;
    }

    > div:not(.su-card__button),
    > p:last-of-type {
      @include margin(null null 0);
    }

    > .su-link--action,
    > a {
      &:not(:first-child) {
        @include responsive-spacing('margin', -1 null null);
        display: inline-block;
      }
    }
  }

  /// Button to click on.
  .su-card__button {
    @include responsive-spacing('margin', 1 null -2);

    @include grid-media-only('xs') {
      .su-button {
        /// Overriding default button 100% width in xs.
        width: auto;
      }
    }
  }

  /// Image hover effects
  a {
    @if ($image-hover == 'zoom') {
      .su-media__wrapper {
        img {
          transition: transform 0.3s ease-in-out;
        }
      }

      &:hover,
      &:focus {
        .su-media__wrapper {
          img {
            transform: scale(1.03);
          }
        }
      }
    }
    @else if ($image-hover == 'opacity') {
      .su-media__wrapper {
        img {
          transition: opacity 0.3s ease-in-out;
        }
      }

      &:hover,
      &:focus {
        .su-media__wrapper {
          img {
            opacity: 0.8;
          }
        }
      }
    }
  }
}