.copyable-command {
  color: #0a789e;
  cursor: pointer;
  position: relative;
  border-bottom: 1px dotted #1f9dd7;
}

.copyable-command:hover,
.copyable-command:focus {
  color: #0a5f82;
  outline: none;
}

.copyable-command:focus {
  box-shadow: 0 2px 0 #1f9dd7;
}

.copyable-command.command-block {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 4px;
}

pre .copyable-command {
  display: inline;
  margin: 0;
  padding: 0;
}

.copyable-command::after {
  content: "Click to copy";
  display: none;
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 5;
  margin-bottom: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #222;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.copyable-command:hover::after,
.copyable-command:focus::after,
.copyable-command.copied::after {
  display: inline-block;
}

.copyable-command.copied::after {
  content: "Copied";
  background: #248a3d;
}