.code {
  display: flex;
  position: relative;
}
.code .buttons {
  display: flex;
  position: absolute;
  top: 0;
  right: 10px;
}
.code .buttons .team,
.code .buttons .copy {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 10px;
  cursor: pointer;
}
.code .buttons .copy {
  margin-right: 0;
}
.code .buttons .team::before,
.code .buttons .copy::before {
  font-family: 'icon';
  color: #383d44;
  line-height: unset !important;
  margin-bottom: 0 !important;
}
.code.dark .buttons .team::before,
.code.dark .buttons .copy::before {
  color: #a1a19a;
}
.code .buttons .team::before {
  content: '\e909';
}
.code .buttons .copy::before {
  content: '\e908';
}
.code .buttons .copy::after,
.code .buttons .team::after {
  content: attr(data-title);
  position: absolute;
  right: 0;
  font-size: 12px;
  background: #383d44;
  color: #fff;
  padding: 10px;
  line-height: 14px;
  white-space: nowrap;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -34px;
  opacity: 0;
  z-index: -1;
  transition: 0.2s;
}
.code .buttons .copy:hover:after,
.code .buttons .team:hover::after {
  opacity: 1;
  z-index: 1;
}
.code .buttons .copy .comment {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #d9e5f0;
  border: 1px solid #c8d7e4;
  padding: 20px;
  border-radius: 6px;
  font-weight: bold;
  animation: copy-code 4s forwards;
  display: none;
}
@keyframes copy-code {
  0% {
      opacity: 0;
  }
  15% {
      opacity: 1;
  }
  75% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
pre {
  width: 100%;
  display: flex;
}
code {
  background: #d9e5f0;
  border: 1px solid #c8d7e4;
  color: #444;
}
pre code.wshl {
  display: block;
  overflow-x: auto;
  padding: 1em;
  width: 100%;
}
code.wshl {
  padding: 3px 5px;
}
.code.dark code {
  color: #a1a19a;
  background: #002635;
}
.wshl-comment {
  color: #888;
}
.wshl-punctuation, .wshl-tag {
  color: #444a;
}
.wshl-tag .wshl-attr, .wshl-tag .wshl-name {
  color: #444;
}
.wshl-attribute, .wshl-doctag, .wshl-keyword, .wshl-meta .wshl-keyword, .wshl-name, .wshl-selector-tag {
  font-weight: 700;
}
.code.dark code :where(.wshl-attribute, .wshl-doctag, .wshl-keyword, .wshl-meta .wshl-keyword, .wshl-name, .wshl-selector-tag) {
  color: #9a70a4;
}
.wshl-deletion, .wshl-number, .wshl-quote, .wshl-selector-class, .wshl-selector-id, .wshl-string, .wshl-template-tag, .wshl-type {
  color: #800;
}
.wshl-section, .wshl-title {
  color: #800;
  font-weight: 700;
}
.wshl-link, .wshl-operator, .wshl-regexp, .wshl-selector-attr, .wshl-selector-pseudo, .wshl-symbol, .wshl-template-variable, .wshl-variable {
  color: #bc6060;
}
.wshl-literal {
  color: #78a960;
}
.wshl-addition, .wshl-built_in, .wshl-bullet, .wshl-code {
  color: #397300;
}
.wshl-meta {
  color: #1f7199;
}
.wshl-meta .wshl-string {
  color: #4d99bf;
}
.wshl-emphasis {
  font-style: italic;
}
.wshl-strong {
  font-weight: 700;
}