.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--margin-3);
  cursor: pointer;
  transition: ease 0.25s;
  font-weight: 500;
  border: none;
}

.btn.btn-primary {
  padding: var(--margin-3) var(--margin-4);
  background-color: var(--quaternary-color);
  --c3d-icon-color: var(--primary-color);
  color: var(--primary-color);
}

.btn.btn-primary:hover {
  background-color: var(--branding-color);
  transform: scale(0.99) translate(0px, -1px);
}

.btn.btn-secondary {
  padding: var(--margin-3) var(--margin-4);
  background-color: var(--primary-color);
  border-radius: var(--round);
}

.btn.btn-secondary.secondary {
  background-color: var(--secondary-color);
}

.btn.btn-secondary:hover {
  --c3d-icon-color: var(--primary-color);
  color: var(--primary-color);
  background-color: var(--quaternary-color);
  transform: scale(0.99) translate(0px, -1px);
}

.btn.btn-tertiary {
  padding: var(--margin-3) var(--margin-4);
  background-color: var(--branding-color);
  --c3d-icon-color: var(--primary-color);
  color: var(--primary-color);
}

.btn.btn-tertiary:hover {
  background-color: var(--quaternary-color);
  transform: scale(0.99) translate(0px, -1px);
}

.btn.square {
  padding: var(--margin-3);
  display: inline-flex;
}

.btn.small {
  padding: var(--margin-2) var(--margin-3);
}

.btn.small.square {
  padding: var(--margin-2);
  display: inline-flex;
}

.btn > * {
  pointer-events: none;
}