// RAMEN CARD COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $card-background-color: Card background colour
// $card-background-color-hover: Card background colour on hover
// $card-border: Card border style colour
// $card-padding: Padding around the card content
// $card-icon-size: Size of the card icon (small image)
// $card-icon-margin-bottom: Margin bottom on the card icon
// $card-meta-color: Text colour of card meta label
// $card-meta-margin-bottom: Margin bottom on cart meta label
// $card-title-color: Text colour of card label
// $card-title-margin-bottom: Margin bottom on the card title
// $card-copy-color: Text colour for the card copy
//
//

@mixin card {
  height: 100%;
  width: 100%;
}

@mixin card-link {
  background: $card-background-color;
  border: $card-border;
  display: block;
  height: 100%;
  width: 100%;

  &:hover {
    background-color: $card-background-color-hover;

    .c-card__title {
      text-decoration: underline;
    }
  }
}

@mixin card-content {
  padding: $card-padding;
}

@mixin card-icon {
  margin-bottom: $card-icon-margin-bottom;
  max-width: $card-icon-size;
}

@mixin card-meta {
  color: $card-meta-color;
  margin-bottom: $card-meta-margin-bottom;
}

@mixin card-title {
  color: $card-title-color;
  margin-bottom: $card-title-margin-bottom;
  transition: text-decoration $global-transition-speed $global-easing 0s;
}

@mixin card-copy {
  color: $card-copy-color;
  margin-bottom: 0;
}

.c-card {
  @include card;

  &__link {
    @include card-link;
  }

  &__content {
    @include card-content;
  }

  &__icon {
    @include card-icon;
  }

  &__meta {
    @include label-text;
    @include card-meta;
  }

  &__title {
    @include heading-4;
    @include card-title;
  }

  &__copy {
    @include body-text;
    @include card-copy;
  }
}