.root {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-greyLighter);
  border-radius: 4px;
}

.specimenContainer {
  position: relative;
  z-index: 1;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.light {
  background-color: var(--color-white);
  color: var(--color-black);
}

.dark {
  background-color: var(--color-greyDarker);
  color: var(--color-white);
}

.body {
  border-top: 1px solid var(--color-greyLighter);
  text-align: left;
  padding: var(--size-regular);
}

.name {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-regular);
  line-height: var(--lineheight-regular);
  letter-spacing: var(--letter-spacing-regular);
  font-weight: var(--fontweight-demi);
  color: var(--color-black);
}

.attributes {
  margin: 0;
  margin-top: var(--size-sm-iii);
  list-style-type: none;
}

.attribute {
  composes: fontSmallI from '../../../globals/typography.css';
  font-family: var(--font-fira-code);
  color: var(--color-grey);
}

.attribute + .attribute {
  margin-top: var(--size-sm-iii);
}

.codeBlock {
  overflow-x: auto;
  -webkit-overflow-scroll: smooth;
}

.name + .codeBlock,
.attributes + .codeBlock {
  margin-top: var(--size-sm-iii);
}

.code {
  composes: fontSmallIi from '../../../globals/typography.css';
  font-family: var(--font-fira-code);
}