@import "../../base";

@include govuk-exports("idsk/component/stepper") {
  $idsk-stepper-link-colour: $govuk-link-colour;
  $idsk-stepper-link-hover-colour: govuk-colour("light-blue");

  .idsk-stepper {
    margin-left: 45px;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      z-index: 2;
      width: 18px;
      left: -46px;
      border-bottom: solid 2px govuk-colour("grey-5");
      @include mq(tablet) {
        left: -43px;
      }
      @include mq($from: desktop) {
        left: -40px;
      }
    }
  }

  .idsk-stepper__caption {
    padding-bottom: govuk-spacing(3);
  }

  .idsk-stepper__caption.govuk-caption-m {
    color: govuk-colour("black");
  }

  .idsk-stepper__subtitle-container {
    width: 100%;
    margin-bottom: -10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    @include mq($from: tablet) {
      margin-bottom: 0;
    }

    .idsk-stepper__subtitle--heading {
      width: 75%;
      padding-top: 0;

      @include mq($from: tablet) {
        padding-top: 0;
      }
    }

    .idsk-stepper__controls {
      width: 25%;
      padding: 0;
    }
  }

  .idsk-stepper__section,
  .idsk-stepper__section-title {
    position: relative;
    min-height: 75px;

    &:before {
      content: "";
      position: absolute;
      z-index: 2;
      height: 100%;
      border-left: solid 2px govuk-colour("grey-5");
      background: govuk-colour("white");
      top: 35px;
      left: -38px;
      @include mq(tablet) {
        left: -35px;
      }
      @include mq($from: desktop) {
        left: -32px;
      }
    }
  }

  .idsk-stepper__bolder-line .idsk-stepper__section-content .govuk-link:focus {
    &:before {
      content: "";
      position: absolute;
      z-index: 2;
      width: 18px;
      left: -35px;
      padding-top: 12px;
      border-bottom: solid 2px govuk-colour("black");
      @include mq(tablet) {
        left: -33px;
      }
      @include mq($from: desktop) {
        left: -32px;
      }
    }
  }

  .idsk-stepper__subtitle-container .govuk-heading-m {
    color: govuk-colour("blue");
    margin-left: -15px;
    margin-bottom: govuk-spacing(4);
  }

  .idsk-stepper__section-header .govuk-heading-m {
    color: govuk-colour("blue");
    margin-bottom: 0;
  }

  .idsk-stepper__bolder-line.idsk-stepper__section--expanded.idsk-stepper__section {
    &:before {
      border-color: govuk-colour("black");
    }

    .idsk-stepper__circle--number {
      border-color: govuk-colour("black");
    }
  }

  .idsk-stepper__section--last-item {
    &:before {
      height: calc(100% - 34px);
    }
  }

  .js-enabled .idsk-stepper__section-header.idsk-stepper__section-subtitle {
    @include govuk-font($size: 24, $weight: bold);
    color: $idsk-stepper-link-colour;
    padding-top: 35px;
    padding-bottom: govuk-spacing(4);
    cursor: text;
  }

  .idsk-stepper__circle {
    box-sizing: border-box;
    position: absolute;
    z-index: 5;
    top: 19px;
    left: -50px;
    width: 26px;
    height: 26px;
    color: govuk-colour("black");
    background: govuk-colour("white");
    border-radius: 100px;
    text-align: center;

    @include mq(tablet) {
      top: 24px;
      width: 32px;
      height: 32px;
    }

    @include mq($from: desktop) {
      left: -47px;
      top: 24px;
    }
  }

  .idsk-stepper__circle--letter {
    @include govuk-font($size: 19, $weight: bold);
    border: none;
    padding-top: 3px;

    @include mq($from: tablet) {
      padding-top: 1px;
    }
  }

  .idsk-stepper__circle--number {
    @include govuk-font($size: 19, $weight: bold);
    border: solid 2px govuk-colour("grey-5");
    padding-top: 3px;
    line-height: 0.9rem;

    @include mq($from: tablet) {
      padding-top: 1px;
      line-height: 1.5rem;
    }
  }

  // Borders between accordion sections
  .idsk-stepper__section {
    padding-top: govuk-spacing(3);
  }

  .idsk-stepper__section-header {
    padding-top: govuk-spacing(5);
    padding-bottom: govuk-spacing(5);
  }

  .idsk-stepper__section-heading {
    margin-top: 0; // Override browser default
    margin-bottom: 0; // Override browser default
  }

  // Buttons within the sections don’t need default styling
  .idsk-stepper__section-button {
    @include govuk-font($size: 24, $weight: bold);
    display: inline-block;
    margin-bottom: 0;
    padding-top: govuk-spacing(3);
  }

  .idsk-stepper__section-summary {
    margin-top: govuk-spacing(2);
    margin-bottom: 0;
  }

  // Remove the bottom margin from the last item inside the content
  .idsk-stepper__section-content > :last-child {
    margin-bottom: 0;
  }

  // JavaScript enabled
  .js-enabled {
    .idsk-stepper {
      // Border at the bottom of the whole accordion
      border-bottom: 2px solid govuk-colour("grey-5");
    }

    // Borders between accordion sections
    .idsk-stepper__section {
      padding-top: 0;
    }

    // Hide the body of collapsed sections
    .idsk-stepper__section-content {
      display: none;
      @include govuk-responsive-padding(0, "top");
      @include govuk-responsive-padding(3, "bottom");
    }

    // Show the body of expanded sections
    .idsk-stepper__section--expanded .idsk-stepper__section-content {
      display: block;
    }

    .js-enabled .idsk-stepper__open-all {
      text-align: right;
    }

    // This is styled to look like a link not a button
    .idsk-stepper__open-all {
      @include govuk-font($size: 19);
      position: relative;
      z-index: 1;
      margin: 0;
      padding-right: 0;
      border-width: 0;
      color: $govuk-link-colour;
      background: none;
      cursor: pointer;
      -webkit-appearance: none;
      text-decoration: underline;
      text-align: right;
      height: 50px;

      @include govuk-link-common;
      @include govuk-link-style-default;

      // Remove default button focus outline in Firefox
      &::-moz-focus-inner {
        padding: 0;
        border: 0;
      }
    }

    // Section headers have a pointer cursor as an additional affordance
    .idsk-stepper__section-header {
      position: relative;
      // Safe area on the right to avoid clashing with icon
      padding-right: 40px;
      border-top: 2px solid govuk-colour("grey-5");
      color: $idsk-stepper-link-colour;
      cursor: pointer;
    }

    // For devices that can't hover such as touch devices,
    // remove hover state as it can be stuck in that state (iOS).
    @media (hover: none) {
      .idsk-stepper__section-header:hover {
        box-shadow: inset 0 1 0 0 $idsk-stepper-link-colour;
      }
    }

    // Buttons within the headers don’t need default styling
    .idsk-stepper__section-button {
      @include govuk-typography-common;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0;
      padding: 0;
      border-width: 0;
      color: govuk-colour("black");
      background: none;
      text-align: left;
      cursor: pointer;
      -webkit-appearance: none;

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

      // Remove default button focus outline in Firefox
      &::-moz-focus-inner {
        padding: 0;
        border: 0;
      }
    }

    // Extend the touch area of the button to span the section header
    .idsk-stepper__section-button:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .idsk-stepper__section-button:hover:not(:focus) {
      text-decoration: underline;
    }

    // For devices that can't hover such as touch devices,
    // remove hover state as it can be stuck in that state (iOS).
    @media (hover: none) {
      .idsk-stepper__section-button:hover {
        text-decoration: none;
      }
    }

    .idsk-stepper__controls {
      text-align: right;
      padding-bottom: govuk-spacing(3);
    }

    // Display an icon to the right of each header to indicate open/closed status,
    // and as an additional affordance.
    .idsk-stepper__icon {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 16px;
      height: 16px;
      margin-top: -8px;
    }

    .idsk-stepper__icon:after,
    .idsk-stepper__icon:before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 25%;
      height: 25%;
      margin: auto;
      border: 2px solid transparent;
      background-color: govuk-colour("black");
    }

    .idsk-stepper__icon:before {
      width: 100%;
    }

    .idsk-stepper__icon:after {
      height: 100%;
    }

    // Vertical bar should be hidden when section is open, to display a '-' icon
    .idsk-stepper__section--expanded .idsk-stepper__icon:after {
      content: " ";
      display: none;
    }
  }
}