@use './base-styles.scss';
@use '@finastra/fds-theme' as fds;

.container {
  display: flex;
  justify-content: stretch;
  flex-flow: column nowrap;
  height: 100%;
}

.step-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: 1fr 24px 1fr;
  flex: 1;
}

.line.start-line {
  grid-row: 1/2;
  grid-column: 1/2;
  align-self: stretch;
  justify-self: center;
  margin-bottom: var(--fds-stepper-line-space, 8px);
  height: 22px;
}

.line.end-line {
  grid-row: 3/4;
  grid-column: 1/2;
  align-self: stretch;
  justify-self: center;
  margin-top: var(--fds-stepper-line-space, 8px);
}

.circle {
  grid-row: 2/3;
  grid-column: 1/2;
  align-self: center;
}

.line.hidden {
  visibility: hidden;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--fds-spacing-2, 8px);
  padding: var(--fds-spacing-0, 0) var(--fds-spacing-3, 16px);
  text-align: left;
  justify-self: start;
  justify-content: start;
  align-items: flex-start;
  align-self: start;
  grid-row: 2/4;
  grid-column: 2/3;
}

.step-item-label {
  @include fds.typography(body-1);
}

.step-item-description {
  @include fds.typography(body-2);
}

.current {
  .step-item-label {
    @include fds.typography(subtitle-1);
  }
}

.line {
  width: 2px;
  flex: 1;
}

:host([label-mode='center']) {
  .text-wrapper {
    grid-row: -1/1;
    grid-column: 2/3;
    align-self: center;
    padding: var(--fds-spacing-3, 16px);
  }
}

:host([label-mode='background']) {
  .text-wrapper {
    grid-row: 2/4;
    grid-column: 2/3;
    align-self: start;
    margin: var(--fds-spacing-0, 0) var(--fds-spacing-2, 8px) var(--fds-spacing-3, 16px);
    padding: var(--fds-spacing-4, 24px) var(--fds-spacing-3, 16px);
    border-radius: var(--fds-spacing-1, 4px);
    @include fds.background(surface-selected);
  }
}