.btn {
  display: inline-block;
  text-align: center;
  border-radius: 12px;
  padding: 0.6666666667em;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.btn--primary {
  color: #FFF;
  background-color: var(--color-primary);
}
.btn--primary:hover {
  background-color: #26386f;
}

.btn--secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #FFF;
}
.btn--secondary:hover {
  background-color: #f29100;
}

.btn--light {
  color: var(--color-grey-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-grey-border);
}
.btn--light:hover {
  color: var(--color-grey-text);
  background-color: #f3f3f3;
  border-color: #c6c6c6;
}
.btn--light:active {
  background-color: #eeeeee;
  border-color: #b9b9b9;
}

.btn--danger {
  color: #FFF;
  background-color: var(--color-danger);
}
.btn--danger:hover {
  background-color: #f92727;
}

.btn--full {
  display: block;
  width: 100%;
}

.btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(10%);
}

.btn--primary.btn--disabled {
  background-color: #3f5cb7;
}

.btn--secondary.btn--disabled {
  background-color: #ffb649;
}