$transition-duration: 1000ms !default;
$slide-padding-horizontal: 32px !default;
$slide-padding-vertical: 100px !default;

/* Slide steps */

.slide {
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.87);
  display: block;
  font-family: 'PT Sans', sans-serif;
  font-size: 30px;
  height: 1080px;
  letter-spacing: -1px;
  line-height: 36px;
  padding: $slide-padding-vertical $slide-padding-horizontal;
  position: relative;
  width: 1920px;

  @media screen {
    > * {
      opacity: 0;
      transition: $transition-duration;
    }
  }

  > .heading,
  &.present > * {
    opacity: 1;
  }

  q {
    display: block;
    font-size: 50px;
    line-height: 72px;

    margin-top: 100px;
  }

  q strong {
    white-space: nowrap;
  }

  svg {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  &.depth-2 > .heading,
  &.depth-3 > .heading {
    display: inline-block;
    margin-bottom: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
  }

  &.present.depth-2 > .heading,
  &.present.depth-3 > .heading {
    white-space: normal;
  }

  > p,
  > div > p {
    font-size: 150%;
    line-height: 150%;
  }

  p + ol {
    // lists and paragraphs should have some spacing
    margin-top: 32px;
  }

  > ol,
  > ul,
  > div > ol,
  > div > ul {
    font-size: 180%;
    overflow: hidden;
  }

  ol,
  ul {
    padding-left: 6.67vw;
  }

  ul > li {
    list-style-type: disc;
  }

  /* Slides with code */
  code,
  .code {
    font-family: 'Fira Code', monospace;
  }

  > pre,
  > div > pre {
    display: block;
    font-size: 28px;
    line-height: 38px;
    position: absolute;
    right: $slide-padding-horizontal;
    top: $slide-padding-vertical;
  }

  .code {
    background-color: #fff;
    border-radius: 4px;
    display: block;
    height: auto;
    padding: 16px;
    position: absolute;
    right: $slide-padding-horizontal;
    top: $slide-padding-vertical;
  }

  pre > code {
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    padding: 16px;
  }

  /* Blockquotes */
  blockquote {
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 32px;
    quotes: '\201C' '\201D';

    &::before {
      color: #ccc;
      content: open-quote;
      font-size: 4em;
      line-height: 0.1em;
      vertical-align: -0.4em;
    }

    p {
      display: inline;
      font-size: 150%;
      line-height: 150%;
    }

    footer {
      text-align: right;
    }

    footer::before {
      content: '—';
      margin-right: 0.2em;
    }
  }

  /**
   * Sizing
   */
  &:not(.grid) {
    &.depth-2 > p,
    &.depth-3 > p,
    &.depth-2 > div > p,
    &.depth-3 > div > p,
    > ol,
    > ul,
    > div > ol,
    > div > ul,
    > pre,
    > div > pre,
    .code,
    blockquote {
      width: calc(50% - #{$slide-padding-horizontal * 2});
    }
  }
}