@import "settings";
@import "../node_modules/zurb-foundation/scss/foundation";

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";

@mixin animation ($animation, $duration, $iteration-count, $timing-function, $delay) {
  -webkit-animation: $animation $duration $iteration-count $timing-function $delay;
  -moz-animation: $animation $duration $iteration-count $timing-function $delay;
  -o-animation: $animation $duration $iteration-count $timing-function $delay;
  animation: $animation $duration $iteration-count $timing-function $delay;
}

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; };
    @-moz-keyframes #{$name} { @content; };
    @-o-keyframes #{$name} { @content; };
    @keyframes #{$name} { @content; };
}

@mixin transform($transformation) {
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;
  transform: $transformation;
}

.action-select {
  width: 100%;
  font-size: rem-calc(16) !important;
}

.button-list {
  position: absolute;
  z-index: 200;
  list-style: none;
  margin: 0;

  .action-button.small {
    width: 100%;
    margin-bottom: 0;
    text-align: left;
    font-size: rem-calc(16);
  }
}

.action-button {
  @include button(rem-calc(12));
  font-size: rem-calc(32);
  line-height: rem-calc(32);

  &.small {
    @include button(rem-calc(10));
    font-size: rem-calc(24);
    line-height: rem-calc(24);
  }

  &.tiny {
    @include button(rem-calc(8));
    font-size: rem-calc(14);
    line-height: rem-calc(14);
  }

  &.disabled {
    @include button-style($disabled:true);
  }

  &.secondary { @include button-style($bg:$secondary-color); }

  &.complete { @include button-style($bg:$success-color); }

  &.dropdown {
    @include dropdown-button();
    margin-bottom: 0;
  }

  &.download-btn {
    @media #{$small-only} {
      margin-top: 1rem;
    }
  }
}

.capture-preview {
  text-align: center;

  li {
    position: relative;
    padding: 0;
    margin-bottom: 1em;
  }

  .toggle-crop {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0.25em;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
  }

  .toggle-crop:hover {
    background-color: rgba(255, 255, 255, 0.75);
  }

  .crop-preview {
    position: absolute;
    background-color: blue;
    opacity: 0.5;
  }

  img.odd, img.even {
    @media #{$small-only} and (orientation: portrait) {
      width: 100%
    }
    @media #{$medium-up} {
      width: 75%;
    }
  }
}

.capture-info {
  .columns {
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
  }
}

.capture-controls {
  text-align: center;
  ul {
    margin-bottom: 0;
  }
  li {
    .action-button {
      @media #{$small-only} {
        width: 20%;
      }
      width: 10%;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    display: inline;
    list-style-type: none;
  }
  #retake-capture .action-button {
    @media #{$small-only} {
      width: 20%;
    }
    width: 20%;
  }
  #trigger-capture .action-button {
    @media #{$small-only} {
      width: 40%;
    }
    width: 45%;
  }
}

li.page-preview {
  position: relative;
  text-align: center;
  padding: 0;
  line-height: 1.5;

  .columns {
    padding-left: 0;
    padding-right: 0;
  }

  &.selected {
    background-color: green;

    img {
      opacity: 0.75;
    }
  }

  .toggle-zoom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 1.875rem);
    padding: 0.25em;
    margin-left: 0.9375rem;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
  }

  .toggle-zoom:hover {
    background-color: rgba(255, 255, 255, 0.75);
  }

}

.format-select {
  padding: 0.8rem;
  height: auto;
}

.pagegrid {
  margin: 0;
}

.select-image {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.75;
  font-size: 2.5em;
  color: white;
  text-shadow: black 0.1em 0.1em;
}

.shortcuts ul {
  list-style: none;
  margin-left: 0;
}

.logtable {
  width: 100%;
  table-layout: fixed;
}

.logger-col {
  width: 25%;
}

.msg-col {
  width: 62.5%;
}

.time-col {
  width: 12.5%;
}

.logentry {
  &.exception {
    background-color: $alert-color;
  }
  &.error, &.warning {
    background-color: $warning-color;
  }
  &.info {
    background-color: $info-color;
  }
  td {
    word-break: break-all;
  }
}

.reveal-modal {

  &.fixed {
    z-index: 100;
    position: fixed;
    top: 10%;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
  }

  &.small {
    @media #{$large-up} {
      width: 30%;
      margin-left: 35%;
    }

    @media #{$medium-only} {
      width: 40%;
      margin-left: 30%;
    }

    @media #{$small-only} {
      width: 60%;
      margin-left: 20%;
    }
  }

  &.medium {
    @media #{$large-up} {
      width: 50%;
      margin-left: 25%;
    }

    @media #{$medium-only} {
      width: 60%;
      margin-left: 20%;
    }

    @media #{$small-only} {
      width: 80%;
      margin-left: 10%;
    }
  }
}

.traceback {
  margin-bottom: 1rem;
  overflow-x: scroll;
}

/* ===== Overlays ===== */
.overlay {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;

  .lightbox {
    a {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    img {
      // Only works for Firefox 26+
      image-orientation: from-image;
      max-width: calc(90% - 160px);
      max-height: 100%;
    }
  }

  .activity {
    .text {
      text-align: center;
      padding-top: 8em;
      color: #fff;
    }

    .animation {
      position: absolute;
      left: calc(50% - 20px);
      top: calc(50% - 20px);
      margin: 0;
      width: 40px;
      height: 40px;

      .bounce {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;

        &:first-child {
          @include animation(bounce, 2.0s, infinite, ease-in-out, 0s);
        }
        &:last-child {
          @include animation(bounce, 2.0s, infinite, ease-in-out, -1.0s);
        }
      }
    }
  }

    .progress {
      width: 50%;
      left: 25%;
      top: 45%;
      position: absolute;
      .status {
        display: block;
        margin-top: 1em;
        color: #fff;
        text-align: center;
    }
  }
}

.alert-box {
  margin-bottom: 0;
}

.crop-container {
  position: relative;
  display: inline-block;

  .cropbox {
    position: absolute;
    background-color: white;
    opacity: 0.5;
    cursor: move;
    background-size: 3em;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px dashed black;

    &.touch {
      background-image: url("../img/icon-move.svg");
    }

    &.active {
      background-color: royalblue;
    }

    .drag {
      position: absolute;
      width: 3em;
      height: 3em;
      text-align: center;
      background-size: 3em;
      background-repeat: no-repeat;
      background-position: center;

      &.active {
        background-color: royalblue;
      }

      &.upper-left {
        top: 0;
        left: 0;
        cursor: nw-resize;
        &.touch {
          border-right: 1px dashed black;
          border-bottom: 1px dashed black;
        }
      }

      &.touch.upper-left,
      &.touch.lower-right {
        background-size: 2em;
        background-image: url("../img/icon-drag-corner1.svg");
      }

      &.upper-middle {
        top: 0;
        left: 3em;
        width: calc(100% - 6em);
        cursor: n-resize;
        border: 0;
        &.touch {
          border-bottom: 1px dashed black;
        }
      }

      &.touch.upper-middle,
      &.touch.lower-middle {
        background-image: url("../img/icon-drag-up.svg");
      }

      &.upper-right {
        top: 0;
        right: 0;
        cursor: ne-resize;
        &.touch {
          border-left: 1px dashed black;
          border-bottom: 1px dashed black;
        }
      }

      &.touch.upper-right,
      &.touch.lower-left {
        background-size: 2em;
        background-image: url("../img/icon-drag-corner2.svg");
      }

      &.middle-left {
        top: 3em;
        left: 0;
        height: calc(100% - 6em);
        cursor: w-resize;
        border: 0;
        &.touch {
          border-right: 1px dashed black;
        }
      }

      &.middle-right {
        top: 3em;
        right: 0;
        height: calc(100% - 6em);
        cursor: e-resize;
        border: 0;
        &.touch {
          border-left: 1px dashed black;
        }
      }

      &.touch.middle-left,
      &.touch.middle-right {
        background-image: url("../img/icon-drag-left.svg");
      }

      &.lower-left {
        bottom: 0;
        left: 0;
        cursor: sw-resize;
        &.touch {
          border-right: 1px dashed black;
          border-top: 1px dashed black;
        }
      }

      &.lower-middle {
        bottom: 0;
        left: 3em;
        width: calc(100% - 6em);
        cursor: s-resize;
        border: 0;
        &.touch {
          border-top: 1px dashed black;
        }
      }

      &.lower-right {
        bottom: 0;
        right: 0;
        cursor: se-resize;
        &.touch {
          border-left: 1px dashed black;
          border-top: 1px dashed black;
        }
      }
    }
  }

  img {
    //width: 100%;
    max-height: 70%;
  }
}

.autocomplete-suggestions {
  list-style: none;
  margin-left: 0.5em;

  li {
    padding: 0.5em 0;
  }
  li:hover {
    background-color: lightblue;
  }
}

.metadata-fieldset {
  .error {
    margin-top: -1rem;
  }
  label {
    @media #{$medium-up} {
      text-align: right;
    }
  }
}

.metadata-view {
  .row {
    margin-top: 0.5rem;
  }
  ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    line-height: 1;
  }
}

fieldset.config {
  .plugin-config {
    padding-top: 1em;

    .plugin-label {
      &.active {
        font-weight: bold;
      }
    }
  }

  .plugin-select-label {
    margin-bottom: 0.5em;
  }

  .plugin-select:not(:first-of-type), .toggle-advanced {
    padding-top: 0.5em;
  }

  .toggle-advanced input[type="checkbox"] {
    margin-bottom: 0;
  }

  .plugin-select, .toggle-advanced {
    padding-bottom: 0.5em;
    border-bottom: 1px solid lightgray;
  }

  .section-picker {
    @media #{$small-only} {
      margin-bottom: 2em;
    }

    select {
      margin-bottom: 0;
    }

    div {
      text-align: center;
    }
  }

  .config-pane, .select-pane {
    @media #{$medium-up} {
      border-left: 1px solid lightgray;
      padding-left: 1.5em;
    }

    .row:not(:first-of-type) {
      margin-top: 1em;
    }

    label {
      max-width: 80%;
    }
  }
}

.f-dropdown {
    left: inherit;
    width: inherit;
    min-width: 10%;
}

.row.separator {
  border-top: 1px solid lightgray;
  padding-top: 1em;
}

.workflow-item:not(:last-child) {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid black;
}

/* ======= Animations ======== */
@include keyframes(bounce) {
  0%, 100% {
    @include transform(scale(0.0));
  }
  50% {
    @include transform(scale(1.0));
  }
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../node_modules/connect-fonts-opensans/fonts/default/opensans-light.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../node_modules/connect-fonts-opensans/fonts/default/opensans-regular.ttf') format('truetype');
}
