// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

// Shadow
@mixin button-shadow($depth, $shadow-color) {
  box-shadow: calculate-box-shadow($depth, $shadow-color),
    2px #{$depth / 2}px 4px $kbc-gray-500, 0 -1px #{$depth / 2}px $kbc-gray-500;
}

// Button sizes
@mixin kbd-size($size-map: $kbc-kbd-size-base) {
  // stylelint-disable
  $padding-y: map-get(
    $map: $size-map,
    $key: 'padding-y',
  );
  $padding-x: map-get(
    $map: $size-map,
    $key: 'padding-x',
  );
  $font-size: map-get(
    $map: $size-map,
    $key: 'font-size',
  );
  $line-height: map-get(
    $map: $size-map,
    $key: 'line-height',
  );
  $depth: map-get(
    $map: $size-map,
    $key: 'depth',
  );
  $after-adjust-x: map-get(
    $map: $size-map,
    $key: 'after-adjust-x',
  );
  $after-adjust-y: map-get(
    $map: $size-map,
    $key: 'after-adjust-y',
  );
  $after-border-width: map-get(
    $map: $size-map,
    $key: 'after-border-width',
  );
  $after-border-radius: map-get(
    $map: $size-map,
    $key: 'after-border-radius',
  );
  // stylelint-enable

  font-size: $font-size;
  line-height: $line-height;
  margin-bottom: 0.25rem + $depth / 16;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  padding: $padding-y $padding-x;

  &::after {
    border-radius: $after-border-radius;
    border-width: $after-border-width;
    bottom: -#{$depth - $after-adjust-y}px;
    left: -($after-border-width * 2) + $after-adjust-x;
    right: -($after-border-width * 2) + $after-adjust-x;
    top: #{$depth + $after-adjust-y}px;
    transform: translate3d(0, 0, -#{$depth}px);
  }
}

@mixin button-size($size-map: $kbc-btn-size-base) {
  // stylelint-disable
  $padding-y: map-get(
    $map: $size-map,
    $key: 'padding-y',
  );
  $padding-x: map-get(
    $map: $size-map,
    $key: 'padding-x',
  );
  $font-size: map-get(
    $map: $size-map,
    $key: 'font-size',
  );
  $line-height: map-get(
    $map: $size-map,
    $key: 'line-height',
  );
  $depth: map-get(
    $map: $size-map,
    $key: 'depth',
  );
  $after-adjust-x: map-get(
    $map: $size-map,
    $key: 'after-adjust-x',
  );
  $after-adjust-y: map-get(
    $map: $size-map,
    $key: 'after-adjust-y',
  );
  $after-border-width: map-get(
    $map: $size-map,
    $key: 'after-border-width',
  );
  $after-border-radius: map-get(
    $map: $size-map,
    $key: 'after-border-radius',
  );
  // stylelint-enable

  font-size: $font-size;
  line-height: $line-height;
  margin-bottom: ($after-border-width + 0.25rem + $depth / 16);
  margin-left: ($after-border-width + 0.25rem);
  margin-right: ($after-border-width + 0.25rem);
  margin-top: ($after-border-width + 0.25rem);
  padding: $padding-y $padding-x;

  &:hover,
  &:focus,
  &.hover,
  &.focus {
    transform: translate3d(0, 1px, #{$depth}px);

    &::after {
      transform: translate3d(0, -1px, -#{$depth}px);
    }
  }

  &:active,
  &.active {
    border-color: transparent;
    box-shadow: none;
    transform: translate3d(0, #{$depth}px, 0);

    &::after {
      transform: translate3d(0, -#{$depth}px, 0);
    }
  }

  &::after {
    border-radius: $after-border-radius;
    border-width: $after-border-width;
    bottom: -#{$depth - $after-adjust-y}px;
    left: -($after-border-width * 2) + $after-adjust-x;
    right: -($after-border-width * 2) + $after-adjust-x;
    top: #{$depth + $after-adjust-y}px;
    transform: translate3d(0, 0, -#{$depth}px);
  }
}

@mixin button-color(
  $bg-color: $kbc-btn-bg-color,
  $color: color-yiq($kbc-btn-bg-color),
  $depth: $kbc-btn-depth
) {
  // stylelint-disable
  $border-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color)
  );
  $shadow-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 15%)
  );
  $focus-bg-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 10%)
  );
  $active-bg-color: $focus-bg-color;
  $active-box-shadow: 0 0 1px 1px
    adjust-color($bg-color, $lightness: color-yiq-lightness($bg-color, 30%));
  $after-border-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 20%)
  );
  // stylelint-enable

  @include button-shadow($depth, $shadow-color);

  background-color: $bg-color;
  border-color: $border-color;
  color: $color;

  &:hover,
  &:focus,
  &.hover,
  &.focus {
    @include button-shadow($depth - 1, $shadow-color);
    background-color: $focus-bg-color;
    color: color-yiq($focus-bg-color);
  }

  &:active,
  &.active {
    background-color: $active-bg-color;
    box-shadow: $active-box-shadow;
    color: color-yiq($active-bg-color);
  }

  &::after {
    border-color: $after-border-color;
  }
}

@mixin kbd-color(
  $bg-color: $kbc-btn-bg-color,
  $color: color-yiq($kbc-btn-bg-color),
  $depth: $kbc-btn-depth
) {
  // stylelint-disable
  $border-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color)
  );
  $shadow-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 15%)
  );
  $focus-bg-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 10%)
  );
  $active-bg-color: $focus-bg-color;
  $active-box-shadow: 0 0 1px 1px
    adjust-color($bg-color, $lightness: color-yiq-lightness($bg-color, 30%));
  $after-border-color: adjust-color(
    $bg-color,
    $lightness: color-yiq-lightness($bg-color, 20%)
  );
  // stylelint-enable

  @include button-shadow($depth, $shadow-color);

  background-color: $bg-color;
  border-color: $border-color;
  color: $color;

  &::after {
    border-color: $after-border-color;
  }
}