@oslokommune/punkt-css/dist/css/components/preview.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

.pkt-preview {
  position: relative;
}
.pkt-preview .pkt-tabs {
  --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
}
.pkt-preview__mode {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.pkt-preview__component {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10rem;
  padding: 3rem 1rem;
  margin: 1rem 0 0;
  border: 0.25rem solid var(--pkt-color-surface-default-gray);
  background-color: var(--pkt-color-background-default);
  transition: background-color 0.2s linear;
}
.pkt-preview__component--fullwidth > div {
  width: 100%;
}
.pkt-preview__opts {
  padding: 1rem;
  background-color: var(--pkt-color-surface-default-gray);
}
.pkt-preview__opts > .pkt-cell {
  position: relative;
}
.pkt-preview__opts > .pkt-cell > .pkt-tag {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.25rem 0;
}
.pkt-preview__code {
  position: relative;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}
.pkt-preview__code > pre {
  margin-top: 0 !important;
  background-color: var(--pkt-color-surface-default-gray) !important;
}
.pkt-preview__copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.pkt-preview__specs {
  background-color: var(--pkt-color-surface-default-gray);
}
.pkt-preview__specs pre {
  margin-top: 0 !important;
}
.pkt-preview__specs h2 {
  padding: 1rem;
}

.astro-code.github-light {
  background-color: var(--pkt-color-surface-default-gray) !important;
}

.preview-content {
  display: contents;
}