.ere-property-multi-step {
  .ere-steps {
    @include d-flex();
    @include flex-wrap();
    margin-bottom: 50px;

    button.ere-btn-arrow {
      border: 0;
      height: var(--ere-btn-step-height);
      background: var(--ere-btn-step-bg-color);
      position: relative;
      text-decoration: none;
      text-transform: none;
      color: var(--ere-btn-step-text-color);
      @include transition(all .3s);
      opacity: 1;
      padding: 0 10px 0 25px;
      margin: 0 5px 5px 0;
      line-height: 1;
      &:after {
        content: "";
        border-top: calc(var(--ere-btn-step-height) * 0.5) solid transparent;
        border-bottom: calc(var(--ere-btn-step-height) * 0.5) solid transparent;
        border-left: calc(var(--ere-btn-step-height) * 0.5) solid var(--ere-btn-step-bg-color);
        position: absolute;
        right: 0;
        top: 0;
        @include transform(translateX(100%));
        z-index: 1;
        @include transition(all .3s);
      }
      &:before {
        content: "";
        border-top: calc(var(--ere-btn-step-height) * 0.5) solid transparent;
        border-bottom: calc(var(--ere-btn-step-height) * 0.5) solid transparent;
        border-left: calc(var(--ere-btn-step-height) * 0.5) solid white;
        position: absolute;
        left: 0;
        top: 0;
      }
      &:first-child {
        padding-left: 10px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        &:before {
          display: none;
        }
      }
      &:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-right: 0;
        &:after {
          display: none;
        }
      }
      &.active,
      &:hover,
      &:active,
      &:focus {
        color: var(--ere-btn-step-active-text-color);
        background: var(--ere-btn-step-active-bg-color);
        &:after {
          border-left-color: var(--ere-btn-step-active-bg-color);
        }
      }

    }
  }
}