/// Setup a button element.
///
/// This mixin will setup an element to look like a button.
///
/// Vertical paddings depend on the vertical-rhythm and horizontal paddings
/// depend on the font-size.
///
/// k-Button--icon is different to k-ButtonIcon. This class is only used on
/// button-with-icon-words.
/// - `.k-Button--icon`
///
/// Available color modifiers:
/// - `.k-Button--hydrogen`
/// - `.k-Button--helium`
/// - `.k-Button--lithium`
/// - `.k-Button--beryllium`
/// - `.k-Button--carbon`
/// - `.k-Button--azote`
/// - `.k-Button--oxygene`
/// - `.k-Button--facebook`
/// - `.k-Button--twitter`
/// - `.k-Button--linkedin`
///
/// Available size modifiers:
/// - `.k-Button--tiny`
/// - `.k-Button--big`
/// - `.k-Button--big@s-up`
///
/// @group buttons
///
/// @example scss button - Usage
///   @include k-Button;
///
/// @example html
///  <button class="k-Button k-Button--hydrogen">My button</button>
///
/// @example html
///  <button class="k-Button
///                 k-Button--hydrogen,
///                 k-Button--icon">
///    <svg class="k-Button__icon" … /></svg>
///    My button
///  </button>

@mixin k-Button {
  $font: 'regular';
  $border-size: 2px;

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

  // Size settings button without border.
  $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);

  $button-tiny-min-width: k-px-to-rem(160px);
  $button-tiny-line-height: k-px-to-rem($button-size-tiny);

  $button-min-width: k-px-to-rem(200px);
  $button-line-height: k-px-to-rem($button-size);

  $button-big-min-width: k-px-to-rem(220px);
  $button-big-line-height: k-px-to-rem($button-size-big);

  // Heigth settings button.
  $button-tiny-height: k-px-to-rem(20px);
  $button-height: k-px-to-rem(30px);

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

  // Button font-size is computed using a modular scale and a defined step of this
  // scale.
  $button-step: -1; // 14px
  $big-button-step: 0; // 16px

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

  // Arrow SVG
  $arrow-width: k-px-to-rem(6px);
  $arrow-height: k-px-to-rem(6px);

  // Facebook With Background SVG
  $facebook-width: k-px-to-rem(25px);
  $facebook-height: k-px-to-rem(25px);

  $transition-speed: .2s;

  // Big size options button.
  $buttonBigOptions: (
    typography-step: $big-button-step,
    line-height: $button-big-line-height,
    height: $button-height,
    radius: $button-radius,
    width: $button-big-min-width,
    icon-size: $button-size-big,
    icon-size-with-border: $button-size-big-with-border,
    icon-width: $icon-width,
    icon-height: $icon-height,
  );

  .k-Button {
    @include k-buttonBase;
    @include k-typographyFontSize(
      $button-step,
      $button-line-height
    );
    @include k-typographyFont($font);

    border-radius: $button-radius;
    padding: 0 $button-height;
    min-width: $button-min-width;

    text-align: center;
    text-decoration: none;
  }

  // Colors modifiers.
  .k-Button--hydrogen {
    @include k-buttonColors('hydrogen');
  }

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

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

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

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

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

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

  .k-Button--facebook {
    @include k-buttonColors('facebook');
  }

  .k-Button--twitter {
    @include k-buttonColors('twitter');
  }

  .k-Button--linkedin {
    @include k-buttonColors('linkedin');
  }

  // Size modifiers.
  .k-Button--tiny {
    @include k-typographyFontSize(
      $button-step,
      $button-tiny-line-height
    );

    min-width: $button-tiny-min-width;

    &.k-Button--icon {
      .k-Button__icon {
        @include k-buttonPadding(
          $button-size-tiny,
          $icon-width,
          $icon-height
        );
      }
    }
  }

  // Arrow size
  .k-Button--tiny {
    @include k-typographyFontSize(
      $button-step,
      $button-tiny-line-height
    );

    min-width: $button-tiny-min-width;

    &.k-Button--icon {
      .k-Button__icon--arrow {
        @include k-buttonPadding(
          $button-size-tiny,
          $arrow-width,
          $arrow-height
        );
      }
    }
  }

  .k-Button--big {
    @include k-buttonBig($buttonBigOptions);
  }

  .k-Button--big\@s-up {
    @include k-media-min('s') {
      @include k-buttonBig($buttonBigOptions);
    }
  }

  // Button--icon
  .k-Button--icon {
    padding: 0 $button-height 0 0;
    min-width: 0;

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

      box-sizing: content-box;
      display: inline-block;
      width: $icon-width;
      height: $icon-height;
      vertical-align: bottom;
      transition: fill $transition-speed;

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

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

      box-sizing: content-box;
      display: inline-block;
      width: $icon-width;
      height: $icon-height;
      vertical-align: bottom;
      transition: fill $transition-speed;

      .k-Button__icon--tiny__stroke {
        transition: stroke $transition-speed;
      }
    }

    .k-Button__icon--arrow {
      @include k-buttonPadding(
        $button-size,
        $arrow-width,
        $arrow-height
      );

      box-sizing: content-box;
      display: inline-block;
      width: $arrow-width;
      height: $arrow-height;
      vertical-align: bottom;
      transition: fill $transition-speed;

      .k-Button__arrow--tiny__stroke {
        transition: stroke $transition-speed;
      }
    }

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

      box-sizing: content-box;
      display: inline-block;
      width: $facebook-width;
      height: $facebook-height;
      vertical-align: middle;
      transition: fill $transition-speed;
    }
  }

  // Padding size
  .k-Button--icon--tiny {
    padding: 0 $button-tiny-height 0 0;
  }

  .k-Button--iconRight {
    padding: 0 0 0 $button-height;
  }

  .k-Button--iconRight--tiny {
    padding: 0 0 0 $button-tiny-height;
  }

  .k-Button--iconWithMinWidth {
    padding: 0;
    min-width: $button-min-width;

    .k-Button__icon {
      width: auto;
    }
  }

  .k-Button.is-readonly {
    cursor: auto;
  }
}