/* default */
:host button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: auto;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  font-kerning: none;
  letter-spacing: 0px;
  text-align: center;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--color-border-muted) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  padding: 7px 14px;
  border-radius: 5px;
  line-height: 20px;
}
:host button .counter {
  margin-left: 2px;
  color: inherit;
  text-shadow: none;
  vertical-align: top;
  background-color: var(--color-btn-counter-bg);
  border: max(1px, 0.0625rem) solid var(--color-counter-border);
  border-radius: 2em;
  color: var(--color-fg-default);
  display: inline-block;
  font-size: var(--text-body-size-small, 0.75rem);
  font-weight: var(--base-text-weight-medium, 500);
  line-height: calc(1.25rem - max(1px, 0.0625rem) * 2);
  min-width: 1.25rem;
  padding: 0 6px;
  text-align: center;
}
:host button.icononly {
  padding: 7px;
}

/* color default */
:host button {
  color: var(--color-btn-text);
  background: var(--color-btn-bg);
  border-color: var(--color-btn-border);
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color, background-color, box-shadow, border-color;
}
:host button:hover {
  background-color: var(--color-btn-hover-bg);
  border-color: var(--color-btn-hover-border);
  transition-duration: 0.1s;
}
:host button:active {
  background-color: var(--color-btn-active-bg);
  border-color: var(--color-btn-active-border);
  transition: none;
}
:host button.selected {
  background-color: var(--color-btn-selected-bg);
  box-shadow: var(--color-btn-shadow-inset);
}
:host button:disabled, :host button.disabled {
  color: var(--color-btn-disabled-text);
  background-color: var(--color-btn-disabled-bg);
  border-color: var(--color-btn-border);
  pointer-events: none;
}

:host button.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);
}
:host button.primary:hover {
  background-color: var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-border);
}
:host button.primary:active, :host button.primary.selected {
  background-color: var(--color-btn-primary-selected-bg);
  box-shadow: var(--color-btn-primary-selected-shadow);
}
:host button.primary:disabled, :host button.primary.disabled {
  color: var(--color-btn-primary-disabled-text);
  background-color: var(--color-btn-primary-disabled-bg);
  border-color: var(--color-btn-primary-disabled-border);
}
:host button.primary .counter {
  color: inherit;
  background-color: var(--color-btn-primary-counter-bg);
}

:host button.danger {
  color: var(--color-btn-danger-text);
}
:host button.danger .octicon {
  color: var(--color-btn-danger-icon);
}
:host button.danger:hover {
  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);
}
:host button.danger:hover .counter {
  background-color: var(--color-btn-danger-hover-counter-bg);
}
:host button.danger:hover .octicon {
  color: var(--color-btn-danger-hover-icon);
}
:host button.danger:active, :host button.danger.selected {
  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);
}
:host button.danger:disabled, :host button.danger.disabled {
  color: var(--color-btn-danger-disabled-text);
  background-color: var(--color-btn-danger-disabled-bg);
  border-color: var(--color-btn-border);
  box-shadow: none;
}
:host button.danger:disabled .counter, :host button.danger.disabled .counter {
  background-color: var(--color-btn-danger-disabled-counter-bg);
}
:host button.danger:disabled .octicon, :host button.danger.disabled .octicon {
  color: var(--color-btn-danger-disabled-text);
}
:host button.danger .counter {
  color: inherit;
  background-color: var(--color-btn-danger-counter-bg);
}

:host button.invisible {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border: 1px solid transparent !important;
}
:host button.invisible:hover {
  background-color: var(--color-btn-invisible-hover-bg);
  outline: none;
  box-shadow: none;
}
:host button.invisible:active, :host button.invisible.selected, :host button.invisible[aria-selected=true] {
  background: none;
  border-color: var(--color-btn-active-border);
}
:host button.invisible:active {
  background-color: var(--color-btn-invisible-selected-bg);
}
:host button.invisible:disabled, :host button.invisible.disabled, :host button.invisible[aria-disabled=true] {
  color: var(--color-btn-disabled-text);
  background-color: transparent;
}

/* size */
:host button.small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
  padding: 5px 12px;
  border-radius: 4px;
}
:host button.small.icononly {
  padding: 5px;
}

:host button.large {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  padding: 8px 16px;
  border-radius: 6px;
}
:host button.large.icononly {
  padding: 8px;
}

/* expand */
:host button.expand {
  width: 100%;
  text-align: center;
}