type=“file”

{

border: none;
margin-top: units(1);
padding-left: 0;
padding-top: 0.2rem; // keeps input vertically centered on error state

}

.usa-file-input {

display: block;
max-width: units($theme-input-max-width);
width: 100%;

}

.usa-file-input__target {

border: 1px dashed color("base-light");
display: block;
font-size: size("body", "2xs");
margin-top: units(1);
position: relative;
text-align: center;
width: 100%;

&:hover {
  border-color: color("base");
}

}

.usa-file-input__target.has-invalid-file {

border-color: color("accent-warm");

}

.usa-file-input__accepted-files-message {

font-weight: bold;
margin: units(-3) 0 units(3);
pointer-events: none;
position: relative;
z-index: 3;

}

.has-invalid-file .usa-file-input__accepted-files-message {

color: color("secondary-dark");

}

.usa-file-input__choose {

@include typeset-link;
font-weight: normal;

}

.usa-file-input__instructions {

display: inline-block;
padding: units(4) units(2);
pointer-events: none;
position: relative;
z-index: 3;

&.display-none {
  display: none;
}

}

.usa-file-input__box {

background: white;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 2;

}

.usa-file-input .usa-file-input__input {

cursor: pointer;
height: 100%;
left: 0;
margin: 0;
max-width: none;
position: absolute;
padding: units(1);
text-indent: -999em;
top: 0;
width: 100%;
z-index: 1;

}

.usa-file-input .usa-file-input__input::-webkit-file-upload-button {

display: none;

}

.usa-file-input–drag .usa-file-input__target {

border-color: color("primary");

}

.usa-file-input–drag .usa-file-input__box {

background-color: color("primary-lighter") !important;

}

.usa-file-input–drag .usa-file-input__preview {

opacity: 0.1;

}

.usa-file-input__preview-heading {

align-items: center;
background: color("primary-lighter");
display: flex;
font-weight: bold;
justify-content: space-between;
padding: units(1);
pointer-events: none;
position: relative;
z-index: 3;

}

.usa-file-input__preview {

align-items: center;
background: color("primary-lighter");
word-wrap: anywhere;
display: flex;
font-size: size("body", "3xs");
margin-top: units(1px);
padding: units(0.5) units(1);
pointer-events: none;
position: relative;
text-align: left;
z-index: 3;

&:last-child {
  margin-bottom: units(-3);
}

}

.usa-file-input__preview-image {

border: none;
display: block;
height: units(5);
margin-right: units(1);
object-fit: contain;
width: units(5);

}

.usa-file-input__preview-image.is-loading {

@include add-background-svg("loader");
background-position: center center;
background-repeat: no-repeat;
background-size: units(4);

}

.usa-file-input__preview-image–generic, .usa-file-input__preview-image–pdf, .usa-file-input__preview-image–word, .usa-file-input__preview-image–excel, .usa-file-input__preview-image–video {

background-position: center center;
background-repeat: no-repeat;
background-size: units(3);

}

.usa-file-input__preview-image–pdf {

@include add-background-svg("file-pdf");

}

.usa-file-input__preview-image–generic {

@include add-background-svg("file");

}

.usa-file-input__preview-image–word {

@include add-background-svg("file-word");

}

.usa-file-input__preview-image–excel {

@include add-background-svg("file-excel");

}

.usa-file-input__preview-image–video {

@include add-background-svg("file-video");

}

// Error states .usa-form-group–error .usa-file-input__target {

border-color: color("secondary-dark");
border-width: 2px;

}

// Disabled state .usa-file-input–disabled {

pointer-events: none;

.usa-file-input__instructions {
  opacity: 0.5;
}

.usa-file-input__box {
  background-color: color("disabled-light");
}

.usa-file-input__input[type] {
  cursor: default;
}

}