/*------------------------------------------------------------------
[30. Demo : Only for demo pursposes]
*/

$builder-options-width: 260px;
$builder-options-header-height: 102px;

.builder {
  width: 423px;
  @include right(-423px);
  & > div {
    height: calc(100% - 12px);
  }
  [data-action] {
    &.active:before {
      background-image: url("#{$assets-url}/img/demo/tick.svg");
      width: 23px;
      height: 23px;
      content: "";
      position: absolute;
      top: 84px;
      @include right( -10px );
      z-index: 10;
    }
  }
  a {
    position: relative;
    display: block;
    width: 100%;
    color: mix($color-contrast-high, #fff, 60%);
    & > img {
      opacity: 0.33;
      @include transition(opacity 0.1s linear);
    }

    &.active {
      color: $color-contrast-high;
      & > img {
        opacity: 0.87;
      }
    }

    &:hover {
      color: mix($color-contrast-high, #fff, 80%);
      & > img {
        opacity: 0.7;
      }
    }
    &.btn-toggle-layout {
      &.active {
        &:before {
          background-image: url("#{$assets-url}/img/demo/tick.svg");
          width: 23px;
          height: 23px;
          content: "";
          position: absolute;
          top: 84px;
          @include right(-10px);
          z-index: 10;
        }
      }
    }
  }
  .builder-footer {
    @include right( 0 );
    @include left( 0 );
    z-index: 10;
  }
  .theme-selector.active:before {
    top: 54px;
    @include right(10px);
  }
  .nav-tabs {
    background-color: transparent;
    padding: 0;
    & > li > a {
      min-width: 99px;
      padding: 16px 0;
      &.active {
        color: inherit;
      }
    }
  }
  .nav-tabs ~ .tab-content {
    position: relative;
    @include padding-right(0px);
    height: 100%;
    top: 0;
    background-color: $color-contrast-lowest;
    .tab-pane {
      height: 100%;
      overflow-x: hidden !important;
      .scrollable {
        padding-top: 27px;
        height: calc(100% - 47px);
        overflow-x: hidden !important;
      }
    }
  }
  .builder-close {
    position: absolute;
    @include right(36px);
    top: 17px;
    padding: 7px;
    width: auto;
    z-index: 10;
  }
  .builder-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 54px;
    height: 50px;
    top: 20%;
    @include left( -48px );
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }
  &:before {
    position: absolute;
    content: "";
    width: 48px;
    height: 50px;
    background-color: $color-contrast-lowest;
    top: 20%;
    @include left(-47px);
    box-shadow: 0 0 9px rgba(191, 191, 191, 0.36);
    @include border-left(1px solid $color-border-a);
    @include border-left-radius(4px);
  }
  &:after {
    position: absolute;
    content: "";
    background-color: $color-contrast-lowest;
    width: 5px;
    height: 50px;
    @include left(0);
    top: 20%;
  }
  .btn-toggle-theme {
    & > img {
      opacity: 1 !important;
    }
    p {
      line-height: 18px;
    }
  }
}
.rtl {
  .builder .builder-toggle {
    @include left( auto );
    @include right( -48px );
  }
}
.content-builder {
  display: none;
  &.active {
    display: block;
  }
  .placeholder {
    position: relative;
    &:after {
      content: "Content goes here";
      position: absolute;
      @include left( 0 );
      top: 50%;
      margin-top: -10px;
      @include right( 0 );
      text-align: center;
      font-size: 26px;
      opacity: 0.16;
      color: $color-contrast-high;
    }
  }
}
.previewer {
  height: 35px;
}

/* Demo Widths For GIF Animations 
------------------------------------
*/
.demo-bg-hinted {
  background-color: #939393;
}
.demo-fs-23 {
  font-size: 23px !important;
}
.demo-mw-50 {
  max-width: 50px;
}
.demo-mw-300 {
  max-width: 300px;
}
.demo-mw-350 {
  max-width: 350px;
}
.demo-mw-400 {
  max-width: 400px;
}
.demo-mw-500 {
  max-width: 500px;
}
.demo-mw-600 {
  max-width: 600px;
}
.demo-mw-AA {
	max-width: 485px;
}
.demo-mw-calib {
	max-width: 310px;
}
.demo-container {
  height: 2000px;
}

/* Views page */
.view-iframe-wrapper {
  width: 100%;
  height: 255px;
  background: $color-contrast-lowest;
  position: relative;
  iframe {
    width: 100%;
    height: 100%;
    padding: 45px 45px 0 45px;
    @media (max-width: 1200px) {
      padding: 0;
    }
  }
}