@use "container-common";

.vp-playground {
  @media print {
    display: none !important;
  }
}

.vp-playground-actions {
  display: flex;
  align-items: center;
}

.vp-playground-action {
  display: inline-flex;
  margin-inline-start: 10px;

  .icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--vp-c-text-mute);
  }

  &:hover .icon {
    fill: var(--vp-c-accent-bg);
  }
}

.vp-playground-container {
  position: relative;
  overflow: hidden;
  background: var(--vp-c-bg);
  transition: background var(--vp-t-color);

  @media print {
    page-break-inside: avoid;
  }

  iframe {
    display: block;

    resize: vertical;

    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
  }
}