FixIt/assets/css/_partials/_single/_diagram-copy-btn.scss

// Diagram container
.diagram-container {
  position: relative;
}

// Diagram copy button styles
.diagram-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  line-height: 1;
  padding: 0.5rem;
  z-index: 1;
  user-select: none;
  border: 1px solid;
  border-radius: 6px;
  color: var(#{$rootPrefix}dcb-color, #25292e);
  border-color: var(#{$rootPrefix}dcb-border-color, #d1d9e0);
  background-color: var(#{$rootPrefix}dcb-background-color, #f6f8fa);
  box-shadow: var(#{$rootPrefix}dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color, background-color, box-shadow, border-color;
  @extend .print-d-none;

  [data-theme='dark'] & {
    #{$rootPrefix}dcb-color: #d1d7e0;
    #{$rootPrefix}dcb-border-color: #3d444d;
    #{$rootPrefix}dcb-background-color: #2a313c;
    #{$rootPrefix}dcb-box-shadow: 0px 0px 0px 0px #000000;
  }

  &:hover {
    #{$rootPrefix}dcb-border-color: #d1d9e0;
    #{$rootPrefix}dcb-background-color: #eff2f5;
    transition-duration: .1s;

    [data-theme='dark'] & {
      #{$rootPrefix}dcb-border-color: #3d444d;
      #{$rootPrefix}dcb-background-color: #2f3742;
    }
  }

  .fa-check {
    padding-inline: 1px;
    display: none;
  }

  &[data-copied] {
    .fa-check {
      display: inline-block;
    }
    .fa-clone {
      display: none;
    }
  }
}

@media only screen and (min-width: 1201px) {
  .diagram-container {
    .diagram-copy-btn {
      display: none;
    }
    &:hover {
      .diagram-copy-btn {
        display: block;
      }
    }
  }
}