MaxMilton/ekscss

/**
 * CARDS
 */

.card {
  overflow: hidden; // prevent margin collapse
  border-radius: ${x.radiusLarge};
  background-color: ${x.card.backgroundColor};
  box-shadow: ${x.card.shadow};
}

.card-hover {
  position: relative;
  z-index: ${x.card.hoverZIndex};
  display: inline-block;
  margin: 0;
  padding: 0;
  color: ${x.card.hoverTextColor};
  box-shadow: ${x.card.hoverShadow};

  /**
   * Don't include a hover state on small screens as they typically don't have
   * mouse input and/or are low powered so animations may jank the UI.
   */
  @media ${x.media.ns} {
    &::after {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      border-radius: ${x.radiusLarge};
      box-shadow: ${x.card.hoverHoverShadow};
      content: '';
      opacity: 0;
      transition: opacity ${x.card.hoverAnimateSpeedOut} ease-out;
    }

    &:hover::after,
    &:focus::after {
      opacity: 1;
      transition-duration: ${x.card.hoverAnimateSpeedIn};
    }
  }

  a& {
    font-weight: ${x.textWeight};
    text-decoration: none;

    /* override anchor pseudo state style as cards already have visual cues */
    &:hover,
    &:focus {
      color: ${x.card.hoverTextColor};
      text-decoration: unset;
    }
  }
}

.card-has-button {
  display: flex;
  flex-direction: column;
}

.card-img {
  border-top-left-radius: ${x.radiusLarge};
  border-top-right-radius: ${x.radiusLarge};
}

.card-body {
  margin: ${x.card.bodyMargin};
}

.card-button {
  margin: auto 0 0;
  padding: ${x.button.paddingY} ${x.button.paddingX};
  border-top: ${x.card.buttonBorder};
  border-bottom-right-radius: ${x.radiusLarge};
  border-bottom-left-radius: ${x.radiusLarge};
  color: ${x.card.buttonTextColor};
  font-weight: ${x.button.textWeight};
  text-align: center;
}