.vp-demo-wrapper {
  margin: 16px 0;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-draw {
  padding: 24px;
}

.vp-demo-wrapper .demo-draw .draw-iframe {
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
}

.vp-demo-wrapper .demo-info .title {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bolder;
}

.vp-demo-wrapper .demo-info .title::before {
  display: inline-block;
  width: 16px;
  height: 0;
  margin-right: 8px;
  content: "";
  border-top: 1px solid var(--vp-c-divider);
  transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-info .title::after {
  display: inline-block;
  flex: 1 2;
  height: 0;
  margin-left: 8px;
  content: "";
  border-top: 1px solid var(--vp-c-divider);
  transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-info .desc {
  padding: 0 24px;
  margin-top: 8px;
}

.vp-demo-wrapper .demo-info p:last-child {
  margin-bottom: 16px;
}

.vp-demo-wrapper .demo-ctrl {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 8px 24px;
  border-top: 1px dotted var(--vp-c-divider);
  transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-ctrl .extra {
  display: flex;
  flex: 1 2;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}

.vp-demo-wrapper .demo-ctrl [class*="vpi-"] {
  font-size: 20px;
  color: var(--vp-c-text-2);
  cursor: pointer;
  transition: color var(--vp-t-color);
}

.vp-demo-wrapper .demo-ctrl [class*="vpi-"]:hover {
  color: var(--vp-c-text-1);
}

.vp-demo-wrapper .demo-ctrl form,
.vp-demo-wrapper .demo-ctrl button {
  padding: 0;
  margin: 0;
  line-height: 1;
}

.vp-demo-wrapper .demo-resources {
  position: relative;
}

.vp-demo-wrapper .demo-code {
  border-top: 1px solid var(--vp-c-divider);
  transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-code div[class*="language-"],
.vp-demo-wrapper .demo-code .vp-code-tabs-nav {
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.vp-demo-wrapper .demo-code > div[class*="language-"]:not(:last-of-type) {
  border-bottom: 2px dotted var(--vp-c-divider);
  border-radius: 0;
}

.vp-demo-wrapper .demo-code > div[class*="language-"] + div[class*="language-"] {
  margin-top: 0;
}

.vp-demo-wrapper .demo-resources-container {
  position: absolute;
  top: 100%;
  right: -24px;
  z-index: 10;
  width: max-content;
  padding: 8px 12px;
  font-size: 14px;
  background-color: var(--vp-c-bg);
  border: solid 1px var(--vp-c-divider);
  border-radius: 8px;
  box-shadow: var(--vp-shadow-2);
  transition: var(--vp-t-color);
  transition-property: border, box-shadow, background-color;
}

.vp-demo-wrapper .demo-resources-container .demo-resources-list > p {
  margin: 0;
  line-height: 20px;
  color: var(--vp-c-text-3);
  transition: color var(--vp-t-color);
}

.vp-demo-wrapper .demo-resources-container .demo-resources-list:not(:first-of-type) {
  margin-top: 8px;
}

.vp-demo-wrapper .demo-resources-container .demo-resources-list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.demo-draw-vue {
  position: absolute;
  top: -99999px;
  left: -99999px;
  z-index: 1;
  padding: 24px;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  will-change: top, left, width, height;
}

.vpi-demo-code {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.18 4.276a.75.75 0 0 1 .531.918l-3.973 14.83a.75.75 0 0 1-1.45-.389l3.974-14.83a.75.75 0 0 1 .919-.53m2.262 3.053a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.662 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 0 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.818s-.072-.424-.402-.817c-.344-.409-.875-.89-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 1 0-1.004-1.115L4.761 8.836c-.737.662-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 0 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.818s.072-.424.402-.817c.344-.409.875-.89 1.663-1.598z'/%3E%3C/svg%3E");
}

.vpi-demo-codepen {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='m911.7 385.3l-.3-1.5c-.2-1-.3-1.9-.6-2.9c-.2-.6-.4-1.1-.5-1.7c-.3-.8-.5-1.7-.9-2.5c-.2-.6-.5-1.1-.8-1.7c-.4-.8-.8-1.5-1.2-2.3c-.3-.5-.6-1.1-1-1.6c-.8-1.2-1.7-2.4-2.6-3.6c-.5-.6-1.1-1.3-1.7-1.9c-.4-.5-.9-.9-1.4-1.3c-.6-.6-1.3-1.1-1.9-1.6c-.5-.4-1-.8-1.6-1.2c-.2-.1-.4-.3-.6-.4L531.1 117.8a34.3 34.3 0 0 0-38.1 0L127.3 361.3c-.2.1-.4.3-.6.4c-.5.4-1 .8-1.6 1.2c-.7.5-1.3 1.1-1.9 1.6c-.5.4-.9.9-1.4 1.3c-.6.6-1.2 1.2-1.7 1.9c-1 1.1-1.8 2.3-2.6 3.6c-.3.5-.7 1-1 1.6c-.4.7-.8 1.5-1.2 2.3c-.3.5-.5 1.1-.8 1.7c-.3.8-.6 1.7-.9 2.5c-.2.6-.4 1.1-.5 1.7c-.2.9-.4 1.9-.6 2.9l-.3 1.5q-.3 2.25-.3 4.5v243.5q0 2.25.3 4.5l.3 1.5l.6 2.9c.2.6.3 1.1.5 1.7c.3.9.6 1.7.9 2.5c.2.6.5 1.1.8 1.7c.4.8.7 1.5 1.2 2.3c.3.5.6 1.1 1 1.6c.5.7.9 1.4 1.5 2.1l1.2 1.5c.5.6 1.1 1.3 1.7 1.9c.4.5.9.9 1.4 1.3c.6.6 1.3 1.1 1.9 1.6c.5.4 1 .8 1.6 1.2c.2.1.4.3.6.4L493 905.7c5.6 3.8 12.3 5.8 19.1 5.8c6.6 0 13.3-1.9 19.1-5.8l365.6-243.5c.2-.1.4-.3.6-.4c.5-.4 1-.8 1.6-1.2c.7-.5 1.3-1.1 1.9-1.6c.5-.4.9-.9 1.4-1.3c.6-.6 1.2-1.2 1.7-1.9l1.2-1.5l1.5-2.1c.3-.5.7-1 1-1.6c.4-.8.8-1.5 1.2-2.3c.3-.5.5-1.1.8-1.7c.3-.8.6-1.7.9-2.5c.2-.5.4-1.1.5-1.7c.3-.9.4-1.9.6-2.9l.3-1.5q.3-2.25.3-4.5V389.8c-.3-1.5-.4-3-.6-4.5M546.4 210.5l269.4 179.4l-120.3 80.4l-149-99.6V210.5zm-68.8 0v160.2l-149 99.6l-120.3-80.4zM180.7 454.1l86 57.5l-86 57.5zm296.9 358.5L208.3 633.2l120.3-80.4l149 99.6zM512 592.8l-121.6-81.2L512 430.3l121.6 81.2zm34.4 219.8V652.4l149-99.6l120.3 80.4zM843.3 569l-86-57.5l86-57.5z'/%3E%3C/svg%3E");
}

.vpi-demo-jsfiddle {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='180' viewBox='0 0 256 180'%3E%3Cpath fill='%230084ff' d='M148.1 0c42.8 0 77.598 34.087 78.393 76.452l.014 1.481l-.011.866l1.46.76c16.183 8.773 26.938 25.332 27.964 44.018l.061 1.52l.019 1.418c0 29.117-23.397 52.75-52.428 53.295l-1.365.008H54.053C24.094 179.357 0 155.102 0 125.276c0-17.387 8.273-33.328 21.838-43.511l1.287-.938l.271-.19l-.135-.684a39 39 0 0 1-.438-3.347l-.11-1.694l-.037-1.705c0-21.519 17.547-38.95 39.173-38.95a39 39 0 0 1 16.063 3.445l1.483.706l.915.478l.978-1.623A78.37 78.37 0 0 1 144.718.072l1.721-.055zm0 11.13a67.24 67.24 0 0 0-60.69 38.113c-1.53 3.187-5.607 4.157-8.41 2c-4.908-3.776-10.875-5.856-17.151-5.856c-15.495 0-28.043 12.465-28.043 27.82c0 2.852.43 5.638 1.261 8.27a5.565 5.565 0 0 1-2.473 6.468c-13.215 7.815-21.464 21.854-21.464 37.33c0 23.308 18.526 42.367 41.76 43.376l1.249.038h148.103c23.526.144 42.628-18.783 42.628-42.174c0-17.244-10.49-32.572-26.266-39.1a5.57 5.57 0 0 1-3.43-4.87l.002-.586l.15-2.415l.047-1.246l-.012-1.798c-.768-36.225-30.578-65.37-67.262-65.37m16.167 70.493c17.519 0 31.876 13.362 31.876 30.052s-14.357 30.053-31.876 30.053c-10.548 0-19.386-5.284-31.203-16.729l-2.58-2.547l-3.436-3.525q-6.525-6.955-6.774-7.468l-1.321-1.363l-2.384-2.395a140 140 0 0 0-4.457-4.226l-2.087-1.835c-7.155-6.106-12.769-8.886-18.292-8.886c-11.543 0-20.746 8.564-20.746 18.921c0 10.358 9.203 18.922 20.746 18.922c6.002 0 10.482-1.965 14.584-5.612a35 35 0 0 0 1.57-1.491l2.941-3.133a5.565 5.565 0 0 1 8.5 7.161l-.51.591l-2.033 2.191a50 50 0 0 1-3.072 2.998c-6.013 5.348-13.03 8.426-21.98 8.426c-17.519 0-31.876-13.362-31.876-30.053c0-16.69 14.357-30.052 31.876-30.052c11.678 0 21.26 6.476 35.11 20.62q8.632 9.135 8.88 9.644l2.53 2.59c11.124 11.178 18.65 16.12 26.014 16.12c11.543 0 20.746-8.564 20.746-18.922c0-10.357-9.203-18.921-20.746-18.921c-6.002 0-10.482 1.965-14.584 5.612a35 35 0 0 0-1.57 1.49l-1.311 1.373l-1.63 1.76a5.565 5.565 0 0 1-8.108-7.625l2.15-2.318a50 50 0 0 1 3.073-2.998c6.013-5.347 13.03-8.425 21.98-8.425'/%3E%3C/svg%3E");
}

.vpi-demo-resources {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 14l-9 6l-9-6m18-4l-9 6l-9-6l9-6z'/%3E%3C/svg%3E");
}