.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.contact-link:hover {
  background: var(--color-primary-20);
}

.contact-link:active {
  background: var(--color-primary-50);
}

.contact-link svg {
  width: 20px;
  height: auto;
}

.contact-link--call svg {
  width: 31px;
}

.contact-link--on-dark {
  background: var(--color-primary);
  border-color: var(--color-on-primary);
  color: var(--color-on-dark);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.contact-link--on-dark svg path {
  fill: var(--color-on-dark);
  transition: fill 0.2s ease;
}

.contact-link--on-dark:hover {
  background: var(--color-on-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.contact-link--on-dark:hover svg path {
  fill: var(--color-primary);
}

.contact-link--on-dark:active {
  background: var(--color-primary-20);
}