.btn {
  width: 100%;
  border: none;
  border-radius: var(--btn-border-radius, 7px);
  outline: none;
  font-size: var(--btn-font-size, var(--font-size-base));
  line-height: var(--btn-line-height, var(--line-height-base));
  font-weight: var(--btn-font-weight, var(--font-weight-medium));
  transition: background-color 120ms ease-out;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gray-950);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--btn-primary-background, var(--color-gray-900));
  color: var(--btn-primary-color, var(--color-white));
}

.btn--primary:hover {
  background: var(--btn-primary-hover-background, var(--color-gray-800));
}

.btn--md {
  padding: var(--btn-md-padding, 9px 16px);
}