// Adapted from the following tutorials:
// https://logfetch.com/hugo-add-copy-to-clipboard-button/

.clipboard-button {
  position: absolute;
  right: 0;
  padding: 2px 7px 5px 7px;
  margin: 5px;
  color: #767676;
  border-color: #767676;
  background-color: #ededed;
  border: 1px solid;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: 0.1s;
}

.clipboard-button > svg {
  fill: #767676;
}

.clipboard-button:hover {
  cursor: pointer;
  border-color: #696969;
  background-color: #e0e0e0;
}

.clipboard-button:hover > svg {
  fill: #696969;
}

.clipboard-button:focus {
  outline: 0;
}

.highlight {
  position: relative;
}

.highlight:hover > .clipboard-button {
  opacity: 1;
  transition: 0.2s;
}