// govuk_frontend_toolkit
@import 'css3';

$stroke-width: 2px;
$stroke-width-large: 3px;
$number-circle-size: 26px;
$number-circle-size-large: 35px;
$dot-size: 16px;
$top-border: solid 2px $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 $grey-2;
  background: $white;
}

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

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

.gem-c-step-nav {
  margin-bottom: $gutter;

  &.gem-c-step-nav--large {
    @include media(tablet) {
      margin-bottom: $gutter * 2;
    }
  }
}

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

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

// 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 _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
  display: inline-block;
  padding: 0;
  text-align: left;
  color: $black;

  .gem-c-step-nav--large & {
    @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
  }
}

.gem-c-step-nav__button--controls {
  @include _core-font-generator(14px, 14px, 14px, 1, 1, false);
  position: relative;
  z-index: 1; // this and relative position stops focus outline underlap with border of accordion
  padding: 0.5em 0;
  text-decoration: underline;

  &:hover {
    color: $link-hover-colour;
  }

  .gem-c-step-nav--large & {
    @include _core-font-generator(16px, 14px, 16px, 1, 1, false);
  }
}

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

.gem-c-step-nav__step {
  position: relative;
  padding-left: $gutter + $gutter-half;
  list-style: none;

  // line down the side of a step
  &:after {
    @include step-nav-vertical-line;
    @include step-nav-line-position;
    top: $gutter-half;
  }

  .gem-c-step-nav--large & {
    @include media(tablet) {
      padding-left: $gutter * 2;

      &:after {
        @include step-nav-line-position-large;
        top: $gutter;
      }
    }
  }
}

.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 $grey-2;
  }

  &:after {
    // scss-lint:disable DuplicateProperty
    height: -webkit-calc(100% - #{$gutter-half}); // fallback for iphone 4
    height: calc(100% - #{$gutter-half});
    // scss-lint:enable DuplicateProperty
  }

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

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

      &:after {
        height: calc(100% - #{$gutter});
      }
    }
  }
}

.gem-c-step-nav__step--active {
  &:last-child:before,
  .gem-c-step-nav__circle--number,
  &:after,
  .gem-c-step-nav__help:after {
    border-color: $black;
  }
}

.gem-c-step-nav__circle {
  @include box-sizing(border-box);
  position: absolute;
  z-index: 5;
  top: $gutter-half;
  left: 0;
  width: $number-circle-size;
  height: $number-circle-size;
  color: $black;
  background: $white;
  border-radius: 100px;
  text-align: center;

  .gem-c-step-nav--large & {
    @include media(tablet) {
      top: $gutter;
      width: $number-circle-size-large;
      height: $number-circle-size-large;
    }
  }
}

.gem-c-step-nav__circle--number {
  @include _core-font-generator(16px, 16px, 16px, 23px, 23px, false, bold);
  border: solid $stroke-width $grey-2;

  .gem-c-step-nav--large & {
    @include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);

    @include media(tablet) {
      border-width: $stroke-width-large;
    }
  }
}

.gem-c-step-nav__circle--logic {
  @include _core-font-generator(16px, 16px, 16px, 28px, 28px, false, bold);

  .gem-c-step-nav--large & {
    @include _core-font-generator(19px, 16px, 19px, 34px, 28px, false, bold);
  }
}

// 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: 0.1em;
  $shadow-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__header {
  padding: $gutter-half 0;
  border-top: $top-border;

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

  &:hover {
    .gem-c-step-nav__button,
    .gem-c-step-nav__circle {
      color: $link-colour;
    }

    .gem-c-step-nav__toggle-link {
      text-decoration: underline;
    }
  }

  .gem-c-step-nav--large & {
    @include media(tablet) {
      padding: $gutter 0;
    }
  }
}

.gem-c-step-nav__title {
  @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
  margin: 0;

  .gem-c-step-nav--large & {
    @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
  }
}

.gem-c-step-nav__toggle-link {
  @include _core-font-generator(14px, 14px, 14px, 1.2, 1.2, false);
  display: block;
  color: $link-colour;
  // core-font-generator sets this to none, so we need to override
  text-transform: capitalize !important;

  .gem-c-step-nav--large & {
    @include _core-font-generator(16px, 14px, 16px, 1.2, 1.2, false);
  }
}

.gem-c-step-nav__panel {
  @include _core-font-generator(16px, 16px, 16px);

  .gem-c-step-nav--large & {
    @include _core-font-generator(19px, 16px, 19px);
  }
}

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

.gem-c-step-nav__paragraph {
  padding-bottom: $gutter-half;
  margin: 0;
  font-size: inherit;

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

    .gem-c-step-nav--large & {
      @include media(tablet) {
        margin-top: -$gutter-half;
      }
    }
  }

  .gem-c-step-nav--large & {
    @include media(tablet) {
      padding-bottom: $gutter;
    }
  }
}

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

  .gem-c-step-nav--large & {
    @include media(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: -($gutter + $gutter-half) - $links-margin;
  }

  .gem-c-step-nav--large & {
    @include media(tablet) {
      .gem-c-step-nav__list-item--active:before {
        left: -($gutter * 2) - $links-margin;
      }
    }
  }
}

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

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

  &:before {
    @include box-sizing(border-box);
    content: "";
    position: absolute;
    z-index: 5;
    top: 0.6em; // position the dot to align with the first row of text in the link
    left: -($gutter + $gutter-half);
    margin-left: ($number-circle-size / 2) - ($dot-size / 2);
    width: $dot-size;
    height: $dot-size;
    margin-top: -($dot-size / 2);
    background: $black;
    border: solid 2px $white;
    border-radius: 100px;
  }

  .gem-c-step-nav--large & {
    @include media(tablet) {
      &:before {
        left: -($gutter * 2);
        margin-left: ($number-circle-size-large / 2) - ($dot-size / 2);
      }
    }
  }

  .gem-c-step-nav__link {
    color: $black;
    text-decoration: none;

    &:visited,
    &:active,
    &:link {
      color: $black;
    }
  }
}

.gem-c-step-nav__context {
  display: inline-block;
  font-weight: normal;
  color: $grey-1;

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