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

  // 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;
  }

  &__selected-file {
    display: flex;
    gap: $pad-medium;
    align-items: center;
    width: 100%;
    text-align: left;

    &--details {
      &--name {
        font-size: $x-small;
        font-weight: $bold;
      }

      &--platform {
        font-size: $xx-small;
        color: $ui-fleet-black-75;
      }
    }
  }

  &__graphics {
    display: flex;
    align-items: 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 {
    margin-top: 8px;
    // we handle the padding in the label so the entire button is clickable
    padding: 0;
  }

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

    &:hover {
      cursor: pointer;
    }
  }
}