@import "common/dao-color.scss";

$svg-active-color: #217ef2;
$svg-normal-color: $blue;
$clipboard-bg: $white-light;
$clipboard-border-color: $grey-light;
$clipboard-color: $black-dark;
$clipboard-height: 30px;
$clipboard-line-height: 22px;
$clipboard-margin: ($clipboard-height - $clipboard-line-height) / 2;
$clipboard-font-size: 13px;
$clipboard-svg-size: 14px;

.dao-clipboard {
  display: flex;
  justify-content: space-between;
  background: $clipboard-bg;
  border: 1px solid $clipboard-border-color;
  border-radius: 4px;
  padding: $clipboard-margin 0;
  pre {
    padding: 0 1em;
    word-break: break-all;
    color: $clipboard-color;
    white-space: pre-line;
    font-size: $clipboard-font-size;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    border: none;
    overflow: hidden;
    margin: 0;
    line-height: $clipboard-line-height;
  }
  .copy-button {
    padding-right: 8px;
    svg {
      width: $clipboard-svg-size;
      height: $clipboard-svg-size;
      cursor: pointer;
      vertical-align: -1.5px;
      transition: fill .3s;
      &:hover {
        fill:$svg-normal-color;
      }
      &:active {
        fill:$svg-active-color;
      }
    }
  }
}