dvn-file-input {
  --width: inherit;
  --min-width: 256px;
  /* fits the iPhone5 screen wrapped inside a card view */
  --base-color: var(--color-primary);
  --border-color: var(--color-border);
  --margin: var(--spacing-unit) calc(1.5 * var(--spacing-unit));
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: var(--margin);
  width: var(--width);
  min-width: var(--min-width);
  outline: none;
  color: var(--color-text);
  font-family: var(--font-family);
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius);
  background-color: var(--color-input-background);
  vertical-align: top;
  font-size: var(--font-size);
  min-height: calc(var(--height) + var(--spacing-unit) * 2);
  padding: var(--padding);
  /* for removing inner shadow in mobile safari */
  -webkit-appearance: none;
  /* Feedback */
  /* Scale */
  /* Progress */
}
dvn-file-input.leaned {
  --margin: 0;
}
dvn-file-input.disabled {
  opacity: 0.6;
  cursor: default;
}
dvn-file-input.warning {
  --base-color: var(--color-warning);
  --border-color: var(--color-warning);
}
dvn-file-input.error {
  --base-color: var(--color-danger);
  --border-color: var(--color-danger);
}
dvn-file-input.small {
  --font-size: var(--font-size-small);
  --height: 24px;
  --padding: calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit));
}
dvn-file-input.medium {
  --font-size: var(--font-size-medium);
  --height: 32px;
  --padding: var(--spacing-unit);
}
dvn-file-input.large {
  --font-size: var(--font-size-large);
  --height: 40px;
  --padding: calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit));
}
dvn-file-input.progressing.small {
  --padding: calc(var(--spacing-unit) * 0.75) calc(6 * var(--spacing-unit)) calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit));
}
dvn-file-input.progressing.medium {
  --padding: var(--spacing-unit) calc(7 * var(--spacing-unit)) var(--spacing-unit) calc(2 * var(--spacing-unit));
}
dvn-file-input.progressing.large {
  --padding: calc(1.5 * var(--spacing-unit)) calc(8 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit));
}
dvn-file-input .progress-container {
  position: absolute;
  right: calc(2 * var(--spacing-unit));
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
dvn-file-input input {
  display: none;
}
dvn-file-input textarea {
  height: unset;
  border-bottom-right-radius: 3px;
}
dvn-file-input input:disabled, dvn-file-input textarea:disabled {
  cursor: unset;
}
dvn-file-input input:hover:enabled, dvn-file-input textarea:hover:enabled {
  border-color: var(--base-color);
}
dvn-file-input input:focus:enabled, dvn-file-input textarea:focus:enabled {
  border-color: var(--base-color);
  /*box-shadow: 0 0px 3px var(--base-color);*/
  /*box-shadow: 0px 0px 0px 1px var(--base-color) inset;*/
  box-shadow: 0px 0px 0px 1px var(--base-color);
}
dvn-file-input input::placeholder, dvn-file-input textarea::placeholder {
  color: var(--color-text-secondary);
}
dvn-file-input.with-multiple-values .file-container {
  margin-bottom: var(--spacing-unit);
}
dvn-file-input .placeholder {
  cursor: pointer;
  color: var(--color-text-secondary);
}
dvn-file-input .placeholder dvn-icon-button {
  margin-right: var(--spacing-unit);
}
dvn-file-input .file-container {
  min-height: var(--height);
  display: flex;
  align-items: center;
  border-radius: var(--corner-radius);
  position: relative;
}
dvn-file-input .file-container:hover {
  background: var(--color-background-secondary);
}
dvn-file-input .file-container:hover .delete-button-container {
  display: block;
}
dvn-file-input .file-container .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height);
  width: var(--height);
  border-radius: var(--corner-radius);
  background: var(--color-neutral-lightest);
  margin-right: var(--spacing-unit);
}
dvn-file-input .file-container .delete-button-container {
  position: absolute;
  right: 0;
  display: none;
}