@import '../../hqwebapp/less/_hq/includes/variables.less';
@import '../../hqwebapp/less/_hq/includes/mixins.less';
@import "variables";

/* this file is included in app_manager/apps_base.html and is relevant to the
EXTERNAL styling of the preview app container in app manager.

For the styling of the app preview content and layout, please check out
preview_app/scss/ */

@transition-speed: .5s;

.preview-phone-container {
  box-sizing: border-box;
  background-color: black;
  .border-top-radius(30px);
  .border-bottom-radius(30px);
  right: -930px;
  position: absolute;
  top: 50%;
  margin-top: -(@preview-phone-height + (@preview-phone-case-offset-y * 2))/2;

  width: @preview-phone-width + (@preview-phone-case-offset-x * 2);
  height: @preview-phone-height + (@preview-phone-case-offset-y * 2);
  padding-top: @preview-phone-case-offset-y;
  padding-left: @preview-phone-case-offset-x;

  .box-shadow(0 0px 10px 3px rgba(0,0,0,.45));
  .transition(all @transition-speed);
}
#formdesigner {
  margin-right: @preview-toggler-width;
  width: -webkit-calc(~"100% - " @preview-toggler-width);
  width: -moz-calc(~"100% - " @preview-toggler-width);
  width: calc(~"100% - " @preview-toggler-width);
}
#formdesigner > .full-screen .fd-content-right {
  padding-right: @preview-toggler-width;
  .transition(padding-right @transition-speed);
}

#js-appmanager-body.offset-for-preview,
#formdesigner.offset-for-preview {
  margin-right: @preview-phone-wrapper-width;
  width: -webkit-calc(~"100% - " @preview-phone-wrapper-width);
  width: -moz-calc(~"100% - " @preview-phone-wrapper-width);
  width: calc(~"100% - " @preview-phone-wrapper-width);
}

#formdesigner.offset-for-preview > .full-screen .fd-content-right {
  padding-right: @preview-phone-wrapper-width;
}

#js-appmanager-body.offset-for-tablet,
#formdesigner.offset-for-tablet {
  margin-right: @preview-tablet-wrapper-width;
  width: -webkit-calc(~"100% - " @preview-tablet-wrapper-width);
  width: -moz-calc(~"100% - " @preview-tablet-wrapper-width);
  width: calc(~"100% - " @preview-tablet-wrapper-width);
  .transition(all @transition-speed);
}

#formdesigner.offset-for-tablet > .full-screen .fd-content-right {
  padding-right: @preview-tablet-wrapper-width;
}

#hq-messages-container > div > div > .alert {
  .transition(margin-right @transition-speed);
}

#hq-messages-container.offset-for-preview > div > div > .alert {
  margin-right: @preview-phone-wrapper-width + 10;
}

.preview-phone-wrapper {
  box-sizing: border-box;
  top: 0;
  right: 0;
  position: fixed;
  z-index: @zindex-app-preview;
  width: @preview-toggler-width;
  background-color: @cc-light-cool-accent-hi;
  .transition(width @transition-speed);
  overflow: hidden;
  border-left: 0;


  &.open {
    width: @preview-phone-wrapper-width;
    .box-shadow(0 0px 10px 3px rgba(0,0,0,.35));
  }

  &.open.small-height  {
    z-index: @zindex-app-preview + 2;
    > .preview-phone-container {
      top: 20px;
      margin-top: 0;
    }
  }
  &.open > .preview-phone-container {
    right: 10px;
  }
  &.fullscreen {
    z-index: 1040 !important;
    background-color: fade(@cc-light-cool-accent-hi, 50);
  }
}

.preview-toggler {
  cursor: pointer;
  width: @preview-toggler-width;
  height: 100%;
  background-color: @cc-light-cool-accent-mid;
  .transition(background-color @transition-speed);
  position: absolute;
  top: 0;
  left: 0;

  &:hover {
    background-color: @cc-light-cool-accent-low;
  }

  [class*='fa-'] {
    position: absolute;
    left: @preview-toggler-width / 2 - 4px;
    top: 50%;
    font-size: 11px;
    color: white;
  }
}

.preview-phone-window {
   height: @preview-phone-height;
   width: @preview-phone-width;
   transition: all @transition-speed;
   background-color: white;
}

/* CSS Adjustments for tablet mode */
.preview-tablet-mode {
  #js-appmanager-body.offset-for-preview {
    margin-right: @preview-tablet-wrapper-width;
    width: -webkit-calc(~"100% - " @preview-tablet-wrapper-width);
    width: -moz-calc(~"100% - " @preview-tablet-wrapper-width);
    width: calc(~"100% - " @preview-tablet-wrapper-width);
  }
  #hq-messages-container.offset-for-preview > div > div > .alert {
    margin-right: @preview-tablet-wrapper-width + 10;
  }
  &.open {
    width: @preview-tablet-wrapper-width;
  }
  .preview-phone-container {
    width: @preview-tablet-width + (@preview-phone-case-offset-x * 2);
    height: @preview-tablet-height + (@preview-phone-case-offset-y * 2);
    max-height: 95vh;
    margin-top: -(@preview-tablet-height + (@preview-phone-case-offset-y * 2))/2;
  }

  .preview-phone-window {
    width: @preview-tablet-width;
    height: @preview-tablet-height;
    max-height: -webkit-calc(~"95vh - 2 * " @preview-phone-case-offset-y);
    max-height: -moz-calc(~"95vh - 2 * " @preview-phone-case-offset-y);
    max-height: calc(~"95vh - 2 * " @preview-phone-case-offset-y);
  }
  .preview-tablet-icon {
    display: none;
  }
  .preview-mobile-icon {
    display: inline;
  }
}
/* End tablet mode CSS */


.preview-icon {
  font-size: 1.5rem;
  line-height: 24px;
}
.preview-tablet-icon {
  display: inline;
}
.preview-mobile-icon {
  display: none;
}

.appmanager-content-transition-all {
  .transition(all @transition-speed);
}

.btn-preview-toggle {
  @preview-close-size: 30px;
  margin: 0 auto;
  display: block;
  background-color: lighten(@cc-text, 20);
  border: none;
  .border-top-radius(@preview-close-size/2);
  .border-bottom-radius(@preview-close-size/2);
  width: @preview-close-size;
  height: @preview-close-size;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  color: lighten(@cc-text, 60);
  font-size: 1.6rem;
  padding-left: 1px;
  .transition(all .6s);
  &:hover {
    background-color: lighten(@cc-text, 10);
    color: white;
  }

  position: absolute;
  left: -5px;
  top: -5px;
}

.btn-preview-refresh {
  // To keep checkmark bounded to the refresh button
  position: relative;
}

.btn-preview-refresh::after {
  font-family: "FontAwesome";
  color: @cc-att-pos-mid;
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: 2px;
  margin-left: 28px;
  font-size: 1.4rem;
}

.btn-preview-refresh.app-out-of-date::after {
  content: ' ';
  background-color: red;
  border-radius: 10px;

  -webkit-animation: pulsate @transition-speed ease-out;
  -webkit-animation-iteration-count: infinite;
  animation: pulsate @transition-speed ease-out;
  animation-iteration-count: infinite;
}

.hardware-buttons {
  width: @preview-phone-width;
  position: absolute;
  left: 50%;
  bottom: 1px;
  margin-left: -@preview-phone-width/2;
  text-align: center;

  .btn-hardware {
    display: inline-block;
    background-color: transparent;
    color: darken(white, 20);
    .transition(@transition-speed color);
    font-size: 1.8rem;
    width: 25%;
    &:focus {
      outline: none;
    }

    .fa-down-left-and-up-right-to-center {
      font-size: 1.9rem;
      top: 10px;
      position: absolute;
    }

    .fa-up-right-and-down-left-from-center {
      font-size: 1.7rem;
      top: 10px;
      position: absolute;
    }

    &:hover {
      color: white;
    }
  }
}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(1, 1); opacity: 1.0;}
    50% {-webkit-transform: scale(0.8, 0.8); opacity: 0.5;}
    100% {-webkit-transform: scale(1, 1); opacity: 1.0;}
}

@keyframes pulsate {
    0% {transform: scale(1, 1); opacity: 1.0;}
    50% {transform: scale(0.8, 0.8); opacity: 0.5;}
    100% {transform: scale(1, 1); opacity: 1.0;}
}
