.link {
  composes: h4 from '../typography/typography.module.css';
  text-decoration: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  height: 100%;
}

.primary {
  box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
}

.primary:hover {
  box-shadow: none;
  background-color: rgba(72, 246, 148, 0.8);
}

.secondary {
  box-shadow: inset 0 -4px 0 0 rgba(255, 88, 74, 0.8);
}

.secondary:hover {
  box-shadow: none;
  background-color: rgba(255, 88, 74, 0.8);
  color: white;
}

.noColor {
  box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 0.8);
}

.noColor:hover {
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.8);
}

.action {
  box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
  color: var(--zircon);
}

.action:hover {
  box-shadow: none;
  background-color: rgba(72, 246, 148, 0.8);
}
