.copy-to-clipboard {
  display: flex;
  background: var(--color-bg--main);
  border: 1px solid var(--color-border);
  border-radius: 1.5em;
  color: var(--color-txt);
  position: relative;
  overflow: hidden;
}

.copy-to-clipboard--borderless {
  border-color: transparent;
  [data-color-scheme="dark"] & { border-color: var(--color-border); }
}

.copy-to-clipboard--bordered {
  border: 1px solid var(--color-border) !important;
}

.copy-to-clipboard--hidden {
  position: absolute;
  left: -999em;
  top: -999em;
  opacity: 0;
}

.copy-to-clipboard--replace-button {
  .copy-to-clipboard--success & {
    display: none;
  }
}

.copy-to-clipboard--success-replace-message {
  display: none;

  .copy-to-clipboard--success & {
    animation: yellowfade 1.5s both;
    display: flex;
  }
}

.copy-to-clipboard--success {
  position: relative;
}

.copy-to-clipboard__success-message {
  animation: fade-out 300ms both;
  animation-delay: 2s;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  background: var(--color-bg--flash-notice);
  color: var(--color-txt--reversed);
  border-radius: 4rem;

  -webkit-backdrop-filter: blur(16px);

  .copy-to-clipboard--success & {
    animation: slide-up-then-down 2s both;
    display: flex;
  }
}

.copy-to-clipboard__text {
  padding: 0.5em 1em;
  flex-grow: 1;
}

.copy-to-clipboard__btn {
  padding: 0.5em 1em;
  background: var(--color-bg--surface);
  border-radius: 0 1.5em 1.5em 0;
}

.copy-to-clipboard__btn--primary {
  background: var(--color-bg--primary);
}