.wsf-form input[type=file].wsf-field {
  cursor: pointer;
  overflow: hidden;
}

.wsf-form input[type=file].wsf-field::file-selector-button {
  -webkit-appearance: none;
  background-color: var(--wsf-field-file-button-color-background);
  border: none;
  -webkit-border-end: var(--wsf-field-border);
  border-inline-end: var(--wsf-field-border);
  border-radius: 0;
  color: var(--wsf-field-file-button-color);
  cursor: pointer;
  font-family: var(--wsf-field-font--wsf-field-file-button-selector-family);
  font-size: var(--wsf-field-font-size);
  font-weight: var(--wsf-field-font-weight);
  height: var(--wsf-field-height);
  line-height: var(--wsf-field-line-height);
  margin: calc(-1 * var(--wsf-field-padding-vertical)) calc(-1 * var(--wsf-field-padding-horizontal));
  -webkit-margin-end: var(--wsf-field-padding-horizontal);
  margin-inline-end: var(--wsf-field-padding-horizontal);
  padding: var(--wsf-field-padding);
  touch-action: manipulation;
}

.wsf-form input[type=file].wsf-field::-webkit-file-upload-button {
  -webkit-appearance: none;
  background-color: var(--wsf-field-file-button-color-background);
  border: none;
  -webkit-border-end: var(--wsf-field-border);
  border-inline-end: var(--wsf-field-border);
  border-radius: 0;
  color: var(--wsf-field-file-button-color);
  cursor: pointer;
  font-family: var(--wsf-field-font-family);
  font-size: var(--wsf-field-font-size);
  font-weight: var(--wsf-field-font-weight);
  height: var(--wsf-field-height);
  line-height: var(--wsf-field-line-height);
  margin: calc(-1 * var(--wsf-field-padding-vertical)) calc(-1 * var(--wsf-field-padding-horizontal));
  -webkit-margin-end: var(--wsf-field-padding-horizontal);
  margin-inline-end: var(--wsf-field-padding-horizontal);
  padding: var(--wsf-field-padding);
  touch-action: manipulation;
}

.wsf-form input[type=file].wsf-field:enabled::file-selector-button:hover, .wsf-form input[type=file].wsf-field:enabled::-webkit-file-upload-button:hover {
  background-color: var(--wsf-field-file-button-color-background-hover);
  color: var(--wsf-field-file-button-color-hover);
}

.wsf-form input[type=file].wsf-field:enabled::file-selector-button:focus, .wsf-form input[type=file].wsf-field:enabled::-webkit-file-upload-button:focus {
  background-color: var(--wsf-field-file-button-color-background-focus);
  color: var(--wsf-field-file-button-color-focus);
  outline: 0;
}

.wsf-form input[type=file].wsf-field:disabled {
  cursor: not-allowed;
}

.wsf-form input[type=file].wsf-field:disabled::file-selector-button, .wsf-form input[type=file].wsf-field:disabled::-webkit-file-upload-button {
  color: var(--wsf-field-file-button-color);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--wsf-field-file-button-color);
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone {
  background-color: var(--wsf-field-file-dropzonejs-color-background);
  border: var(--wsf-field-file-dropzonejs-border-width) var(--wsf-field-file-dropzonejs-border-style) var(--wsf-field-file-dropzonejs-border-color);
  border-radius: var(--wsf-field-file-dropzonejs-border-radius);
  padding: var(--wsf-field-file-dropzonejs-padding-vertical) var(--wsf-field-file-dropzonejs-padding-horizontal) 0;
  transition: background-color var(--wsf-form-transition), border-color var(--wsf-form-transition), box-shadow var(--wsf-form-transition);
  cursor: pointer;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .dz-message {
  color: var(--wsf-field-color-placeholder);
  margin-bottom: var(--wsf-field-file-dropzonejs-padding-vertical);
  text-align: center;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone.dz-started .dz-message {
  display: none;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-dropzonejs-previews {
  pointer-events: none;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-dropzonejs-preview {
  cursor: move;
  pointer-events: all;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background);
  border-radius: var(--wsf-field-file-dropzonejs-progress-border-radius);
  height: var(--wsf-field-file-dropzonejs-progress-height);
  margin-top: var(--wsf-field-file-dropzonejs-progress-gap);
  overflow: hidden;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress .wsf-upload {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background-bar);
  height: 100%;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress.wsf-progress-success .wsf-upload {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background-complete);
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .dz-complete .wsf-progress {
  display: none;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-invalid-feedback {
  display: block;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"]:enabled ~ .dropzone.dz-drag-hover {
  background-color: var(--wsf-field-color-background-focus);
  border-color: var(--wsf-field-border-color-focus);
  box-shadow: var(--wsf-field-box-shadow);
  color: var(--wsf-field-color-focus);
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"]:disabled ~ .dropzone {
  background-color: var(--wsf-field-color-background-disabled);
  border-color: var(--wsf-field-border-color-disabled);
  color: var(--wsf-field-color-disabled);
  cursor: not-allowed;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wsf-form input[type=text].wsf-field[data-file-type="dropzonejs"]:disabled ~ .dropzone .wsf-dropzonejs-preview {
  opacity: .5;
}

.wsf-form input[type=file].wsf-field::file-selector-button {
  transition: background-color var(--wsf-form-transition), border-color var(--wsf-form-transition), box-shadow var(--wsf-form-transition);
}

.wsf-form input[type=file].wsf-field::-webkit-file-upload-button {
  transition: background-color var(--wsf-form-transition), border-color var(--wsf-form-transition), box-shadow var(--wsf-form-transition);
}

.wsf-form.wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone,
.wsf-form .wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone {
  background-color: var(--wsf-field-color-background-invalid);
  border-color: var(--wsf-field-border-color-invalid);
}

.wsf-form.wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone.dz-drag-hover,
.wsf-form .wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone.dz-drag-hover {
  box-shadow: var(--wsf-field-box-shadow);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field::file-selector-button {
  background-color: var(--wsf-field-file-button-color-background-alt);
  color: var(--wsf-field-file-button-color-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field::-webkit-file-upload-button {
  background-color: var(--wsf-field-file-button-color-background-alt);
  color: var(--wsf-field-file-button-color-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:enabled::file-selector-button:hover {
  background-color: var(--wsf-field-file-button-color-background-hover-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:enabled::-webkit-file-upload-button:hover {
  background-color: var(--wsf-field-file-button-color-background-hover-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:enabled::file-selector-button:focus {
  background-color: var(--wsf-field-file-button-color-background-focus-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:enabled::-webkit-file-upload-button:focus {
  background-color: var(--wsf-field-file-button-color-background-focus-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:disabled::file-selector-button {
  color: var(--wsf-field-file-button-color-alt);
  -webkit-text-fill-color: var(--wsf-field-file-button-color-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=file].wsf-field:disabled::-webkit-file-upload-button {
  color: var(--wsf-field-file-button-color-alt);
  -webkit-text-fill-color: var(--wsf-field-file-button-color-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone {
  background-color: var(--wsf-field-file-dropzonejs-color-background-alt);
  border: var(--wsf-field-file-dropzonejs-border-width) var(--wsf-field-file-dropzonejs-border-style) var(--wsf-field-file-dropzonejs-border-color-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .dz-message {
  color: var(--wsf-field-color-placeholder-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress .wsf-upload {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background-bar-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"] ~ .dropzone .wsf-progress.wsf-progress-success .wsf-upload {
  background-color: var(--wsf-field-file-dropzonejs-progress-color-background-complete-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"]:enabled ~ .dropzone.dz-drag-hover {
  background-color: var(--wsf-field-color-background-focus-alt);
  border-color: var(--wsf-field-border-color-focus-alt);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] input[type=text].wsf-field[data-file-type="dropzonejs"]:disabled ~ .dropzone {
  background-color: var(--wsf-field-color-background-disabled-alt);
  border-color: var(--wsf-field-border-color-disabled-alt);
  color: var(--wsf-field-color-disabled);
}

html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt].wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone,
html.wsf-styler-scheme-alt .wsf-form[data-wsf-style-has-alt] .wsf-validated input[type=text].wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone {
  background-color: var(--wsf-field-color-background-invalid-alt);
  border-color: var(--wsf-field-border-color-invalid-alt);
}

[dir="rtl"] input[type="file"].dz-hidden-input {
  display: none;
}
