@import "../variables.css";

.container-wrapper {
  position: relative;
}

.container {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: var(--mechanic-input-height-half);
  padding: 0 var(--mechanic-input-height) 0 var(--mechanic-input-height-quart);
  display: flex;
  align-items: center;
  min-height: var(--mechanic-input-height);
  line-height: 1;
  background-color: var(--mechanic-background);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  width: 100%;
}

.loadedImages {
  z-index: 21;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 1;
}

.imageItem {
  pointer-events: initial;
  margin: 0.15em 0.15em 0 0;
}

.thumbnail {
  max-height: var(--mechanic-input-height-half);
  max-width: 150px;
  border-radius: 3px;
}

.preview {
  position: absolute;
  z-index: 100;
  left: var(--mechanic-input-height-quart);
  right: var(--mechanic-input-height-quart);
  margin-top: var(--mechanic-input-height-quart);
  width: calc(100% - var(--mechanic-input-height-half));
  max-height: 200px;
  object-fit: contain;
  background-color: #f7f7f7;
  border-radius: 8px;
}

.input {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
  outline: none;
}

.browseButton {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0 var(--mechanic-input-height-half) 0 0;
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: var(--mechanic-input-height-half);
  background: none;
  color: inherit;
  vertical-align: middle;
  text-align: right;
  cursor: pointer;
}

.focus .container {
  outline: none;
  border: 2px solid currentColor;
  padding-left: calc(var(--mechanic-input-height-quart) - 1px);
}
.focus .browseButton {
  padding-right: calc(var(--mechanic-input-height-half) - 1px);
}

.focus .container .preview {
  left: calc(var(--mechanic-input-height-quart) - 1px);
  right: calc(var(--mechanic-input-height-quart) - 1px);
}

.invalid {
}

.disabled {
  opacity: 0.4;
}

.disabled .browseButton {
  cursor: default;
}

.container:not([disabled]):hover {
}

.container:active {
  transform: translateY(1px);
}

.plus {
  margin-top: 0.2em;
}
