@import "../../../stylesheets/variables/_all";
@import "../../../stylesheets/mixins/_scrollable";

$item-height: 1rem;

@keyframes bar-stripes {
  from { background-position: $item-height 0; }
  to { background-position: 0 0; }
}

.fileList {
  @include scrollbox-vertical();
  max-height: 35vh;
}

.table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;

  > thead {

  }

  > tbody {
    text-align: left;

    > tr {
      border-bottom: 1px solid transparentize($color-gray-light, .85);

      &:last-child {
        border-bottom: 0;
      }

      &:hover,
      &:focus {
        background-color: transparentize($color-gray-light, .85);
      }

      th,
      td {
        padding: ($sm-padding-y * 2) ($sm-padding-x / 2);
        white-space: nowrap;
      }

      th {
        font-weight: bold;
        color: $color-gray-dark;
      }

      td {

      }
    }
  }
}

.tableItemIcon,
.tableItemActions,
.tableItemStatus {
  width: 1%;
}

.tableItemActions {
  min-width: 68px; // size of the 2 icons (check/trash)
}

.tableItemIcon > i {
  font-size: 1.35rem;
}

.tableItemName {
  height: $item-height;
  width: auto;
  position: relative;

  &:before {
    content: ' ';
    visibility: hidden;
  }

  > span {
    @extend %text-elipsis;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 $sm-padding-x;
  }
}

.tableItemStatus {
  text-align: right;
}

.tableItemNew {
  background-color: transparentize($color-primary, .95);
}

.tableItemUploading {
  background-color: transparentize($color-primary, .75);
}

.tableItemProcessing {
  background-color: transparentize($color-success, .75);
}

.tableItemError {
  background-color: transparentize($color-danger, .75);
}

.tableItemAnimated {
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, .15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .15) 50%,
    rgba(255, 255, 255, .15) 75%,
    transparent 75%,
    transparent
  );
  background-size: $item-height $item-height;
  animation: bar-stripes 1s linear infinite;
}

.itemAction {
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  color: $color-gray-light;
  padding: 0;
  transition: all .25s;
}

.itemActionRemove {
  &:focus, &:hover {
    color: $color-danger;
  }

  &[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
    pointer-events: none;
    cursor: not-allowed;
  }
}

.dropzone {
  width: 100%;
  display: block;
  border: 2px dashed;
  border-radius: $border-radius;
  padding: ($lg-padding-y * 2.5) ($lg-padding-x * 2.5);
  margin-top: $lg-padding-y * 5;
  text-align: center;
  font-size: $font-size-large;
  cursor: pointer;
}

.dropzoneActive {
  background-color: transparentize($color-gray-light, .85);
}

.dropzoneReject {
  color: $color-danger;
  background-color: transparentize($color-danger, .80);
  cursor: no-drop;
}

.dropzoneIcon {
  font-size: $font-size-large * 3;
}

.dropzoneMessage {
  margin: $md-padding-y 0;
}

.dropzoneLink {
  color: $color-link;
  text-decoration: underline;
  font-size: 80%;
  display: block;
}