@import "../vars.less";

.hive-upload {
  display: inline-block;
  width: 100%;
  &__input {
    display: none;
  }

  &--drag {
    .hive-upload__select-container {
      background: rgba(0, 0, 0, 0.02);
      border: 1px dashed rgba(0, 0, 0, 0.15);
    }
  }

  &__select-container {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      border-color: @primary-color !important;
    }

    .hive-icon {
      margin-right: 8px;
    }
  }

  &__file-list {
    width: 100%;
    overflow: hidden;
    padding-top: 4px;
    &__item {
      width: 100%;
      height: 16px;
      line-height: 16px;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
        .hive-upload__file-list__item__clear-icon {
          // opacity: 1;
        }
      }
      &-name {
        width: 100%;
        font-size: 14px;
        padding: 0 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
      }
      @-webkit-keyframes spin {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      &__clear-icon {
        // opacity: 0;
        transition: all 0.3s;
      }

      .loading_icon,
      .hive-icon {
        transition: all 0.3s;
      }
      .loading_icon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: inline-block;
        height: 14px;
        width: 14px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1RDg2N0FDNjc2NzExRTlCMjM0RDk1OTZEOEM0RDFDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1RDg2N0FENjc2NzExRTlCMjM0RDk1OTZEOEM0RDFDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTVEODY3QUE2NzY3MTFFOUIyMzREOTU5NkQ4QzREMUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTVEODY3QUI2NzY3MTFFOUIyMzREOTU5NkQ4QzREMUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Z7wmnAAAE60lEQVR42rRWS4hdRRDtqu5773vzZpKYIHFioiZxJOJO8BPFjZCVET+rgC4lIIaALozg5gUigiDBldGNn4ALF4Kg4kIxokSIiuB3IvkZksl/ZDKZ8Xbf7iqr+r0xAfN5MmPDvd333u46VXVO1XtgBhi3bz04lshuIErriXFFTDyamBwlOJOYTzVsvsFEH53bfdtv17IFV/t4z4vH7k2BtkaidUTsYjI2sRHb7BIZK8CWWN7JrM+JYTwZs33qnbWf/yfAh17+47rZGl8QQ+sjibEESBmEbX5myCCReuDMPXB5tqROGPjSAT1z8q2xM9cEfHzHoZs9lN1IcENKyYlxFONOI+tH5BSMNCKNkvrrPmjKDuZ9J5DskxNvrx6/IuCmV4+vEqAdcmBEU5WjyQahb7gXRTZKc47wJSm9JM05IzDDzjw68fqa/f8C3PzGxJAPsF02jsZoUCPRlGXusteSPmZHl3AnzvWjIdck3dsDunjOIDMfRzIPH3pz7ZTiuDlAB/iEKWCRGKsdqkA42SwIkyyhlQeNIpEIx6IaBosaNUqKCaM8OOVaKIjyURyTd5QdXB6BXxKILf9EuO3dyZt8jM/F1BOBet8kweG5COb4gYvp05Qpv/2051Tnvfm7KlqiJFWzOCFOGbdp/2urfswRoo0bKgM+ey4RJX2FtgeMPe4cCo/J7IOCP/NER/VcbPCWhszGGPlBpzzLeeFbxRU1S1K7SZxBoUSmpBFuhu4n5xbBND3bqKTFY0rqlRqnHKEYswk4msTv7Xp6dN/lyuiRVyYeoMhbxPBwoj7PfR6V+9hXti3SRhzyuKYqrG8X4FsOQiWzXq3S+sLJukTfxiuD6fjw+RVfFZZ3ybnQKrCunNoyoXRGbYUqz8YD4/04VNqVpWMBAF8WUCt4YQXIsm9nQP5151NXBpsbH2xb+UXLwvcCFkoBLfVsgWITvbyrdS3O3OkqRy1A8DGJ6pQD6WOIktoIjoTLkuFrM+AoS/exlMg6p8KyWqaiAaGELPQUTrzM2dLaVkIfpS0IgIgEIgg4y5yd6IRjgwIuNvbgBZu8BVX7HG+5Ibheo8COaxdGCg09aBlErTHU2rKBwKkyR6eW14MCLptceoFvPLs7SHpSgyhOQ5DGynKJYDECGNeyeF6iG3bWSXSksnYJE8otNs7YaTo7JLamBwHsdkGSZPZcbY9zhZ9GrorYJFs4tIFNJMFrxCcpQUuLyuWDAg4yXKssp6R+OqWzNsTkjNQQO4wuonQb/ZE1a2XfgYUClCyb04XjINxJLWLdLmxdIYu0ObQq1Dpc/P7e+taFAgTp5nbv+F93N8KdlAXWITlp/sgUbTAga1FclEiBfvr5050Hu90uzQtQb9/+Xq9hi8uaEF0SSUcFFRHJnJsyS4szWlOGzj9218ieeXGotyVQHY9l6MwQF4SFCNhFQ9H50mKVfxelZDTqaM7Pm0O9jY2BDz6cag+72kLw7dIELFhaEwdpAb5ltd1xGB4ZOjpvDucWwiUemDQrUu07SQo+zUqHkJlSYzXqMNvwfXcMfQcAPO8IMzIA/bDUnOhU1YWyYd+pepczzltjfNGCk/MFu+y/NlXtkSMz13NlKytNdyZIu5NlOWqOrAaoFxywDwqTk2Zkls1IE2ppvK00thKOmf97CLA7fPjPJb+cPj28UDb/FmAARrJqMhu4NuEAAAAASUVORK5CYII=');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: spin 1s linear infinite;
      }
      .hive-icon {
        font-size: 16px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .upload-error-icon {
        right: none;
        left: 0;
        color: @error-color !important;
      }
      .hive-icon--circle_tick {
        color: @success-color;
        left: 0;
      }
      .hive-icon--circle_clear {
        position: absolute;
        right: 0;
        color: @disabled-color;
      }
    }
    &__item + &__item {
      margin-top: 10px;
    }
  }
}