/*
 * Section container
 */

.section {
  position: relative;
  width: 100%;
  min-height: 100%;
  z-index: 3;

  &::before {
    position:absolute;
    display: none;
    z-index: 1;

    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;

    opacity: 0.5;

    /* TODO: doesn't works on IE, there is a workaround but a little scary http://stackoverflow.com/questions/6296239/cursor-pointer-doesnt-work-on-after-element */
    cursor: pointer;

    width: 100%;
    height: 30px;
    margin-top: -15px;
    text-align: center;

    content: ' ';

    font-size: 28px;
    line-height: 28px;
    color: #000;

    /*
     * Use a background with svg for the line and + symbol (text and background)
     * Using a font is also an option but doesn't look as good as can't customize the background as we need it for the border
     * Converted to base 64 using http://b64.io/ for IE compatibility
     *
     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><line x1='0%' y1='15px' x2='100%' y2='15px' style='stroke: rgb(224, 224, 224); stroke-width: 2;'></line><circle cx='50%' cy='15' r='14' fill='white' stroke='black' stroke-width='1' /><text x='50%' y='24px' text-anchor='middle' font-size='28' font-weight='bold'>+</text></svg>");
     */

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJSc+PGxpbmUgeDE9JzAlJyB5MT0nMTVweCcgeDI9JzEwMCUnIHkyPScxNXB4JyBzdHlsZT0nc3Ryb2tlOiByZ2IoMjI0LCAyMjQsIDIyNCk7IHN0cm9rZS13aWR0aDogMjsnPjwvbGluZT48Y2lyY2xlIGN4PSc1MCUnIGN5PScxNScgcj0nMTQnIGZpbGw9J3doaXRlJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnIC8+PHRleHQgeD0nNTAlJyB5PScyNHB4JyB0ZXh0LWFuY2hvcj0nbWlkZGxlJyBmb250LXNpemU9JzI4JyBmb250LXdlaWdodD0nYm9sZCc+KzwvdGV4dD48L3N2Zz4=);
    background-repeat: no-repeat;
  }
}

@keyframes fade-in-section {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


body:not(.builder-mode) {
  .section.section-layout-title:not(.bring-in) > *, .section.section-immersive:not(.bring-in) > .background.first-view {
     opacity: 0;
   }

   .section.section-layout-title, .section.section-immersive {
     background: white !important;
   }

   &.theme-major-dark {
     .section.section-layout-title, .section.section-immersive {
       background: black !important;
     }
   }

   // only do this to the first view in immersive  -- if we have 20 views, we don't want to animate all of them!
   .section.section-layout-title.bring-in > *, .section.section-immersive > .background.first-view {
     animation: fade-in-section 1s;
   }
}

.is-mac-os .section::before {
  /* 2px difference on text positioning for Safari and Chrone on mac */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100%' width='100%'><line x1='0%' y1='15px' x2='100%' y2='15px' style='stroke: rgb(224, 224, 224); stroke-width: 2;'></line><circle cx='50%' cy='15' r='14' fill='white' stroke='black' stroke-width='1' /><text x='50%' y='22px' text-anchor='middle' font-size='28' font-weight='bold'>+</text></svg>");
}

.section.show-add-section-menu::before {
  opacity: 1;
}

.builder-mode .section::before {
  display: block;
}

.section-layout-cover::before,
.section-layout-sequence::before {
  display: none !important;
}

/*
 * Background
 */

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #FFF;
}

.theme-major-dark .background {
  background-color: #0E0E0E;
}

// when they're on screen, add GPU acceleration to immersive and title backgrounds, as as cover
.section.section-on-screen .background, .section.section-layout-cover.active .background {
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/*
 * Foreground
 */

.foreground {
  position: relative;
  padding-bottom: 45px;
}

.foreground, .background-title {
  .text-background {
    max-width: 90%;

    &.background-dark, &.background-light {
      padding: 10px 30px;
    }

    &.background-dark {
      background-color: rgba(0,0,0,0.75);
    }

    &.background-light {
      background-color: rgba(255,255,255,0.75);
    }
  }

  .title-text {
    &.text-dark {
      color: black;
      text-shadow: 0 0 8px rgba(255,255,255,0.95);
    }

    &:not(.text-shadow) {
      text-shadow: none;
    }
  }
}

/*
 *
 * Hack for alternative section of refugee web scene
 *
 */

/*
 * Buggy when used in less
 */
/*
.section-layout-snap-scrolling-panel.disable-snap {
   min-height: calc(100vh - 50px) !important;
}

.section-layout-snap-scrolling-panel.disable-snap .background {
   height: calc(100vh - 50px);
}
*/

.section-immersive.events-mobile-central.active:not(.disable-snap) .background {
  height: calc(100% - 50px) !important;
  margin-top: 50px;
}

.section-immersive.active.events-mobile-central {
  min-height: 120vh !important;
}

body.mobile-view .hide-mobile {
  display: none;
}

body.mobile-view {
  .section {
    .foreground {
      .text-background {
        max-width: 100%;

        &.background-dark, &.background-light {
          padding: 10px 20px;
        }
      }
    }
  }
}
