// Buttons
$btn-border-radius: 4px;
$btn-font-weight: 400;
$btn-font-size: rem-calc(16);
$btn-line-height: rem-calc(16);
$btn-letter-spacing: rem-calc(0.3);
$btn-horizontal-padding: rem-calc(20);
$btn-vertical-padding: rem-calc(10);

$btn-narrow-font-size: rem-calc(14);
$btn-narrow-line-height: rem-calc(16);
$btn-narrow-horizontal-padding: rem-calc(20);
$btn-narrow-vertical-padding: rem-calc(7);

$btn-icon-size: $font-size-x-small;
$btn-small-icon-size: rem-calc(12);
$btn-small-icon-space: rem-calc(5);

$btn-stock-line-height: 24px;

$btn-icon-space: 5px;

$btn-narrow-padding: rem-calc(20);

$button-sizes: (
        'narrow': ($btn-narrow-vertical-padding, $btn-narrow-horizontal-padding, $btn-narrow-font-size, $btn-narrow-line-height, $btn-border-radius),
        'text-only': (0, 0, $btn-narrow-font-size, $btn-narrow-line-height,0)
);

// button mixin params:
// $color, $background, $border, $hover-color, $hover-background, $hover-border, $disabled-color, $disabled-background, $disabled-border, $active-color, $active-background, $active-border, $box-shadow, $letter-spacing
$button-colors: (
        'blue': ($color-white,  $color-cerulean, $color-cerulean, $color-white, $color-storm-sky, $color-storm-sky, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-white, $color-lochmara, $color-lochmara, true, $btn-letter-spacing, 600),
        'white': ($color-outer-space, $color-white, $color-geyser, $color-outer-space, $color-white, $color-cerulean, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-outer-space, $color-white, $color-geyser, true, $btn-letter-spacing, 600),
        'orange': ($color-golden-grass, $color-white, $color-golden-grass, $color-white, $color-golden-grass, $color-golden-grass, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-white, $color-lochmara, $color-lochmara, true, $btn-letter-spacing, 600),
        'outline-blue': ($color-lochmara, $color-white, $color-geyser, $color-lochmara $color-pale-sky, $color-white, $color-lochmara, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-white, $color-lochmara, $color-lochmara, true, $btn-letter-spacing, 400),
        'clear': ($color-lochmara, transparent, transparent, $color-lochmara, transparent, transparent, $color-lochmara, transparent, transparent, $color-lochmara, transparent, transparent, transparent, true, $btn-letter-spacing, 400),
        'clear-white': ($color-white, transparent, transparent, $color-white, transparent, transparent, $color-white, transparent, transparent, $color-white, transparent, transparent, transparent, true, $btn-letter-spacing, 400),
        'clear-gray': ($color-gray-chateau, transparent, transparent, $color-gray-chateau, transparent, transparent, $color-athens-gray, transparent, transparent, $color-gray-chateau, transparent, transparent, transparent, true, $btn-letter-spacing, 400),
        'icon-outline-blue': ($color-gray-chateau, $color-white, $color-geyser, $color-pale-sky, $color-white, $color-geyser, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-lochmara, $color-white, $color-geyser, true, $btn-letter-spacing, 400),
        'mystic': ($color-outer-space, $color-mystic, $color-athens-gray, $color-pale-sky, $color-white, $color-geyser, $color-gray-chateau, $color-athens-gray, $color-athens-gray, $color-lochmara, $color-white, $color-geyser, true, $btn-letter-spacing, 400),
);

.sh-btn {
  @include button-base();
  @include button-size($btn-vertical-padding, $btn-horizontal-padding, $btn-font-size, $btn-line-height, $btn-border-radius);
}

@include button-sizes($button-sizes);
@include btn-colors($button-colors);

.sh-btn-with-icon {
  position: relative;
  &.sh-btn-icon-left {
    padding-left: rem-calc(30);
    padding-right: rem-calc(10);
    i {
      left: rem-calc(10);
    }
  }
  &.sh-btn-icon-right {
    padding-right: rem-calc(30);
    padding-left: rem-calc(10);
    i {
      right: rem-calc(10);
    }
  }

  &.sh-btn-with-icon-small {

    i {
      font-size: rem-calc(10);
    }
  }

  i {
    font-size: rem-calc(16);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.sh-btn-icon {
  padding: rem-calc(8) rem-calc(10);
  &.sh-btn-narrow {
    padding: rem-calc(5.5);
  }
  i {
    font-size: rem-calc(18);
    vertical-align: middle;
  }
  &.sh-btn-icon-outline-blue {
    &.sh-btn-narrow {
      padding: rem-calc(3);
    }
    i {
      font-size: rem-calc(24);
    }
  }
}

.sh-btn-full-width {
  width: 100%;
}

.sh-btn-circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  i {
    font-size: rem-calc(24);
  }
}