fleet/frontend/components/FileUploader/_styles.scss

.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;

  &__outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $pad-large;
  }

  &__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $pad-small;

    input {
      display: none;
    }
  }

  // Cannot hide all input as preview may include dropdown input that needs to be shown
  .file-input-visually-hidden {
    display: none;
  }

  &__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;
    text-align: center;
  }

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

  &__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;
      }
    }
  }
}