:root {
  --arrow-x-pos: 50%;
  --arrow-y-pos: 50%;
}

.bx--snippet-button  {
    border: none;
    background: none;
    background-color: transparent;
    color: #ffffff;
    float:right;
    cursor: pointer;
    position: relative;
}

.bx--snippet__icon {
    fill: #fff;
}

.bx--btn--copy__feedback {
    visibility: hidden;
    width: 120px;
    background-color: #3a3b3c;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}


.bx--btn--copy__feedback[data-position=left] {
  top: 0;
  right: calc(100% + 7px); 
}

.bx--btn--copy__feedback[data-position=right] {
  top: 0;
  left: calc(100% + 7px); 
}

.bx--btn--copy__feedback[data-position=top] {
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width, to center the tooltip */
}

.bx--btn--copy__feedback[data-position=bottom] {
  width: 120px;
  top: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}


.bx--btn--copy__feedback[data-position=top]::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3a3b3c transparent transparent transparent;
  left: var(--arrow-x-pos);
}


.bx--btn--copy__feedback[data-position=bottom]::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #3a3b3c transparent;
  left: var(--arrow-x-pos);
}

.bx--btn--copy__feedback[data-position=right]::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #3a3b3c transparent transparent;
  top: var(--arrow-y-pos);
}


.bx--btn--copy__feedback[data-position=left]::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #3a3b3c;
  top: var(--arrow-y-pos);
}


.bx--btn--copy__feedback.fade {
  opacity: 0;
  transition: opacity 1s;
  visibility: visible;
}

.bx--btn--copy__feedback.fade.visible {
  opacity: 1;
}

.bx--btn--copy__feedback.visible {
  visibility: visible;
}