/// A rich link intended to be external.
///
/// @group links
///
/// @example scss - usage
///  @include k-ExternalRichLink;
///
/// @example html
///   <a class="k-ExternalRichLink" href="#">
///     <div class="k-ExternalRichLink__element">
///       Kitten
///     </div>
///
///     <div class="k-ExternalRichLink__element k-ExternalRichLink__element--animate">
///       <span className="k-ButtonIcon k-ButtonIcon--tiny">
///         <svg className="k-ButtonIcon__svg" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
///           <path d="M7.828,5L6.414,6.413L2.172,2.172l1.414-1.415L7.828,5z"/>
///           <path d="M7.828,5L3.586,9.243L2.172,7.827l4.242-4.241L7.828,5z"/>
///         </svg>
///       </span>
///     </div>
///   </a>

@mixin k-ExternalRichLink {
  .k-ExternalRichLink {
    display: flex;
    align-items: center;
    align-self: flex-start;
    justify-content: space-between;

    text-decoration: none;
  }

  .k-ExternalRichLink__element {
    display: flex;
    margin: 0 k-px-to-rem(10px);

    .k-ExternalRichLink__image {
      height: k-px-to-rem(24px);
    }
  }

  .k-ExternalRichLink__element--animate {
    position: relative;
    left: 0;
    transition: left .2s;

    .k-ExternalRichLink:focus &,
    .k-ExternalRichLink:hover & {
      left: 5px;
    }
  }
}