// Diagram container
.diagram-container {
  position: relative;
  margin-block: 0.5rem;
}

// Diagram copy button styles
.diagram-copy-btn {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  line-height: 1;
  padding: 0.5rem;
  border: 1px solid;
  color: fixit-var(dcb-color, #25292e);
  border-color: fixit-var(dcb-border-color, #d1d9e0);
  background-color: fixit-var(dcb-background-color, #f6f8fa);
  box-shadow: fixit-var(dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
  @include user-select(none);
  @include border-radius;
  @include z-index(base);

  [data-theme=dark] & {
    @include set-fixit-vars((
      dcb-color: #d1d7e0,
      dcb-border-color: #3d444d,
      dcb-background-color: #2a313c,
      dcb-box-shadow: 0px 0px 0px 0px #000000,
    ));
  }

  &:hover {
    @include set-fixit-vars((
      dcb-border-color: #d1d9e0,
      dcb-background-color: #eff2f5,
    ));

    [data-theme=dark] & {
      @include set-fixit-vars((
        dcb-border-color: #3d444d,
        dcb-background-color: #2f3742,
      ));
    }
  }

  .fa-clone {
    font-size: 1rem;
  }

  &[data-copied] {
    .fa-clone {
      --fa: '\f00c';
      --fa-style: 900;
      color: fixit-var(global-link-hover-color);
    }
  }

  @include media('print') {
    display: none !important;
  }
}
