@include govuk-exports("govuk/component/back-link") {
  // Component font-size on the Frontend (used for calculations)
  $font-size: 16;

  // Size of chevron (excluding border)
  $chevron-size: govuk-em(7px, $font-size);

  // Size of chevron border
  $chevron-border-min-width: 1px;
  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);

  // Colour of chevron
  $chevron-border-colour: $govuk-secondary-text-colour;

  .govuk-back-link {
    @include govuk-typography-responsive($size: $font-size);
    @include govuk-link-common;
    @include govuk-link-style-text;

    display: inline-block;
    position: relative;

    margin-top: govuk-spacing(3);
    margin-bottom: govuk-spacing(3);

    // Allow space for the arrow
    padding-left: govuk-em(14px, $font-size);
  }

  // Prepend left pointing chevron
  .govuk-back-link:before {
    content: "";
    display: block;

    // Vertically align with the parent element
    position: absolute;

    @if $govuk-use-legacy-font {
      // Begin adjustments for font baseline offset
      // These should be removed when legacy font support is dropped
      $offset: govuk-em(1px, $font-size);
      top: $offset * -1;
      bottom: $offset;
    } @else {
      top: 0;
      bottom: 0;
    }

    left: govuk-em(3px, $font-size);

    width: $chevron-size;
    height: $chevron-size;

    margin: auto 0;

    -webkit-transform: rotate(225deg);

        -ms-transform: rotate(225deg);

            transform: rotate(225deg);

    border: solid;
    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
    border-color: $chevron-border-colour;

    @supports (border-width: unquote("max(0px)")) {
      border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;

      // Ensure that the chevron never gets smaller than 16px
      font-size: unquote("max(#{$font-size * 1px}, 1em)");
    }

    // Fall back to a less than sign for IE8
    @include _govuk-if-ie8 {
      content: "\003c"; // Less than sign (<)
      width: auto;
      height: auto;
      border: 0;
      color: $chevron-border-colour;

      // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
      // so fall back to using another sans-serif font to render the chevron.
      font-family: Arial, sans-serif;
    }
  }

  .govuk-back-link:focus:before {
    border-color: $govuk-focus-text-colour;
  }

  .govuk-back-link:after {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    bottom: -14px;
    left: 0;
  }

  .govuk-back-link--inverse {
    @include govuk-link-style-inverse;

    &:before {
      border-color: currentcolor;
    }
  }
}