/* Primary action items: button or link */
.primary {
  color: var(--primary-button-color);
  background: var(--primary-button-background);
  box-shadow:
    0 4px 0 hsl(0deg 0% 42%),
    0 16px 12px -8px hsl(0deg 0% 0% / 42%),
    inset 0 -2px 1px 1px hsl(0deg 0% 42%);
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 52px;
  height: 52px;
  text-align: center;
  font-family: Inter, sans-serif;
  border: none;
  display: block;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  text-decoration: none;
}

@media (hover: hover) {
  .primary:hover:enabled {
    background: var(--primary-button-background-hover);
  }
}

.primary:disabled {
  color: var(--primary-button-color-disabled);
  box-shadow:
    0 4px 0 hsl(0deg 0% 60%),
    0 16px 12px -8px hsl(0deg 0% 0% / 30%),
    inset 0 -2px 1px 1px hsl(0deg 0% 60%);
}