/// Project creator card
///
/// @group cards
///
/// @example scss - usage
///
///   @include k-ProjectCreatorCard;
///
/// @example html
///
///   <div class="k-ProjectCreatorCard"
///     <div class="k-ProjectCreatorCard__grid">
///       <div class="k-ProjectCreatorCard__link--flex">
///         <div class="k-ProjectCreatorCard__content">
///           <svg />
///         </div>
///         …
///         <p class="k-ProjectCreatorCard__text"
///       </div>
///     </div>
///     <a class="k-ProjectCreatorCard__link">
///       <div class="k-ProjectCreatorCard__grid k-ProjectCreatorCard__grid--withBorderTop">
///         <div class="k-ProjectCreatorCard__link--flex">
///           <div class="k-ProjectCreatorCard__link--withAnimation"> … </div>
///         </div>
///       </div>
///     </a>
///   </div>

@mixin k-ProjectCreatorCard {
  $date-font: 'light';
  $date-size: -3; // 11px

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

  $status-font: 'regular';
  $status-size: -3; // 11px

  $status-icon-size: k-px-to-rem(10px);
  $transition-duration: .2s;

  .k-ProjectCreatorCard {
    text-align: left;
  }

  .k-ProjectCreatorCard__grid {
    overflow: hidden;
    padding: 0 k-px-to-rem(20px);
  }

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

  .k-ProjectCreatorCard__grid--flexEnd {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .k-ProjectCreatorCard__content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .k-ProjectCreatorCard__date {
    margin-left: k-px-to-rem(5px);

    @include k-typographyFont($date-font);
    @include k-typographyFontSize($date-size);
  }

  .k-ProjectCreatorCard__link {
    display: block;
    text-decoration: none;
    color: map-get($k-colors, 'font-1');

    @include k-typographyFont($link-font);
    @include k-typographyFontSize($link-size);

    &:hover {
      background-color: map-get($k-colors, 'background-2');
    }
  }

  .k-ProjectCreatorCard__link--withAnimation {
    position: relative;
    left: 0;
    transition: left $transition-duration;

    .k-ProjectCreatorCard:focus &,
    .k-ProjectCreatorCard:hover & {
      left: k-px-to-rem(5px);
    }
  }

  .k-ProjectCreatorCard__status {
    display: flex;
    align-items: center;
  }

  .k-ProjectCreatorCard__status--icon {
    width: $status-icon-size;
    height: $status-icon-size;
    margin-right: k-px-to-rem(5px);

    box-sizing: border-box;
    border-radius: $status-icon-size / 2;
    border: 1px solid transparent;
  }

  .k-ProjectCreatorCard__status--text {
    @include k-typographyFont($status-font);
    @include k-typographyFontSize($status-size);
  }

}