.#{$prefix}steps {
  text-align: center;

  &-line {
    position: relative;
    display: inline-block;

    &::after {
      @include border(bottom);

      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 12px;
      width: 100%;
    }
  }

  &-item {
    display: inline-block;
    position: relative;
    margin: 0 40px;
    z-index: 2;

    &-first {
      display: inline-block;
      position: relative;
      margin: 0 40px 0 0;
      z-index: 2;

      &-icon {
        display: block;
        font-size: 24px;
        width: 95%;
        color: $icon-color-default;
        background: $background-color-write;

        &::before {
          color: $icon-color-default;
        }
      }

      &-on {
        // emfe-steps-item-first-on-icon
        &-icon {
          display: block;
          font-size: 24px;
          width: 95%;
          margin-left: 5%;
          color: $brand-color-default;
          background: $background-color-write;
        }
      }
    }

    &-last {
      display: inline-block;
      position: relative;
      margin: 0 0 0 40px;
      z-index: 2;

      &-icon {
        display: block;
        font-size: 24px;
        width: 95%;
        margin-left: 5%;
        color: $icon-color-default;
        background: $background-color-write;

        &::before {
          color: $icon-color-default;
        }
      }

      &-on {
        // emfe-steps-item-last-on-icon
        &-icon {
          display: block;
          font-size: 24px;
          width: 95%;
          margin-left: 5%;
          color: $brand-color-default;
          background: $background-color-write;
        }
      }
    }

    &-icon {
      display: block;
      font-size: 24px;
      width: 90%;
      margin: 0 auto;
      color: $brand-color-default;
      background: $background-color-write;

      &::before {
        color: $icon-color-default;
      }
    }

    &-text {
      padding-top: 4px;
      font-size: 16px;
      line-height: 1;
      display: block;
      color: $text-color-Three;
    }

    &-on {
      // emfe-steps-item-on-icon
      &-icon {
        display: block;
        font-size: 24px;
        width: 90%;
        margin: 0 auto;
        background: $background-color-write;
        color: $brand-color-default;
      }

      &-text {
        color: $brand-color-default;
      }
    }
  }
}