lf-file,
[lf-file] {
  .custom-file {
    height: auto;
  }

  .custom-file-input {
    height: 0;
    width: 0;
    z-index: -1;

    &:not(.is-readonly) + .custom-file-label {
      cursor: pointer;
    }
  }

  .custom-file-label {
    display: flex;
    align-items: stretch;
    padding: 0;
    font-size: $font-size-sm;
    height: auto;

    // Don't use Bootstrap's default "addon"
    &::after {
      display: none;
    }
  }

  // File label content (don't let it overflow to maintain a maximum height)
  .custom-file-label-content {
    flex: 1;
    padding: $input-padding-y-sm $input-padding-x-sm;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // Lighter placeholder colour
  .custom-file-label .placeholder {
    color: $input-placeholder-color;
  }

  // Clear button
  .close {
    display: flex;
    align-items: center;
    margin-left: -$input-padding-x-sm;
    padding: 0 $input-padding-x-sm;
    font-size: 1.2rem;
  }

  // "Browse" text (mimic normal addons)
  .browse-text {
    display: flex;
    align-items: center;
    padding: $input-padding-y-sm $input-padding-x-sm;
    border-left: inherit;
    border-radius: 0 $border-radius $border-radius 0;
    background-color: $input-group-addon-bg;
    color: $input-group-addon-color;
  }

  // Make the "browse" text match addon colours when invalid/warning
  .is-invalid {
    .browse-text {
      background-color: $form-feedback-invalid-addon-bg;
      color: $white;
    }
  }
  .is-warning {
    .custom-file-input:focus + .custom-file-label {
      border-color: $form-feedback-warning-color;
      box-shadow: 0 0 0 1px $body-bg,
        0 0 0 $input-btn-focus-width rgba($form-feedback-warning-color, 0.25);
    }
    .custom-file-label {
      border-color: $form-feedback-warning-color;
    }
    .browse-text {
      background-color: $form-feedback-warning-addon-bg;
      color: $white;
    }
  }
}