/* src/components/src/components/index.module.css */
@layer ddsweb-molecules {
  @layer ddsweb-step-indicator {
    .nPGLFa_baseStep {
      --step-indicator-step-flex-flow: column;
      --step-indicator-step-align-items: center;
      --step-indicator-step-justify-items: center;
      --step-indicator-step-gap: 0;
      --step-indicator-bottom-spacing: 0;
      --step-indicator-horizontal-title-text-color: var(--ddsweb-theme-colors-text-dark);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-grayscale);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-grayscale);
      --step-indicator-line-colour: var(--ddsweb-theme-colors-grayscale);
      flex-flow: var(--step-indicator-step-flex-flow);
      align-items: var(--step-indicator-step-align-items);
      justify-content: var(--step-indicator-step-align-items);
      padding-bottom: var(--step-indicator-bottom-spacing);
      gap: var(--step-indicator-step-gap);
      background:
        linear-gradient(
          var(--step-indicator-line-direction),
          transparent,
          transparent var(--step-indicator-line-offset),
          var(--step-indicator-line-colour) var(--step-indicator-line-offset),
          var(--step-indicator-line-colour) calc(var(--step-indicator-line-offset) + var(--step-indicator-line-width)),
          transparent calc(var(--step-indicator-line-offset) + var(--step-indicator-line-width)));
      list-style-type: none;
      display: inline-flex;
    }
    .nPGLFa_baseStep > svg {
      margin-bottom: var(--ddsweb-theme-spacing-xs);
    }
    .nPGLFa_baseStep[data-step-status=success] {
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-success);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-success);
      --step-indicator-line-colour: var(--ddsweb-theme-colors-success);
    }
    .nPGLFa_baseStep[data-step-status=warning] {
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-orange);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-orange);
      --step-indicator-line-colour: var(--ddsweb-theme-colors-orange);
    }
    .nPGLFa_baseStep[data-step-status=error] {
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-error);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-error);
      --step-indicator-line-colour: var(--ddsweb-theme-colors-error);
    }
    .nPGLFa_baseStep[data-step-status=error] + [data-step-status=empty],
    .nPGLFa_baseStep[data-step-status=error] + [data-step-status=error] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-error);
    }
    .nPGLFa_baseStep[data-step-status=warning] + [data-step-status=empty],
    .nPGLFa_baseStep[data-step-status=warning] + [data-step-status=error],
    .nPGLFa_baseStep[data-step-status=warning] + [data-step-status=warning] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-orange);
    }
    .nPGLFa_baseStep[data-step-status=success] + [data-step-status=empty],
    .nPGLFa_baseStep[data-step-status=success] + [data-step-status=error],
    .nPGLFa_baseStep[data-step-status=success] + [data-step-status=warning],
    .nPGLFa_baseStep[data-step-status=success] + [data-step-status=success] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-success);
    }
    .nPGLFa_baseNumberCircle {
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      margin-bottom: var(--ddsweb-theme-spacing-xs);
      border: var(--ddsweb-theme-spacing-xxx) solid var(--step-indicator-number-wrapper-border-color);
      border-radius: 100%;
      place-content: center;
      display: inline-grid;
    }
    .nPGLFa_baseNumberCircle:after {
      z-index: 0;
      inset: var(--step-indicator-icon-inset, 0);
      top: var(--step-indicator-numerical-icon-top, 0);
      width: 34px;
      height: 34px;
      box-shadow: 0 0 0 3px var(--ddsweb-theme-colors-primary);
      content: "";
      opacity: 0;
      transition: box-shadow var(--ddsweb-theme-base-transition-duration);
      border-radius: 99px;
      margin: 0 auto;
      position: absolute;
    }
    .nPGLFa_number {
      --ddsweb-text-color: var(--step-indicator-number-text-color);
      --ddsweb-text-font-weight: var(--ddsweb-theme-font-weight-heading);
      --ddsweb-text-font-size: var(--ddsweb-theme-font-size-next-text-md);
      -webkit-text-decoration: var(--step-indicator-text-decoration);
      text-decoration: var(--step-indicator-text-decoration);
    }
    .nPGLFa_numberContainer {
      border: var(--ddsweb-theme-spacing-xxx) solid var(--step-indicator-number-wrapper-border-color);
      background: var(--step-indicator-horizontal-number-wrapper-background-color);
    }
    .nPGLFa_horizontal {
      --step-indicator-number-wrapper-border-color: var(--ddsweb-theme-colors-primary);
      background: var(--step-indicator-horizontal-number-wrapper-background-color);
      -webkit-text-decoration: var(--step-indicator-text-decoration);
      text-decoration: var(--step-indicator-text-decoration);
    }
    .nPGLFa_previous {
      --step-indicator-text-decoration: none;
      --step-indicator-horizontal-title-text-color: var(--ddsweb-theme-colors-text-dark);
      --step-indicator-number-text-color: var(--ddsweb-theme-colors-text-base);
      --step-indicator-number-wrapper-border-color: var(--ddsweb-theme-colors-primary);
      --step-indicator-horizontal-number-wrapper-background-color: var(--ddsweb-theme-colors-white);
      --step-indicator-horizontal-cursor-link: default;
      --step-indicator-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-primary);
    }
    .nPGLFa_baseStep.nPGLFa_previous[data-step-status] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-primary);
    }
    .nPGLFa_previous.nPGLFa_interactive {
      --step-indicator-text-decoration: underline;
      --step-indicator-horizontal-title-text-color: var(--ddsweb-theme-colors-tesco-blue);
      --step-indicator-number-text-color: var(--ddsweb-theme-colors-tesco-blue);
      --step-indicator-horizontal-cursor-link: pointer;
    }
    .nPGLFa_current {
      --step-indicator-text-decoration: none;
      --step-indicator-number-text-color: var(--ddsweb-theme-colors-white);
      --step-indicator-horizontal-title-text-color: var(--ddsweb-theme-colors-text-dark);
      --step-indicator-number-wrapper-border-color: var(--ddsweb-theme-colors-link-active);
      --step-indicator-horizontal-number-wrapper-background-color: var(--ddsweb-theme-colors-active);
      --step-indicator-horizontal-cursor-link: default;
      --step-indicator-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-disabled-base);
    }
    .nPGLFa_baseStep.nPGLFa_current[data-step-status] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-primary);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-disabled-base);
    }
    .nPGLFa_future {
      --step-indicator-text-decoration: none;
      --step-indicator-number-text-color: var(--ddsweb-theme-colors-text-base);
      --step-indicator-horizontal-title-text-color: var(--ddsweb-theme-colors-text-dark);
      --step-indicator-number-wrapper-border-color: var(--ddsweb-theme-colors-disabled-base);
      --step-indicator-horizontal-number-wrapper-background-color: var(--ddsweb-theme-colors-white);
      --step-indicator-horizontal-cursor-link: default;
      --step-indicator-line-colour: var(--ddsweb-theme-colors-disabled-base);
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-disabled-base);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-disabled-base);
    }
    .nPGLFa_baseStep.nPGLFa_future[data-step-status] {
      --step-indicator-left-line-colour: var(--ddsweb-theme-colors-disabled-base);
      --step-indicator-right-line-colour: var(--ddsweb-theme-colors-disabled-base);
    }
    .nPGLFa_previous:hover,
    .nPGLFa_previous:focus,
    .nPGLFa_previous:focus-visible {
      --ddsweb-link-color-focus-visible: none;
      --step-indicator-text-decoration: none;
      outline: none;
    }
    .nPGLFa_interactiveText {
      margin: 0 var(--ddsweb-theme-spacing-xx);
      --ddsweb-text-color: var(--step-indicator-horizontal-title-text-color);
      --ddsweb-text-font-weight: var(--ddsweb-theme-font-weight-heading);
      --ddsweb-text-font-size: var(--ddsweb-theme-font-size-next-text-sm);
      text-align: center;
      --step-indicator-text-decoration: none;
    }
    .nPGLFa_label {
      --ddsweb-text-color: var(--ddsweb-theme-colors-text-dark);
    }
    .nPGLFa_inlineLink {
      --step-indicator-icon-inset: -1px;
      --step-indicator-numerical-icon-top: -1px;
      text-align: center;
      -webkit-text-decoration: var(--step-indicator-text-decoration, none);
      text-decoration: var(--step-indicator-text-decoration, none);
      cursor: var(--step-indicator-horizontal-cursor-link, default);
    }
    .nPGLFa_linkButton {
      text-align: center;
      --step-indicator-icon-inset: -1px;
      --step-indicator-numerical-icon-top: -1px;
      margin: var(--step-indicator-offset-button-cut-margin) var(--step-indicator-offset-button-cut-margin) 0 var(--step-indicator-offset-button-cut-margin);
      padding: var(--step-indicator-offset-button-cut-padding) var(--step-indicator-offset-button-cut-padding) 0 var(--step-indicator-offset-button-cut-padding);
    }
    .nPGLFa_linkButton:focus-visible,
    .nPGLFa_inlineLink:focus-visible {
      --ddsweb-link-color-focus-visible: none;
      outline: none;
    }
    .nPGLFa_previous .nPGLFa_inlineLink:hover .nPGLFa_baseNumberCircle:after,
    .nPGLFa_previous .nPGLFa_inlineLink:focus .nPGLFa_baseNumberCircle:after,
    .nPGLFa_previous .nPGLFa_inlineLink:focus-visible .nPGLFa_baseNumberCircle:after,
    .nPGLFa_previous .nPGLFa_linkButton:hover .nPGLFa_baseNumberCircle:after,
    .nPGLFa_previous .nPGLFa_linkButton:focus .nPGLFa_baseNumberCircle:after,
    .nPGLFa_previous .nPGLFa_linkButton:focus-visible .nPGLFa_baseNumberCircle:after {
      opacity: 1;
    }
    .nPGLFa_linkButton > span[class*=ddsweb-button__container] {
      display: block;
    }
    .nPGLFa_linkButton:not([aria-disabled=true]):focus-visible {
      --ddsweb-link-color-focus-visible: none;
      --step-indicator-text-decoration: none;
    }
    .nPGLFa_stepIndicatorContainer {
      flex-flow: row;
      padding-left: 0;
      display: flex;
    }
    .nPGLFa_horizontalStep {
      --step-indicator-line-direction: to bottom;
      --step-indicator-line-width: var(--ddsweb-theme-spacing-xxx);
      --step-indicator-line-offset: 15px;
      --step-indicator-left-line-gradient:
        linear-gradient(
          var(--step-indicator-line-direction),
          transparent,
          transparent var(--step-indicator-line-offset),
          var(--step-indicator-left-line-colour) var(--step-indicator-line-offset),
          var(--step-indicator-left-line-colour) calc(var(--step-indicator-line-offset) + var(--step-indicator-line-width)),
          transparent var(--step-indicator-line-offset));
      --step-indicator-right-line-gradient:
        linear-gradient(
          var(--step-indicator-line-direction),
          transparent,
          transparent var(--step-indicator-line-offset),
          var(--step-indicator-right-line-colour) var(--step-indicator-line-offset),
          var(--step-indicator-right-line-colour) calc(var(--step-indicator-line-offset) + var(--step-indicator-line-width)),
          transparent var(--step-indicator-line-offset));
      background: var(--step-indicator-left-line-gradient) left / 50% 100%, var(--step-indicator-right-line-gradient) right / 50% 100%;
      background-repeat: no-repeat;
      flex: 1 1 0;
      min-width: 42px;
      margin-left: -1px;
      margin-right: -1px;
    }
    .nPGLFa_horizontalStepIndicator {
      flex-flow: row;
      align-items: flex-start;
    }
    .nPGLFa_horizontalStep:first-child {
      --step-indicator-left-line-gradient: linear-gradient(transparent, transparent 100%);
    }
    .nPGLFa_horizontalStep:last-child {
      --step-indicator-right-line-gradient: linear-gradient(transparent, transparent 100%);
    }
    .nPGLFa_horizontalStep .nPGLFa_linkButton[disabled] {
      opacity: unset;
    }
    .nPGLFa_horizontal .nPGLFa_inlineLink {
      -webkit-text-decoration: var(--step-indicator-text-decoration);
      text-decoration: var(--step-indicator-text-decoration);
    }
    .nPGLFa_horizontalStep > svg,
    .nPGLFa_horizontalStep .nPGLFa_baseNumberCircle {
      width: var(--ddsweb-theme-spacing-xxxl);
      height: var(--ddsweb-theme-spacing-xxxl);
      flex-shrink: 0;
    }
    @media (max-width: 756px) {
      .nPGLFa_horizontalStepContent {
        display: none;
      }
    }
    .nPGLFa_verticalStepIndicator {
      flex-flow: column;
    }
    .nPGLFa_verticalContent {
      width: auto;
    }
    .nPGLFa_verticalContent > :first-child {
      margin-top: 6px;
      margin-bottom: var(--ddsweb-theme-spacing-xs);
      --ddsweb-text-font-size: var(--ddsweb-theme-font-size-next-text-md);
    }
    .nPGLFa_verticalSubTitle {
      margin-bottom: var(--ddsweb-theme-spacing-sm);
      color: var(--ddsweb-theme-colors-text-dark);
    }
    .nPGLFa_verticalSubTitle:last-child {
      margin-bottom: 0;
    }
    .nPGLFa_verticalStep {
      --step-indicator-line-direction: to right;
      --step-indicator-line-offset: 15px;
      --step-indicator-line-width: var(--ddsweb-theme-spacing-xxx);
      --step-indicator-line-colour: var(--ddsweb-theme-colors-grayscale);
      --step-indicator-step-flex-flow: row nowrap;
      --step-indicator-step-align-items: flex-start;
      --step-indicator-step-justify-items: flex-start;
      --step-indicator-step-gap: var(--ddsweb-theme-spacing-sm);
      --step-indicator-bottom-spacing: var(--ddsweb-theme-spacing-lg);
    }
    .nPGLFa_verticalStep > svg,
    .nPGLFa_verticalStep .nPGLFa_baseNumberCircle {
      width: var(--ddsweb-theme-spacing-xxxl);
      height: var(--ddsweb-theme-spacing-xxxl);
      flex-shrink: 0;
    }
    .nPGLFa_verticalStep:last-child {
      background: none;
    }
  }
}


/*# sourceMappingURL=83190e8190f000712e5e.css.map*/