1  /* Copy buttons */
 2  button.copybtn {
 3      position: absolute;
 4      display: flex;
 5      top: .3em;
 6      right: .3em;
 7      width: 1.7em;
 8      height: 1.7em;
 9  	opacity: 0;
10      transition: opacity 0.3s, border .3s, background-color .3s;
11      user-select: none;
12      padding: 0;
13      border: none;
14      outline: none;
15      border-radius: 0.4em;
16      /* The colors that GitHub uses */
17      border: #1b1f2426 1px solid;
18      background-color: #f6f8fa;
19      color: #57606a;
20  }
21  
22  button.copybtn.success {
23      border-color: #22863a;
24      color: #22863a;
25  }
26  
27  button.copybtn svg {
28      stroke: currentColor;
29      width: 1.5em;
30      height: 1.5em;
31      padding: 0.1em;
32  }
33  
34  div.highlight  {
35      position: relative;
36  }
37  
38  /* Show the copybutton */
39  .highlight:hover button.copybtn, button.copybtn.success {
40  	opacity: 1;
41  }
42  
43  .highlight button.copybtn:hover {
44      background-color: rgb(235, 235, 235);
45  }
46  
47  .highlight button.copybtn:active {
48      background-color: rgb(187, 187, 187);
49  }
50  
51  /**
52   * A minimal CSS-only tooltip copied from:
53   *   https://codepen.io/mildrenben/pen/rVBrpK
54   *
55   * To use, write HTML like the following:
56   *
57   * <p class="o-tooltip--left" data-tooltip="Hey">Short</p>
58   */
59   .o-tooltip--left {
60    position: relative;
61   }
62  
63   .o-tooltip--left:after {
64      opacity: 0;
65      visibility: hidden;
66      position: absolute;
67      content: attr(data-tooltip);
68      padding: .2em;
69      font-size: .8em;
70      left: -.2em;
71      background: grey;
72      color: white;
73      white-space: nowrap;
74      z-index: 2;
75      border-radius: 2px;
76      transform: translateX(-102%) translateY(0);
77      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
78  }
79  
80  .o-tooltip--left:hover:after {
81      display: block;
82      opacity: 1;
83      visibility: visible;
84      transform: translateX(-100%) translateY(0);
85      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
86      transition-delay: .5s;
87  }
88  
89  /* By default the copy button shouldn't show up when printing a page */
90  @media print {
91      button.copybtn {
92          display: none;
93      }
94  }