@import "../modules/mq";

.article--demo > svg {
  max-width: 30em;
}
.article--demo > pre[class*="-background"] {
  max-width: 40em;
}

text {
  @include mq($until: phablet) {
    font-size: 2em;
  }
  @include mq($from: phablet) {
    font-size: 1.5em;
  }
  @include mq($from: tablet) {
    font-size: 1.4em;
  }
  @include mq($from: desktop) {
    font-size: 1.33333em;
  }
}

.base00-background  { background-color: $base00;  }
.base01-background  { background-color: $base01;  }
.base02-background  { background-color: $base02;  }
.base03-background  { background-color: $base03;  }
.base04-background  { background-color: $base04;  }
.base05-background  { background-color: $base05;  }
.base06-background  { background-color: $base06;  }
.base07-background  { background-color: $base07;  }
.base08-background,
.red-background     { background-color: $red;     }
.base09-background,
.orange-background  { background-color: $orange;  }
.base0A-background,
.yellow-background  { background-color: $yellow;  }
.base0B-background,
.green-background   { background-color: $green;   }
.base0C-background,
.cyan-background    { background-color: $cyan;    }
.base0D-background,
.blue-background    { background-color: $blue;    }
.base0E-background,
.violet-background  { background-color: $violet;  }
.base0F-background,
.magenta-background { background-color: $magenta; }

.base00  { color: $base00;  }
.base01  { color: $base01;  }
.base02  { color: $base02;  }
.base03  { color: $base03;  }
.base04  { color: $base04;  }
.base05  { color: $base05;  }
.base06  { color: $base06;  }
.base07  { color: $base07;  }
.base08,
.red     { color: $red;     }
.base09,
.orange  { color: $orange;  }
.base0A,
.yellow  { color: $yellow;  }
.base0B,
.green   { color: $green;   }
.base0C,
.cyan    { color: $cyan;    }
.base0D,
.blue    { color: $blue;    }
.base0E,
.violet  { color: $violet;  }
.base0F,
.magenta { color: $magenta; }

pre[class*="language"].base00-background {
  background-color: $base00;
}
.sh-c {
  overflow: auto;
  color: $base01;
}
.sh-c-comm {
  padding: .2em .5em;
  display: inline-block;
}
.sh-c-light,
.sh-c-light .comment {
  color: $base05;
}
.sh-c-dark,
.sh-c-dark .comment {
  color: $base01;
}