/**
# Bulk file upload widget styles
*/


/**
## .cradmin-legacy-bulkfileupload
The bulk file upload widget base styles.
*/
.cradmin-legacy-bulkfileupload {
  .cradmin-legacy-bulkfileupload-overlay-controls {
    display: none;
  }

  .cradmin-legacy-bulkfileupload-content {
    padding: 0;
    background: @cradmin-bulkfileupload-bg;
    .cradmin-legacy-bulkfileupload-dropbox {
      background: @cradmin-bulkfileupload-dropbox-bg;
      color: @cradmin-bulkfileupload-dropbox-color;
      font-weight: @cradmin-bulkfileupload-dropbox-font-weight;
      font-size: @cradmin-bulkfileupload-dropbox-font-size;
      padding: @cradmin-bulkfileupload-dropbox-padding;
      height: @cradmin-bulkfileupload-dropbox-height;
      text-align: @cradmin-bulkfileupload-dropbox-text-align;
      border-style: @cradmin-bulkfileupload-dropbox-border-style;
      border-color: @cradmin-bulkfileupload-dropbox-border-color;
      border-width: @cradmin-bulkfileupload-dropbox-border-width;

      .cradmin-legacy-bulkfileupload-dropbox-invalid-filetype-errormessage {
        display: none;
      }

      .cradmin-legacy-bulkfileupload-dropbox-text {
        position: relative;
        top: 50%;
        .css3-transform(translateY(-50%));

        p.cradmin-legacy-bulkfileupload-advanced-fileselectbutton-wrapper {
          text-align: @cradmin-bulkfileupload-advanced-fileselectbutton-align;
          margin-bottom: 0;
          .cradmin-legacy-bulkfileupload-advanced-fileselectbutton {
            display: inline-block;
            color: @cradmin-bulkfileupload-advanced-fileselectbutton-color;
            &:hover {
              color: @cradmin-bulkfileupload-advanced-fileselectbutton-hover-color;
            }
          }
        }
      }

      &.cradmin-legacy-bulkfileupload-dropbox-dragover {
        background: @cradmin-bulkfileupload-dropbox-dragover-bg;
        color: @cradmin-bulkfileupload-dropbox-dragover-color;
        border-style: @cradmin-bulkfileupload-dropbox-dragover-border-style;
        border-color: @cradmin-bulkfileupload-dropbox-dragover-border-color;
        .cradmin-legacy-bulkfileupload-dropbox-text {
          p.cradmin-legacy-bulkfileupload-advanced-fileselectbutton-wrapper {
            display: none;
          }
        }
      }
      &.cradmin-legacy-bulkfileupload-dropbox-dragover-error {
        background: @cradmin-bulkfileupload-dropbox-dragover-error-bg;
        color: @cradmin-bulkfileupload-dropbox-dragover-error-color;
        border-style: @cradmin-bulkfileupload-dropbox-dragover-error-border-style;
        border-color: @cradmin-bulkfileupload-dropbox-dragover-error-border-color;
        .cradmin-legacy-bulkfileupload-dropbox-invalid-filetype-errormessage {
          display: block;
        }
        .cradmin-legacy-bulkfileupload-dropbox-text {
          display: none;
        }
      }
    }

    p.cradmin-legacy-bulkfileupload-simple-button-wrapper {
      padding: @cradmin-bulkfileupload-simple-button-wrapper-padding;
      margin: 0;
      .btn.cradmin-legacy-bulkfileupload-simple-button {
        padding: @cradmin-bulkfileupload-simple-button-padding;
      }
    }

    .cradmin-legacy-bulkfileupload-progress,
    .cradmin-legacy-bulkfileupload-rejectedfiles {
      p.cradmin-legacy-bulkfileupload-progress-item,
      p.cradmin-legacy-bulkfileupload-rejectedfile {
        font-weight: @cradmin-bulkfileupload-progress-item-font-weight;
        font-size: @cradmin-bulkfileupload-progress-item-font-size;
        margin: @cradmin-bulkfileupload-progress-item-margin;
        padding: @cradmin-bulkfileupload-progress-item-padding-mobile;

        @media (min-width: @screen-md-min) {
          padding: @cradmin-bulkfileupload-progress-item-padding;
        }

        &.cradmin-legacy-bulkfileupload-errorparagraph {
          background: @cradmin-bulkfileupload-progress-item-error-bg;
          color: @cradmin-bulkfileupload-progress-item-error-color;

          .cradmin-legacy-bulkfileupload-error-closebutton {
            float: right;
            margin-top: -7px;
            margin-right: -7px;
            color: @cradmin-bulkfileupload-progress-item-error-closebutton-color;
            &:hover {
              color: @cradmin-bulkfileupload-progress-item-error-closebutton-hover-color;
            }
          }
        }
      }
    }
    .cradmin-legacy-bulkfileupload-progress {
      background: @cradmin-bulkfileupload-bg;
      p.cradmin-legacy-bulkfileupload-progress-item {
        color: @cradmin-bulkfileupload-progress-item-color;

        .cradmin-legacy-progressbar {
          display: inline-block;
          background: @cradmin-bulkfileupload-progressbar-bg;
          width: 100px;
          position: relative;
          .cradmin-legacy-progressbar-progress {
            display: inline-block;
            height: 100%;
            background: @cradmin-bulkfileupload-progressbar-progress-bg;
          }

          .cradmin-legacy-progresspercent {
            position: absolute;
            top: 1px;
            left: 5px;
            font-size: @cradmin-bulkfileupload-progresspercent-font-size;
            color: @cradmin-bulkfileupload-progresspercent-color;
          }
        }

        .cradmin-legacy-bulkfileupload-remove-file-button {
          float: right;
          margin-top: -7px;
          margin-right: -7px;
          color: @cradmin-bulkfileupload-progress-item-remove-file-button-color;
          &:hover {
            color: @cradmin-bulkfileupload-progress-item-remove-file-button-hover-color;
          }
        }
      }
    }
  }
}

//.cradmin-legacy-form .cradmin-focusfield .form-group .controls .cradmin-legacy-bulkfileupload {
//  background: @cradmin-bulkfileupload-bg;
//}


/**
## .cradmin-legacy-bulkfileupload-form-overlay
Added automatically to the ``<form>`` by the ``cradmin-legacy-bulkfileupload-form``
angularjs directive when the ``cradmin-legacy-bulkfileupload-form-overlay``
attribute is ``true``. The css class should also be added to the form in
python/django code to avoid that the form is visible while the page loads.
*/
.cradmin-legacy-bulkfileupload-form-overlay {
  display: none;
}

/**
## .cradmin-legacy-bulkfileupload-overlaywrapper
Wrapper around the ``<form>`` added automatically by the
``cradmin-legacy-bulkfileupload-form`` angularjs directive. The directive
also moves the wrapper element from its original place in the DOM to a direct
child of ``<body>``.
*/
.cradmin-legacy-bulkfileupload-overlaywrapper {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 50000;
  &.cradmin-legacy-bulkfileupload-overlaywrapper-show {
    display: block;
  }

  .cradmin-legacy-bulkfileupload-overlay-controls {
    display: block;
    .cradmin-legacy-bulkfileupload-hide-overlay-button {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 50003;
      font-size: @cradmin-bulkfileupload-hide-overlay-button-font-size;
      color: @cradmin-bulkfileupload-hide-overlay-button-color;
      &:hover {
        color: @cradmin-bulkfileupload-hide-overlay-button-hover-color;
      }
    }
    .cradmin-legacy-bulkfileupload-backdrop {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: @cradmin-bulkfileupload-dropbox-backdrop-bg;
      cursor: pointer;
      z-index: 50001;
    }
    .cradmin-legacy-bulkfileupload-overlay-uploadingmessage {
      display: none;
      position: absolute;
      background: @cradmin-legacy-bulkfileupload-overlay-uploadingmessage-bg;
      color: @cradmin-legacy-bulkfileupload-overlay-uploadingmessage-color;
      font-size: @cradmin-legacy-bulkfileupload-overlay-uploadingmessage-font-size;
      font-weight: @cradmin-legacy-bulkfileupload-overlay-uploadingmessage-font-weight;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      z-index: 50005;

      &.cradmin-legacy-bulkfileupload-overlay-uploadingmessage-visible {
        display: block;
      }

      p.cradmin-legacy-bulkfileupload-overlay-uploadingmessage-text {
        position: relative;
        top: 50%;
        .css3-transform(translateY(-50%));
        text-align: center;
        margin: 0;
        padding: 0 20px 0 20px;
      }
    }
  }

  .cradmin-legacy-bulkfileupload-form-overlay {
    display: block;
    z-index: 50002;
    background: #fff;
    overflow: auto;
    padding: 0;

    width: 90%;
    bottom: auto;
    left: 50%;
    margin-left: -45%;
    //top: 60px;
    //position: absolute;
    position: relative;
    top: 50%;
    .css3-transform(translateY(-50%));

    .form-group {
      margin: 0;
    }

    .cradmin-legacy-bulkfileupload {
      .cradmin-legacy-bulkfileupload-content {
        .cradmin-legacy-bulkfileupload-dropbox {
          height: 200px;
          @media (min-height: 400px) {
            height: 180px;
          }
          @media (min-height: 500px) {
            height: 270px;
          }
          @media (min-height: 600px) {
            height: 370px;
          }
          @media (min-height: 700px) {
            height: 470px;
          }
          @media (min-height: 800px) {
            height: 570px;
          }
          @media (min-height: 900px) {
            height: 670px;
          }
        }
        //p.cradmin-legacy-bulkfileupload-simple-button-wrapper {
        //  .cradmin-legacy-bulkfileupload-simple-button {
        //  }
        //}
      }
    }
  }

  &.cradmin-legacy-bulkfileupload-overlaywrapper-window-dragover {
    .cradmin-legacy-bulkfileupload-overlay-controls {
      display: none;
    }
    .cradmin-legacy-bulkfileupload-form-overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin-left: 0;
      width: 100%;
      border: none;
      padding: 0;
      .css3-transform(none);

      .cradmin-legacy-bulkfileupload {
        .cradmin-legacy-bulkfileupload-content {
          .cradmin-legacy-bulkfileupload-progress,
          .cradmin-legacy-bulkfileupload-rejectedfiles,
          .cradmin-legacy-bulkfileupload-advanced-fileselectbutton-wrapper {
            display: none;
          }
          .cradmin-legacy-bulkfileupload-dropbox {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            height: 100%;

            .cradmin-legacy-bulkfileupload-dropbox-invalid-filetype-errormessage {
              display: none;
            }

            &.cradmin-legacy-bulkfileupload-dropbox-dragover {
              background: @cradmin-bulkfileupload-overlay-dropbox-dragover-bg;
              color: @cradmin-bulkfileupload-overlay-dropbox-dragover-color;
              border-style: @cradmin-bulkfileupload-overlay-dropbox-dragover-border-style;
              border-color: @cradmin-bulkfileupload-overlay-dropbox-dragover-border-color;
            }
          }
        }
      }
    }
  }
}
