// stylelint-disable selector-max-type, 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 {
    // stylelint-disable-next-line primer/colors
    color: var(--color-icon-tertiary);
  }
}

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

.octicon {
  margin-right: $spacer-1;
  color: var(--color-text-tertiary);
  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;
  background-color: var(--color-btn-counter-bg);
}

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

}

// Default button

.btn {

color: var(--color-btn-text);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
transition-property: color, background-color, border-color;

&:hover,
&.hover,
[open] > & {
  background-color: var(--color-btn-hover-bg);
  border-color: var(--color-btn-hover-border);
  transition-duration: 0.1s;
}

&:active {
  background-color: var(--color-btn-active-bg);
  border-color: var(--color-btn-active-border);
  transition: none;
}

&.selected,
&[aria-selected=true] {
  background-color: var(--color-btn-selected-bg);
  box-shadow: var(--color-shadow-inset);
}

&:disabled,
&.disabled,
&[aria-disabled=true] {
  color: var(--color-text-disabled);
  background-color: var(--color-btn-bg);
  border-color: var(--color-btn-border);
}

// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
&:focus,
&.focus {
  border-color: var(--color-btn-focus-border);
  outline: none;
  box-shadow: var(--color-btn-focus-shadow);
}

}

// Primary button

.btn-primary {

color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-bg);
border-color: var(--color-btn-primary-border);
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);

&:hover,
&.hover,
[open] > & {
  background-color: var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-border);
}

&:active,
&.selected,
&[aria-selected=true] {
  background-color: var(--color-btn-primary-selected-bg);
  box-shadow: var(--color-btn-primary-selected-shadow);
}

&:disabled,
&.disabled,
&[aria-disabled=true] {
  color: var(--color-btn-primary-disabled-text);
  background-color: var(--color-btn-primary-disabled-bg);
  border-color: var(--color-btn-primary-disabled-border);

  .octicon {
    color: var(--color-btn-primary-disabled-text);
  }
}

&:focus,
&.focus {
  background-color: var(--color-btn-primary-focus-bg);
  border-color: var(--color-btn-primary-focus-border);
  box-shadow: var(--color-btn-primary-focus-shadow);
}

.Counter {
  color: inherit;
  background-color: var(--color-btn-primary-counter-bg);
}

.octicon {
  // stylelint-disable-next-line primer/colors
  color: var(--color-btn-primary-icon);
}

}

// Outline button

.btn-outline {

color: var(--color-btn-outline-text);

&:hover,
[open] > & {
  color: var(--color-btn-outline-hover-text);
  background-color: var(--color-btn-outline-hover-bg);
  border-color: var(--color-btn-outline-hover-border);
  box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);

  .Counter {
    background-color: var(--color-btn-outline-hover-counter-bg);
  }

  .octicon {
    color: inherit;
  }
}

&:active,
&.selected,
&[aria-selected=true] {
  color: var(--color-btn-outline-selected-text);
  background-color: var(--color-btn-outline-selected-bg);
  border-color: var(--color-btn-outline-selected-border);
  box-shadow: var(--color-btn-outline-selected-shadow);
}

&:disabled,
&.disabled,
&[aria-disabled=true] {
  color: var(--color-btn-outline-disabled-text);
  background-color: var(--color-btn-outline-disabled-bg);
  border-color: var(--color-btn-border);
  box-shadow: none;

  .Counter {
    background-color: var(--color-btn-outline-disabled-counter-bg);
  }
}

&:focus {
  border-color: var(--color-btn-outline-focus-border);
  box-shadow: var(--color-btn-outline-focus-shadow);
}

.Counter {
  color: inherit;
  background-color: var(--color-btn-outline-counter-bg);
}

}

// Danger button

.btn-danger {

color: var(--color-btn-danger-text);

.octicon {
  // stylelint-disable-next-line primer/colors
  color: var(--color-btn-danger-icon);
}

&:hover,
[open] > & {
  color: var(--color-btn-danger-hover-text);
  background-color: var(--color-btn-danger-hover-bg);
  border-color: var(--color-btn-danger-hover-border);
  box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);

  .Counter {
    background-color: var(--color-btn-danger-hover-counter-bg);
  }

  .octicon {
    // stylelint-disable-next-line primer/colors
    color: var(--color-btn-danger-hover-icon);
  }
}

&:active,
&.selected,
&[aria-selected=true] {
  color: var(--color-btn-danger-selected-text);
  background-color: var(--color-btn-danger-selected-bg);
  border-color: var(--color-btn-danger-selected-border);
  box-shadow: var(--color-btn-danger-selected-shadow);
}

&:disabled,
&.disabled,
&[aria-disabled=true] {
  color: var(--color-btn-danger-disabled-text);
  background-color: var(--color-btn-danger-disabled-bg);
  border-color: var(--color-btn-border);
  box-shadow: none;

  .Counter {
    background-color: var(--color-btn-danger-disabled-counter-bg);
  }

  .octicon {
    color: var(--color-btn-danger-disabled-text);
  }
}

&:focus {
  border-color: var(--color-btn-danger-focus-border);
  box-shadow: var(--color-btn-danger-focus-shadow);
}

.Counter {
  color: inherit;
  background-color: var(--color-btn-danger-counter-bg);
}

}

// 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;

}