.jo-button {
  height: 34px;
  padding: 0 14px;
  background-color: #0000;
  color: var(--font-color);
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.jo-button--default-type {
  border: 1px solid var(--border-color);
  border-radius: 3px;
  transition: all 0.3s;
}
.jo-button--default-type:hover {
  border: 1px solid #12aa9c;
  color: #12aa9c;
}

.jo-button--primary-type,
.jo-button--info-type,
.jo-button--error-type,
.jo-button--warning-type,
.jo-button--success-type {
  background-color: var(--background-color);
  border-radius: 3px;
  color: var(--font-color-invert);
  transition: all 0.3s;
}

.jo-button--primary-type:hover,
.jo-button--info-type:hover,
.jo-button--error-type:hover,
.jo-button--warning-type:hover,
.jo-button--success-type:hover {
  background-color: var(--background-color-hover);
}

.jo-button--disabled {
  color: var(--border-color);
  background-color: transparent;
  border: 1px solid var(--border-color);
  cursor: not-allowed;
}
.jo-button--disabled:hover {
  color: var(--border-color);
  background-color: transparent;
  border: 1px solid var(--border-color);
}
.jo-button.jo-button--text {
  height: auto;
  border: none;
  padding: inherit;
  color: var(--font-color);
  background-color: transparent;
}
.jo-button.jo-button--text:hover {
  color: var(--background-color-hover);
}

.jo-button__content {
  display: flex;
  align-items: center;
}