/// Project card
///
/// @group cards
///
/// @example scss - usage
///
///   @include k-ProjectCard;
///
/// @example html
///
///   <div class="k-ProjectCard">
///     <div class="k-ProjectCard__grid">
///       <div class="k-ProjectCard__grid--flex">
///         …
///         <div class="k-ProjectCard__grid--flex__item-fluid">…</div>
///         <div class="k-ProjectCard__tooltip">
///           <span class="k-ProjectCard__tooltip__content">…<span>
///         </div>
///       </div>
///     </div>
///
///     <div class="k-ProjectCard__grid">
///       <img class="k-ProjectCard__img" src="" />
///     </div>
///
///     <div class="k-ProjectCard__grid k-ProjectCard__borderTop">
///       <div class="k-ProjectCard__info">
///         <span class="k-ProjectCard__info__value">…</span>
///         <span class="k-ProjectCard__info__value">…</span>
///         <span class="k-ProjectCard__info__value">…</span>
///       </div>
///     </div>
///
///     <div class="k-ProjectCard__status">
///       <svg class="k-ProjectCard__status__svg">…</svg>
///       …
///     </div>
///   </div>

@mixin k-ProjectCard {
  // Tooltip
  $tooltip-font: 'regular';
  $tooltip-font-size: -2; // 12px
  $tooltip-arrow-size: 5px;
  $tooltip-background-color: map-get($k-colors, 'primary-1');
  $tooltip-color-content: map-get($k-colors, 'background-1');
  $tooltip-transition-duration: .2s;

  // Info
  $info-font: 'light';
  $info-size: -1; // 14px

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

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

  // Status primary background
  $status-primary-background: map-get($k-colors, 'primary-1');
  $status-primary-color: map-get($k-colors, 'background-1');

  // Status valid background
  $status-valid-background: map-get($k-colors, 'valid');
  $status-valid-color: map-get($k-colors, 'font-1');

  // Status grey background
  $status-grey-background: map-get($k-colors, 'line-2');
  $status-grey-color: map-get($k-colors, 'background-1');

  // Status error background
  $status-error-background: map-get($k-colors, 'error');
  $status-error-color: map-get($k-colors, 'background-1');

  $line-height: normal;

  .k-ProjectCard {
    &.is-disabled {
      filter: grayscale(1) opacity(.4);
    }
  }

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

  .k-ProjectCard__grid--withBorderTop {
    border-top: 1px solid map-get($k-colors, 'line-1');
  }

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

  .k-ProjectCard__grid--flex__item-fluid {
    flex: 1;
  }

  .k-ProjectCard__tooltip {
    position: relative;
    display: flex;
  }

  .k-ProjectCard__tooltip__content {
    position: absolute;
    top: k-px-to-rem(-7px);
    right: k-px-to-rem(30px);

    padding: k-px-to-rem(10px);
    background: $tooltip-background-color;
    border-radius: k-px-to-rem(4px);

    white-space: nowrap;
    color: $tooltip-color-content;
    @include k-typographyFont($tooltip-font);
    @include k-typographyFontSize($tooltip-font-size, $line-height);

    opacity: 0;
    visibility: hidden;
    transition: opacity $tooltip-transition-duration,
                visibility $tooltip-transition-duration;

    &:after {
      position: absolute;
      left: 100%;
      top: 50%;
      content: " ";
      height: 0;
      width: 0;
      margin-top: k-px-to-rem(-$tooltip-arrow-size);

      border: solid transparent;
      border-left-color: $tooltip-background-color;
      border-width: k-px-to-rem($tooltip-arrow-size);

      pointer-events: none;
    }

    .k-ProjectCard:hover & {
      opacity: 1;
      visibility: visible;
    }
  }

  .k-ProjectCard__info {
    width: percentage(1/3);
    @include k-typographyFont($info-font);
    @include k-typographyFontSize($info-size, $line-height);
  }

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

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

  .k-ProjectCard__paragraph {
    padding: 0 k-px-to-rem(25px);
  }

  .k-ProjectCard__status {
    overflow: auto;
    @include k-typographyFont($status-font);
    @include k-typographyFontSize($status-size, $line-height);
  }

  .k-ProjectCard__status--primaryBackground {
    background-color: $status-primary-background;
    color: $status-primary-color;
  }

  // DEPRECATED
  .k-ProjectCard__status--validBackground,
  .k-ProjectCard__status--tertiaryBackground {
    background-color: $status-valid-background;
    color: $status-valid-color;
  }

  .k-ProjectCard__status--greyBackground {
    background-color: $status-grey-background;
    color: $status-grey-color;
  }

  .k-ProjectCard__status--errorBackground {
    background-color: $status-error-background;
    color: $status-error-color;
  }

  .k-ProjectCard__status--errorReverseBackground {
    color: $status-error-background;
  }

  .k-ProjectCard__status__content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .k-ProjectCard__status__svg {
    display: block;
    width: k-px-to-rem(20px);
    height: k-px-to-rem(20px);
    margin-right: k-px-to-rem(10px);
  }

  .k-ProjectCard__tagLists__separator {
    @include k-separatorBase;

    width: 1px;
    height: 7px;
  }
}