/*
 *  Stepper component
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;

// GENERELL STEPPER OG STEP
.pkt-stepper {
  --pkt-steps-indicator-width: 24px;
  --pkt-steps-indicator-height: 24px;
  --pkt-steps-indicator-color: var(--pkt-color-border-default);
  --pkt-steps-border-width: 2.5px;
  --pkt-steps-line-length: 1.5rem;

  color: var(--pkt-color-text-body-default);
  font-size: map.get(variables.$font-size, 'size-18');
  font-weight: map.get(variables.$font-weight, 'medium');
  letter-spacing: map.get(variables.$letter-spacing, 'tight');
  list-style: none;
  margin: 0;
  padding: 0;

  .pkt-step {
    display: grid;

    &__wrapper {
      grid-column: title / content;
      grid-row: title / content;
    }

    &__title {
      font-weight: map.get(variables.$font-weight, 'medium');
      width: max-content;
      width: 100%;
    }

    &__content {
      font-weight: map.get(variables.$font-weight, 'light');
      padding-block-end: map.get(variables.$spacing, 'size-24');
      width: 100%;
    }

    &__indicator {
      z-index: 2;
      grid-area: indicator;
    }

    &__line {
      background-color: var(--pkt-color-border-default);

      &--1 {
        grid-area: indicator;
      }
      &--2 {
        grid-area: indicator;
      }

      &--3 {
        grid-area: line;
        height: fit-content;
      }
    }

    &__nav-wrapper {
      display: flex;
      gap: 20px;
      margin-block-start: map.get(variables.$spacing, 'size-16');
    }
  }
}

// VERTICAL STEPPER (default)
.pkt-stepper--vertical {
  display: grid;
  grid-template-columns: 1fr;

  .pkt-step {
    grid-template-areas: 'indicator title' 'line content';
    grid-template-columns: var(--pkt-steps-indicator-width) auto;
    grid-template-rows: var(--pkt-steps-indicator-height) minmax(min-content, max-content);
    grid-gap: 0 1rem;
    justify-items: flex-start;

    &--current {
      .pkt-step__title,
      .pkt-step__content {
        padding: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-24');
        background-color: var(--pkt-color-surface-default-default);
      }
      .pkt-step__content {
        padding-block-start: 0;
      }

      .pkt-step__wrapper {
        margin-block-end: map.get(variables.$spacing, 'size-24');
      }
    }

    &__indicator {
      & > svg {
        vertical-align: baseline;
      }
    }

    &__line {
      min-height: min-content;
      height: 100%;
      margin: auto;
      width: var(--pkt-steps-border-width);

      &--1 {
        height: 50%;
        transform: translateY(-55%);
      }
      &--2 {
        height: 50%;
        transform: translateY(55%);
      }

      &--3 {
        min-height: map.get(variables.$spacing, 'size-64');
      }
    }

    &__nav-wrapper {
      flex-direction: row;
    }
  }
}

// HORIZONTAL STEPPER
.pkt-stepper--horizontal {
  display: flex;

  .pkt-step {
    grid-template-areas: 'indicator line' 'title title' 'content content';
    grid-template-columns: var(--pkt-steps-indicator-width) minmax(60px, max-content);
    grid-template-rows: var(--pkt-steps-indicator-width) min-content min-content;
    justify-items: flex-start;

    &__wrapper {
      min-width: fit-content;
    }
    &__title {
      padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-16')
        map.get(variables.$spacing, 'size-24') 0;
    }

    &__content {
      padding: 0 map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-16') 0;
    }

    &__indicator > svg {
      vertical-align: baseline;
    }

    &__line {
      min-width: min-content;
      width: 100%;
      margin: auto;

      height: var(--pkt-steps-border-width);

      &--1 {
        width: 50%;
        transform: translateX(-55%);
      }
      &--2 {
        width: 50%;
        transform: translateX(55%);
      }

      &--3 {
        min-width: map.get(variables.$spacing, 'size-80');
      }
    }

    &__nav-wrapper {
      flex-direction: column;
    }
  }
}

// FIRST STEP
.pkt-step:first-of-type {
  .pkt-step__line--1 {
    display: none;
  }
}

// COMPLETED STEP
.pkt-step--completed .pkt-step__indicator {
  path:first-of-type {
    fill: var(--pkt-color-border-default);
  }
  path:last-of-type {
    fill: var(--pkt-color-button-primary-text-normal);
  }
}

// INCOMPLETE STEP
.pkt-step--incomplete {
  .pkt-step__line {
    background-color: var(--pkt-color-input-border-disabled);
  }

  .pkt-step__indicator circle {
    fill: var(--pkt-color-input-border-disabled);
  }
}

//  FIRST INCOMPLETE STEP
.pkt-step--current + .pkt-step--incomplete {
  .pkt-step__line--1 {
    background-color: var(--pkt-color-border-default);
  }
  .pkt-step__line--2 {
    background-color: var(--pkt-color-input-border-disabled);
  }
}

// LAST STEP
.pkt-step:last-of-type {
  .pkt-step__line--3,
  .pkt-step__line--2 {
    display: none;
  }
}

// CURRENT STEP
.pkt-step--current {
  .pkt-step__line--1 {
    background-color: var(--pkt-color-border-default);
  }

  .pkt-step__line--2,
  .pkt-step__line--3 {
    background-color: var(--pkt-color-input-border-disabled);
  }

  .pkt-step__indicator circle {
    fill: var(--pkt-color-border-default);

    &:first-of-type {
      opacity: 0.1;
    }
  }
}

// CURRENT STEP + INCOMPLETE STEP
.pkt-step--current + .pkt-step--incomplete {
  .pkt-step__line--1 {
    background-color: var(--pkt-color-input-border-disabled);
  }
}

// HIDE ALL STEP CONTENT EXCEPT CURRENT
.pkt-step--hideContent:not(.pkt-step--current) {
  .pkt-step__content {
    display: none;
  }
}

// HIDE ALL STEPS EXCEPT CURRENT
.pkt-step--hideStep:not(.pkt-step--current) {
  .pkt-step__title,
  .pkt-step__content {
    display: none;
  }
}

// Adjust spacing between steps when hiding non-active steps on vertical stepper
.pkt-stepper--vertical {
  .pkt-step--hideStep:not(.pkt-step--current) {
    .pkt-step__line--3 {
      min-height: map.get(variables.$spacing, 'size-32');
    }
  }
}

// Adjust spacing between steps when hiding non-active steps on horizontal stepper
.pkt-stepper--horizontal {
  .pkt-step--hideStep:not(.pkt-step--current) {
    grid-template-columns: var(--pkt-steps-indicator-width) minmax(map.get(variables.$spacing, 'size-32'), max-content);

    .pkt-step__line--3 {
      min-width: map.get(variables.$spacing, 'size-32');
    }
  }
}