.demo-color-blob {
  display: flex;
  margin-bottom: spacing(-3);
  line-height: line-height("single");

  & > span {
    width: line-height("single");
    height: line-height("single");
    margin-right: spacing(-4);
    flex-shrink: 0;
    border-radius: 50%;
  }

  &--border > span {
    border: $width-border solid color("border");
  }

  td & {
    margin-bottom: 0;
  }
}

.demo-spacing-blob {
  display: flex;
  align-items: center;
  line-height: line-height("single");
  //margin-bottom: $width-border;

  & span:first-child {
    display: inline-block;
    $background: "background-input";
    background: linear-gradient(color($background), color($background));
    height: 28px;
    border-left: $width-border solid color("border-theme");
    border-right: $width-border solid color("border-theme");
    margin-right: spacing(-3);
    flex-shrink: 0;
    box-sizing: content-box;

    & + span {
      font-size: font-size(-1);
      color: color("foreground");
      //line-height: .5;
    }
  }
}

.demo-spacing-head-size {
  position: relative;

  @include breakpoint("medium"){
    &::before {
      content: "This whitespace is the height of a h1";
      position: absolute;
      font-size: font-size(2);
      line-height: spacing(0);
      font-weight: $font-weight-light;
      color: color("foreground-disabled");
      transform: rotateZ(90deg);
      transform-origin: left top;
      top: 0;
      left: .05em;
      white-space: nowrap;
    }
  }
}

.demo-table-alignment {
  table-layout: fixed;
}

.demo-nav-site {
  .screenreader-only--show-on-focus {
    z-index: $z-index-just-above-static;
  }

  @include breakpoint(max-width) {
    padding-left: spacing(0);
    padding-right: spacing(0);
  }
}

.demo-tabbed-content {
  &.tabbed-content--hide-tabs-on-wide-width {
    @include breakpoint("wide") {
      display: grid;
      grid-column-gap: spacing(-1);
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "tabs tabs";
    }
  }

  &.tabbed-content--hide-tabs-on-medium-width {
    @include breakpoint("medium") {
      display: grid;
      grid-column-gap: spacing(-1);
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "tabs tabs";
    }
  }

  & .nav {
    grid-area: tabs;
  }
}

.demo-icon-placeholder {
  &::before {
    content: "\f6e2"; //ghost
  }
}


.demo-code-block {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr);
  gap: $width-border;

  @include breakpoint("wide") {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }

  &--wide {
    grid-template-columns: minmax(10rem, 1fr);
  }

  &__header {
    @include set-font(-1, "single", $weight: bold, $transform: "uppercase");
    @include set-colors("theme");
    max-width: none;
    padding: spacing(-5) spacing(-4);
    margin: 0;
    flex-shrink: 0;
  }

  &__item {
    display: flex;
    flex-direction: column;

    & > *:last-child {
      flex: 1 0 auto;
      display: flex;
      align-items: stretch;
      
      & > * {
        width: 100%;
      }
    }
  }

  & + & {
    margin-top: spacing(0);
  }
}

.atom-iframe {
  width: 1px;
  min-width: 100%;
  border: 2px solid var(--color-border);
  background-color:  var(--background-input);
}

.demo-page {
  @include set-font(-1, "single");
  border: $width-border solid color("border");

  code {
    color: color("foreground");
    word-break: break-all;
  }

  .page {
    min-height: 0;
  }

  .page__post-header {
    @include set-colors("background-secondary");
  }

  .page__content,
  .page__sidebar-left,
  .page__navigation-top,
  .page__footer {
    padding-left: 0;
    padding-right: 0;
  }

  .page__content {
    position: relative;
    min-height: 0;
    padding-top: spacing($page-padding-top);

    & > code {
      position: absolute;
      left: 0;
      top: 0;
    }

    &__block {
      @include set-colors("background-secondary");

      code {
        display: block;
        min-height: spacing($page-content-block-gap);
      }
    }
  }

  .page--navigation-sidebar-left,
  .page--navigation-top {
    .page__content {
      padding-top: line-height("single"); //make room for absolute positioned label
    }
  }

  @include breakpoint("wide") {
    .page--navigation-sidebar-left,
    .page--sidebar-left {
      .page__content {
        padding-top: spacing($page-padding-top-sidebar);
      }
    }
  }

  .page__sidebar-left,
  .page__navigation-top {
    background-color: color("theme-secondary");
    code {
      color: color("theme-secondary-foreground-secondary");
    }
  }


  .page__footer {
    border-top: none;
    grid-template-areas: none;
  }
}

.demo-content-toggle-breakpoint {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: spacing(-1);
}