/** @component stepper */

@include exports('md-stepper') {
  .md-stepper {
    &-container {
      width: 100%;
      text-align: center;
      padding: 2%;

      div {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 2%;
      }
    }

    &-bubble {
      border-radius: 50%;
      display: inline-block;
      background: $md-white;
      cursor: pointer;
      height: 1.25rem;
      width: 1.25rem;
    }

    &-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    &-line {
      stroke-width: 0.125rem;
      stroke: $md-blue-50;
    }

    &-line-disabled {
      stroke-width: 0.125rem;
      stroke: $md-gray-30;
    }

    .md-step {
      &-incomplete {
        border: 0.125rem solid $md-blue-50;

        &:hover {
          background: $md-blue-10;
          border: 0.125rem solid $md-blue-60;
        }

        &:active {
          background: $md-blue-20;
          border: 0.125rem solid $md-blue-70;
        }

        &.active {
          background: $md-blue-20;
          border: 0.125rem solid $md-blue-50;
        }
      }

      &-complete {
        background: $md-blue-50;

        &:hover {
          background: $md-blue-60;
        }

        &:active {
          background: $md-blue-70;
        }

        &.active {
          background: $md-blue-50;
        }
      }

      &-error {
        border: 0.125rem solid $md-red-70;
        background: $md-white;

        &:hover {
          border: 0.125rem solid $md-red-70;
          background: $md-white;
        }

        &:active {
          border: 0.125rem solid $md-red-70;
          background: $md-white;
        }

        &.active {
          border: 0.125rem solid $md-red-70;
          background: $md-white;
        }
      }

      &-disabled {
        border: 0.125rem solid $md-gray-40;
        background: $md-white;
        pointer-events: none;
        cursor: default;

        &:hover {
          border: 0.125rem solid $md-gray-40;
          background: $md-white;
        }

        &:active {
          border: 0.125rem solid $md-gray-40;
          background: $md-white;
        }

        &.active {
          border: 0.125rem solid $md-gray-40;
          background: $md-white;
        }
      }

      &-title {
        cursor: pointer;
        font-family: 'CiscoSansTT Light';
        font-style: normal;
        font-weight: 500;
        font-size: 0.875rem;
      }

      &-title-disabled {
        cursor: default;
      }

    }

  }
}