.btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  font-size: var(--font-size);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  border-color: var(--color-text);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-bg);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: var(--font-size);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}

.input:focus {
  border-color: var(--color-text);
}