.clipboard-container {
  font-family: var(--font-sans);
  width: min(400px, 100%);
  display: flex;
  align-items: center;
  gap: var(--crotchet);
}

.clipboard-link {
  width: 100%;
  padding: var(--quaver) 0;
  border: none;
  border-bottom: 1px solid var(--grey-500);
  background: none;
  outline: none;

  &:focus {
    border-bottom-color: var(--grey-800);
  }
}

.clipboard-button.copied,
.clipboard-button.copied:hover,
.clipboard-button.copied:active {
  border-color: var(--status-green);
  color: var(--status-green);
  background: rgb(from var(--status-green) r g b / 0.5) !important ;
  background-color: rgb(from var(--status-green) r g b / 0.5);
  background-image: 
    linear-gradient(rgb(from var(--status-green) r g b / 0.5));
}