.psdk-stages {
  padding: 0.625rem 0rem;
}

.psdk-stages-span span {
  padding: 0.3125rem;
  font-weight: bold;
  font-size: 1.5rem;
}

.psdk-stages-full {
  display: block;
}

.psdk-stages-divider {
  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
}

.psdk-stages-full {
  display: block;
}

.psdk-stages-icon {
  width: 18px;
  display: inline-block;
  vertical-align: top;
  filter: var(--app-primary-color-filter);
  margin-right: 2px;
}

.psdk-stages-bar {
  background-color: var(--mat-sys-surface-container);
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--mat-sys-outline-variant);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.psdk-stages-chevron {
  position: relative;
  padding: calc(0.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  min-width: 0px;
  flex-grow: 1;
  flex-shrink: 1;
}

.psdk-stages-chevron:not(:last-child)::after {
  content: '';
  position: absolute;
  display: block;
  z-index: 2;
  width: calc(1.75rem);
  right: calc(-0.4375rem);
  background: inherit;
  border-style: solid;
  border-color: var(--mat-sys-outline-variant);
  border-width: 0.0625rem 0.0625rem 0px 0px;
  border-radius: 0px calc(0.3125rem) 0px 0px;
  transform: rotateZ(45deg) skew(15deg, 15deg);
  height: 2rem;
}

.psdk-stages-inner-past {
  color: var(--mat-sys-outline-variant);
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.psdk-stages-inner-present {
  color: var(--mat-sys-primary);
  font-weight: bold;
  font-size: 1rem;
}

.psdk-stages-inner-future {
  color: var(--mat-sys-on-surface);
  font-size: 1rem;
}