/**
# 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;
      margin-bottom: 10px;

      .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: center;
        //   margin-bottom: 10px;
        //   .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 {
    margin-bottom: 20px;
    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: 0 0 10px 0;
      // padding: 7px 10px;
      padding: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .cradmin-legacy-bulkfileupload-iteminfo {
        flex: 0 1 auto;
        padding: 7px 10px;
      }

      .cradmin-legacy-bulkfileupload-remove-file-button,
      .cradmin-legacy-bulkfileupload-error-closebutton {
        flex: 0 0 auto;
        margin: 0;
        width: 55px;
        align-self: stretch;
        background: @cradmin-bulkfileupload-progress-item-remove-file-button-bg;
        color: @cradmin-bulkfileupload-progress-item-remove-file-button-color;
        &:hover {
          background: @cradmin-bulkfileupload-progress-item-remove-file-button-hover-bg;
          color: @cradmin-bulkfileupload-progress-item-remove-file-button-hover-color;
        }
      }

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

        .cradmin-legacy-bulkfileupload-error-closebutton {
          font-size: 20px;
          color: @cradmin-bulkfileupload-progress-item-remove-file-button-color;
          &:hover {
            color: @cradmin-bulkfileupload-progress-item-error-closebutton-hover-color;
          }
        }
      }
    }

    .cradmin-legacy-filename {
      word-break: break-all;
    }
  }

  .cradmin-legacy-bulkfileupload-progress {
    background: @cradmin-bulkfileupload-bg;
    p.cradmin-legacy-bulkfileupload-progress-item {
      color: @cradmin-bulkfileupload-progress-item-color;
      background: @cradmin-bulkfileupload-progress-item-bg;

      .cradmin-legacy-bulkfileupload-remove-file-button {
        background: @cradmin-bulkfileupload-progress-item-remove-file-button-bg;
        color: @cradmin-bulkfileupload-progress-item-remove-file-button-color;
        &:hover {
          background: @cradmin-bulkfileupload-progress-item-remove-file-button-hover-bg;
          color: @cradmin-bulkfileupload-progress-item-remove-file-button-hover-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-rejectedfiles {
    background: @alert-danger-bg;
    .cradmin-legacy-bulkfileupload-rejectedfile {
      color: @alert-danger-text;
      .cradmin-legacy-bulkfileupload-error-closebutton {
        background: shade(@alert-danger-bg, 5%);
        color: tint(@alert-danger-text, 5%);
        &:hover {
          background: shade(@alert-danger-bg, 12%);
          color: tint(@alert-danger-text, 12%);
        }
      }
    }
  }


  p.cradmin-legacy-bulkfileupload-advanced-fileselectbutton-wrapper {
    text-align: center;
    margin-bottom: 10px;
    .cradmin-legacy-bulkfileupload-advanced-fileselectbutton {
      display: inline-block;
    }
  }
}

//.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;
            }
          }
        }
      }
    }
  }
}
