@import "./base.less";

@upload-padding-vertical: @padding-vertical/1.6;
@upload-picture-width: 120px;

.loop(@counter: 0) when (@counter < 100) {
  .loop((@counter + 1));
  &.percent-@{counter}:after {
    width: (1% * @counter);
  }
}

.@{css-prefix}.upload {
  font-size: @base-font-size;
  color: @base-font-color;

  .upload-trigger {
    input {
      display: none;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    // margin-top: @upload-padding-vertical;

    li {
      padding: @upload-padding-vertical @padding-horizontal/2;
      transition: background-color .2s ease-in-out;
      overflow: hidden;
      position: relative;
      line-height: 1em;

      &:hover {
        background: @hover-background-color;

        .close {
          opacity: 1;
        }
      }

      &.progress {

        &:before, &:after {
          position: absolute;
          left: 0;
          bottom: 0;
          display: block;
          content: '';
          height: 2px;
          width: 100%;
        }

        &:before {
          background: @border-color;
        }
        &:after {
          background: #00a854;
          width: 1%;
        }

        &.percent-80:after {
          width: 80%;
        }

        .loop(0);

      }

      &.error {
        color: @error-color;
      }

      .close {
        position: absolute;
        right: 1em;
        top: @upload-padding-vertical;
        font-weight: bold;
        opacity: 0;
        cursor: pointer;
      }
    }
  }

  &.picture {
    .upload-trigger {
      height: @upload-picture-width;
      line-height: @upload-picture-width;
      width: @upload-picture-width;
      background: #f5f5f5;
      .transition(border-color .3s ease);
      display: inline-block;
      text-align: center;
      cursor: pointer;
      // border: 1px solid @border-color;
      position: relative;
      margin: 0 8px 8px 0;

      &:hover {
        border-color: @active-color;
      }

      i {
        font-size: 1.4em;
        color: #999;
      }
    }

    ul {
      display: inline-block;
      margin: 0;
      vertical-align: top;

      li {
        height: @upload-picture-width;
        line-height: @upload-picture-width;
        width: @upload-picture-width;
        display: inline-block;
        text-align: center;
        border-radius: 2px;
        margin: 0 8px 8px 0;
        padding: 0;
        box-shadow: 0 1px 2px rgba(0,0,0,.1);
        //.transition(all .5s cubic-bezier(.55,0,.1,1));

        &:hover {
          .info {
            opacity: 1;
          }
        }

        &.progress {

          &:before, &:after {
            height: 5px;
            z-index: -1;
          }
        }

        .info {
          position: absolute;
          top: 0;
          left: 0;
          width: @upload-picture-width;
          height: @upload-picture-width;
          opacity: 0;
          background: rgba(0, 0, 0, .25);
          color: #fff;
          border-radius: 2px;
          cursor: pointer;

          i {
            line-height: 1;
            font-size: 1.2em;
            display: block;
            padding: 2px;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            color: #fff;
          }
        }

        img {
          border-radius: 2px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.image-toolbar {
  position: absolute;
  list-style: none;
  display: flex;
  flex-direction: column;
  font-size: 0;
  margin: 0;
  padding: 0;
  right: 1rem;
  top: 1rem;
  z-index: 10;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;

  > li {
    margin: 0;
    display: inline-block;
    font-size: 13px;
    padding: .5em .75em;
    background: #e8e8e8;
    color: rgba(0,0,0,.6);
    line-height: 1em;
    font-weight: 600;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;

    &:first-child {
      border-top: none;
    }

    &:hover {
      background-color: #d9d9d9;
    }
  }
}