.student-id {
  $student-id-aspect-ratio-height: (math.div(45, 35)) * 100%; //35x45 mmm

  &-image {
    position: relative;
    width: 100%;
    padding-top: calc(#{math.div($student-id-aspect-ratio-height, 2)} - #{$width-border});
    padding-bottom: calc(#{math.div($student-id-aspect-ratio-height, 2)} - #{$width-border});
    border: $width-border solid color("border");

    & img {
      position: absolute;
      top: 0;
      max-height: 100%;
    }

    &--placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 0;
      overflow-y: visible;
      color: color("foreground-secondary");

      .icon {
        order: -1;
        margin-bottom: spacing(-1);
      }

      .button {
        min-height: spacing($button-padding-vertical, $times: 2, $add: line-height("single", $include-calc: false)); //fix for safari otherwise rendering a clipped button
      }
    }

    &.form__field__file-upload { //Specificyytue hack
      padding-top: calc(#{math.div($student-id-aspect-ratio-height, 2)} - #{$width-border});
      padding-bottom: calc(#{math.div($student-id-aspect-ratio-height, 2)} - #{$width-border});
      margin-top: 0;
    }
  }
}