@import "../lib.less";

.@{veui-prefix}-uploader {
  outline: none;
  font-size: @dls-uploader-font-size-m;

  &-media {
    display: flex;
  }

  .@{veui-prefix}-disabled {
    .@{veui-prefix}-icon,
    .dls-icon {
      color: currentColor;
    }
  }

  &-file {
    flex-direction: column;
  }

  &-button-container {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
  }

  &-input-label-media {
    display: flex;
    .absolute(-1px);
    border-style: none;
    line-height: inherit;
    border-radius: inherit;

    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-uploader-media-icon-size-m);
      margin: 0;
      color: @dls-uploader-media-icon-color;
    }
  }

  &-list-media-container-upload > &-input-label-media {
    border-style: solid;
  }

  &-list,
  &-list-media {
    padding: 0;
    margin: 0;
    list-style: none;

    &-item {
      position: relative;
      .veui-transition(transform, opacity);
    }

    .@{veui-prefix}-uploader-success-icon {
      color: @dls-uploader-foreground-color-success;
    }

    .@{veui-prefix}-uploader-failure-icon {
      color: @dls-uploader-foreground-color-error;
    }

    &-enter,
    &-leave-to {
      opacity: 0;
    }

    &-leave-active {
      position: absolute;
    }
  }

  &-list {
    &-item {
      margin: @dls-uploader-file-item-spacing-y 0;
      width: @dls-uploader-file-item-width;
    }

    &-file-icon {
      flex: none;
      color: @dls-uploader-file-item-icon-color;
    }

    &-container {
      display: flex;
      align-items: center;
      position: relative;
      background-color: @dls-uploader-file-item-background-color;
      .veui-transition(background-color);
      padding: 0 @dls-uploader-file-item-padding-x;
    }

    .@{veui-prefix}-uploader-success-icon,
    .@{veui-prefix}-uploader-failure-icon {
      margin-left: auto;
      flex: none;
    }

    &-container:hover {
      background-color: @dls-uploader-file-item-background-color-hover;

      .@{veui-prefix}-uploader-list-remove {
        display: flex;

        .@{veui-prefix}-icon {
          .dls-icon-size(@dls-icon-size-aux, true);
        }
      }

      .@{veui-prefix}-uploader-success-icon,
      .@{veui-prefix}-uploader-failure-icon {
        display: none;
      }
    }

    &-name {
      .ellipsis();
      margin: 0 @dls-uploader-file-item-label-spacing-after 0
        @dls-uploader-file-item-label-spacing-before;
    }

    &-name-failure {
      color: @dls-uploader-foreground-color-error;
    }

    .@{veui-prefix}-icon&-file-icon-failure {
      color: @dls-uploader-foreground-color-error;
    }

    .@{veui-prefix}-button&-remove {
      margin-left: auto;
      display: none;
    }

    .@{veui-prefix}-progress {
      .absolute(
        _,
        @dls-uploader-file-item-padding-x,
        -@dls-uploader-file-item-spacing-y / 2,
        @dls-uploader-file-item-padding-x
      );
      transform: translateY(50%);
    }

    .@{veui-prefix}-progress .@{veui-prefix}-progress-rail {
      width: 100%;
    }
  }

  &-list-media {
    margin: -@dls-uploader-media-spacing-y 0 0 -@dls-uploader-media-spacing-x;

    &-item {
      display: inline-block;
      vertical-align: top;
      margin: @dls-uploader-media-spacing-y 0 0 @dls-uploader-media-spacing-x;
      width: @dls-uploader-media-width-m;

      &-hidden {
        opacity: 0;
        position: absolute;
        z-index: -1;
      }
    }

    &-item-dropdown-open &-mask {
      opacity: 1;
    }

    &-container {
      display: flex;
      position: relative;
      border-radius: @dls-button-border-radius-m;
      border: 1px solid @dls-button-border-color-basic;
      .size(100%, @dls-uploader-media-height-m);

      &-media {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        .veui-position-center();
      }

      &:hover {
        cursor: pointer;
        .@{veui-prefix}-uploader-entries-container {
          cursor: default;
          opacity: 1;
        }
      }
    }

    &-item-entry-dropdown-open .@{veui-prefix}-uploader-entries-container {
      opacity: 1;
    }

    &-container:not(&-container-upload) {
      overflow: hidden;
    }

    &-container:hover &-mask {
      opacity: 1;
    }

    &-container-uploading {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 @dls-uploader-media-padding-x-m;

      &-text {
        margin: 0;
      }

      .@{veui-prefix}-progress {
        width: 100%;
        height: auto;
        margin-top: @dls-uploader-media-content-spacing-m;
      }
    }

    &-container-failure {
      flex-direction: column;
      border: 1px solid @dls-uploader-media-border-color-error;

      .@{veui-prefix}-uploader-input-label-media {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        outline: none;
        bottom: dls-sum(
          @dls-uploader-mask-padding-y * 2,
          @dls-icon-size-minor,
          -1px
        );
      }

      .@{veui-prefix}-uploader-list-media-file-name {
        color: @dls-uploader-foreground-color-error;
        max-width: calc(100% - 2 * @dls-uploader-media-padding-x-m);
        .ellipsis();
        margin-top: @dls-uploader-media-error-spacing;
      }
    }

    &-mask {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      opacity: 0;
      .veui-transition(opacity);
      .absolute(_, 0, 0, 0);
      background-color: @dls-uploader-mask-background-color;
      padding: @dls-uploader-mask-padding-y @dls-uploader-mask-padding-x;

      .@{veui-prefix}-button {
        color: @dls-uploader-mask-icon-color !important;
      }

      .@{veui-prefix}-control-item {
        margin-left: @dls-uploader-mask-icon-spacing;
      }
    }

    &-picker-before {
      display: flex;
      flex-wrap: wrap;

      &-item-upload {
        order: 0;
      }
    }
  }

  &-desc {
    color: @dls-uploader-helper-text-font-color;
    margin-left: @dls-uploader-helper-text-spacing-file;
  }

  &-media &-desc {
    display: inline-flex;
    align-items: center;
    height: @dls-uploader-media-height-m;
    margin-left: @dls-uploader-helper-text-spacing-media;
    max-width: @dls-uploader-helper-text-max-width-media;
  }

  &-entries-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    .absolute(0, _, _, 0);
    padding: @dls-uploader-media-entry-spacing 0;
    background-color: @dls-color-info-0;
    opacity: 0;
    .veui-transition(opacity);
    .size(100%);

    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-uploader-media-entry-icon-size, true);
    }

    & > .@{veui-prefix}-uploader-controls {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding: 0;

      .@{veui-prefix}-control-item {
        justify-content: flex-start;
      }
    }
  }

  &[ui~="s"] {
    font-size: @dls-uploader-font-size-s;

    .@{veui-prefix}-uploader-input-label-media {
      .@{veui-prefix}-icon {
        .dls-icon-size(@dls-uploader-media-icon-size-s);
      }
    }

    .@{veui-prefix}-uploader-list-media {
      &-item {
        width: @dls-uploader-media-width-s;
      }

      &-container {
        border-radius: @dls-button-border-radius-s;
        .size(100%, @dls-uploader-media-height-s);
      }

      &-container-uploading {
        padding: 0 @dls-uploader-media-padding-x-s;

        .@{veui-prefix}-progress {
          margin-top: @dls-uploader-media-content-spacing-s;
        }
      }

      &-container-failure {
        .@{veui-prefix}-uploader-list-media-file-name {
          max-width: calc(100% - 2 * @dls-uploader-media-padding-x-s);
        }
      }
    }

    &.@{veui-prefix}-uploader-media {
      .@{veui-prefix}-uploader-desc {
        height: @dls-uploader-media-height-s;
      }
    }

    &-entries-container {
      padding: @dls-uploader-media-entry-spacing 0;
      .@{veui-prefix}-icon {
        .dls-icon-size(@dls-uploader-media-entry-icon-size, true);
      }
    }
  }

  &-hide {
    display: none;
  }
}