.lc-button {
  cursor: pointer;
  border: 0;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  line-height: 1.2;
  background-color: #ccc;
  padding: 10px 17px;
  color: #000;
}
.lc-button .show-on-loading {
  display: none;
}

.lc-button.small {
  padding: 5px 10px;
}

.lc-button.medium {
  padding: 10px 17px;
}

.lc-button:hover {
  background-color: #bbb;
}

.lc-button.attention-high {
  background-color: #c1d72f;
}

.lc-button.attention-high:hover {
  background-color: #a0b42a;
}

.lc-button.attention-high:disabled {
  background-color: #a0b42a;
  color: #666;
}

.lc-button.attention-low {
  background-color: #ccc;
}

.lc-button.attention-low:hover {
  background-color: #bbb;
}

.lc-button.delete,
.lc-button.attention-remove {
  background-color: #ffaeb6;
}

.lc-button.delete:hover,
.lc-button.attention-remove:hover {
  background-color: #ca8a92;
}

/* --- loading --- */
.lc-button.loading .hide-on-loading {
  display: none;
}
.lc-button.loading .show-on-loading {
  display: inline-block;
}

.lc-button:disabled {
  background-color: #ddd !important;
  color: #999 !important;
}

.lc-button:active {
  transform: translate(0, 1px);
}