WeAreGenki/minna-ui

/**
 * CARDS
 *
 * @format
 */

.card {
  word-wrap: break-word;
  background-color: $card-background-color;
  border-radius: $radius-large;
  box-shadow: $card-shadow;
}

.card-hover {
  position: relative;
  z-index: $card-hover-zindex;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: $card-hover-text-color;
  box-shadow: $card-hover-shadow;

  a& {
    font-weight: $text-weight;
    text-decoration: none;

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

  /**
   * 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 $ns {
    &::after {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      border-radius: $radius-large;
      box-shadow: $card-hover-hover-shadow;
      opacity: 0;
      transition: opacity $card-hover-animate-speed-out ease-out;
      content: '';
    }

    &:hover::after,
    &:focus::after {
      opacity: 1;
      transition-duration: $card-hover-animate-speed-in;
    }
  }
}

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

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

.card-body {
  display: inline-block; /* prevents margin collapsing */
  margin: $card-body-margin;
}

.card-button {
  margin: auto 0 0;
  padding: $button-padding-y $button-padding-x;
  color: $card-button-text-color;
  font-weight: $button-text-weight;
  text-align: center;
  border-top: $card-button-border;
  border-bottom-right-radius: $radius-large;
  border-bottom-left-radius: $radius-large;
}