.program-chapter__anchor {
  position: relative;
  float: right;
  margin-left: 1.25em;
  margin-top: -0.1em;
  vertical-align: middle;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}

[data-whatintent="mouse"] .program-chapter__anchor:focus {
  outline: 0;
}

.program-chapter__anchor:after {
  position: absolute;
  bottom: 2px;
  display: block;
  padding: 0.3em 1em;
  left: -120px;
  color: #fff;
  content: attr(data-copied);
  font-size: 14px;
  white-space: nowrap;
  background: #000;
  border-radius: 0.3em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.program-chapter__anchor:before {
  position: absolute;
  left: -13px;
  bottom: 12px;
  display: block;
  content: "";
  z-index: 99;
  border: solid;
  border-color: #000 transparent;
  border-width: 0 5px 5px 5px;
  transform: rotate(90deg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s linear;
}

@media (min-width: 800px) {
  .program-chapter__anchor {
    float: left;
    margin-left: -1.25em;
    margin-top: -0.075em;
    transition: opacity 0.2s;
  }

  .program-chapter__anchor:after {
    bottom: 36px;
    left: -42px;
    border-radius: 0.5em;
  }
  .program-chapter__anchor:before {
    left: 5px;
    bottom: 29px;
    border-width: 7px 7px 0 7px;
    transform: none;
  }
}

h3:hover .program-chapter__anchor {
  opacity: 1;
}

.program-chapter__anchor--copied {
  opacity: 1;
}
.program-chapter__anchor--copied:after,
.program-chapter__anchor--copied:before {
  visibility: visible;
  opacity: 1;
}