@import '../variables';
@import '../theme-colors';

.form-wizard {
  hr {
    margin: 0 !important;
    width: 100% !important;
  }

  .nav-link {
    padding: 0;
  }

  .tab-step {
    height: 40px;
    position: relative;
    padding-right: 16px;
    border-radius: 0 20px 20px 0;
    background-color: var(--base-color);
    color: $wizard-step-btn-default-color;

    &:hover {
      color: $brand-color;
    }
  }

  .tab-step-init {
    height: 40px;
    padding: 9px 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 20px 20px 0;
    background-color: var(--base-color);
    color: $wizard-step-btn-default-color;

    &:hover {
      color: $brand-color;
    }
  }

  .tab-step {
    &:before {
      content: '';
      width: 20px;
      height: 42px;
      margin-right: 16px;
      display: inline-block;
      vertical-align: middle;
      border-radius: 0 20px 20px 0;
      margin-top: -1px !important;
      background-color: var(--tab-step-before-bg);
    }
  }

  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    background: none;
  }

  .nav-link.active {
    .tab-step, .tab-step-init {
      color: $white;
      background-color: $brand-color;
    }
  }

  .nav-pills {
    .nav-item {
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: -13px !important;

      &:first-child {
        z-index: 105;
        margin-left: 0 !important;
      }
    }

    @for $i from 2 through 50 {
      .nav-item:nth-child(#{$i}) {
        z-index: 20-$i;
        margin-left: -10px;
      }
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .form-wizard {
    .tab-step {
      padding-left: 16px;
      padding-right: initial;
      border-radius: 20px 0 0 20px;

      &:before {
        margin-left: 16px;
        margin-top: -1px !important;
        border-radius: 20px 0 0 20px;
        margin-right: initial !important;
      }
    }

    .tab-step-init {
      border-radius: 20px 0 0 20px;
    }

    .nav-pills {
      padding-right: 0;

      .nav-item {
        &:first-child {
          margin-left: -13px !important;
        }
      }
    }
  }
}
