@use '../var' as *;
@use '../animations' as *;

.copy-button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 292px;
  padding: 0.75rem 1.25rem;
  padding-bottom: 0.75rem;
  font-size: 100%;
  font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  line-height: 1.5rem;
  background-color: white;
  border: 1px solid #0006;
  border-radius: 4px;
  cursor: pointer;
  @include animation-copy-button;

  svg,
  .faded {
    color: #ccc;
    transition: color 0.1s ease-out;
  }
}

// I don't think this is used
.copy-button.active {
  animation: pulse 0.5s;
  animation-iteration-count: 1;

  svg {
    color: #ccc;
  }
}

@keyframes pulse {
  0% {
    color: #2a85ca;
    border-color: #2a85ca;
  }

  100% {
  }
}