.contact-dock__link {
  transition: background-color .3s, color .3s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}

.contact-dock__label {
  position: absolute;
  right: calc(100% + .75rem);
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.contact-dock__link:focus-visible .contact-dock__label {
  visibility: visible;
  opacity: 1;
}

@supports not selector(:focus-visible) {
  .contact-dock__link:focus .contact-dock__label {
    visibility: visible;
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .contact-dock__link:hover {
    background-color: #0073a6;
    color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  }

  .contact-dock__link:hover .contact-dock__label {
    visibility: visible;
    opacity: 1;
  }
}

.reduce-motion .contact-dock__link,
.reduce-motion .contact-dock__label {
  transition: none;
}

.contact-dock__link.is-dismissed .contact-dock__label {
  visibility: hidden;
  opacity: 0;
}