@import '../../src/style/tools.css';

.bx-uploader-delete {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  height: 18px;
  width: 18px;
  background: url("data:image/png;base64,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") center no-repeat;
  background-size: 70%;
  transform: translate3d(50%, -50%, 0);
}

.bx-uploader-form {
  background: transparent;
  margin: 0;
  padding: 0;
}

.bx-uploader-input {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  opacity: 0;
}

.bx-uploader-btn-input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.bx-uploader-btn {
  position: relative;
}

.bx-uploader-btn-form {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* single */
.bx-uploader-single {
  position: relative;
  padding: 15px 0 0;
  background: var(--uploader-bg-color);
}

.bx-uploader-single-error {
  text-align: left;
  margin-top: -3px;
  padding: 0 15px 12px 15px;
  font-size: var(--font-size-sm);
  line-height: 19px;
  color: var(--color-feature-primary);
}

.bx-uploader-single-item {
  position: relative;
  width: 74%;
  margin: auto;
  padding-bottom: 46.4838%;
  background-size: cover;
  background-position: 50%;
}

.bx-uploader-single-status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 17%;
  background: var(--uploader-status-bg-color);
}

.bx-uploader-single-info {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-xs);
  color: var(--uploader-status-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-single-title {
  width: 100%;
  padding: 8px 15px 20px;
  font-size: var(--font-size-sm);
  line-height: 16px;
  color: var(--uploader-title-color);
  text-align: center;
  box-sizing: border-box;
}

/* double */
.bx-uploader-double {
  position: relative;
  padding: 15px 0 0;
  background: var(--uploader-bg-color);
}

.bx-uploader-double-error {
  text-align: left;
  margin-top: -3px;
  padding: 0 15px 12px 15px;
  font-size: var(--font-size-sm);
  line-height: 19px;
  color: var(--color-feature-primary);
}

.bx-uploader-double-list {
  display: flex;
  flex-wrap: wrap;
}

.bx-uploader-double-outer {
  width: 44%;
  margin-left: 4%;
  box-sizing: border-box;
}

.bx-uploader-double-item {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 63.03%;
  background-size: cover;
  background-position: 50%;
}

.bx-uploader-double-status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28.85%;
  background: var(--uploader-status-bg-color);
}

.bx-uploader-double-info {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-xs);
  color: var(--uploader-status-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-double-title {
  width: 100%;
  padding: 8px 15px 20px;
  font-size: var(--font-size-sm);
  line-height: 16px;
  color: var(--uploader-title-color);
  text-align: center;
  box-sizing: border-box;
}

/* lattice */
.bx-uploader-lattice {
  position: relative;
  width: 100%;
  padding: 15px 0 0;
  background: var(--uploader-bg-color);
}

.bx-uploader-lattice-item {
  position: relative;
  display: inline-block;
  width: 28%;
  margin-left: 4%;
  padding-bottom: 28%;
  margin-bottom: var(--margin-content);
  background-size: cover;
  background-position: 50%;
  overflow: visible;
}

.bx-uploader-lattice--limit {
  margin-top: -5.24%;
}

.bx-uploader-lattice-add {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  font-size: var(--uploader-add-icon-size);
  color: var(--uploader-icon-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-lattice-maxinfo {
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 100%;
  color: var(--uploader-maxinfo-color);
  font-size: var(--uploader-max-info-size);
  line-height: 14px;
  text-align: center;
}

.bx-uploader-lattice-status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28.57%;
  background: var(--uploader-status-bg-color);
}

.bx-uploader-lattice-info {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-xs);
  color: var(--uploader-status-color);
  transform: translate3d(-50%, -50%, 0);
}

/* rows */
.bx-uploader-rows {
  position: relative;
  width: 100%;
  padding: 15px 0 0;
  background: var(--uploader-bg-color);
}

.bx-uploader-rows-error {
  text-align: left;
  padding: 0 4% 12px 4%;
  font-size: var(--font-size-sm);
  line-height: 19px;
  color: var(--color-feature-primary);
}

.bx-uploader-rows-item {
  position: relative;
  display: inline-block;
  align-content: flex-start;
  flex-shrink: 0;
  width: 44%;
  margin-left: 4%;
  padding-bottom: 27.73%;
  margin-bottom: var(--margin-content);
  box-sizing: border-box;
  background-size: cover;
  background-position: 50%;
}

.bx-uploader-rows-add {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  font-size: var(--uploader-add-icon-size);
  color: var(--uploader-icon-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-rows-status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 37.5%;
  background: var(--uploader-status-bg-color);
}

.bx-uploader-rows-info {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-xs);
  color: var(--uploader-status-color);
  transform: translate3d(-50%, -50%, 0);
}

/* row */
.bx-uploader-row {
  position: relative;
  width: 100%;
  background: var(--uploader-bg-color);
}

.bx-uploader-row-error {
  text-align: left;
  padding: 12px 15px 0;
  font-size: var(--font-size-sm);
  line-height: 19px;
  color: var(--color-feature-primary);
}

.bx-uploader-row-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
  overflow-x: scroll;
}

.bx-uploader-row-list {
  padding: 15px 0 0;
  white-space: nowrap;
}

.bx-uploader-row-item {
  position: relative;
  display: inline-block;
  width: 33.87%;
  margin-left: 4%;
  padding-bottom: 21.33%;
  margin-bottom: var(--margin-content);
  box-sizing: border-box;
  background-size: cover;
  background-position: 50%;
}

.bx-uploader-row-add {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  font-size: var(--uploader-add-icon-size);
  color: var(--uploader-icon-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-row-status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 37.5%;
  background: var(--uploader-status-bg-color);
}

.bx-uploader-row-info {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  line-height: 15px;
  font-size: var(--font-size-xs);
  color: var(--uploader-status-color);
  transform: translate3d(-50%, -50%, 0);
}

.bx-uploader-row-last {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--uploader-last-text-color);
  transform: translateY(-50%);
}
