/*
// This is an auto-generated file. Please do not edit directly.
// For instructions on editing source .json files, please see:
// https://git.hubteam.com/HubSpot/UIComponents/tree/master/HubStyleTokens
// https://git.hubteam.com/HubSpot/UIComponents/blob/master/HubStyleTokens/static/stylesheets/_tokens.scss
// ***********************************************************************
*/

/* Core */
.kb-button {
  border-radius: .1875rem;
  border-style: solid;
  border-width: 1px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-smoothing: auto;
  text-shadow: 0 0 1px transparent;
  font-family: var(--kb-token-basefontfamily), var(--kb-token-fallbackfontstack);
  font-weight: 400;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-out;
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.kb-button:hover,
.kb-button.kb-button--hover {
  text-decoration: none
}

/* Sizes */
.kb-button--xs {
  font-size: 12px;
  font-size: .75rem;
  line-height: .75rem;
  padding: .375rem .75rem;
}

.kb-button--sm {
  font-size: 12px;
  font-size: .75rem;
  line-height: .75rem;
  padding: .5625rem 1rem;
}

.kb-button--default {
  font-family: var(--kb-token-basefontfamily), var(--kb-token-fallbackfontstack);
  font-size: .875rem;
  font-size: 14px;
  font-weight: 500;
  line-height: .875rem;
  padding: .75rem 1.5rem;
}

/* Color Variations */
.kb-button--primary {
  background-color: var(--kb-token-colorlorax);
  border-color: var(--kb-token-colorlorax);
  color: var(--kb-token-colorolaf);
}

.kb-button--primary:hover {
  background-color: var(--kb-token-colorbuttonprimaryhoverfill);
  border-color: var(--kb-token-colorbuttonprimaryhoverfill);
  color: var(--kb-token-colorolaf);
}

.kb-button--primary.kb-button--active {
  background-color: var(--kb-token-colorloraxdark);
  border-color: var(--kb-token-colorloraxdark);
  color: var(--kb-token-colorolaf);
}

.kb-button--primary--white {
  background-color: var(--kb-token-colorolaf);
  border-color: transparent;
  color: var(--kb-token-colorobsidian);
}

.kb-button--primary--white:hover {
  background-color: rgba(var(--kb-token-colorolaf-rgb), .9);
  border-color: transparent;
  color: var(--kb-token-colorobsidian);
}

.kb-button--primary--white.kb-button--active {
  background-color: rgba(var(--kb-token-colorolaf-rgb), .8);
  border-color: transparent;
  color: var(--kb-token-colorobsidian);
}

.kb-button--secondary {
  background-color: var(--kb-token-colorolaf);
  border-color: var(--kb-token-colorlorax);
  color: var(--kb-token-colorbuttonsecondarytext);
}

.kb-button--secondary:hover {
  background-color: var(--kb-token-colorbuttonsecondaryhoverfill);
  color: var(--kb-token-colorbuttonsecondarytext);
}

.kb-button--secondary.kb-button--active {
  background-color: var(--kb-token-colorbuttonsecondaryactivefill);
  color: var(--kb-token-colorbuttonsecondarytext);
}

.kb-button--secondary--ghost {
  background-color: transparent;
  border-color: var(--kb-token-colorolaf);
  color: var(--kb-token-colorolaf);
}

.kb-button--secondary--ghost:hover {
  background-color: rgba(var(--kb-token-colorolaf-rgb), .05);
  border-color: var(--kb-token-colorolaf);
  color: var(--kb-token-colorolaf);
}

.kb-button--secondary--ghost.kb-button--active {
  background-color: rgba(var(--kb-token-colorolaf-rgb), .1);
  border-color: var(--kb-token-colorolaf);
  color: var(--kb-token-colorolaf);
}


.kb-button--tertiary {
  background-color: var(--kb-token-colorheffalump);
  border-color:  var(--kb-token-colorheffalump);
  color: var(--kb-token-colorolaf);
}

.kb-button--tertiary:hover,
.kb-button--tertiary.kb-button--hover {
  background-color: var(--kb-token-colorslinky);
  border-color: var(--kb-token-colorslinky);
  color: var(--kb-token-colorolaf);
}

.kb-button--tertiary.kb-button--active {
  background-color: var(--kb-token-colorobsidian);
  border-color: var(--kb-token-colorobsidian);
  color: var(--kb-token-colorolaf);
}

.kb-button--tertiary-light {
  background-color: var(--kb-token-colorkoala);
  border-color: var(--kb-token-colorbattleship);
  color: var(--kb-token-colorbuttontertiarylighttext);
}

.kb-button--tertiary-light:hover,
.kb-button--tertiary-light.kb-button--hover {
  background-color: var(--kb-token-colorgypsum);;
  color: var(--kb-token-colorbuttontertiarylighttext);
}

.kb-button--tertiary-light.kb-button--active {
  background-color: var(--kb-token-colorbattleship);
  border-color: var(--kb-token-coloreerie);
  color: var(--kb-token-colorbuttontertiarylighttext);
}

.kb-button--tertiary-extra-light {
  background-color: var(--kb-token-colorolaf)
  border-color: var(--kb-token-colorbattleship);
  color: var(--kb-token-colorbuttontertiarylighttext);
}

.kb-button--tertiary-extra-light:hover,
.kb-button--tertiary-extra-light.kb-button--hover {
  background-color: var(--kb-token-colorgypsum);
  color: var(--kb-token-colorbuttontertiarylighttext);
}

.kb-button--tertiary-extra-light.kb-button--active {
  background-color: var(--kb-token-colorbattleship);
  border-color: var(--kb-token-coloreerie);
  color: var(--kb-token-colorbuttontertiarylighttext);
}