@charset "utf-8";

@import './colors.scss';
@import './variables.scss';
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
@import "./overrides.scss";

@import url('/vendor/croppa/vue-croppa.min.css');
// @import '../../node_modules/animate.css/source/_base.css';
// nav.navbar {
//   padding-left: 5rem;
//   padding-right: 5rem;
// }
html{
  scroll-behavior: smooth;
}
.hero-bg{
  // @include pattern(#c0ebfa, #7FD7F5);
  // @include pattern(#c1d7df, rgb(183, 236, 253));
  background-image: url('/images/clouds-bg.svg');
  background-size: cover;
  background-color: #fff;
  position: relative;
  // @include linearGradient(#eef6fc, #f8afaf);
  // background: url('/images/whale.svg') 15% 25% no-repeat, linear-gradient(to bottom, #eef6fc 0%, #f8afaf 100%);
  // background-size: 250px, auto;
  // background-position: ;
  // background-repeat: no-repeat;
}

.hero-bg-svg{
  background-image: url("/images/cloudgroup.svg"), url('/images/sun+clouds.svg');
  background-size: cover, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.bg-moon-stars{
  background-image: url('/images/moon+stars.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-sun-cloud{
  background-image: url('/images/sun+cloud.svg');
  background-position: center top;
  background-repeat: no-repeat;
  // background-size: ;
}

.bg-flower{
  background-image: url('/images/flowers.svg');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 40%;
  // background-size: contain;
}

.scroll-down-indicator{
  position: absolute;
  bottom: 25px;
  left: 50%;
  animation: bounce 1.5s;
  animation-delay: 1s;
  animation-iteration-count: 2;
  transform: translate(-50%,0);

}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(-50%, -30px, 0);
  transform: translate3d(-50%, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(-50%, -15px, 0);
  transform: translate3d(-50%, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(-50%,-4px,0); transform: translate3d(-50%,-4px,0);
  }
}
.landing-featue-image{
      max-height: 180px !important;
      width: auto;
      object-fit: contain;
      z-index: 0;
}
.navbar-menu{
  &.is-active{
    // transition: all;
    // position: relative;
    // top:0;
    animation: expand-animation .1s ease-in;
  }
}
@keyframes expand-animation{
  from{
    height: 0;
    transform: scaleY(0);
  }
  to{
    transform: scaleY(1);
    height: auto;
  }
}

.hero {
  .navbar.darken {
    @include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  }
  // .navbar-item{
    //   color: $primary;
    // }
  }
  .has-inner-shadow-bottom{
    box-shadow: inset 0px -10px 15px -11px rgba(0,0,0,0.75);
  }
  .has-inner-shadow-top{
    box-shadow: inset 0px 10px 15px -11px rgba(0,0,0,0.75);
  }
.has-shadow-top{
  box-shadow: 0px 10px 15px -11px rgba(0,0,0,0.75);
}
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
  ('none', 0),
  ('xxs', 0.75),
  ('xs', 0.25),
  ('sm', 0.5),
  ('md', 1),
  ('lg', 2),
  ('xl', 4),
  ('xxl', 8),
  ('diego', 6.25),
  );
  $positions: (
    ('t', 'top'),
    ('r', 'right'),
    ('b', 'bottom'),
    ('l', 'left')
    );

    @function sizeValue($key, $value) {
      @return if($key == 'none', 0, $value + $sizeUnit);
    }

    @each $size in $sizes {
      $sizeKey: nth($size, 1);
      $sizeValue: nth($size, 2);
      .#{$marginKey}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue);
      }
      .#{$paddingKey}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue);
      }
      @each $position in $positions {
        $posKey: nth($position, 1);
        $posValue: nth($position, 2);
        .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
          margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
        .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
          padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
      }
    }
    .m-t-a{
      margin-top: auto;
    }
.m-b-a{
  margin-bottom: auto;
}
.m-l-a{
  margin-left: auto;
}
.m-r-a{
  margin-right: auto;
}

.sidebar{
  flex-direction: column;
  max-width: 5em;
  width: 5em;
  height: 100%;
  border-right: thin #ccc solid;

}
.menu-titles{
  margin-top: -2em;
}
.sidebar-menu{
  position: absolute;
  bottom: 25px;
  left: 1em;
}
.sideway-letter{
  transform: rotate(-90deg);
  margin: -.8em auto;
}

.is-fullheight{
  min-height: calc(100vh - ( #{$navbar-height}  ) );
  // max-height: calc(100vh - ( #{$navbar-height}  ) );
  // height: calc(100vh - ( #{$navbar-height}  ) );
  // .column{
  //   overflow-y: auto;
  // }
}
.is-fullwidth-container{
  width:100%;
}
.is-fullheight-container{
  height:100%;
}

.is-fullwidth{
  width: 100vw;
  overflow: hidden;
}
.app-content{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.avatar-badge-image{
  display: table;
  margin: auto;
}

.is-avatar{
  padding:2px;
  border: thin solid #ccc;
}
.m-auto{
  margin: auto;
}

.css-loader{
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  .dot{
    margin: 5px;
    width: 2rem;
    height: 2rem;
    background: $primary;
    border-radius: 50%;
    animation-name: loading-pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    &.delay-1{
      animation-delay:.3s;
    }
    &.delay-2{
      animation-delay:.6s;
    }
  }
}


@keyframes loading-pulse{
  0%{
    opacity: .1;
    transform: scale(.7);
  }
  50%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: .1;
    transform: scale(.7);
  }
}

.has-pointer{
  cursor: pointer;
}

.notifications {
  width: 15vw;
  z-index: 100;
  position: fixed;
  right: 25px;
  top: calc(25px + ( #{$navbar-height}  ) );
}

.notification-fade{
  animation: notification-fade .2s;
}

@keyframes notification-fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
// TODO: Remove this - make generic
.flipbook {
  width: 99%;
  height: 100%;
  overflow-y: visible;
  object-fit: contain;
  transition: opacity .5s;
}
.book-flip-buttons{
  height: 100%;
}
.video-strip{
  display: flex;
  justify-content: center;
  align-content:center;
  max-height: 15vh;
}

video{
  // margin-left: 5px;
  // margin-right: 5px;
  background-color:rgba(56, 181, 187, 0.19);
  // border-radius: 15px;
  border: solid 1px rgba(56, 181, 187, 0.30);
  flex-basis: 100%;
  // max-width: 15vh;
}

.book-thumb{
  // cursor: not-allowed;
  transition: all .2s;
  z-index: inherit;
  flex-basis: 12%;
  text-align: center;
}
.book-thumb.enabled{
  cursor: pointer;
  &:hover{
    transform: scale(1.1);
    z-index: 10;
  }
}
.book-cover{
  position:relative;
  border: 1px solid rgba(0,0,0,.4);
  .image{
    &:before{
      border: 1px solid rgba(0,0,0,.4);
      content: "";
      position: absolute;
      top:3px;
      left:3px;
      width: 100%;
      height: 100%;
    }
  }
}
//Fade vue transition
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s ease-in-out;
  position: absolute;
}
.fade-enter-active{
  transition-delay: 0.2s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
.fade-enter-to, .fade-leave{
  opacity: 1;
}


.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: 0.2s;
  transition-property: height, opacity, transform;
  transition-timing-function: ease-in-out;
  overflow: hidden;
}
.slide-left-enter-active,
.slide-right-enter-active{
  transition-delay: 0.2s;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(2em, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-2em, 0);
}

.has-diego-width-800{
  max-width: 50rem;
}
.is-borderless{
  border: none;
}
.is-justify-centered{
  justify-content: center;
}
.is-justify-between{
  justify-content: space-between;
}


.video-side-bar{
  height: calc(100vh - ( #{$navbar-height}  ) );
  video{
    width: 100%;
    height: 50%;
    object-fit: cover;
  }
}

.book-view{
  height: 100%;
  position: relative;
}
.is-transparent{
  opacity: 0;
}
.is-mirrored{
  transform: scaleX(-1);
}
.is-relative{
  position: relative;
}

.editable-image{

  cursor: pointer;
  &:hover{
    &::after{
      opacity: 1;
      transform: scaleY(1);
      height: 54px;
    }
  }
  &::after{
    opacity: 0;
    transform: scaleY(0);
    transition: all .3s;
    position: absolute;
    bottom:0;
    left:0;
    content: '\f093';
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 0%;
    background-color: rgba(0, 0, 0, .4);
    font: normal normal normal 14px/1 ForkAwesome;
    color: whitesmoke;
    font-size: 50px;
    padding-top: 2px;
  }
}

.is-flex-column{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

//edit page
.page-editor{

  .croppa-container {
    border: 2px solid whitesmoke;
    border-radius: 8px;
    background-color: white;
  }
}
.book-thumb.page-preview{
  flex-basis: unset;
}
.edit-page-controllers{
  border-radius: 15px;
  background-color: rgba(134, 134, 134, 0.1);
}
.book-uploading-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: .6);
  z-index: 100;
}
.height-max-view{
  max-height: calc(99vh - ( #{$navbar-height}  ) );
}
.book-uploading-overlay-content{
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  .title{
    color: whitesmoke;
    opacity: 1;
  }
  .subtitle{
    color: whitesmoke;
    opacity: 0.8;
  }
}