.status .email-envelope-icon {
  width: 17px;
  height: 17px;
  fill: none;
  overflow: visible;
  flex: 0 0 auto;
}

.status .email-envelope-icon .mail-body,
.status .email-envelope-icon .mail-fold,
.status .email-envelope-icon .mail-lid-line {
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.status .email-envelope-icon .mail-fold,
.status .email-envelope-icon .mail-lid-line {
  transform-box: fill-box;
  transform-origin: 50% 35%;
  transition:
    transform 210ms ease,
    opacity 210ms ease,
    stroke-dashoffset 210ms ease;
}

.status .email-envelope-icon .mail-lid-line {
  opacity: 0.72;
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
}

.status[href^="mailto:"] {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.contact-row .status {
  min-width: 82px;
  min-height: 34px;
  justify-content: center;
  justify-self: end;
}

.status[href^="mailto:"]:hover,
.status[href^="mailto:"]:focus-visible {
  background: rgba(120, 140, 93, 0.1);
  border-color: var(--clay-dark);
  color: var(--clay-dark);
  transform: translateY(-1px);
}

.status[href^="mailto:"]:hover .mail-fold,
.status[href^="mailto:"]:focus-visible .mail-fold {
  transform: translateY(-1.4px);
}

.status[href^="mailto:"]:hover .mail-lid-line,
.status[href^="mailto:"]:focus-visible .mail-lid-line {
  opacity: 1;
  stroke-dashoffset: 0;
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .status .email-envelope-icon .mail-fold,
  .status .email-envelope-icon .mail-lid-line,
  .status[href^="mailto:"] {
    transition: none;
  }
}