/*------------------------------------
  Steps v3
------------------------------------*/

.u-steps-v3 {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: $g-color-gray-light-v4;
  border-radius: .25rem;

  &::after {
    content: "";
    display: table;
    width: 100%;
  }

  > * {
    display: inline-block;
    vertical-align: middle;
  }

  &__item {
    float: left;
    margin-right: 15px;

    a {
      &:hover {
        text-decoration: none;
      }
    }
  }

  &__indicator {
    font-style: normal;

    &::after {
      content: " - ";
    }
  }
}

@media (min-width: $g-md) {
  .u-steps-v3 {
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
    border-radius: 0;

    &__indicator {
      position: absolute;
      top: 0;
      left: 50%;
      width: 26px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background-color: $g-color-primary;
      box-shadow: 0;
      border-radius: 50%;
      transform: translateX(-50%);
      transition: {
        property: box-shadow;
        duration: .2s;
        timing-function: ease-in;
      }

      &::after {
        display: none;
      }
    }

    &__item {
      text-align: center;
      float: left;
      list-style: none;
      margin-right: 40px;

      a,
      span {
        position: relative;
        display: block;
        color: $g-color-gray-dark-v2;
        padding-top: 40px;
        transition: {
          property: color;
          duration: .2s;
          timing-function: ease-in;
        }

        &::before {
          content: "";
          position: absolute;
          top: 11px;
          left: 50%;
          display: block;
          width: 120px;
          height: 4px;
          margin-left: 13px;
        }
      }

      a {
        &::before {
          background-color: $g-color-primary;
        }

        .u-steps-v3__indicator {
          color: $g-color-white;
          background-color: $g-color-primary;
        }

        &:hover {
          text-decoration: none;
        }
      }

      span {
        &::before {
          background-color: $g-color-gray-light-v4;
        }

        .u-steps-v3__indicator {
          color: $g-color-gray-dark-v2;
          background-color: $g-color-gray-light-v4;
        }
      }

      &:last-child {
        a,
        span {
          &::before {
            display: none;
          }
        }
      }

      &:hover {
        a {
          color: $g-color-primary;

          .u-steps-v3__indicator {
            box-shadow: 0 0 0 3px rgba($g-color-primary, .3);
          }
        }
      }

      &.active {
        a,
        span {
          .u-steps-v3__indicator {
            color: $g-color-white;
            background-color: $g-color-primary;
          }
        }
      }
    }
  }
}