/// ButtonWithBadge
///
/// @group buttons
///
/// @example scss - usage
///
///   @include k-ButtonWithBadge;
///
/// @example html
///
///   <button class="k-ButtonWithBadge">
///     <span class="k-ButtonImage">
///       <img class="k-ButtonImage__img"
///            src="https://placehold.it/40x40/caf4fe/caf4fe"
///            width="40"
///            height="40"
///            alt="" />
///     </span>
///
///     <span class="k-ButtonWithBadge__badge k-Badge">42</span>
///   </button>

@mixin k-ButtonWithBadge {
  $position: -8px;

  .k-ButtonWithBadge {
    position: relative;
    display: block;
    padding: 0;

    border: none;
    background: none;

    cursor: pointer;
  }

  .k-ButtonWithBadge__badge {
    position: absolute;
    top: $position;
    right: $position;

    // FIXME: position absolute change padding…
    padding-top: k-px-to-rem(4px);
    padding-bottom: k-px-to-rem(4px);

    border: 2px solid white;
  }

  .k-ButtonWithBadge__badge--topLeft {
    top: $position;
    right: auto;
    bottom: auto;
    left: $position;
  }

  .k-ButtonWithBadge__badge--bottomRight {
    top: auto;
    right: $position;
    bottom: $position;
    left: auto;
  }

  .k-ButtonWithBadge__badge--bottomLeft {
    top: auto;
    right: auto;
    bottom: $position;
    left: $position;
  }
}