$stroke-width: 1px;
$number-circle-size: 30px;
$number-circle-size-large: 35px;
$top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");

@mixin step-nav-vertical-line ($line-style: solid) {
  content: "";
  position: absolute;
  z-index: 2;
  width: 0;
  height: 100%;
  border-left: $line-style $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
  background: govuk-colour("white");
}

@mixin step-nav-line-position {
  left: 0;
  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
}

@mixin step-nav-line-position-large {
  left: 0;
  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
}

// custom mixin as govuk-font does undesirable things at different breakpoints
// we want to ensure that both large and small step navs have the same size font on mobile
// this will stop text resizing if compatibility mode is turned off
@mixin step-nav-font($size, $tablet-size: $size, $weight: normal, $line-height: 1.3, $tablet-line-height: $line-height) {
  @include govuk-typography-common;
  font-size: $size + px;
  font-weight: $weight;
  line-height: $line-height;

  @include govuk-media-query($from: tablet) {
    font-size: $tablet-size + px;
    line-height: $tablet-line-height;
  }
}

// Adds a focus state for the chevron icon so that it turns black on button focus
@mixin step-nav-chevron-focus-state {
  .gem-c-step-nav__chevron-stroke {
    stroke: govuk-colour("black");
  }
}

.gem-c-step-nav {
  margin-bottom: govuk-spacing(6);

  &.gem-c-step-nav--large {
    @include govuk-media-query($from: tablet) {
      margin-bottom: govuk-spacing(9);
    }
  }

  .js-enabled &.js-hidden {
    display: none;
  }
}

.gem-c-step-nav__controls {
  padding: 3px 3px 0 0;
}

.gem-c-step-nav__button {
  color: $govuk-link-colour;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;

  &:focus {
    @include govuk-focused-text;
  }
}

// removes extra dotted outline from buttons in Firefox
// on focus (standard yellow outline unaffected)
.gem-c-step-nav__button::-moz-focus-inner {
  border: 0;
}

.gem-c-step-nav__button--title {
  @include step-nav-font(19, $weight: bold, $line-height: 1.2);
  display: inline-block;
  padding: govuk-spacing(1) 0 0;
  text-align: left;
  color: govuk-colour("black");
  width: 100%;

  .gem-c-step-nav--large & {
    @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);

    @include govuk-media_query($from: tablet) {
      padding-top: govuk-spacing(2);
    }
  }

  &:focus {
    box-shadow: 0 -4px govuk-colour("black");

    .gem-c-step-nav__toggle-link {
      color: govuk-colour("black");
    }

    @include step-nav-chevron-focus-state;
  }
}

.gem-c-step-nav__button--controls {
  @include step-nav-font(14, $line-height: 1);
  position: relative;
  z-index: 1; // this and relative position stops focus outline underlap with border of accordion
  margin: .5em 0 1.5em;
  padding: 0 0 govuk-spacing(1);

  &:hover .gem-c-step-nav__button-text {
    @include govuk-link-decoration;
    @include govuk-link-hover-decoration;
  }

  .gem-c-step-nav--large & {
    @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
  }

  &:focus {
    @include step-nav-chevron-focus-state;

    .gem-c-step-nav__button-text {
      text-decoration: none;
    }
  }
}

.gem-c-step-nav__title-text {
  display: block;
  margin-bottom: govuk-spacing(1);
}

.gem-c-step-nav__chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: govuk-em(5, 14);

  .gem-c-step-nav--large & {
    margin-left: govuk-em(5, 16);
  }

  svg {
    pointer-events: none;
  }
}

.gem-c-step-nav__button-text {
  display: inline-block;
  text-align: left;
  min-width: govuk-em(35, 14);

  .gem-c-step-nav--large & {
    min-width: govuk-em(40, 16);
  }
}

.gem-c-step-nav__button-text--all {
  min-width: govuk-em(87, 14);

  .gem-c-step-nav--large & {
    min-width: govuk-em(100, 16);
  }
}

.gem-c-step-nav__steps {
  padding: 0;
  margin: 0;
}

.gem-c-step-nav__step {
  position: relative;
  padding-left: govuk-em(govuk-spacing(6) + govuk-spacing(3), 16);
  list-style: none;

  // line down the side of a step
  &:after {
    @include step-nav-vertical-line;
    @include step-nav-line-position;
    top: govuk-em(govuk-spacing(3), 16);
  }

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      padding-left: govuk-em(govuk-spacing(9), 16);

      &:after { // stylelint-disable-line max-nesting-depth
        @include step-nav-line-position-large;
        top: govuk-em(govuk-spacing(6), 16);
      }
    }
  }
}

.gem-c-step-nav__step:last-child {
  // little dash at the bottom of the line
  &:before {
    content: "";
    position: absolute;
    z-index: 6;
    bottom: 0;
    left: 0;
    margin-left: $number-circle-size / 4;
    width: $number-circle-size / 2;
    height: 0;
    border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
  }

  &:after {
    height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
    height: calc(100% - #{govuk-spacing(3)});
  }

  .gem-c-step-nav__help:after {
    height: 100%;
  }

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      &:before {
        margin-left: $number-circle-size-large / 4;
        width: $number-circle-size-large / 2;
      }

      &:after {
        height: calc(100% - #{govuk-spacing(6)});
      }
    }
  }
}

.gem-c-step-nav__step--active {
  &:last-child:before,
  .gem-c-step-nav__circle--number,
  &:after,
  .gem-c-step-nav__help:after {
    border-color: govuk-colour("black");
  }
}

.gem-c-step-nav__circle {
  box-sizing: border-box;
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 0;
  width: govuk-em($number-circle-size, 16);
  height: govuk-em($number-circle-size, 16);
  color: govuk-colour("black");
  background: govuk-colour("white");
  border-radius: 100px;
  text-align: center;

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      top: 11px;
      width: govuk-em($number-circle-size-large, 19);
      height: govuk-em($number-circle-size-large, 19);
    }
  }
}

.gem-c-step-nav__circle--number {
  @include step-nav-font(16, $weight: bold, $line-height: 29px);
  border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");

  .gem-c-step-nav--large & {
    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 25px, $tablet-line-height: 34px);
  }

  .gem-c-step-nav__step--active & {
    background-color: govuk-colour("black");

    .gem-c-step-nav__circle-background {
      text-shadow: none;
      color: govuk-colour("white");
    }
  }
}

.gem-c-step-nav__circle--logic {
  @include step-nav-font(19, $weight: bold, $line-height: 28px);
  left: 3px;
  width: govuk-em($number-circle-size, 19);
  height: govuk-em($number-circle-size, 19);

  .gem-c-step-nav--large & {
    @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);

    @include govuk-media-query($from: tablet) {
      width: govuk-em($number-circle-size-large, 24);
      height: govuk-em($number-circle-size-large, 24);
    }
  }
}

// makes sure logic text expands to the left if text size is zoomed, preventing overlap
.gem-c-step-nav__circle-inner {
  float: right;
  min-width: 100%;
}

.gem-c-step-nav__circle-background {
  $shadow-offset: .1em;
  $shadow-colour: govuk-colour("white");

  // to make numbers readable for users zooming text only in browsers such as Firefox
  text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, $shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, -#{$shadow-offset} 0 0 $shadow-colour;
}

.gem-c-step-nav__circle-step-label,
.gem-c-step-nav__circle-step-colon {
  @include govuk-visually-hidden;
}

.gem-c-step-nav__header {
  border-top: $top-border;
  padding: govuk-spacing(1) 0 govuk-spacing(6);

  .gem-c-step-nav--large & {
    padding-top: govuk-spacing(2);
  }

  .js-enabled & {
    padding: 0;
  }

  .gem-c-step-nav--active & {
    cursor: pointer;
  }

  &:hover {
    .gem-c-step-nav__button:not(:focus),
    .gem-c-step-nav__circle {
      color: $govuk-link-colour;
    }

    .gem-c-step-nav__button-text {
      @include govuk-link-decoration;
      @include govuk-link-hover-decoration;
    }
  }
}

.gem-c-step-nav__title {
  @include govuk-text-colour;
  @include step-nav-font(19, $weight: bold, $line-height: 1.4);
  margin: 0;

  .gem-c-step-nav--large & {
    @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
  }
}

.gem-c-step-nav__toggle-link {
  @include step-nav-font(14, $line-height: 1.2);
  display: block;
  color: $govuk-link-colour;
  text-transform: capitalize;
  padding-bottom: govuk-spacing(6);

  .gem-c-step-nav--large & {
    @include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
  }
}

.gem-c-step-nav__panel {
  @include govuk-text-colour;
  @include step-nav-font(16);
  padding-bottom: govuk-spacing(5);

  .gem-c-step-nav--large & {
    @include step-nav-font(16, $tablet-size: 19);
  }

  .js-enabled &.js-hidden {
    display: none;
  }
}

// contents of the steps, such as paragraphs and links

.gem-c-step-nav__paragraph {
  padding-bottom: govuk-spacing(3);
  margin: 0;
  font-size: inherit;

  + .gem-c-step-nav__list {
    margin-top: -5px;
  }

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      padding-bottom: govuk-spacing(6);
    }
  }

  .gem-c-step-nav--large & + .gem-c-step-nav__list {
    @include govuk-media-query($from: tablet) {
      margin-top: -govuk-spacing(3);
    }
  }
}

.gem-c-step-nav__list {
  padding: 0;
  padding-bottom: 10px;
  list-style: none;

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      padding-bottom: 20px;
    }
  }
}

.gem-c-step-nav__list--choice {
  $links-margin: 20px;

  margin-left: $links-margin;
  list-style: disc;

  .gem-c-step-nav__list-item--active:before {
    left: -(govuk-spacing(6) + govuk-spacing(3)) - $links-margin;
  }

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      .gem-c-step-nav__list-item--active:before {
        left: -(govuk-spacing(9)) - $links-margin;
      }
    }
  }
}

.gem-c-step-nav__list-item {
  margin-bottom: 10px;
}

.gem-c-step-nav__link {
  @include govuk-link-common;
  @include govuk-link-style-default;
}

.gem-c-step-nav__link-active-context {
  @include govuk-visually-hidden;
}

.gem-c-step-nav__list-item--active {
  position: relative;

  &:before {
    box-sizing: border-box;
    content: "";
    position: absolute;
    z-index: 5;
    top: .6em; // position the dot to align with the first row of text in the link
    left: -(govuk-spacing(6) + govuk-spacing(3));
    margin-top: -($stroke-width / 2);
    margin-left: ($number-circle-size / 2);
    width: $number-circle-size / 2;
    height: $stroke-width;
    background: govuk-colour("black");
  }

  .gem-c-step-nav--large & {
    @include govuk-media-query($from: tablet) {
      &:before {
        left: -(govuk-spacing(9));
        margin-left: ($number-circle-size-large / 2);
      }
    }
  }

  .gem-c-step-nav__link {
    @include govuk-link-style-text;
  }
}

.gem-c-step-nav__context {
  display: inline-block;
  font-weight: normal;
  color: govuk-colour("dark-grey", $legacy: "grey-1");

  &:before {
    content: " \2013\00a0"; // dash followed by  
  }
}