ino-input-file {
  /**
   * @prop --ino-input-file-box-height: Height of the drag and drop window
   * @prop --ino-input-file-box-width: Width of the drag and drop window
   */
  --input-file-box-height: var(--ino-input-file-box-height, 300px);
  --input-file-box-width: var(--ino-input-file-box-width, 100%);
}

ino-input-file .ino-input-file__native-element {
  visibility: hidden;
  height: 0;
  width: 0;
}
ino-input-file .ino-input-file__dnd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px dashed #3d40f5;
  border-radius: 20px;
  height: var(--input-file-box-height);
  width: var(--input-file-box-width);
}
ino-input-file .ino-input-file__dnd .ino-input-file__dnd-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 15px;
}
ino-input-file .ino-input-file__dnd .ino-input-file__dnd-text label {
  color: #3d40f5;
  font-family: var(--ino-font-family, Lato, Verdana, sans-serif);
  font-size: 1.25rem;
  font-weight: 400;
}
ino-input-file .ino-input-file__dnd.ino-input-file__dnd-dragover:not(.ino-input-file__dnd-disabled) {
  background-color: #f5f5ff;
}
ino-input-file .ino-input-file__dnd.ino-input-file__dnd-disabled {
  background-color: #e7e7e7;
  border: 2px solid #e7e7e7;
}
ino-input-file .ino-input-file__dnd.ino-input-file__dnd-disabled label {
  color: #777777;
}