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

@keyframes bar-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

.visuallyHidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

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

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

  > thead {
  }

  > tbody {
    text-align: left;

    [dir="rtl"] & {
      text-align: right;
    }

    > tr {
      border-bottom: 1px solid var(--color-gray-light);

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

      &:hover,
      &:focus {
        background-color: transparentize(#8B9AA8, .85);
      }

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

      th {
        font-weight: bold;
        color: var(--color-gray-dark);
      }

      td {
      }
    }
  }
}

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

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

  [dir="rtl"] & {
    text-align: right;
  }
}

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

.tableItemName {
  height: 1rem;
  width: auto;
  position: relative;

  &:before {
    content: "\00a0";
    visibility: hidden;
  }

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

.tableItemCurrent {
  padding-left: 0;
  padding-right: inherit;

  [dir="rtl"] & {
    padding-left: inherit;
    padding-right: 0;
  }
}

.tableItemStatus {
  text-align: right;

  [dir="rtl"] & {
    text-align: left;
  }
}

.tableItemNew {
  background-color: rgba(0, 128, 129, 0.05);
}

.tableItemUploading {
  background-color: rgba(0, 128, 129, 0.25);
}

.tableItemConverting {
  background-color: rgba(0, 128, 129, 0.25);
}

.tableItemError {
  background-color: rgba(223, 39, 33, 0.25);
}

.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: 1rem 1rem;

  :global(.animationsEnabled) & {
    animation: bar-stripes 1s linear infinite;
  }
}

.itemAction {
  div > i {
    margin-top: .25rem;
  }
}

.itemAction,
.itemAction > i {
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  color: var(--color-gray-light);
  padding: 0;

  :global(.animationsEnabled) & {
    transition: all .25s;
  }

  :hover, :focus {
    padding: unset !important;
  }
}

.itemActionRemove {
  background-color: transparent;
  border: 0 !important;

  & > i:focus,
  & > i:hover {
    color: var(--color-danger) !important;
    background-color: transparent;
  }

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

.checked > i {
  color: var(--color-success);
}

.dropzoneWrapper {
  width: 100%;
  display: flex;
  margin-top: calc(var(--lg-padding-y) * 5);
}

.dropzone {
  flex: auto;
  border: 2px dashed;
  border-radius: var(--border-radius);
  padding: calc(var(--lg-padding-y) * 2.5) var(--lg-padding-x);
  text-align: center;
  font-size: var(--font-size-large);
  cursor: pointer;
}

.dropzoneActive {
  background-color: var(--color-gray-lighter);
}

.dropzoneIcon {
  font-size: calc(var(--font-size-large) * 3);
}

.dropzoneMessage {
  margin: var(--md-padding-y) 0;
}

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

.currentLabel {
  display: inline;
  padding: .25em .5em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-primary);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  text-transform: uppercase;
}