@use "design";

.copyButton {
  position: relative;
  padding: 0.5rem design.$card-h-padding 0.5rem 0.5rem;
  cursor: pointer;

  // Only show tooltip on non-touch devices.
  @media (hover: hover) {
    &:hover {
      &::before {
        position: absolute;
        content: "Copy to clipboard";
        @include design.font-smallest;
        text-align: center;
        width: 150px;
        bottom: 100%;
        right: -0.5rem;
        padding: 0.25rem;
        background-color: #eee;
        border: 1px solid #ddd;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(#000, 0.08);
        animation: fadeIn 200ms;
      }
    }

    &.copied:hover::before {
      content: "Copied";
      color: design.$color-success;
    }
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.copyIcon,
.checkIcon {
  display: block;
  width: 1rem;
}

.checkIcon {
  color: design.$color-success;
}