/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/print-exact" as *;
@use "../../common/resets" as *;

@mixin indicator {
  display: grid;
  flex: none;
  place-items: start center;
}

@mixin marker-shape {
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  z-index: 1;
}

@mixin connector {
  block-size: 100%;
  grid-area: 1 / 1;
}

.ams-progress-list {
  @include reset-ol;
}

/* Step */

.ams-progress-list__step {
  display: flex;
  gap: var(--ams-progress-list-step-gap);

  @media (min-width: $ams-breakpoint-medium) {
    gap: var(--ams-progress-list-step-medium-gap);
  }
}

/* Indicator: layout container for marker and connector */

.ams-progress-list__indicator {
  @include indicator;
}

/* Marker: layout container for shape */

.ams-progress-list__marker {
  display: flex;
  grid-area: 1 / 1; /* Overlaps marker and connector */
  place-items: center;

  .ams-progress-list--heading-2 & {
    block-size: var(--ams-progress-list-heading-2-step-marker-block-size);
  }

  .ams-progress-list--heading-3 & {
    block-size: var(--ams-progress-list-heading-3-step-marker-block-size);
  }

  .ams-progress-list--heading-4 & {
    block-size: var(--ams-progress-list-heading-4-step-marker-block-size);
  }
}

/* Shape: visual circle in marker */

.ams-progress-list__marker-shape {
  background-color: var(--ams-progress-list-step-marker-shape-background-color);
  block-size: var(--ams-progress-list-step-marker-shape-block-size);
  border: var(--ams-progress-list-step-marker-shape-border-width)
    var(--ams-progress-list-step-marker-shape-border-style) var(--ams-progress-list-step-marker-shape-border-color);

  /* Outline adds space between shape and connector */
  outline: var(--ams-progress-list-step-marker-shape-outline-width)
    var(--ams-progress-list-step-marker-shape-outline-style) var(--ams-progress-list-step-marker-shape-outline-color);

  @include marker-shape;
  @include print-exact;

  .ams-progress-list__step--completed & {
    background-color: var(--ams-progress-list-step-completed-marker-shape-background-color);
    border-color: var(--ams-progress-list-step-completed-marker-shape-border-color);
  }

  .ams-progress-list__step--current & {
    background-color: var(--ams-progress-list-step-current-marker-shape-background-color);
    border-color: var(--ams-progress-list-step-current-marker-shape-border-color);
  }
}

/* Connector */

.ams-progress-list__connector {
  border-inline: var(--ams-progress-list-step-connector-border-inline-width)
    var(--ams-progress-list-step-connector-border-inline-style)
    var(--ams-progress-list-step-connector-border-inline-color);

  @include connector;

  .ams-progress-list--heading-2 & {
    margin-block-start: var(--ams-progress-list-heading-2-step-marker-margin-block-start);
  }

  .ams-progress-list--heading-3 & {
    margin-block-start: var(--ams-progress-list-heading-3-step-marker-margin-block-start);
  }

  .ams-progress-list--heading-4 & {
    margin-block-start: var(--ams-progress-list-heading-4-step-marker-margin-block-start);
  }

  .ams-progress-list__step--completed & {
    border-inline-color: var(--ams-progress-list-step-completed-connector-border-inline-color);
    border-inline-style: var(--ams-progress-list-step-completed-connector-border-inline-style);
  }

  .ams-progress-list__step--current.ams-progress-list__step--has-substeps & {
    border-inline-color: var(--ams-progress-list-step-current-connector-border-inline-color);
    border-inline-style: solid;
  }

  /* Hide connector for last step, unless it has substeps. */
  .ams-progress-list > :last-child:not(.ams-progress-list__step--has-substeps) & {
    display: none;
  }

  /* Hide connector for last step when collapsed. */
  .ams-progress-list > :last-child.ams-progress-list__step--collapsed & {
    display: none;
  }
}

/* Content */

.ams-progress-list__content {
  flex: auto;
  min-inline-size: 0;

  /* Add space below content, unless it is the last child, or if it has substeps and it is not collapsed. */
  .ams-progress-list__step:not(
      :last-child,
      .ams-progress-list__step--has-substeps:not(.ams-progress-list__step--collapsed)
    )
    & {
    margin-block-end: var(--ams-progress-list-step-content-margin-block-end);
  }
}

/* Heading */

.ams-progress-list__heading {
  margin-block-end: var(--ams-progress-list-step-heading-margin-block-end);

  .ams-progress-list__step--collapsed & {
    margin-block-end: 0;
  }
}

/* Button */

.ams-progress-list__button {
  @include reset-button;

  background-color: transparent;
  color: var(--ams-progress-list-button-color);
  cursor: var(--ams-progress-list-button-cursor);
  display: flex;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  gap: var(--ams-progress-list-button-gap);
  inline-size: 100%;
  line-height: inherit;
  outline-offset: var(--ams-progress-list-button-outline-offset);
  padding-block: var(--ams-progress-list-button-padding-block);
  padding-inline: var(--ams-progress-list-button-padding-inline);
  text-align: start;

  &:hover {
    color: var(--ams-progress-list-button-hover-color);
  }
}

/* Icon */

.ams-progress-list__icon svg {
  rotate: 0deg;
  transition: none;

  [aria-expanded="true"] & {
    rotate: -180deg;
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: rotate var(--ams-progress-list-icon-transition-duration)
      var(--ams-progress-list-icon-transition-timing-function);
  }
}

/* Panel */

.ams-progress-list__panel {
  .ams-progress-list__step--collapsed & {
    display: none;

    @media print {
      display: block;
    }
  }
}

/* Substeps – is its own block in BEM and has the same elements as above */

.ams-progress-list-substeps {
  @include reset-ol;

  * + & {
    /* Add white space if there is content preceding substeps */
    padding-block-start: var(--ams-progress-list-substeps-padding-block-start);
  }
}

.ams-progress-list-substeps__step {
  display: flex;
}

.ams-progress-list-substeps__indicator {
  margin-inline-end: var(--ams-progress-list-substeps-step-indicator-margin-inline-end);
  margin-inline-start: calc(
    -1 * var(--ams-progress-list-step-gap) - var(--ams-progress-list-step-marker-shape-block-size)
  );

  @include indicator;

  @media (min-width: $ams-breakpoint-medium) {
    margin-inline-end: var(--ams-progress-list-substeps-step-indicator-medium-margin-inline-end);
    margin-inline-start: calc(
      -1 * var(--ams-progress-list-step-medium-gap) - var(--ams-progress-list-step-marker-shape-block-size)
    );
  }
}

.ams-progress-list-substeps__marker {
  block-size: var(--ams-progress-list-substeps-step-marker-block-size);
  display: grid;
  grid-area: 1/1;
  inline-size: var(--ams-progress-list-substeps-step-marker-inline-size);
  place-items: center;
}

.ams-progress-list-substeps__marker-shape {
  background-color: var(--ams-progress-list-substeps-step-marker-shape-background-color);
  block-size: var(--ams-progress-list-substeps-step-marker-shape-block-size);
  border: var(--ams-progress-list-substeps-step-marker-shape-border-width)
    var(--ams-progress-list-substeps-step-marker-shape-border-style)
    var(--ams-progress-list-substeps-step-marker-shape-border-color);

  /* Outline is used to create space between shape and connector */
  outline: var(--ams-progress-list-substeps-step-marker-shape-outline-width)
    var(--ams-progress-list-substeps-step-marker-shape-outline-style)
    var(--ams-progress-list-substeps-step-marker-shape-outline-color);

  @include marker-shape;
  @include print-exact;

  .ams-progress-list-substeps__step--completed & {
    background-color: var(--ams-progress-list-substeps-step-completed-marker-shape-background-color);
    border-color: var(--ams-progress-list-substeps-step-completed-marker-shape-border-color);
  }

  .ams-progress-list-substeps__step--current & {
    background-color: var(--ams-progress-list-substeps-step-current-marker-shape-background-color);
    border-color: var(--ams-progress-list-substeps-step-current-marker-shape-border-color);
  }
}

.ams-progress-list-substeps__connector {
  /* Cover underlying connector of parent step to prevent it from shining through. Our value for this token is white. */
  background-color: var(--ams-progress-list-substeps-step-connector-background-color);
  border: var(--ams-progress-list-substeps-step-connector-border-inline-width)
    var(--ams-progress-list-substeps-step-connector-border-inline-style)
    var(--ams-progress-list-substeps-step-connector-border-inline-color);
  margin-block-start: var(--ams-progress-list-substeps-step-connector-margin-block-start);

  @include connector;

  .ams-progress-list-substeps__step--completed & {
    border-inline-color: var(--ams-progress-list-substeps-step-completed-connector-border-inline-color);
    border-inline-style: var(--ams-progress-list-substeps-step-completed-connector-border-inline-style);
  }

  /* Hide connector when it belongs to the last substep of last main step. Our value for this token is white. */
  .ams-progress-list__step:last-child .ams-progress-list-substeps__step:last-child & {
    border-inline-color: var(--ams-progress-list-substeps-step-connector-last-child-border-inline-color);
  }
}

.ams-progress-list-substeps__content {
  /* Add white space below all substeps except for the last. Our value for this token is medium space. */
  margin-block-end: var(--ams-progress-list-substeps-step-content-margin-block-end);

  /* Add white space below the last substep. Our value for this token is large space. */
  .ams-progress-list-substeps__step:last-child & {
    margin-block-end: var(--ams-progress-list-substeps-last-child-content-margin-block-end);
  }
}