.copy-text-to-clipboard--wrapper{
  background-color: color-mix(in srgb, var(--wwl-color-horizon) 20%, var(--wwl-color-white));
  border: 4px solid var(--wwl-color-horizon);
  border-radius: 4px;
  display: flex;
  transition:all .3s ease-in;
  width: 100%;
}
.copy-text-to-clipboard--wrapper.copy-successful{
  background-color: color-mix(in srgb, var(--wwl-color-olivegreen) 20%, var(--wwl-color-white));
  border-color: var(--wwl-color-olivegreen);
}
.copy-text-to-clipboard--wrapper.copy-failed{
  background-color: color-mix(in srgb, var(--wwl-color-japonica) 20%, var(--wwl-color-white));
  border-color: var(--wwl-color-japonica);
}
.copy-text-to-clipboard--content{
  flex: 1;
  padding: 10px;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  transition:all .3s ease-in;
}
.copy-text-to-clipboard--wrapper.copy-successful .copy-text-to-clipboard--content,
.copy-text-to-clipboard--wrapper.copy-failed .copy-text-to-clipboard--content{
  white-space:normal;
}
.copy-text-to-clipboard--button{
  align-items: center;
  background-color: var(--wwl-color-horizon);
  color: var(--wwl-color-white);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-inline-end: -4px;
  padding: 10px;
  transition:all .3s ease-in;
}
.copy-text-to-clipboard--button:focus,
.copy-text-to-clipboard--button:hover{
  color: color-mix(in srgb, var(--wwl-color-white) 90%, var(--wwl-color-black));
}
.copy-text-to-clipboard--button.copy-text-to-clipboard--button__disabled{
  pointer-events: none;
  cursor: default;
}
.copy-text-to-clipboard--wrapper.copy-successful .copy-text-to-clipboard--button{
  background-color: var(--wwl-color-olivegreen);
}
.copy-text-to-clipboard--wrapper.copy-failed .copy-text-to-clipboard--button{
  background-color: var(--wwl-color-japonica);    
}