/// Card
///
/// @group cards
///
/// @example scss - usage
///
///   @include k-Card;
///
/// @example html
///
///   <div class="k-Card k-Card--light k-Card--microRounded" />

@mixin k-Card {
  $micro-radius: k-px-to-rem(4px);
  $tiny-radius: k-px-to-rem(8px);
  $radius: k-px-to-rem(16px);

  $padded: k-px-to-rem(50px);
  $translate-y: k-px-to-rem(-10px);

  $light-background-color: map-get($k-colors, 'background-1');
  $light-text-color: map-get($k-colors, 'font-1');

  $border-color: map-get($k-colors, 'line-1');
  $border-color-dark: map-get($k-colors, 'line-2');
  $border-size: k-px-to-rem(1px);

  $box-shadow-values: 0 5px 15px;
  $box-shadow-color: map-get($k-colors, 'line-1');
  $box-shadow-color-hover: map-get($k-colors, 'line-2');

  $transition-duration: .4s;
  $transition-easing: ease-in-out;

  .k-Card {
    display: block;
    overflow: auto;
  }

  .k-Card__imageContainer {
    overflow: hidden;
  }

  // Modifiers.
  .k-Card--light {
    background: $light-background-color;
    color: $light-text-color;
  }

  .k-Card--padded {
    padding-left: $padded;
    padding-right: $padded;
  }

  .k-Card--microRounded {
    border-radius: $micro-radius;
  }

  .k-Card--tinyRounded {
    border-radius: $tiny-radius;
  }

  .k-Card--rounded {
    border-radius: $radius;
  }

  .k-Card--withBorder {
    box-sizing: border-box;
    border: $border-size solid $border-color;
  }

  .k-Card--withDarkBorder {
    box-sizing: border-box;
    border: $border-size solid $border-color-dark;
  }

  .k-Card--withShadow {
    box-shadow: $box-shadow-values $box-shadow-color;
  }

  .k-Card--withVerticalPadding {
    padding-top: $radius;
    padding-bottom: $radius;
  }

  // Linkable card.

  a.k-Card {
    text-decoration: inherit;
    color: inherit;

    transition: transform $transition-duration, box-shadow $transition-duration;

    .k-Card__image {
      transition: transform $transition-duration $transition-easing;
    }

    .k-Card__title {
      transition: color $transition-duration $transition-easing;
    }

    &:hover,
    &:focus {
      &.k-Card--withShadow {
        box-shadow: $box-shadow-values $box-shadow-color-hover;
      }

      &.k-Card--translateOnHover {
        transform: translateY($translate-y);
      }

      &.k-Card--withoutBoxShadowOnHover {
        box-shadow: initial;
      }

      .k-Card__image {
        transform: scale(1.07);
      }

      .k-Card__title {
        color: map-get($k-colors, 'primary-1');
      }
    }
  }
}