.copiable {
  position: relative;
  background: var(--box-bg);
  padding: 2px 0px 2px 5px;
  border-radius: 3px;
  font-family: monospace;
  border: 1px solid var(--box-border);
  transition: 0.2s;
}

.copiable:after {
  content: "Copiar";
  margin-left: 5px;
  border-radius: 0px 3px 3px 0px;
  background: var(--secondary-color);
  color: var(--white-color);
  padding: 3px 10px 3px 10px;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
}

.copiable:active:after {
  font-weight: bold;
  content: "Copiado! 👍";
  background: var(--secondary-color-hover);
}

.copiable:active {
  font-weight: bold;
  background: var(--main-color-dark);
  color: var(--white-color);
}