.button-component > .button,
.button-component > a:not([href]):not([tabindex]).button {
  text-decoration: none;
  margin: 0px;
  padding: 0 10px 0 10px;
  border: 1px solid #ddd;
  background-color: #efefef;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 10px;
  color: inherit;
}

.button-component > .button.disabled,
.button-component > a:not([href]):not([tabindex]).button.disabled {
  border: 1px solid #ddd;
  background-color: rgb(225, 225, 225);
  color: #acacac;
}

.button-component.with-icon > .button {
  padding: 0 11px 0 11px;
}

.button-component > .button:focus {
  outline: solid 2px #ddd;
}

/* Height classes */

.button-component > .button.height-40 {
  height: 40px;
  line-height: 40px;
}

.button-component > .button.height-39 {
  height: 39px;
  line-height: 39px;
}

.button-component > .button.height-38 {
  height: 38px;
  line-height: 38px;
}

.button-component > .button.height-37 {
  height: 37px;
  line-height: 37px;
}

.button-component > .button.height-36 {
  height: 36px;
  line-height: 36px;
}

.button-component > .button.height-35 {
  height: 35px;
  line-height: 35px;
}

.button-component > .button.height-34 {
  height: 34px;
  line-height: 34px;
}

.button-component > .button.height-33 {
  height: 33px;
  line-height: 33px;
}

.button-component > .button.height-32 {
  height: 32px;
  line-height: 32px;
}

/* Color classes */

.button-component.yellow > .button,
.button-component.yellow > a:not([href]):not([tabindex]).button {
  border: 1px solid #7a734c;
  background-color: #d9d18a;
  color: #7a734c;
}

.button-component.green > .button,
.button-component.green > a:not([href]):not([tabindex]).button {
  border: 1px solid #507a4c;
  background-color: #a4d5a6;
  color: #507a4c;
}

.button-component.mid-green > .button,
.button-component.mid-green > a:not([href]):not([tabindex]).button {
  border: 1px solid #507a4c;
  background-color: #7aaa7c;
  color: #fff;
}

.button-component.dark-green > .button,
.button-component.dark-green > a:not([href]):not([tabindex]).button {
  border: 1px solid #163912;
  background-color: #3c6438;
  color: #fff;
}

.button-component.red > .button,
.button-component.red > a:not([href]):not([tabindex]).button {
  border: 1px solid #7a4c4c;
  background-color: #d5a7a4;
  color: #7a4c4c;
}

.button-component.blue > .button,
.button-component.blue > a:not([href]):not([tabindex]).button {
  border: 1px solid #4c547a;
  background-color: #a4bed5;
  color: #4c547a;
}

.button-component.mid-blue > .button,
.button-component.mid-blue > a:not([href]):not([tabindex]).button {
  border: 1px solid #4c547a;
  background-color: #81a2bf;
  color: #fff;
}

.button-component.dark-blue > .button,
.button-component.dark-blue > a:not([href]):not([tabindex]).button {
  border: 1px solid #001b33;
  background-color: #3b4ca2;
  color: #fff;
}

.button-component.orange > .button,
.button-component.orange > a:not([href]):not([tabindex]).button {
  border: 1px solid #7e4304;
  background-color: #e5bd8f;
  color: #7e4304;
}

.button-component.mid-orange > .button,
.button-component.mid-orange > a:not([href]):not([tabindex]).button {
  border: 1px solid #7e4304;
  background-color: #e1ac6f;
  color: #fff;
}

.button-component.dark-orange > .button,
.button-component.dark-orange > a:not([href]):not([tabindex]).button {
  border: 1px solid #7e4304;
  background-color: #e38517;
  color: #fff;
}

.button-component.purple > .button,
.button-component.purple > a:not([href]):not([tabindex]).button {
  border: 1px solid #3d047e;
  background-color: #c2a3e5;
  color: #3d047e;
}

.button-component.gray > .button,
.button-component.grey > a:not([href]):not([tabindex]).button {
  border: 1px solid #777;
  background-color: #e6e6e6;
  color: #777;
}

/* Resets */

.button-component a:not([href]):not([tabindex]) {
  color: black;
  cursor: pointer;
}

.button-component a:not([href]):not([tabindex]):hover {
  color: black;
  cursor: pointer;
}