.email-copy {
  display: flex;
  justify-content: center;
}

.email-copy__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-tap-target);
}

.email-copy__address {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h4);
  font-variation-settings: "FLAR" 50;
  line-height: var(--line-height-h4);
  white-space: nowrap;
}

.email-copy__button {
  --selection-inset-x: 0px; /* check:ignore */
  --selection-inset-y: 0px; /* check:ignore */
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--size-tap-target);
  height: var(--size-tap-target);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-accent);
  cursor: pointer;
  transition:
    border-radius var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.email-copy__button[hidden] {
  display: none;
}

.email-copy__icon {
  display: grid;
  grid-area: 1 / 1;
}

.email-copy__icon--check,
.email-copy[data-copied] .email-copy__icon--copy {
  display: none;
}

.email-copy[data-copied] .email-copy__icon--check {
  display: grid;
  animation: email-copy-check var(--duration-fast) var(--ease-out);
}

@keyframes email-copy-check {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-copy[data-copied] .email-copy__icon--check {
    animation: none;
  }
}

@media (hover: hover) {
  .email-copy__button:hover {
    border-radius: 0;
    color: var(--color-accent-hover);
  }
}

.email-copy__button:focus-visible {
  border-radius: 0;
  color: var(--color-accent-hover);
  outline-color: transparent;
}

.email-copy__button:active {
  background: var(--color-accent-tint-active);
  color: var(--color-accent-hover);
}

@media (hover: hover) and (pointer: fine) {
  .email-copy__button:active {
    border-radius: 0;
  }
}

.email-copy[data-copied] .email-copy__button:not(:focus-visible) {
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-accent);
  cursor: default;
}

.email-copy[data-copied] .email-copy__button:not(:focus-visible) > .selection {
  opacity: 0;
}

.email-copy[data-copied] .email-copy__button:not(:focus-visible) > .selection i {
  transform: scale(0);
}

.email-copy__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--color-accent);
  font-weight: 500;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
}

@media (width >= 768px) {
  .email-copy__status {
    top: 50%;
    left: 100%;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    translate: 0 -50%;
  }
}