@use 'sass:map';
@use 'sass:color';


@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;


#{getClassName((upload))} {
  overflow: hidden;
  font-size: #{getValName((upload, font-size))};
  input[type="file"] {
    display:none;
    opacity: 0;
  }
  #{getClassName((upload, tip))} {
    font-size: #{getValName((upload, tip, font-size))};
    color: #{getValName((upload, tip, color))};
  }
}

#{getClassName((upload, input))} {
  @include set-css-val(
    upload,
    (
      'hover-border-color': (color, neutral, 4),
    )
  );
  .is-disabled & {
    background-color: #{getValName((upload, disabled, background-color))};
  }
  cursor: pointer;
  position: relative;
  display: flex;
  color: #{getValName((upload, color))};
  border-radius: #{getValName((upload, border-radius))};
  padding: .6em 1em;
  height: 2.2em;
  background-color: transparent;
  border: 1px solid;
  border-color: #{getValName((upload, border-color))};
  background-color: #{getValName((upload, background-color))};
  justify-content: space-between;
  align-items: center;
  &:hover {
    border-color:  #{getValName((upload, hover, border, color))};
  }
  #{getClassName((bd))} {
    flex: 1;padding: 0 .4em;width:100%;
  }
  #{getClassName((button))} {
    height: 1.6em;
  }
  #{getClassName((upload, placeholder))} {
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
#{getClassName((upload, drop))} {
  display: flex;
  outline: none;
  width: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: dashed 1px #{getValName((upload, border, color))};
  min-height: 8em;
  border-radius: #{getValName((border, radius, base))};
  flex-direction: column;
  * {
    pointer-events: none;
  }
  .is-disabled & {
    background-color: #{getValName((upload, disabled, background-color))};
    border-color:  #{getValName((upload, border, color))} !important;
  }
  &.is-active,
  &:hover {
    border-color:  #{getValName((upload, hover, border, color))};
  }
  #{getClassName((upload, icon))} {
    margin-right: #{getValName((space, xs))};
  }
}




#{getClassName((upload, ul))} {
  margin: 4px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  &:empty {
    display:none;
  }
  li {
    position: relative;
    display: flex;
    #{getClassName((upload, item))} {
      word-break: break-word;
      display:flex;
      width: 100%;
      padding: .2em .4em;
      > i {
        padding-right: .4em;
      }
      &:hover {
        // color: #{getValName((upload, hover, item, color))};
        background-color: #{getValName((upload, hover, item, background, color))};
      }
    }
    #{getClassName((upload, item, box))} {
      flex: 1;width: 100%;
    }
    #{getClassName((upload, item, mask))} {
      position: absolute;
      left: 0px;top: 0px;
      height: 100%;display:flex;flex-direction: row;align-items: flex-start;justify-content: flex-start;padding: .2em .3em;
      color: #{getValName((color, neutral, 6))};
      background-color: #{getValName((upload, hover, item, background, color))};
      display:none;
      i {
        + i {
          margin-left: 4px;
        }
        cursor: pointer;
        &:hover {
          color: #{getValName((color, primary))};
        }
      }
    }
    &:hover {
      // color: #{getValName((upload, hover, item, color))};
      // background-color: #{getValName((upload, hover, item, background, color))};
      #{getClassName((upload, item, mask))} {
        display: flex;
      }
    }
  }
}
#{getClassName((upload, item, title))} {
  cursor: pointer;
  margin: 0em #{getValName((space, s))} 0em #{getValName((space, none))};
  &:hover {
    color: #{getValName((color, primary))};
  }
}
#{getClassName((upload, item, des))} {
  color: #{getValName((color, neutral, 6))};
}
#{getClassName((upload, images, card))} {
  flex-wrap: wrap;
  margin-left: -1em !important;
  flex-direction: row;
  li {
    display: inline-flex;
    padding: 0;
    width: calc(calc(100% / 6 ) - 1em);
    padding-top: calc(calc(100% / 6 ) - 1em);
    margin-left: 1em;
    margin-bottom: 1em;
  }
  #{getClassName((upload, item))} {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #{getValName((upload, border, color))};
    border-radius: #{getValName((border, radius, base))};
    flex-direction: column;
    overflow: hidden;
    background-color: #{getValName((upload, item, background, color))};
    &.is-active,
    &:hover {
      border-color:  #{getValName((upload, hover, border, color))};
      #{getClassName((upload, item, mask))} {
        opacity: 1;
        display:flex;
        i {
          display: inline-flex;
        }
      }
    }
    position: absolute;
    left: 0px;top: 0;right: 0px; bottom: 0px; display: flex;align-items: center;justify-content: center;
    i {
      font-size: 1.6em;
    }
    img {
      max-width: 100%;
      width: 100%;
      display: block;
      object-fit: contain;
    }
    #{getClassName((upload, item, mask))} {
      position: absolute;
      z-index: 1;
      width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,.8);
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      font-size: 0.876em;
      transition: all .2s;
      i {
        display: none;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
  #{getClassName((upload, image))} {
    cursor: pointer;
    #{getClassName((upload, item))} {
      border-style: dashed;
      .is-disabled & {
        background-color: #{getValName((upload, disabled, background-color))};
        border-color:  #{getValName((upload, border, color))} !important;
      }
      i {
        margin: 0px;padding: 0px;
      }
    }
  }
}

#{getClassName((upload, view))} {
  transition: .5s all;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,.8);
  width: 100%;
  height: 100%;
  padding: 2em;
  box-sizing: border-box;
  z-index: 999;
  overflow: auto;
  #{getClassName((upload, view, box))} {
    display: block;
    text-align: center;
    transition: .5s all;
    height:100%;
    &:after {
      content: '';
      display:inline-block;
      vertical-align: middle;
      height: 100%;
    }
    img {
      max-width: 100%;      
      vertical-align: middle;
      display: inline-block;
    }
  }
  #{getClassName((upload, view, close))} {
    position: fixed;
    top: .5em;
    right: .5em;
    color: #FFF;
    font-size: 2em;
    cursor: pointer;
    padding: .5em;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
  }
  #{getClassName((upload, view, control))} {
    font-size: 2em;
    position: fixed;
    top: 50%;
    left: 1em;
    right: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0px;
    color: #FFF;
    i {
      background-color: rgba(0,0,0,.5);
      padding: .5em;
      cursor: pointer;
    }
    z-index: 1;
  }
  #{getClassName((upload, view, title))} {
    position: fixed;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      background-color: rgba(0,0,0,.5);
      border-radius: 100px;
      margin-bottom: 1em;
      padding: .5em 1em;font-size: 1.2em;color:#FFF;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90%;
    }
  }
}

#{getClassName((upload))} {
  @include set-css-val(
    upload,
    (
      'font-size': (heading8),
      'tip-font-size': (heading9),
      color: (color, neutral, 9),
      'tip-color': (color, neutral, 6),
      'border-radius': (border, radius, base),
      'border-color': (color, neutral, 3),
      'hover-border-color': (color, primary),
      'hover-item-color': (color, primary),
      'item-background-color': (color, neutral, 0),
      'hover-item-background-color': (color, neutral, 1),
      'background-color': (color, neutral, 0),
      'disabled-background-color': (color, neutral, 1),
      'placeholder-color': (color, neutral, 3)
    )
  )
}

#{getClassName((upload, large))} {
  @include set-css-val(
    upload,
    (
      'font-size': (heading7),
    )
  )
}
#{getClassName((upload, mini))} {
  @include set-css-val(
    upload,
    (
      'font-size': (heading9),
    )
  )
}

.upload-fade-enter-from, .upload-fade-leave-to {
  transform: 0;
  opacity: 0;
  #{getClassName((upload, view, box))} {
    transform: translateY(-20px);
    opacity: 0;
  }
}