/*

###########################
### TEMPLATE: pixi ###
###########################

### INFO:

*/
@import 'components/atoms/_text.scss';
@import 'components/atoms/_color.scss';
@import 'components/atoms/_headline.scss';
@import 'components/templates/_default.scss';

.#{template('pixi')} {
  $root: &;
  background: color('whisper');

  @media (min-width: 768px) {
    max-width: 1920px;
    margin: auto;
    padding: 60px 0;
  }

  &-stage {
    padding: 180px 15px 0 15px;
    position: relative;

    @media (min-width: 768px) {
      padding: 120px 15px 0 35px;
    }

    @media (min-width: 1024px) {
      padding: 120px 15px 0 35px;
    }

    @media (min-width: 1280px) {
      margin: 0 auto;
      padding: 90px 0 0 35px;
    }

    h1 {
      max-width: 600px;
      margin: 0;
      margin-bottom: -40px;
      font-size: 42px;
      line-height: 1.14;

      @media (min-width: 768px) {
        font-size: 64px;
        margin-right: 360px;
      }
    }

    svg {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 200px;
      height: 200px;

      @media (min-width: 768px) {
        top: -70px;
        right: 25px;
        width: 250px;
        height: 250px;
      }

      @media (min-width: 1024px) {
        top: -70px;
        right: -20px;
        width: 360px;
        height: 360px;
      }
    }
  }

  section {
    max-width: 1050px;
    margin: 0 auto;

    @media (min-width: 1024px) {
      margin: 30px auto;
    }
  }

  &-ctas {
    margin-bottom: 100px;

    @media (min-width: 768px) {
      display: flex;
    }

    a {
      padding: 0 1.5em 1.5em 0;
      transition-delay: 400ms;
    }
  }

  &-checks {
    grid-column: 1/25;
    margin-bottom: 200px;

    .pristine {
      display: none;
    }

    &-input {
      position: relative;
      padding: 30px 0;

      @media (min-width: 768px) {
        padding: 30px 15px;
      }

      @media (min-width: 1024px) {
        padding: 50px 35px 30px 35px;
      }

      @media (min-width: 1280px) {
        padding: 50px 0 30px 0;
      }

      .#{atom('pixi-stripes')} {
        top: 85px;
        height: calc(100% - 80px);

        @media (min-width: 768px) {
          top: 90px;
          margin-left: -15px;
          margin-right: -15px;
        }

        @media (min-width: 1024px) {
          top: 125px;
          margin-left: -35px;
          margin-right: -35px;
        }

        @media (min-width: 1280px) {
          margin-left: 0;
          margin-right: 0;
        }
      }

      section {
        position: relative;
      }
    }

    &-reports {
      grid-column: 1/25;
      margin: 57px 0;
      padding: 100px 15px 0 15px;

      @media (min-width: 768px) {
        margin: 57px 15px;
      }

      @media (min-width: 1024px) {
        margin: 57px 15px;
        padding: 100px 35px 0 35px;
      }

      @media (min-width: 1280px) {
        margin: 57px 15px;
        padding: 100px 0 0 0;
      }

      &-title {
        display: flex;
        margin: 30px 0 20px;

        position: sticky;
        background: color('whisper');
        top: 50px;
        padding: 1rem 0;
        z-index: 1;


        h2 {
          margin: 0 20px 0 0;

          &[dir='rtl'] {
            margin: 0 0 0 20px;
          }
        }
      }
    }
  }

  #pixi-visibility-analytics {
    display: none;
  }

  .analysis-complete > #pixi-visibility-analytics {
    display: block;
  }
}
