@use "../../breakpoint" as *;
@use "../../config" as *;
@use "../../motion" as *;
@use "../../theme" as *;
@use "../../spacing" as *;
@use "../../type" as *;
@use "../../utilities/convert";
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/skeleton" as *;

// TODO review why type-style is not applied line 16
@mixin step-navigation-item {
  #{$prefix}--step-navigation__nav-item {
    @include type-style("body-short");
    margin: 0;
    padding: $spacing-04 0 $spacing-04;
    cursor: pointer;
    display: flex;
    align-items: center;

    &:focus {
      outline: none;
    }

    &:first-child {
      .#{$prefix}--step-navigation__nav-item__indicator {
        &:after {
          display: none;
          top: -18px;
          height: 18px;
        }
      }
    }
  }

  .#{$prefix}--step-navigation__nav-item__text {
    font-size: 0.875em;
    font-weight: 600;
    line-height: 21px;
    padding-left: 3px;
  }

  .#{$prefix}--step-navigation__nav-item__helper-text {
    @include type-style("label");
    display: block;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.02em;
  }

  /*
  .#{$prefix}--step-navigation__section {
    margin-bottom: calcRem(4px);
    > .#{$prefix}--step-navigation__nav-link {
      margin-bottom: calcRem(2px);
    }
  }

  .#{$prefix}--step-navigation__section__indicator {
    display: block;
    border: 2px solid var(--ui-05);
    border-radius: 30px;
    flex-shrink: 0;
    width: calcRem(34px);
    height: calcRem(34px);
    line-height: calcRem(30px);
    margin-right: calcRem(8px);
    text-align: center;
  }*/

  .#{$prefix}--step-navigation__nav-item__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    //background: var(--ui-01);
    border: 2px solid $action-default-fill-primary-default;
    flex-shrink: 0;
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;

    .#{$prefix}--step-navigation--small & {
      width: 1.5em;
      height: 1.5em;
    }

    line-height: 1em;
    margin: 0.7em 1em 0.7em 0;
    text-align: center;
    z-index: 2;
    color: $action-default-fill-primary-default;
    transition: all 0.1s;

    > svg {
      position: relative;
      top: 1px;
      fill: $action-default-fill-primary-default;
      width: 1em;
      height: 1em;

      .#{$prefix}--step-navigation--small & {
        width: 0.8em;
        height: 0.8em;
      }
    }

    &:after {
      display: block;
      width: 100px;
      height: 2px;
      bottom: 3em;

      .#{$prefix}--step-navigation--small & {
        bottom: 1.5em;
      }

      // .#{$prefix}--step-navigation--vertical.#{$prefix}--step-navigation--regular
      //   & {
      //   display: none;
      // }

      .#{$prefix}--step-navigation--vertical.#{$prefix}--step-navigation--small
        & {
        height: 2px;
        width: 1em;
        left: inherit;
        right: 1.5em;
        bottom: 50%;
      }
      top: 0.6rem;
      position: absolute;
      z-index: 1;

      left: calc(50% - -20px);
      margin-left: -1px;
      content: "";
      border: 1px dashed $neutral-neutral90;
    }
  }

  .#{$prefix}--step-navigation__nav-item {
    display: flex;
    align-items: start;
    color: $text-body-default;
    text-decoration: none;
    padding: $spacing-05;
    width: 100%;
    max-width: 140px;
    position: relative;
    z-index: 2;
    flex-direction: column;
    min-width: 140px;
    font-family: "Open Sans", sans-serif;

    &:last-child {
      .#{$prefix}--step-navigation__nav-item__indicator {
        &::after {
          display: none;
        }
      }
    }

    &:focus {
      outline: none;
    }

    @include breakpoint("md") {
      padding: 0 0.2em;
      width: auto;

      &:focus {
        background-color: transparent;
        color: $text-body-default;
        outline: 1px solid transparent;
      }
    }
  }

  /* Before State */
  .#{$prefix}--step-navigation__nav-item--before {
    .#{$prefix}--step-navigation__nav-item__indicator {
      //background: var(--interactive-01);
      //color: var(--ui-01);
      &:after {
        border-color: $action-default-fill-primary-default;
        border-style: solid;
      }
    }
  }

  /* After State */
  .#{$prefix}--step-navigation__nav-item--after {
    .#{$prefix}--step-navigation__nav-item__indicator {
      background-color: $neutral-neutral80;
      border-color: $neutral-neutral80;

      svg {
        top: -1px;
        path {
          fill: $brand-inverse;
        }
      }
    }
  }

  /* Selected State */
  .#{$prefix}--step-navigation__nav-item--selected {
    .#{$prefix}--step-navigation__nav-item__text {
      text-decoration: none;
      color: $text-body-default;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      background: $action-default-fill-primary-default;
      color: $fill-field;
      width: 1.4rem;
      height: 1.4rem;
      margin-top: 0.85rem;
      margin-bottom: 0.9rem;

      > svg {
        fill: $field !important;
      }

      &::before {
        position: absolute;
        width: 2rem;
        height: 2rem;
        content: "";
        border: 3px solid var(--brand-wfp-blue-wfp-blue90);
        border-radius: 50%;
      }
    }
  }

  .#{$prefix}--step-navigation__nav-item--warning {
    .#{$prefix}--step-navigation__nav-item__helper-text {
      color: $support-warning-main;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $support-warning-main;

      .#{$prefix}--step-navigation--small & {
        border-color: $support-warning-main;
        background: $support-warning-main;

        > svg {
          top: -0.05em;
          fill: $field !important;

          g {
            fill: $support-warning-main;
          }
        }
      }

      > svg {
        fill: $support-warning !important;
        top: -1px;

        g {
          fill: $support-warning-main;
        }
      }
    }

    /*&.#{$prefix}--step-navigation__nav-item--selected {
      .#{$prefix}--step-navigation__nav-item__indicator {
        background: $support-warning;
        border-color: $support-warning;
        > svg {
          fill: var(--ui-01) !important;
        }
      }
    }*/
  }

  .#{$prefix}--step-navigation__nav-item--error {
    .error-symbol {
      color: $semantic-error-error50;
    }

    .#{$prefix}--step-navigation__nav-item__helper-text {
      color: $semantic-error-error50;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $semantic-error-error50;

      .#{$prefix}--step-navigation--small & {
        border-color: $semantic-error-error50;
        background: $semantic-error-error50;

        > svg {
          top: -0.05em;
          fill: $field !important;

          path {
            fill: $semantic-error-error50;
          }
        }
      }

      > svg {
        fill: $support-warning !important;
        top: -1px;

        path {
          fill: $semantic-error-error50;
        }
      }
    }
  }

  .#{$prefix}--step-navigation__nav-item--in-progress {
    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $neutral-neutral80;

      .#{$prefix}--loading--small {
        svg {
          width: 2rem;
          height: 2rem;
          stroke: $neutral-neutral60;
          circle {
            stroke-dasharray: 25;
          }
        }
      }

      .#{$prefix}--step-navigation--small & {
        border-color: $semantic-error-error50;
        background: $semantic-error-error50;

        > svg {
          top: -0.05em;
          fill: $field !important;

          width: 2rem;
          height: 2rem;

          path {
            fill: $semantic-error-error50;
          }
        }
      }

      > svg {
        fill: $support-warning !important;
        top: -1px;
        width: 2rem;
        height: 2rem;

        path {
          fill: $semantic-error-error50;
        }
      }
    }
  }

  .#{$prefix}--step-navigation__nav-item--complete {
    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $support-success-main;

      .#{$prefix}--step-navigation--small & {
        border-color: $support-success-main;
        background: $support-success-main;

        > svg {
          fill: $field !important;
        }
      }

      > svg {
        fill: $support-success !important;
        position: relative;
        top: 1px;
      }
    }

    /*&.#{$prefix}--step-navigation__nav-item--selected {
      .#{$prefix}--step-navigation__nav-item__indicator {
        background: $support-success-main;
        border-color: $support-success-main;
        > svg {
          fill: var(--ui-01) !important;
        }
      }
    }*/
  }

  /* Not started State */
  .#{$prefix}--step-navigation__nav-item--not-started {
    .#{$prefix}--step-navigation__nav-item__indicator {
      > svg {
        top: -1px;
      }
    }
  }

  /* Locked State */
  .#{$prefix}--step-navigation__nav-item--locked {
    cursor: not-allowed;
    color: var(--ui-03);

    .#{$prefix}--step-navigation__nav-item__text {
      color: $text-body-secondary;
      text-decoration: none;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $border-inverse;

      > svg {
        top: 0px;
        fill: var(--ui-05) !important;
      }
    }
  }

  /* Summary State */
  .#{$prefix}--step-navigation__nav-item--summary {
    //color: var(--ui-03);
    //margin-top: 1rem;

    .#{$prefix}--step-navigation__nav-item__text {
      //color: $text-body-secondary;
      //text-decoration: none;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      //border-color: var(--ui-05);
      /* &:after {
        display: none !important;
      } */

      > svg {
        top: -1px;
        //fill: var(--ui-05) !important;
      }
    }
  }

  /* Skipped State */
  .#{$prefix}--step-navigation__nav-item--skip {
    color: var(--ui-03);

    .#{$prefix}--step-navigation__nav-item__text {
      color: $text-body-secondary;
      text-decoration: none;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: var(--ui-04);

      .#{$prefix}--step-navigation--regular & {
        clip-path: polygon(
          0 -100%,
          56% -100%,
          56% 14%,
          93% 50%,
          56% 90%,
          56% 100%,
          0 100%
        );
      }

      > svg {
        top: 0px;
        fill: var(--ui-05) !important;
      }
    }
  }

  /* Disabled State */
  .#{$prefix}--step-navigation__nav-item--disabled {
    cursor: not-allowed;
    color: var(--ui-03);

    .#{$prefix}--step-navigation__nav-item__text {
      color: $text-body-secondary;
      text-decoration: none;
    }

    .#{$prefix}--step-navigation__nav-item__indicator {
      border-color: $border-strong;

      .#{$prefix}--step-navigation--regular & {
        clip-path: polygon(
          0 -100%,
          56% -100%,
          56% 14%,
          93% 50%,
          56% 90%,
          56% 100%,
          0 100%
        );
      }

      > svg {
        top: 0px;
        fill: var(--ui-05) !important;
      }
    }
  }
}