$slide-padding-horizontal: 32px !default;

.slide.present.focus-headline {
  &.depth-2 > .heading,
  &.depth-3 > .heading {
    transform: translate3d(440px, 440px, 0) translate3d(-50%, -50%, 0);
  }
}

/* focus image without headline */
.slide.focus-image {
  &.present.depth-2 > .heading,
  &.present.depth-3 > .heading {
    opacity: 0;
  }

  img,
  svg {
    height: 100%;
    left: 50%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}

/* Disable styling lists */
.slide.no-list-style {
  ol,
  ul {
    list-style-type: none;
    padding-left: 64px;
  }
}

.slide.focus-single,
.slide.focus-dual {
  &.present.depth-2 > .heading,
  &.present.depth-3 > .heading {
    max-width: none;
  }

  > p,
  > pre,
  > img,
  > svg,
  > blockquote,
  > div > p,
  > div > pre,
  > div > img,
  > div > svg,
  > div > blockquote {
    bottom: 64px;
    left: $slide-padding-horizontal;
    position: absolute;
    right: $slide-padding-horizontal;
    top: 272px;
  }

  > blockquote,
  > div > blockquote {
    bottom: auto;
  }

  > img,
  > svg,
  > div > img,
  > div > svg {
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    max-height: calc(100% - 172px);
    max-width: 100%;
  }

  > svg,
  > div > svg {
    background-color: #fff;
  }

  > a,
  > div > a {
    display: block;
    height: 100%;
    margin: 0 auto;

    &:hover {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

.slide.focus-single {
  > img,
  > div > img {
    position: initial;
  }

  > .code,
  > div > .code {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
}

.slide.focus-dual {
  &.depth-2,
  &.depth-3 {
    > p,
    > pre,
    > img,
    > svg,
    > blockquote,
    > div > p,
    > div > pre,
    > div > img,
    > div > svg,
    > div > blockquote {
      width: calc(50% - #{$slide-padding-horizontal * 2});

      &:nth-child(2) {
        right: initial;
      }

      &:nth-child(3) {
        left: initial;
      }
    }

    > blockquote,
    > div > blockquote {
      width: calc(50% - #{$slide-padding-horizontal * 4});

      &:nth-child(3) {
        background-color: #fff;
      }
    }
  }
}

/* Grid Layouts */
.slide.grid,
.slide.grid-single,
.slide.grid-dual {
  display: grid;
  grid-column-gap: $slide-padding-horizontal * 2;
  grid-template-areas:
    'header  rhs'
    'lhs     rhs';
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  grid-template-rows: auto minmax(0, 1fr);

  &.present {
    > * {
      display: initial;
    }
  }

  > *:nth-child(1) {
    grid-area: header;
  }

  > .heading {
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen {
    > * {
      display: none;
      max-width: 100%;
      position: static;
      width: auto !important;
    }
  }

  > div > * {
    width: auto;
  }

  > div > p {
    width: auto !important;
  }

  > div,
  blockquote {
    align-self: start;
  }

  > img,
  > svg,
  > div > img,
  > div > svg {
    align-self: start;
    border-radius: 4px;
    justify-self: center;
    max-height: 100%;
    object-fit: contain;
    width: 100% !important;
  }
}

.slide.grid-single {
  grid-template-areas:
    'header'
    'content';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 16% 84%;

  > * {
    grid-area: content;
    width: 100%;
  }

  > .heading {
    margin-bottom: unset;
  }
}

.slide.grid-dual {
  grid-template-areas:
    'header header'
    'lhs    rhs';
}

.slide.grid,
.slide.grid-dual {
  > *:nth-child(2) {
    grid-area: lhs;
    width: 100%;
  }

  > *:nth-child(3) {
    grid-area: rhs;
    width: 100%;
  }
}

/* Bigger */
.slide.bigger {
  ol li,
  ul li {
    font-size: 3rem;
    line-height: 4rem;
    margin-bottom: 1rem;
  }
}

/* Image shadow */
.slide.image-shadow img,
.slide.image-shadow svg,
.slide .image-shadow {
  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);
}

/*
Specific styles for: .title slides
*/

.step.title {
  padding: 0;
}

.title .heading,
.title p {
  margin-left: 5%;
  width: 90%;
}

.title .heading {
  margin-top: 36px;
}

.title .heading,
.title p {
  margin-top: 20px;
}

.title p {
  font-size: 200%;
  line-height: 120%;
}

.title .heading {
  margin-top: 16px;
}

.step.title > p,
.step.title > div > p {
  opacity: 1;
}

.step.title a,
.step.title a {
  text-decoration: underline;
}

.step.title a:hover,
.step.title a:active {
  background: transparent;
  box-shadow: none;
}

.step.title::before {
  display: none;
}

/* End steps */

.step.end {
  opacity: 0;
  transition: opacity $transition-duration;
}

.step.end.active {
  opacity: 1;
}

.slide.end > .heading,
.slide.end::before {
  display: none;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.slide.end img[alt='logo'] {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.end a {
  left: 50%;
  margin-top: 100px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Overview step */

.step.overview {
  display: none;
}

/* Background */

.step.background > .heading,
.step.background::before {
  content: '';
  display: none;
}

.step.background {
  padding: 0;
}

.step.background > * {
  opacity: 1;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.step img[alt='background'] {
  left: 0;
  position: absolute;
  top: 0;
  transform: none;
  width: 100%;
}