/// Setup a button icon element.
///
/// This mixin will setup an element to look like a button with a icon inside.
///
/// Paddings depend on the size of button and the size of icon.
/// It is computed automatically with these 2 values.
///
/// Available color modifiers:
/// - `.k-ButtonIcon--hydrogen`
/// - `.k-ButtonIcon--helium`
/// - `.k-ButtonIcon--lithium`
/// - `.k-ButtonIcon--beryllium`
/// - `.k-ButtonIcon--carbon`
/// - `.k-ButtonIcon--azote`
/// - `.k-ButtonIcon--oxygen`
/// - `.k-ButtonIcon--facebook`
/// - `.k-ButtonIcon--twitter`
/// - `.k-ButtonIcon--linkedin`
/// - `.k-ButtonIcon--instagram`
/// - `.k-ButtonIcon--youtube`
/// - `.k-ButtonIcon--pinterest`
///
/// Available size modifiers:
/// - `k-ButtonIcon--nano`
/// - `k-ButtonIcon--micro
/// - `k-ButtonIcon--tiny`
/// - `k-ButtonIcon--big`
///
/// @group buttons
///
/// @example scss button - Usage
///   @include k-ButtonIcon;
///
/// @example html
///   <button class="k-ButtonIcon k-ButtonIcon--hydrogen">
///     <svg class='k-ButtonIcon__svg' viewBox="0 0 14 12"
///          xmlns="http://www.w3.org/2000/svg"><path d="M7 2.927C6.71 1.267
///          5.262.007 3.52.01 1.574.013-.003 1.595 0 3.543 0 4.485.37 5.34.97
///          5.97l.012.014L7.012 12l5.856-5.88c.698-.646 1.134-1.57
///          1.132-2.597-.002-1.95-1.582-3.525-3.53-3.523C8.73.002 7.284 1.267
///          7 2.927z"/></svg>
///   </button>

@mixin k-ButtonIcon {
  $border-size: 2px;

  // Size settings with border.
  $button-size-nano-with-border: 20px;
  $button-size-micro-with-border: 30px;
  $button-size-tiny-with-border: 40px;
  $button-size-with-border: 50px;
  $button-size-big-with-border: 70px;

  // Size settings without border.
  $button-size-nano: $button-size-nano-with-border - ($border-size * 2);
  $button-size-micro: $button-size-micro-with-border - ($border-size * 2);
  $button-size-tiny: $button-size-tiny-with-border - ($border-size * 2);
  $button-size: $button-size-with-border - ($border-size * 2);
  $button-size-big: $button-size-big-with-border - ($border-size * 2);

  // SVG element default settings.
  $icon-width: k-px-to-rem(12px);
  $icon-height: k-px-to-rem(14px);

  // Sizes
  $cross-size: k-px-to-rem(8px);
  $nano-size: k-px-to-rem(6px);
  $tooltip-nano-size: k-px-to-rem(10px);
  $checked-nano-size: k-px-to-rem(10px);
  $heart-size: k-px-to-rem(14px);
  $signup-size: k-px-to-rem(18px);
  $star-size: k-px-to-rem(17px);

  // Social sizes
  $facebook-size: k-px-to-rem(14px);
  $twitter-size: k-px-to-rem(12px);
  $linkedin-size: k-px-to-rem(14px);
  $instagram-size: k-px-to-rem(16px);
  $youtube-size: k-px-to-rem(16px);
  $pinterest-size: k-px-to-rem(16px);

  // Arrow sizes
  $horizontalArrow-width: k-px-to-rem(6px);
  $horizontalArrow-height: k-px-to-rem(6px);
  $verticalArrow-width: k-px-to-rem(6px);
  $verticalArrow-height: k-px-to-rem(6px);

  // Button radius
  // Chrome forced a default `border-radius: 4px`, we have to set it to 0px.
  $button-radius: 0px;

  $transition-speed: .2s;

  // Btn animate transition
  $animation-duration: .4s;

  .k-ButtonIcon {
    @include k-buttonBase;
    @include k-buttonPadding($button-size, $icon-width, $icon-height);

    border-radius: $button-radius;
  }

  .k-ButtonIcon__svg {
    display: block;
    margin: 0;
    padding: 0;
    width: $icon-width;
    height: $icon-height;
    transition: fill $transition-speed;

    pointer-events: none;

    .k-ButtonIcon__svg__stroke {
      transition: stroke $transition-speed;
    }
  }

  // Mirror rotate
  // DEPRECATED
  .k-ButtonIcon__svg--mirror {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
  }

  // Animate rotate
  .k-ButtonIcon__svg--rotate {
    transition: all $animation-duration ease;
    -webkit-transition: all $animation-duration ease;

    &:hover {
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
    }
  }

  // Colors modifiers.

  .k-ButtonIcon--hydrogen {
    @include k-buttonColors('hydrogen');
  }

  .k-ButtonIcon--helium {
    @include k-buttonColors('helium');
  }

  .k-ButtonIcon--lithium {
    @include k-buttonColors('lithium');
  }

  .k-ButtonIcon--beryllium {
    @include k-buttonColors('beryllium');
  }

  .k-ButtonIcon--carbon {
    @include k-buttonColors('carbon');
  }

  .k-ButtonIcon--azote {
    @include k-buttonColors('azote');
  }

  .k-ButtonIcon--oxygen {
    @include k-buttonColors('lithium');
    border-style: dashed;
  }

  .k-ButtonIcon--facebook {
    @include k-buttonColors('facebook');
    @include k-buttonPadding($button-size, $facebook-size, $facebook-size);

    .k-ButtonIcon__svg {
      width: $facebook-size;
      height: $facebook-size;
    }
  }

  .k-ButtonIcon--twitter {
    @include k-buttonColors('twitter');
    @include k-buttonPadding($button-size, $twitter-size, $twitter-size);

    .k-ButtonIcon__svg {
      width: $twitter-size;
      height: $twitter-size;
    }
  }

  .k-ButtonIcon--linkedin {
    @include k-buttonColors('linkedin');
    @include k-buttonPadding($button-size, $linkedin-size, $linkedin-size);

    .k-ButtonIcon__svg {
      width: $linkedin-size;
      height: $linkedin-size;
    }
  }

  .k-ButtonIcon--instagram {
    @include k-buttonColors('instagram');
    @include k-buttonPadding(
      $button-size-with-border,
      $instagram-size,
      $instagram-size
    );

    .k-ButtonIcon__svg {
      width: $instagram-size;
      height: $instagram-size;
    }
  }

  .k-ButtonIcon--youtube {
    @include k-buttonColors('youtube');
    @include k-buttonPadding($button-size, $youtube-size, $youtube-size);

    .k-ButtonIcon__svg {
      width: $youtube-size;
      height: $youtube-size;
    }
  }

  .k-ButtonIcon--pinterest {
    @include k-buttonColors('pinterest');
    @include k-buttonPadding($button-size, $pinterest-size, $pinterest-size);

    .k-ButtonIcon__svg {
      width: $pinterest-size;
      height: $pinterest-size;
    }
  }

  // Sizes modifiers.
  .k-ButtonIcon--nano {
    @include k-buttonPadding($button-size-nano, $nano-size, $nano-size);

    .k-ButtonIcon__svg {
      width: $nano-size;
      height: $nano-size;
    }

    &.k-ButtonIcon--rounded {
      @include k-buttonRounded($button-size-nano-with-border);
    }
  }

  .k-ButtonIcon--micro {
    @include k-buttonPadding($button-size-micro, $icon-width, $icon-height);

    &.k-ButtonIcon--rounded {
      @include k-buttonRounded($button-size-micro-with-border);
    }
  }

  .k-ButtonIcon--tiny {
    @include k-buttonPadding($button-size-tiny, $icon-width, $icon-height);

    &.k-ButtonIcon--rounded {
      @include k-buttonRounded($button-size-with-border);
    }
  }

  .k-ButtonIcon--big {
    @include k-buttonPadding($button-size-big, $icon-width, $icon-height);

    &.k-ButtonIcon--rounded {
      @include k-buttonRounded($button-size-big-with-border);
    }
  }

  // Icon modifiers.
  .k-ButtonIcon--heart {
    @include k-buttonPadding($button-size-tiny, $icon-width, $icon-height);

    .k-ButtonIcon__svg {
      width: $heart-size;
      height: $heart-size;
    }
  }

  // Used `ButtonIcon` signup and phone only `tiny` version.
  .k-ButtonIcon--signup,
  .k-ButtonIcon--phone {
    @include k-buttonPadding($button-size-tiny, $signup-size, $signup-size);

    .k-ButtonIcon__svg {
      width: $signup-size;
      height: $signup-size;
    }
  }

  .k-ButtonIcon--dropdown,
  .k-ButtonIcon--horizontalArrow {
    @include k-buttonPadding(
      $button-size-tiny,
      $horizontalArrow-width,
      $horizontalArrow-height
    );

    .k-ButtonIcon__svg {
      width: $horizontalArrow-width;
      height: $horizontalArrow-height;
    }
  }

  .k-ButtonIcon--verticalArrow {
    @include k-buttonPadding(
      $button-size-tiny,
      $verticalArrow-width,
      $verticalArrow-height
    );

    .k-ButtonIcon__svg {
      width: $verticalArrow-width;
      height: $verticalArrow-height;
    }
  }

  .k-ButtonIcon--checked--nano {
    @include k-buttonPadding(
      $button-size-nano,
      $checked-nano-size,
      $checked-nano-size
    );

    .k-ButtonIcon__svg {
      width: $checked-nano-size;
      height: $checked-nano-size;
    }
  }

  .k-ButtonIcon--tooltip--nano {
    @include k-buttonPadding(
      $button-size-nano,
      $tooltip-nano-size,
      $tooltip-nano-size
    );

    .k-ButtonIcon__svg {
      width: $tooltip-nano-size;
      height: $tooltip-nano-size;
    }
  }

  .k-ButtonIcon--cross {
    @include k-buttonPadding($button-size, $cross-size, $cross-size);

    .k-ButtonIcon__svg {
      width: $cross-size;
      height: $cross-size;
    }
  }

  .k-ButtonIcon--cross--tiny {
    @include k-buttonPadding($button-size-tiny, $cross-size, $cross-size);

    .k-ButtonIcon__svg {
      width: $cross-size;
      height: $cross-size;
    }
  }

  .k-ButtonIcon--star {
    @include k-buttonPadding($button-size, $star-size, $star-size);

    .k-ButtonIcon__svg {
      width: $star-size;
      height: $star-size;
    }
  }

  .k-ButtonIcon--empty--nano {
    @include k-buttonPadding($button-size-nano, 0, 0);
  }

  // Misc modifiers.
  .k-ButtonIcon--withoutHover {
    pointer-events: none;
  }
}