.form-file {
  position: relative;
  height: $form-file-height;
}

.form-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;

  &:focus-within ~ .form-file-label {
    border-color: $form-file-focus-border-color;
    box-shadow: $form-file-focus-box-shadow;
  }

  // Use disabled attribute in addition of :disabled pseudo-class
  // See: https://github.com/twbs/bootstrap/issues/28247
  &[disabled] ~ .form-file-label .form-file-text,
  &:disabled ~ .form-file-label .form-file-text {
    background-color: $form-file-disabled-bg;
    border-color: $form-file-disabled-border-color;
  }
}

.form-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  height: 100%;
  border-color: $form-file-border-color;
  @include border-radius($form-file-border-radius);
  @include box-shadow($form-file-box-shadow);
}

.form-file-text {
  display: block;
  flex-grow: 1;
  padding: $form-file-padding-y $form-file-padding-x;
  overflow: hidden;
  font-family: $form-file-font-family;
  font-weight: $form-file-font-weight;
  line-height: $form-file-line-height;
  color: $form-file-color;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: $form-file-bg;
  border-color: inherit;
  border-style: solid;
  border-width: $form-file-border-width;
  @include border-left-radius(inherit);
}

.form-file-button {
  display: block;
  flex-shrink: 0;
  padding: $form-file-padding-y $form-file-padding-x;
  margin-left: -$form-file-border-width;
  line-height: $form-file-line-height;
  color: $form-file-button-color;
  @include gradient-bg($form-file-button-bg);
  border-color: inherit;
  border-style: solid;
  border-width: $form-file-border-width;
  @include border-right-radius(inherit);
}

.form-file-sm {
  height: $form-file-height-sm;
  @include font-size($form-file-font-size-sm);

  .form-file-text,
  .form-file-button {
    padding: $form-file-padding-y-sm $form-file-padding-x-sm;
  }
}

.form-file-lg {
  height: $form-file-height-lg;
  @include font-size($form-file-font-size-lg);

  .form-file-text,
  .form-file-button {
    padding: $form-file-padding-y-lg $form-file-padding-x-lg;
  }
}