:root {
  --icon-file: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.80551 3.15271C8.0779 2.86808 8.49169 3.30047 8.2193 3.58511L3.26569 8.76142C3.02605 9.01184 2.90548 9.34314 2.90548 9.67288C2.90548 10.8301 4.2451 11.3838 5.01017 10.5843L10.7661 4.56967C11.1977 4.11861 11.4135 3.52445 11.4135 2.93029C11.4135 0.855413 9.00819 -0.152474 7.62689 1.29092L1.51972 7.67266C-0.471843 9.7522 0.91094 13.3856 3.78665 13.3856C4.60829 13.3856 5.42992 13.0605 6.0521 12.4088L11.3585 6.86386C11.6309 6.57922 12.0447 7.01162 11.7723 7.29625L6.46589 12.8412C4.10667 15.3065 0 13.5878 0 10.0415C0 9.02739 0.369139 8.01017 1.10593 7.24026L7.21459 0.856969C8.96056 -0.96594 11.9985 0.304808 11.9985 2.92874C11.9985 3.67999 11.7261 4.43124 11.1799 5.00051L5.42396 11.0152C4.29124 12.1988 2.32052 11.3714 2.32052 9.67132C2.32052 9.18293 2.49764 8.6961 2.85041 8.32747L7.80551 3.15271Z' /%3E%3C/svg%3E");
  --icon-file-check: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.90479 0.397561C7.85669 0.308367 7.7921 0.229907 7.7147 0.166687C7.55948 0.0396856 7.36213 -0.0184 7.16576 0.0051244C6.9694 0.0286488 6.78999 0.13187 6.66675 0.29223L2.96693 5.13445C2.92627 5.18816 2.86692 5.22315 2.80164 5.23188C2.73637 5.24061 2.6704 5.22239 2.61794 5.18114L1.20801 4.05126C1.05048 3.92523 0.85115 3.86929 0.653871 3.89575C0.456593 3.92222 0.277525 4.02891 0.156062 4.19236C0.0345985 4.35582 -0.0193108 4.56264 0.00619296 4.76734C0.0316967 4.97203 0.134525 5.15783 0.292056 5.28386L2.07897 6.71464C2.21482 6.8278 2.37198 6.91022 2.54035 6.9566C2.70872 7.00299 2.88459 7.01231 3.05664 6.98398C3.2287 6.95564 3.39314 6.89027 3.53939 6.79206C3.68565 6.69386 3.81048 6.56499 3.90588 6.41375L7.83769 1.25922C7.89896 1.1792 7.9444 1.0874 7.97138 0.989107C7.99837 0.890813 8.00638 0.787957 7.99495 0.686442C7.98352 0.584928 7.95288 0.486755 7.90479 0.397561Z' fill='%232A8721' /%3E%3C/svg%3E");
  --icon-file-delete: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_7390)'%3E%3Cpath d='M15.6316 2.74225H0.36836C0.165593 2.74225 0 2.57595 0 2.37231C0 2.16868 0.163903 2.00238 0.36836 2.00238H15.6333C15.8361 2.00238 16.0017 2.16868 16.0017 2.37231C16.0017 2.57595 15.8378 2.74225 15.6333 2.74225H15.6316Z' fill='%23824199' /%3E%3Cpath d='M10.2988 2.6014C10.0842 1.51875 9.13963 0.739852 8.03962 0.739852C6.93961 0.739852 5.99505 1.51875 5.78215 2.6014L5.04712 2.45377C5.2313 1.52384 5.83622 0.733064 6.68277 0.315615C7.52932 -0.101833 8.52288 -0.10353 9.36943 0.315615C10.216 0.734761 10.8209 1.52554 11.0051 2.45377L10.2988 2.6014Z' fill='%23824199' /%3E%3Cpath d='M12.9619 17H3.03816C2.43999 16.9763 1.96349 16.4926 1.94828 15.8919C1.69313 11.6309 1.44812 7.36477 1.21325 3.09017C1.20649 2.99174 1.24029 2.89502 1.3045 2.82205C1.36871 2.74908 1.46164 2.70326 1.55796 2.69817C1.75903 2.68969 1.93139 2.84241 1.94659 3.04605C2.19667 7.31556 2.44168 11.5834 2.68162 15.8478C2.685 16.0514 2.84046 16.2211 3.04153 16.2398H12.9568C13.1596 16.2211 13.3151 16.0514 13.3167 15.8478C13.5668 11.5834 13.8118 7.31556 14.0518 3.04605C14.0518 2.94762 14.0957 2.85429 14.1684 2.78811C14.241 2.72193 14.3373 2.68969 14.4337 2.69817C14.5317 2.70326 14.6229 2.74908 14.6871 2.82205C14.7513 2.89502 14.7851 2.99174 14.7784 3.09017C14.5283 7.35968 14.2833 11.6275 14.0433 15.8936C14.0281 16.4943 13.5516 16.978 12.9535 17.0017L12.9619 17Z' fill='%23824199' /%3E%3Cpath d='M5.20767 14.2662C5.01335 14.2662 4.85113 14.1152 4.83931 13.9184L4.35436 5.11969C4.34591 5.02127 4.37801 4.92455 4.44391 4.84988C4.50981 4.77521 4.60105 4.73109 4.70075 4.7294C4.80044 4.71922 4.89845 4.74976 4.97279 4.81594C5.04714 4.88212 5.09107 4.97715 5.09107 5.07557L5.57772 13.8742C5.58616 13.9727 5.55406 14.0711 5.48816 14.1441C5.42226 14.2187 5.33102 14.2628 5.23132 14.2662H5.20936H5.20767Z' fill='%23824199' /%3E%3Cpath d='M10.7923 14.2662C10.6943 14.2628 10.6014 14.2187 10.5355 14.1441C10.4696 14.0711 10.4375 13.9727 10.4459 13.8742L10.9325 5.07557C10.9342 4.97545 10.9782 4.88212 11.0508 4.81594C11.1252 4.74976 11.2232 4.71922 11.3229 4.7294C11.4209 4.73279 11.5138 4.77691 11.5797 4.84988C11.6456 4.92285 11.6777 5.02127 11.6693 5.11969L11.1826 13.9184C11.1776 14.0168 11.1319 14.1084 11.0593 14.1729C10.9866 14.2374 10.8903 14.2713 10.7923 14.2645V14.2662Z' fill='%23824199' /%3E%3Cpath d='M8.0041 14.2662C7.80134 14.2662 7.63574 14.0999 7.63574 13.8963V5.0976C7.63574 4.89396 7.80134 4.72766 8.0041 4.72766C8.10042 4.72766 8.19504 4.76669 8.26432 4.83627C8.3336 4.90584 8.37246 4.99917 8.37246 5.0976V13.8963C8.37246 13.993 8.3336 14.088 8.26432 14.1576C8.19504 14.2272 8.10211 14.2662 8.0041 14.2662Z' fill='%23824199' /%3E%3C/g%3E%3C/svg%3E");
}

.file {
  position: relative;
}

.file-label {
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.file-label::after {
  content: var(--icon-file);
  filter: invert(32%) sepia(9%) saturate(4782%) hue-rotate(243deg)
    brightness(94%) contrast(89%);
  margin-right: 0.5rem;
  position: relative;
  top: 2px;
}

.file-input {
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.file.active ~ .file-upload {
  padding-top: 0.5rem;
}

.file-upload-item {
  color: var(--gray-800);
  display: flex;
  margin-bottom: 0.25rem;
  width: 100%;
}

@media (min-width: 768px) {
  .file-upload-item {
    display: table-row;
  }
}

@media (min-width: 768px) {
  .file-upload-item > div {
    display: table-cell;
  }
}

.file-upload-item::before {
  content: var(--icon-file-check);
  padding-left: 0.5rem;
}

.file-upload-delete {
  cursor: pointer;
}

.file-upload-delete::before {
  content: var(--icon-file-delete);
}

.file-upload-name {
  overflow: hidden;
  padding-left: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 768px) {
  .file-upload-name {
    width: auto;
  }
}

.file-upload-size {
  min-width: 90px;
  padding-left: 1rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .file-upload-size {
    min-width: inherit;
  }
}