@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use './scss/progress-indicator-variables' as *;

.sky-progress-indicator {
  ::ng-deep {
    sky-progress-indicator-item:last-of-type {
      // Hide the last item's line.
      .sky-progress-indicator-status-marker-line {
        display: none;
      }
    }
  }
}

.sky-progress-indicator-mode-vertical {
  max-width: 400px;
  min-width: 250px;
  margin: 0 auto;

  /**
   * Overwrite item styles for vertical display mode.
   */
  ::ng-deep {
    .sky-progress-indicator-item-body {
      text-align: center;

      // Accommodate the width of the status marker to make the content centered.
      margin-left: -$status-marker-width * 2;
    }

    sky-progress-indicator-nav-button,
    sky-progress-indicator-reset-button {
      display: block;
      padding-top: $sky-padding-triple;
      padding-left: $sky-margin-plus-half;
    }
  }
}

::ng-deep .sky-popover {
  ::ng-deep .sky-progress-indicator-mode-vertical {
    min-width: auto;
  }
}

.sky-progress-indicator-mode-horizontal {
  /**
   * Overwrite item styles for vertical display mode.
   */
  ::ng-deep {
    .sky-progress-indicator-item-heading {
      font-weight: 600;
      font-size: 16px;
    }
  }
}

.sky-progress-indicator-horizontal-status-markers {
  display: flex;
  margin-bottom: $sky-margin;

  /**
   * Overwrite status marker styles based on their position in the series.
   */
  ::ng-deep {
    sky-progress-indicator-status-marker {
      // Restrict the marker's width in horizontal mode.
      flex-basis: 45px;
      flex-grow: 0;

      &:first-of-type {
        margin-left: -5px;

        // Remove the line segment for the first marker in the series.
        .sky-progress-indicator-status-marker {
          .sky-progress-indicator-status-marker-icon {
            &:before {
              display: none !important;
            }
          }
        }
      }

      // Remove the line from the last marker in the series.
      &:last-of-type {
        .sky-progress-indicator-status-marker-line {
          display: none;
        }
      }
    }
  }
}

@include mixins.sky-theme-modern {
  .sky-progress-indicator-mode-horizontal {
    ::ng-deep {
      .sky-progress-indicator-item-heading {
        font-weight: inherit;
        font-size: inherit;
      }
    }
  }

  .sky-progress-indicator-mode-vertical {
    ::ng-deep {
      sky-progress-indicator-nav-button,
      sky-progress-indicator-reset-button {
        padding: 0;
        margin: $sky-theme-modern-margin-stacked-xxl 0 0;
        text-align: center;
      }
    }
  }
}
