$dropzone-background: rgba(0,0,0,0.05);
$dropzone-border-color: rgba(0,0,0,0.1);

.modal-dialog.file-input,
.file-input {
  min-width: 304px;
  width: 50%;
}

.file-input-intro {
  margin-top: 1em;
}

.file-input-input {
  display: none;
}

.file-input-dropzone {
  align-items: center;
  background-color: $dropzone-background;
  border: 1px solid $dropzone-border-color;
  display: flex;
  justify-content: flex-end;
  margin-top: 1em;
  padding: 16px;
  position: relative;

  &:before {
    border: 3px dashed $dropzone-background;
    content: '';
    bottom: 4px;
    left: 4px;
    position: absolute;
    right: 4px;
    top: 4px;
    transition: 100ms all ease-in;
  }

  &.drag-over:before {
    border-color: #ccc;
  }
}

.file-input-dropzone-text {
  color: #444;
  flex-grow: 1;
  flex-shrink: 1;
  font-style: italic;
  overflow: hidden;
  text-overflow: hidden;
  white-space: nowrap;
}

.file-input-browse-button {
  flex-shrink: 0;
  margin-left: 1em;
}

.file-input-messages > .webutils-message {
  margin-top: 1em;
}

.file-view {
  align-items: center;
  display: flex;
  padding: 0.5em 0;
  transition: 100ms background ease-in;

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

.file-view + .file-view {
  border-top: 1px dotted #ccc;
}

.file-view-label {
  align-items: center;
  display: flex;
  flex-grow: 1;
}

.file-view-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-view-size {
  color: #666;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0.9em;
  margin: 0 0.5em;
}

.file-view-delete {
  align-items: center;
  background-color: #fff1f0;
  border: 1px solid rgba(216, 80, 48, 0.3);
  border-radius: 2px;
  color: #d85030;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  line-height: 1;
  margin-left: 1em;
  padding: 2px 4px;
  text-decoration: none;

  &:hover {
    text-shadow: 0 1px 1px #ccc;
  }
}