@import '../../shared-styles/index';

$counter-circle-size: nx-spacer(m);

.nx-subprogress__items {
  display: flex;
  margin: 0 auto;

  @include media-breakpoint-down(small) {
    display: none;
  }
}

.nx-subprogress__item {
  display: flex;
  flex: 1 0 auto;

  &:not(:first-child) {
    margin-left: nx-spacer(s);

    :host-context([dir='rtl']) & {
      margin-right: nx-spacer(s);
      margin-left: initial;
    }
  }
}

.nx-subprogress__item--selected {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
}

.nx-subprogress__progress {
  flex: 1 1 100%;
  margin-left: nx-spacer(2xs);

  :host-context([dir='rtl']) & {
    margin-right: nx-spacer(2xs);
    margin-left: initial;
  }
}

.nx-subprogress__item--inactive {
  .nx-subprogress__counter {
    max-width: $counter-circle-size;

    background-color: transparent;
    border-width: nx-border-size(m);
    border-style: solid;
    border-color: v(progress-stepper-dot-disabled-background-color);
    color: v(progress-stepper-dot-disabled-background-color);
  }

  .nx-subprogress__label {
    color: v(progress-stepper-step-disabled-color);
  }
}

.nx-subprogress__label {
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: v(progress-stepper-step-color);
  @include type-style(progress-stepper-step);
}

.nx-subprogress__counter {
  flex: 0 0 $counter-circle-size;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: v(progress-stepper-dot-background-color);
  color: v(progress-stepper-dot-color);
  width: $counter-circle-size;
  height: $counter-circle-size;
  text-align: center;
  border-radius: 50%;
  margin-right: nx-spacer(2xs);

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(2xs);
  }
}

@media screen and (forced-colors: active) {
  .nx-subprogress__counter {
    forced-colors-adjust: none;
    background-color: transparent;
    color: CanvasText;
    border: nx-border-size(xs) solid CanvasText;
    border-radius: 50%;
  }

  .nx-subprogress__item--inactive {
    color: GrayText;

    .nx-subprogress__counter {
      color: GrayText;
      border: nx-border-size(xs) solid GrayText;
    }
  }
}

.nx-subprogress__number {
  @include type-style(progress-stepper-dotnumber);
}
