@import "ui-variables";
@import "ui-mixins";

.attachment-file-wrap {
  cursor: default;
  display: inline-block;
  position: relative;
  font-size: @font-size-small;
  margin-bottom: @spacing-standard;
  margin-right: @spacing-standard;
  background: @background-off-primary;
  box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(~"50% - 7.5px");
  border-radius: 4px;

  &.non-image-attachment {
    width: calc(~"50% - 23px");
    margin-left: 15px;
    &:nth-child(even) {
      margin-left: 0;
    }
  }

  &.file-upload {
    border-radius: 4px;
    padding: 13px @spacing-standard 13px @spacing-standard;
    .attachment-file-name {
      color: @text-color-very-subtle;
      .uploading {
        color: @text-color;
      }
    }
  }

  .attachment-inner-wrap {
    border-radius: 4px;
    padding: 13px @spacing-standard 13px @spacing-standard;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:nth-child(even) {
    margin-right: 0;
  }
  &:hover {
    cursor: default;
  }

  &.pending, &.started, &.progress, &.downloading {
  }

  .attachment-file-icon {
    margin-right: 7px;
  }

  .attachment-file-name {
    font-weight: @font-weight-medium;
  }
  margin-left: 15px;
  .attachment-file-and-name {
    position: relative;
    z-index: 2;
  }

  .attachment-file-actions {
    position: relative;
    z-index: 3;
    .attachment-icon {
      float: right;
      position: relative;
      top: 2px;
      margin-left: 10px;
    }
  }
}

.image-file-upload, .image-attachment-file-wrap, .attachment-file-wrap,
.attachment-inner-wrap {
  .attachment-download-bar-wrap {
    display: none;
  }

  &.downloading, &.started, &.progress {
    .attachment-download-bar-wrap {
      display: block;
    }
  }

  &.completed, &.success {
    .attachment-download-bar-wrap {
      display: block;
    }
    .attachment-upload-progress { background: @background-color-success; }
  }

  &.aborted, &.failed {
    .attachment-download-bar-wrap {
      display: block;
    }
    .attachment-upload-progress { background: @background-color-error; }
  }

  .attachment-download-progress,
  .attachment-upload-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0; // Changed by React
    z-index: 3;
    display: block;
    background: @progress-bar-fill;
  }
  .attachment-bar-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    z-index: 2;
    display: block;
    background: @progress-bar-background;
  }
}

.image-attachment-file-wrap, .image-file-upload {
  position: relative;
  margin: 0 0 8px 0;
  text-align: center;

  .attachment-download-progress,
  .attachment-upload-progress {
    bottom: -2px;
  }
  .attachment-bar-bg {
    bottom: -2px;
  }

  .attachment-file-actions {
    position: relative;
    z-index: 2;
  }

  &:hover {
    .attachment-file-actions, .attachment-name-bg, .attachment-name {
      display: block;
    }
  }
  .attachment-file-actions, .attachment-name-bg, .attachment-name {
    display: none;
  }

  .attachment-icon {
    position: absolute;
    z-index: 2;
    right: -8px;
    top: -8px;
    width: 26px;
    border-radius: 0 0 0 3px;
  }

  .attachment-preview {
    position: relative;
    z-index: 1;

    .attachment-name-bg {
      position: absolute;
      bottom: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 23%)
    }
    .attachment-name {
      color: @white;
      left: 15px;
      bottom: 13px;
      position: absolute;
      z-index: 3;
    }

    img {
      position: relative;
      z-index: 1;
      max-width: 100%;
      background: @background-secondary;
    }
  }

}