// --------------------------------------------------
// Plugins / Wizard
//


$table-border-color: #e4e4e4;
$border-radius-base: 1px;
$text-color: #555;

// Wizard
$wizard-step-number-size: 26px;
$wizard-step-number-border-width: 2px;
$wizard-step-number-margin: 10px;


// Base styles
//

.wizard-wrapper + .wizard-content.panel {
  margin-top: -1px;
}

.wizard.freeze .wizard-steps > li {
  cursor: default !important;
}

.modal-content > .wizard .wizard-wrapper {
  border-left: none;
  border-radius: 0;
  border-right: none;
  border-top: none;
}


// Wizard steps
//

// Wrapper
.wizard-wrapper {
  border: 1px solid $table-border-color;
  border-radius: $border-radius-base;
  white-space: nowrap;
  width: auto;
  position: relative;
  overflow: hidden;
}

// Steps
.wizard-steps {
  cursor: default;
  display: block !important;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  white-space: nowrap;
  transition: left 0.3s;
  user-select: none;

  & > li {
    display: inline-block;
    list-style: none;
    margin: 0 0 0;
    padding: 0 10px 0 (($wizard-step-number-size + ($wizard-step-number-border-width * 2)) + ($wizard-step-number-margin * 2));
    vertical-align: middle;

    // Step border
    & + li:before {
      background: $table-border-color;
      bottom: 0;
      content: "";
      margin-left: -$wizard-step-number-margin - 41px;
      position: absolute;
      top: 0;
      width: 1px;
    }
  }

  // Completed step
  & > li.completed {
    cursor: pointer;
  }

  // Active and completed steps
  & > li.active,
  & > li.completed {
    .wizard-step-caption {
      color: $text-color;
    }

    .wizard-step-description {
      color: #888;
    }

    .wizard-step-number {
      border-color: $text-color;
      color: $text-color;
    }
  }

  .wizard-step-number:after {
    display: none;
  }
}

.wizard-step-number,
.wizard-steps > li.completed .wizard-step-number:after {
  background: #fff;
  border-radius: 9999px;
  display: block;
  font-size: 14px;
  line-height: $wizard-step-number-size;
  position: absolute;
  text-align: center;
}

// Step number
.wizard-step-number {
  border: $wizard-step-number-border-width solid #bbb;
  color: #bbb;
  font-weight: 700;
  height: $wizard-step-number-size + ($wizard-step-number-border-width * 2);
  margin-left: -$wizard-step-number-margin - 30px;
  margin-top: -(($wizard-step-number-size + ($wizard-step-number-border-width * 2)) / 2);
  top: 50%;
  width: $wizard-step-number-size + ($wizard-step-number-border-width * 2);
}

.wizard-steps > li.completed .wizard-step-number {
  font-size: 0;
}

// Show icon
.wizard-steps > li.completed .wizard-step-number:after {
  content: '\f00c';
  font-family: Icons;
  font-size: 13px;
  font-weight: 400;
  height: $wizard-step-number-size;
  left: 0;
  width: $wizard-step-number-size;
  top: 0;
}


// Wizard captions and descriptions
//

.wizard-step-caption,
.wizard-step-description {
  color: #bbb;
  display: inline-block;
  line-height: 14px;
  white-space: normal;
}

.wizard-step-caption {
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 15px;
  vertical-align: middle;
}

.wizard-step-description {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
  position: relative;
}


// Wizard content
//

.wizard-content {
  padding-top: 20px;

  &:before, &:after {
    content: " ";
    display: table; }
  &:after {
    clear: both; }
}