.file-uploader {
  .file {
    width: 100%;
  }

  .file--invalid {
    color: $danger;
    margin-right: $spacing-xs;
  }


  .file-input {
    display: none;
  }


  .file__selected-file {
    display: grid;
    grid-gap: $spacing-xs $spacing-md;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    align-items: center;
    min-height: $spacing-xl;
    max-width: 320px;
    font-size: 14px;
    margin-top: $spacing-sm;
    background-color: $light-gray-2;
    word-break: break-word;
    border-radius: $border-radius;

    &:last-child {
      margin-bottom: 0;
    }

    .form-requirement {
      grid-column-start: 1;
      grid-column-end: -1;
      max-height: none;
      margin: 0;
    }

    .loading {
      width: 32px;
      height: 32px;
    }

    .inline-loading__animation .loading {
      margin-right: 0;
    }

    .file-filename {
      margin-left: $spacing-md;
      margin-bottom: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }


  .file__selected-file--invalid {
    background: lighten($danger, 35%);
    color: darken($danger, 30%);
  }

  .file__selected-file--valid {
    background: lighten($success, 40%);
    color: darken($success, 30%);
  }

  .file__selected-file--invalid + .form-requirement {
    max-height: 300px;
  }

  .file__state-container {
    display: flex;
    justify-content: center;
    min-width: 1.5rem;
    padding-right: $spacing-xs;
  }

  .file__state-container .file-invalid {
    height: $spacing-md;
    width: $spacing-md;
    // fill: $support-01;
    margin-right: $spacing-xs;
  }

  .file__state-container .file-close {
    height: $spacing-md;
    width: $spacing-md;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: $dark;

    &:focus {
      outline: none;
    }
  }

  .file__state-container .inline-loading__animation {
    margin-right: -$spacing-xs;
  }
}