// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors

// Base button styles .btn {

position: relative;
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 5px $spacer-3;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: 20px; // Specifically not inherit our `<body>` default
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: $border-width $border-style;
border-radius: $border-radius;
appearance: none; // Corrects inability to style clickable `input` types in iOS.

&:hover {
  text-decoration: none;
}

&:disabled,
&.disabled,
&[aria-disabled="true"] {
  cursor: default;

  .octicon {
    color: inherit;
  }
}

i {
  font-style: normal;
  font-weight: $font-weight-semibold;
  opacity: 0.75;
}

.octicon {
  margin-right: $spacer-1;
  color: $text-gray-light;
  vertical-align: text-bottom;

  &:only-child {
    margin-right: 0;
  }
}

.Counter {
  // stylelint-disable-next-line primer/spacing
  margin-left: 2px;
  color: inherit;
  text-shadow: none;
  vertical-align: top;
  // stylelint-disable-next-line primer/colors
  background-color: rgba(
    $black,
    0.08
  ); // Darken for just a tad more contrast against the button background
}

.dropdown-caret {
  margin-left: $spacer-1;
  opacity: 0.8;
}

}

// Default button

.btn {

$bg-default: $bg-gray-light;
$bg-hover: #f3f4f6; // custom gray
$bg-active: darken($bg-hover, 2%);
$bg-disabled: $bg-default;

color: $text-gray-dark;
background-color: $bg-default;
border-color: $border-color-button;
box-shadow: $box-shadow, $box-shadow-highlight;
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);

&:hover,
&.hover,
[open] > & {
  background-color: $bg-hover;
  transition-duration: 0.1s;
}

&:active,
&.selected,
&[aria-selected="true"] {
  background-color: $bg-active;
  box-shadow: $box-shadow-inset;
  transition: none;
}

&:disabled,
&.disabled,
&[aria-disabled="true"] {
  // stylelint-disable-next-line primer/colors
  color: $gray-400;
  background-color: $bg-disabled;
  border-color: $border-color-button;
}

// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
&:focus,
&.focus {
  outline: 1px dotted transparent; // Support Firfox custom colors
  outline-offset: 2px;
  box-shadow: $box-shadow-focus;
}

}

// Primary button

.btn-primary {

$bg-default: #2ea44f; // custom green
$bg-hover: #2c974b; // custom green
$bg-active: darken($bg-hover, 2%);
$bg-disabled: #94d3a2; // custom green

$shadow: $green-900;
$box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);

color: $text-white;
background-color: $bg-default;
// stylelint-disable-next-line primer/borders
border-color: rgba($black, 0.15);
box-shadow: $box-shadow;

&:hover,
&.hover,
[open] > & {
  background-color: $bg-hover;
}

&:active,
&.selected,
&[aria-selected="true"] {
  background-color: $bg-active;
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
}

&:disabled,
&.disabled,
&[aria-disabled="true"] {
  // stylelint-disable-next-line primer/colors
  color: rgba($text-white, 0.8);
  background-color: $bg-disabled;
  // stylelint-disable-next-line primer/borders
  border-color: rgba($black, 0.1);
  box-shadow: $box-shadow;
}

&:focus,
&.focus {
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
}

.Counter {
  color: inherit;
  // stylelint-disable-next-line primer/colors
  background-color: rgba($bg-white, 0.2);
}

.octicon {
  // stylelint-disable-next-line primer/colors
  color: rgba($text-white, 0.8);
}

}

// Mixin: btn-inverse-on-hover

@mixin btn-inverse-on-hover($color, $bg-hover, $bg-active, $shadow) {

color: $color;
transition: none;

&:hover,
[open] > & {
  color: $text-white;
  background-color: $bg-hover;
  border-color: rgba($black, 0.15);
  box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);

  .Counter {
    background-color: rgba($bg-white, 0.2);
  }

  .octicon {
    color: inherit;
  }
}

&:active,
&.selected,
&[aria-selected="true"] {
  color: $text-white;
  background-color: $bg-active;
  border-color: rgba($black, 0.15);
  box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
}

&:disabled,
&.disabled,
&[aria-disabled="true"] {
  color: rgba($color, 0.5);
  background-color: $bg-gray-light;
  border-color: $border-color-button;
  box-shadow: $box-shadow, $box-shadow-highlight;

  .Counter {
    background-color: rgba($color, 0.05);
  }
}

&:focus {
  box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
}

.Counter {
  color: inherit;
  background-color: rgba($color, 0.1);
}

}

// Danger button

.btn-danger {

@include btn-inverse-on-hover(
  $color: $text-red,
  $bg-hover: $red-600,
  $bg-active: darken($red-600, 3%),
  $shadow: $red-900
);

}

// Outline button

.btn-outline {

@include btn-inverse-on-hover(
  $color: $blue-500,
  $bg-hover: $blue-500,
  $bg-active: darken($blue-500, 3%),
  $shadow: $blue-900
);

}

// Solid buttons TODO: Deprecate? // // .btn-blue {

@include btn-solid(
  $text-white,
  lighten($blue-500, 8%),
  darken($blue-500, 2%)
);

}

// Sizes // // Tweak `line-height` to make them smaller. .btn-sm {

// stylelint-disable-next-line primer/spacing
padding: 3px 12px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: 20px;

.octicon {
  vertical-align: text-top;
}

}

// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class=“text-gamma”><button class=“btn btn-large btn-primary” type=“button”>Big green button</button></p> .btn-large {

padding: $em-spacer-6 1.5em;
font-size: inherit;
line-height: $lh-default;

// stylelint-disable-next-line primer/borders
border-radius: 0.5em;

}

// Full-width button // // These buttons expand to the full width of their parent container .btn-block {

display: block;
width: 100%;
text-align: center;

}