/// Project similar card
///
/// @group cards
///
/// @example scss - usage
///
///   @include k-ProjectSimilarCard;
///
/// @example html
///
///   <div class="k-ProjectSimilarCard">
///     <div class="k-ProjectSimilarCard__grid">
///       <div class="k-ProjectSimilarCard__grid--flex">
///         <div class="k-ProjectSimilarCard__refresh"> … </div>
///         <div class="k-ProjectSimilarCard__navigation">
///           <div class="k-ProjectSimilarCard__header--step"> … </div>
///           <div class="k-ProjectSimilarCard__header--button"> … </div>
///         </div>
///       </div>
///     </div>
///     <a class="k-ProjectSimilarCard__content">
///       <div>
///         <div class="k-ProjectSimilarCard__grid">
///           <img class="k-ProjectSimilarCard__img" />
///         </div>
///       </div>
///       <div class="k-ProjectSimilarCard__grid"> … </div>
///       <div class="k-ProjectSimilarCard__grid">
///         <div class="k-ProjectSimilarCard__info"> … </div>
///       </div>
///     </a>
///   </div>

@mixin k-ProjectSimilarCard {
  $info-font: 'light';
  $info-size: -1; // 14px

  $header-font: 'regular';
  $header-size: -1; // 14px

  $info-value-font: 'bold';
  $info-value-size: 0; // 16px

  $line-height: normal;

  .k-ProjectSimilarCard {
    overflow: auto;
  }

  .k-ProjectSimilarCard__grid {
    padding: 0 k-px-to-rem(20px);
  }

  .k-ProjectSimilarCard__grid--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .k-ProjectSimilarCard__refresh,
  .k-ProjectSimilarCard__navigation {
    display: flex;
    align-items: center;
  }

  .k-ProjectSimilarCard__refresh__link {
    text-decoration: none;
    color: map-get($k-colors, 'primary-1');

    @include k-typographyFont($header-font);
    @include k-typographyFontSize($header-size, $line-height);

    cursor: pointer;
  }

  .k-ProjectSimilarCard__header--button {
    > :first-child {
      margin-right: k-px-to-rem(5px);
    }
  }

  .k-ProjectSimilarCard__header--step {
    @include k-typographyFont($header-font);
    @include k-typographyFontSize($header-size, $line-height);

    margin-right: k-px-to-rem(10px);
  }

  .k-ProjectSimilarCard__navigation {
    justify-content: flex-end;
  }

  .k-ProjectSimilarCard__img {
    display: block;
    width: 100%;
  }

  .k-ProjectSimilarCard__info {
    width: percentage(1/3);

    @include k-typographyFont($info-font);
    @include k-typographyFontSize($info-size, $line-height);
  }

  .k-ProjectSimilarCard__info__value {
    @include k-typographyFont($info-value-font);
    @include k-typographyFontSize($info-value-size, $line-height);
  }

  .k-ProjectSimilarCard__loading {
    justify-content: center;
  }

  a.k-ProjectSimilarCard__content {
    color: inherit;
    text-decoration: inherit;
  }
}