@import '../../vendor/carbon-components/scss/components/progress-indicator/progress-indicator';
@import '../../globals/vars';

.#{$iot-prefix}--progress-indicator {
  display: flex;

  .#{$iot-prefix}--progress-step {
    width: 8rem;
    height: rem(68px);
    &-line {
      position: absolute;
      width: calc(100% - #{$spacing-06});
      height: $spacing-01;
      background-color: $ui-03;
      top: rem(11px);
      left: $spacing-06;

      &--complete {
        @extend .#{$iot-prefix}--progress-step-line;
        background-color: $interactive-01;
      }

      &--sub {
        @extend .#{$iot-prefix}--progress-step-line;
        left: $spacing-05;
        width: calc(100% - #{$layout-01});

        &-complete {
          @extend .#{$iot-prefix}--progress-step-line--sub;
          background-color: $interactive-03;
        }
      }
    }

    &-button {
      display: flex;
      position: relative;
      text-align: left;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background-color: Transparent;
      background-repeat: no-repeat;
      cursor: default;
      border: none;

      .#{$iot-prefix}--progress-step-icon {
        height: max-content;
        width: max-content;
        text {
          font-size: 1.125rem;
        }
      }

      &--sub-step .#{$iot-prefix}--progress-step-icon {
        margin-top: $spacing-02;
        margin-left: 0;
      }

      .#{$iot-prefix}--progress-text {
        position: absolute;
        left: 0;
        top: $spacing-07;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        height: 100%;
        display: block;
        margin-left: $spacing-01;
        margin-right: $spacing-01;

        &--hidden {
          visibility: hidden;
        }

        &-label {
          @include type-style('body-short-01');
          position: relative;
          color: $text-01;
          cursor: default;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: auto;

          transition: box-shadow $duration--fast-02 motion(standard, productive),
            color $duration--fast-02 motion(standard, productive);

          &:focus {
            color: $interactive-01;
          }
          &:hover {
            box-shadow: 0 rem(1px) $link-01;
            color: $interactive-01;
          }
          &:active {
            box-shadow: 0 rem(3px) 0 0 $interactive-01;
          }
        }

        &-label--optional {
          @include type-style('body-short-01');
          position: relative;
          cursor: default;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: auto;
          font-size: $spacing-04;
          color: $icon-02;
          margin-top: $spacing-01;
        }
      }

      &--clickable {
        .#{$iot-prefix}--progress-text-label,
        .#{$iot-prefix}--progress-text-label--optional {
          cursor: pointer;
        }
      }
    }

    &--current {
      &:not(.#{$iot-prefix}--progress-step--invalid) {
        .#{$iot-prefix}--progress-step-button {
          &--main-step {
            fill: $interactive-01;

            // force the correct color for the svg
            text {
              fill: $text-04;
            }
            circle {
              fill: $interactive-01;
            }
            path {
              fill: $interactive-01;
            }
          }
          &--sub-step {
            svg {
              fill: $interactive-03;
            }
          }
        }
      }
      .#{$iot-prefix}--progress-text-label {
        &:focus {
          box-shadow: unset;
          color: $text-01;
        }
        &:hover {
          box-shadow: unset;
          color: $text-01;
        }
        &:active {
          box-shadow: unset;
        }
      }
    }

    &--complete {
      svg {
        fill: $interactive-01;
      }
    }

    &--incomplete {
      .#{$iot-prefix}--progress-step-button--main-step {
        fill: $text-01;
      }

      .#{$iot-prefix}--progress-step-button--sub-step {
        svg {
          color: $text-01;
        }
      }
    }

    &--disabled {
      &:not(.#{$iot-prefix}--progress-step--invalid) {
        .#{$iot-prefix}--progress-step-button--main-step {
          fill: $disabled-02;
        }

        .#{$iot-prefix}--progress-step-button--sub-step {
          svg {
            fill: $disabled-02;
          }
        }
      }

      &.#{$iot-prefix}--progress-step--invalid {
        svg {
          fill: $disabled-02;
        }
      }

      .#{$iot-prefix}--progress-step-button .#{$iot-prefix}--progress-text {
        &-label,
        &-label--optional {
          color: $disabled-02;
          cursor: default;
          box-shadow: none;
        }
      }
    }

    &--invalid {
      svg {
        fill: $text-error;
      }
    }
  }

  html[dir='rtl'] & {
    float: right;
    text-align: right;
    width: 100%;

    .#{$iot-prefix}--progress-step {
      &-button {
        text-align: right;
      }
      &-icon {
        left: unset;
        right: 0;
        text-align: right;
      }
      &-line {
        left: 0;
        right: $spacing-06;
        text-align: right;

        &--sub {
          left: 0;
          right: $spacing-05;
        }
      }
    }

    .#{$iot-prefix}--progress-text {
      right: 0;
      text-align: right;
    }
  }

  &--vertical {
    display: unset;

    .#{$iot-prefix}--progress-step {
      &-button {
        .#{$iot-prefix}--progress-text {
          left: $spacing-07;
          top: rem(3px);
        }
        &--sub-step {
          .#{$iot-prefix}--progress-text {
            top: 0;
          }
          .#{$iot-prefix}--progress-step-icon {
            margin-top: 0;
            margin-left: $spacing-02;
            margin-right: $spacing-02;
          }
        }
      }

      &-line {
        width: $spacing-01;
        height: calc(100% - #{$spacing-06});
        top: $layout-02;
        left: rem(11px);

        &--complete {
          @extend .#{$iot-prefix}--progress-step-line;
        }
        &--sub {
          @extend .#{$iot-prefix}--progress-step-line;
          top: $spacing-05;
          height: calc(100% - #{$spacing-05});
          width: $spacing-01;
          &-complete {
            @extend .#{$iot-prefix}--progress-step-line--sub;
          }
        }
      }
    }

    html[dir='rtl'] & {
      float: right;
      text-align: right;
      width: 100%;

      .#{$iot-prefix}--progress-step {
        &-button {
          text-align: right;
          .#{$iot-prefix}--progress-text {
            right: $spacing-07;
            text-align: right;
          }
        }
        &-line {
          left: unset;
          right: rem(11px);
          text-align: right;
        }
      }

      .#{$prefix}--skeleton {
        .#{$prefix}--progress-step--incomplete svg {
          margin-right: 0;
          margin-left: $spacing-03;
        }
      }
    }
  }

  .#{$prefix}--skeleton {
    .#{$prefix}--progress-step {
      flex: unset;
    }
  }
}