/// Setup a button image element.
///
/// This mixin will setup an element to look like a button with a image.
///
/// You can use 3 versions of this button: tiny, default and big.
///
/// @group buttons
///
/// @example scss - Usage
///   @include k-ButtonImage;
///
/// @example html
///  <button class="k-ButtonImage">
///    <img class="k-ButtonImage__img" src="path_to_image" />
///  </button>

@mixin k-ButtonImage {
  // Size settings.
  $button-size-tiny: 30px;
  $button-size: 40px;
  $button-size-big: 50px;
  $button-size-huge: 80px;

  $border-size: k-px-to-rem(2px);
  $border-color: map-get($k-colors, 'line-1');

  .k-ButtonImage {
    @include k-buttonRoundedImage($button-size);

    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    opacity: 1;
    transition: opacity .2s;

    &:hover,
    &:focus {
      opacity: .8;
    }
  }

  .k-ButtonImage--tiny {
    @include k-buttonRoundedImage($button-size-tiny);
  }

  .k-ButtonImage--big {
    @include k-buttonRoundedImage($button-size-big);
  }

  .k-ButtonImage--huge {
    @include k-buttonRoundedImage($button-size-huge);
  }

  .k-ButtonImage--withoutPointerEvents {
    pointer-events: none;
  }

  .k-ButtonImage--withBorder {
    border: $border-size solid $border-color;
  }

  .k-ButtonImage__img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
  }
}