@use "./mixins" as *;

// adduse


.dx-fileuploader {
  &.dx-state-disabled .dx-fileuploader-input {
    display: none;
  }
}

.dx-fileuploader-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.dx-fileuploader-container {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

.dx-fileuploader-input-wrapper {
  @include dx-clearfix-mixin();

  &::before,
  &::after {
    width: 100%;
  }

  &::before {
    padding-top: 1em;
    margin-top: -1em;
  }

  &::after {
    padding-bottom: 1em;
    margin-bottom: -1em;
  }

  .dx-button {
    float: left;
  }

  .dx-button + .dx-button {
    margin-left: 12px;
  }
}

.dx-fileuploader-button {
  position: relative;

  .dx-fileuploader-input {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;

    &::-webkit-file-upload-button {
      cursor: pointer;
    }
  }
}

.dx-fileuploader-dragover {
  .dx-fileuploader-input::-webkit-file-upload-button {
    width: 100%;
  }
}

.dx-fileuploader-content {
  display: table-row-group;
  vertical-align: middle;

  & > .dx-fileuploader-upload-button {
    margin-top: 10px;
  }
}

.dx-fileuploader-empty .dx-fileuploader-content > .dx-fileuploader-upload-button {
  display: none;
}

.dx-fileuploader-input-content {
  width: 100%;
  display: table;
}

.dx-fileuploader-files-container {
  padding-top: 0;
  width: 100%;

  .dx-fileuploader-show-file-list & {
    padding-top: 22px;
  }
}

.dx-fileuploader-file-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0 4px;

  .dx-button {
    width: 28px;
    height: 28px;
    margin-right: 10px;

    &.dx-fileuploader-cancel-button-position-end {
      margin-right: 0;
      margin-left: 4px;
    }

    &.dx-state-invisible {
      margin-right: 0;
      margin-left: 0;
    }
  }
}

.dx-fileuploader-button-container,
.dx-fileuploader-input-container {
  display: table-cell;
  vertical-align: middle;
}

.dx-fileuploader-input-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.dx-fileuploader-input {
  opacity: 0;
  width: 100%;
  margin: 0;
  cursor: default;
}

.dx-fileuploader-input-label {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: default;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    overflow: hidden;
    cursor: default;
  }
}

.dx-fileuploader-button-container {
  display: table-cell;
  vertical-align: middle;
}

.dx-fileuploader-file {
  display: table-cell;
  width: 100%;
  white-space: nowrap;
}

.dx-fileuploader-file-info {
  float: left;
  width: 100%;
}

.dx-fileuploader-file-status-message {
  float: left;
  font-size: 12px;
  height: 16px;
}

.dx-fileuploader .dx-progressbar {
  float: left;
  width: 100%;
  height: 22px;
  margin-top: -6px;
}

.dx-fileuploader-file-name {
  float: left;
  max-width: 100%;

  @include dx-overflow();
}

.dx-fileuploader-file-size {
  padding-left: 4px;
  float: left;
  vertical-align: super;
  font-size: 10px;
}

.dx-fileuploader-file-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 6px;
}

.dx-rtl {
  .dx-fileuploader,
  &.dx-fileuploader {
    .dx-fileuploader-button {
      float: right;
    }

    .dx-fileuploader-file-container .dx-fileuploader-button {
      margin-left: 10px;
      margin-right: 0;

      &.dx-fileuploader-cancel-button-position-end {
        margin-left: 0;
        margin-right: 4px;
      }
    }

    .dx-fileuploader-file-name,
    .dx-fileuploader-file-size,
    .dx-fileuploader-file-status-message {
      float: right;
    }

    .dx-fileuploader-file-size {
      padding-right: 4px;
    }
  }
}

.dx-fileuploader-invalid {
  .dx-fileuploader-file-status-message {
    height: auto;

    span {
      display: block;
      margin-bottom: 2px;

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

  .dx-fileuploader-button-container {
    vertical-align: top;
  }

  .dx-fileuploader-cancel-button {
    margin-top: 5px;
  }
}