/*******************************
 *** Imports (must be first) ***
 *******************************/
@import "../vendor_custom/prism-okaidia-custom.css";
@import "./example-colors.css";

/*******************************
 ********** Variables **********
 *******************************/
:root {
  /***** FONTS *****/
  --titleFont: 'Ubuntu', 'Source Sans Pro', 'Verdana', sans-serif;
  --copyFont: 'Source Sans Pro', 'Verdana', sans-serif;
  --sourceFont: 'Source Code Pro', 'Courier', monospace;

  /***** COLORS *****/

  /* dark background colors */
  --previewDark: #111111;
  --docsDark: #151515;
  --sourceDark: #1d1d1d;
  --secondaryInfo: #707e89;

  /* This matches a color from our prism-okaidia syntax highlighting theme */
  --linkYellow: #e6db74;

  /***** WIDTHS *****/
  --paneMinWidth: 160px;
  --docsLeftPadding: 1.1rem;
  --docsLeftPaddingMedium: 1.3rem;

  /***** Media Queries *****
  // Custom properties can't actually be used for media
  // queries so these are just here for documentation.

  --midphone-plus (width >= 500px);
  --tablet-plus (width >= 780px);
  --megatablet-plus (width >= 900px);
  --short-screens (height <= 560px);

  */
}


/*******************************
 ********* Site Styles *********
 *******************************/
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: var(--copyFont);
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Cross-browser support of CSS-hidden iframe scrollbars */
iframe[scrolling='no'] {
  overflow: hidden;
}

code {
  font-family: var(--sourceFont);
}

code a {
  /* causes autolinker links to inherit their respective syntax-
      highlighted colors instead of being default-link-blue. */
  color: inherit;
}

/*
  We like focus rings, but only when a person is tabbing (not clicking).
  Thus, we scope all focus ring suppression to a "no-focus" class, which
  is added to the body tag when a person is clicking, and removed when a
  person is tabbing. Same idea as https://github.com/lindsayevans/outline.js
*/
.no-focus ::-moz-focus-inner {
  border: 0;
}

.no-focus :focus {
  outline: 0;
}

.header {
  text-align: center;
  padding: 0 42px;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;

  /* prevents the github ribbon from leaking out
     of the header and overlapping form inputs */
  overflow: hidden;
  position: relative;
}
@media (min-width: 500px) { /* --midphone-plus */
  .header {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.title {
  font-family: var(--titleFont);
  font-size: 18px;
}
@media (min-width: 500px) { /* --midphone-plus */
  .title {
    font-size: 32px;
  }
}

.description {
  font-size: 14px;
}
@media (min-width: 500px) { /* --midphone-plus */
  .description {
    font-size: 16px;
  }
}

.selection-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 9vw;
  background-color: #eaeaea;

  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
}
@media (min-width: 500px) { /* --midphone-plus */
  .selection-bar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.nav-button {
  text-decoration: none;
  text-align: center;
  list-style-type: none;
  font-family: var(--copyFont);
  font-size: 14px;
  padding: 4px 9px;
  margin: 4px;
  border: 0;
  border-radius: 16px;
  background-color: white;
  cursor: pointer;
  box-shadow: 0 1px 6px -3px black;
}
@media (min-width: 500px) { /* --midphone-plus */
  .nav-button {
    font-size: 16px;
    padding: 6px 12px;
  }
}

.nav-button:link {
  color: black;
}

.nav-button:visited {
  color: black;
}

.nav-button:hover {
  background-color: var(--previewDark);
  color: white;
}

.nav-button:target {
  background-color: var(--previewDark);
}

/* stylelint-disable */
.button-matterjs:target      { color: var(--matterjs); }
.button-greensock:target     { color: var(--greensock); }
.button-vanillajs:target     { color: var(--vanillajs); }
.button-smil:target          { color: var(--smil); }
.button-d3:target            { color: var(--d3); }
.button-p5:target            { color: var(--p5); }
.button-webanimations:target { color: var(--webanimations); }
.button-gif:target           { color: var(--gif); }
.button-anime:target         { color: var(--anime); }
.button-mojs:target          { color: var(--mojs); }
.button-jquery:target        { color: var(--jquery); }
.button-css:target           { color: var(--css); }
.button-react:target         { color: var(--react); }
.button-velocity:target      { color: var(--velocity); }
.button-video:target         { color: var(--video); }
.button-cssstep:target       { color: var(--cssstep); }
.button-webgl:target         { color: var(--webgl); }
.button-webgpu:target        { color: var(--webgpu); }
.button-flash:target         { color: var(--flash); }
.button-popmotion:target     { color: var(--popmotion); }
.button-lottie:target        { color: var(--lottie); }
.button-canvas:target        { color: var(--canvas); }
.button-motion:target        { color: var(--motion); }
/* stylelint-enable */

.demo-frame {
  width: 66px; /* 50px ball + 8px margin left/right */
  height: 226px; /* 160px range + 50px ball + 8px margin top/bottom */
  border: none;
}

.panes {
  display: flex;
  align-items: stretch;
  position: relative;

  /* Solves a Firefox issue. See: http://stackoverflow.com/a/29400042/1154642 */
  min-height: 0;

  /* Solves an IE issue. See: https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview */
  height: 100%;

  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.docs-pane {
  display: none;
  background-color: var(--docsDark);
  flex-basis: 400px;
  flex-grow: 0;
  flex-shrink: 1;
}

.docs-pane a {
  color: var(--linkYellow);
}

.docs-pane_is-open {
  display: flex;
  align-items: stretch;
}

.docs-pane-content {
  color: white;
  width: 100%;
  font-size: 0.85em;
  padding: 0 1rem 1rem var(--docsLeftPadding);

  /* Provides a constant background for the more/less link */
  margin-top: 2.5rem;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 500px) { /* --midphone-plus */
  .docs-pane-content {
    padding-left: var(--docsLeftPaddingMedium);
  }
}
@media (min-width: 780px) { /* --tablet-plus */
  .docs-pane-content {
    font-size: 1em;
  }
}

.docs-pane-content h1:first-of-type {
  margin-top: 0;
}

.docs-toggle {
  position: absolute;
  top: 0.55rem;
  left: var(--docsLeftPadding);
  z-index: 1;
  width: calc(40% - var(--docsLeftPadding));
  min-width: calc(var(--paneMinWidth) - var(--docsLeftPadding));
}
@media (min-width: 500px) { /* --midphone-plus */
  .docs-toggle {
    top: 0.75rem;
    left: var(--docsLeftPaddingMedium);
    width: calc(40% - var(--docsLeftPaddingMedium));
    min-width: calc(var(--paneMinWidth) - var(--docsLeftPaddingMedium));
  }
}

.docs-toggle-link {
  font-size: 10px;
  color: var(--linkYellow);
}
@media (min-width: 500px) { /* --midphone-plus */
  .docs-toggle-link {
    font-size: 13px;
  }
}

.docs-toggle-link::before {
  content: 'More ';
}

.button-link {
  font-family: var(--copyFont);
  background-color: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.docs-toggle-link_is-less::before {
  content: 'Less ';
}

.credit {
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 12px;
  text-align: center;
  color: var(--secondaryInfo);
  border-top: 1px solid var(--sourceDark);
  background-color: var(--previewDark);
  padding: 3px 0;
}
@media (max-height: 560px) { /* --short-screens */
  /* preserve vertical space by hiding the credit on short screens */
  .credit {
    display: none;
  }
}

.credit :any-link {
  color: var(--secondaryInfo);
}

.unsupported {
  color: white;
  width: 50%;
  text-align: center;
}

.unsupported::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin: 1rem auto;
  background-image: url('../images/sad.svg');
}

.unsupported-details {
  color: var(--linkYellow);
}

.preview-pane {
  background-color: var(--previewDark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 40%;
  flex-grow: 1;
  flex-shrink: 2;
  min-width: var(--paneMinWidth);

  /* clips the bouncing ball, if the frame is too short */
  overflow: hidden;
}

.source-pane {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 60%;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* note: Most source code styles are provided by PrismJS.
         The styles below just apply a few tweaks and overrides.  */
.source-pane > pre {
  flex-grow: 1;
  background-color: var(--sourceDark);
  border-radius: 0;
  font-size: 0.75em;
  margin: 0;
  padding: 1.5em 0.5em 0.5em 1.5em;
}
@media (min-width: 900px) { /* --megatablet-plus */
  .source-pane > pre {
    font-size: 0.9em;
  }
}

.prism-show-language {
  right: 0;
  top: 0;
  padding: 2px 5px;
  color: white;
  background: var(--secondaryInfo);
  position: absolute;
  font-size: 10px;
  text-transform: uppercase;
}

.ribbon {
  max-width: 24vw;
  max-height: 138px;
}