.file-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: $border-radius-medium;
  background-color: $core-fleet-white;
  border: 1px solid $ui-fleet-black-10;
  padding: $pad-xlarge $pad-large;
  font-size: $x-small;
  text-align: center;

  .content-wrapper {
    @include content-wrapper();
  }

  &__error {
    border-color: $core-vibrant-red;
  }

  // when the file preview is showing, we want the padding to be
  // slightly smaller on the top and bottom.
  &__file-preview {
    padding: $pad-medium $pad-large;
  }

  &__internal-error {
    color: $core-vibrant-red;
  }

  &__graphics {
    display: flex;
    justify-content: center;
    gap: $pad-medium;
  }
  &__message {
    margin: 0;
    color: $ui-fleet-black-75;
  }

  &__additional-info {
    margin: 0;
    color: $ui-fleet-black-50;
  }

  input {
    display: none;
  }

  &__upload-button {
    // we handle the padding in the label so the entire button is clickable
    padding: 0;

    label,
    span {
      padding: $pad-small $pad-medium;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: $pad-small;

      &:hover {
        cursor: pointer;
      }
    }
  }
}