@import './var.less';

:root {
  --glm-step-text-color: @step-text-color;
  --glm-step-active-color: @step-active-color;
  --glm-step-process-text-color: @step-process-text-color;
  --glm-step-font-size: @step-font-size;
  --glm-step-line-color: @step-line-color;
  --glm-step-finish-line-color: @step-finish-line-color;
  --glm-step-finish-text-color: @step-finish-text-color;
  --glm-step-icon-size: @step-icon-size;
  --glm-step-circle-size: @step-circle-size;
  --glm-step-circle-color: @step-circle-color;
  --glm-step-horizontal-title-font-size: @step-horizontal-title-font-size;
}

.glm-step {
  position: relative;
  flex: 1;
  color: var(--glm-step-text-color);
  font-size: var(--glm-step-font-size);

  &__circle {
    display: block;
    width: var(--glm-step-circle-size);
    height: var(--glm-step-circle-size);
    background-color: var(--glm-step-circle-color);
    border-radius: 50%;
  }

  &__line {
    position: absolute;
    background-color: var(--glm-step-line-color);
    transition: background-color var(--glm-animation-duration-base);
  }

  &--horizontal {
    float: left;

    &:first-child {
      .glm-step__title {
        margin-left: 0;
        transform: none;
      }
    }

    &:last-child {
      position: absolute;
      right: 1px;
      width: auto;

      .glm-step__title {
        margin-left: 0;
        transform: none;
      }

      .glm-step__circle-container {
        right: -9px;
        left: auto;
      }
    }

    .glm-step__circle-container {
      position: absolute;
      top: 30px;
      left: calc(var(--glm-padding-xs) * -1);
      z-index: 1;
      padding: 0 var(--glm-padding-xs);
      background-color: var(--glm-background-color-light);
      transform: translateY(-50%);
    }

    .glm-step__title {
      display: inline-block;
      margin-left: 3px;
      font-size: var(--glm-step-horizontal-title-font-size);
      transform: translateX(-50%);
    }

    .glm-step__line {
      top: 30px;
      left: 0;
      width: 100%;
      height: 1px;
    }

    .glm-step__icon {
      display: block;
      font-size: var(--glm-step-icon-size);
    }

    .glm-step--process {
      color: var(--glm-step-process-text-color);
    }
  }

  &--vertical {
    display: block;
    float: none;
    padding: 10px 10px 10px 0;
    line-height: var(--glm-line-height-sm);

    &:not(:last-child)::after {
      border-bottom-width: 1px;
    }

    .glm-step__circle-container {
      position: absolute;
      top: 19px;
      left: -15px;
      z-index: 1;
      font-size: var(--glm-step-icon-size);
      line-height: 1;
      transform: translate(-50%, -50%);
    }

    .glm-step__line {
      top: 16px;
      left: -15px;
      width: 1px;
      height: 100%;
    }
  }

  &:last-child {
    .glm-step__line {
      width: 0;
    }
  }

  &--finish {
    color: var(--glm-step-finish-text-color);

    .glm-step__circle,
    .glm-step__line {
      background-color: var(--glm-step-finish-line-color);
    }
  }

  &__icon,
  &__title {
    transition: color var(--glm-animation-duration-base);

    &--active,
    &--finish {
      color: var(--glm-step-active-color);
    }
  }
}