.h5peditor-copypaste-wrap {
  float: right;
}
.h5peditor > .h5peditor-copypaste-wrap {
  /* Make sure buttons are visible when Tutorial and Example is missing */
  margin-bottom: 14px;
}
.h5peditor-copypaste-wrap.hidden {
  display: none;
}
.h5peditor-clearfix {
  clear: both;
}

.h5peditor-paste-button,
.h5peditor-copy-button {
  border: 1px solid #deeeec;
  padding: 0.5em 0.75em 0.75em 0.5em;
  margin-left: 0.5em;
  border-radius: 0.25em;
  cursor: pointer;
  background: #f2faff;
  line-height: 0.5em;

  &:hover {
    border-color: #bbdae8;
  }
  &:active {
    background-color: #deeffb
  }
  &.disabled {
    color: #707070;
    background-color: #f5f5f5;
    border-color: #ededed;
    cursor: not-allowed;
  }
}

.h5peditor-copy-button:before,
.h5peditor-paste-button:before {
  font-family: $icon-font-family;
  margin-right: 5px;
  font-size: 1.5em;
  position: relative;
  top: 0.2em;
  color: #2372b3;
}
.h5peditor-copy-button:before {
  content: "\e90e";
}
.h5peditor-paste-button:before {
  content: "\e910";
}
.h5peditor-copy-button.disabled:before,
.h5peditor-paste-button.disabled:before {
  color: #707070;
}
.h5peditor-copy-button.disabled:before {
  content: "\e90f";
}
.h5peditor-paste-button.disabled:before {
  content: "\e911";
}
.h5p-hub .h5peditor-paste-button {
  font-family: $font-family;
  color: #fff;
  border: solid 1px #9fc8f4;
  padding: 0 0.75em 0.5em 0.75em;
  background: transparent;
  line-height: 1;
  height: auto;
  margin-top: 0.675em;
  margin-right: 0.675em;

  &:hover {
    background: #4b5460;
    border-color: #606a78;
  }
  &:active {
    background: #434b55;
  }
  &.disabled {
    border-color: #30353d;
    background: #30353d;
    color: #c2c2c2;
  }
}
.h5p-hub .h5peditor-paste-button:before {
  color: #9fc8f4;
}
.h5p-hub .h5peditor-paste-button.disabled:before {
  color: #c3c3c3;
}