18F/identity-idp

@use 'uswds-core' as *;
@use 'utilities/typography' as *;
@forward 'usa-file-input';

// ===============================================
// Pending upstream Login Design System revisions:
// ===============================================

.usa-file-input__input {
  outline-offset: 2px;
}

.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending)
  .usa-file-input__target,
.usa-form-group--error .usa-file-input .usa-file-input__target,
.usa-form-group--success .usa-file-input .usa-file-input__target {
  border-width: 3px;
}

usa-file-input:not(
    .usa-file-input--has-value,
    .usa-file-input--value-pending,
    .usa-file-input--is-id-capture
  )
  .usa-form-group--success
  .usa-file-input
  .usa-file-input__target {
  height: 21rem;
  width: 12rem;
}

.usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) {
  .usa-file-input__target {
    border-color: color('primary');
    border-radius: 0.375rem;

    &:hover {
      border-color: color('primary-dark');
    }
  }
}

.usa-form-group--error .usa-file-input .usa-file-input__target {
  border-color: color('error');

  &:hover {
    border-color: color('error-dark');
  }
}

.usa-form-group--success .usa-file-input .usa-file-input__target {
  border-color: color('success');
  border-style: solid;

  &:hover {
    border-color: color('success-dark');
  }
}

.usa-file-input__banner-text {
  @include u-font-family('sans');
  @extend %h2;
  color: color('primary');
  display: block;
  letter-spacing: 0.4px;
  line-height: 1.5;
  // For content to appear as vertically centered, offset the larger line-height of the banner to
  // match the space below the drag text.
  margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) * 0.5;

  + .usa-file-input__drag-text {
    @include u-display('block');
    @include u-margin-top(2);
    line-height: 1.5rem;
  }
}

.usa-file-input.usa-file-input--single-value {
  .usa-file-input__preview {
    padding: 0;
  }

  .usa-file-input__preview-image {
    height: auto;
    margin-left: auto;
    margin-right: 0;
    width: 100%;
  }
}
.usa-file-input.usa-file-input--single-value:not(.usa-file-input--is-id-capture) {
  .usa-file-input__preview {
    width: 12rem;
  }
  .usa-file-input__target {
    width: 12rem;
  }
  .usa-file-input__preview-image {
    width: 12rem;
  }
}
.usa-file-input__input:not([disabled]):focus {
  outline: 3px solid color('primary');
  outline-offset: 6px;
}

.usa-file-input--has-value .usa-file-input__input:not([disabled]):focus {
  outline-offset: 4px;
}

.usa-file-input--value-pending .usa-file-input__box {
  background-color: color('primary-lighter');
}