$workflow-color-tab-complete-bg: #007acc;
$workflow-color-tab-incomplete-bg: #dddddd;
$workflow-color-tab-trough-bg: #efefef;
$workflow-color-tab-border: #ffffff;
$workflow-color-tab-link-active: #ffffff;
$workflow-color-tab-link-inactive: #43a4d7;

$workflow-color-label-error: $brand-danger;

$workflow-size-tab-border: 2px;
$workflow-size-tab-arrow: 20px;
$workflow-size-tab-padding: 15px;

.workflow {
  ul.nav-tabs {
    padding: 0 13px;
  }

  td {
    &.actions {
      vertical-align: top;
      width: 308px;
      padding-right: 10px;
    }

    &.help_text {
      vertical-align: top;
      width: 340px;
      padding-left: 10px;
      border-left: 1px solid $border-color;
    }
  }

  fieldset > table {
    margin-bottom: 0;
  }

  &.wizard {
    .row {
      .btn {
        float: none;
        margin: 0;
      }

      .next {
        text-align: right;
      }
  
      .back {
        text-align: left;
      }

    }

    .nav-tabs.wizard-tabs {
      border-bottom: 0;
      background: $workflow-color-tab-trough-bg;
      padding: 0;

      li {
        margin-bottom: 0;
        position: relative;

        &:before {
          position: absolute;
          top: 0;
          right: -$workflow-size-tab-arrow;
          z-index: 2;
          display: block;
          border: $workflow-size-tab-arrow solid transparent;
          border-right: 0;
          border-left: $workflow-size-tab-arrow solid $workflow-color-tab-incomplete-bg;
          content: '';
        }

        &:after {
          position: absolute;
          top: -$workflow-size-tab-border;
          right: -($workflow-size-tab-arrow + $workflow-size-tab-border);
          z-index: 1;
          display: block;
          border: ($workflow-size-tab-arrow + $workflow-size-tab-border) solid transparent;
          border-right: 0;
          border-left: ($workflow-size-tab-arrow + $workflow-size-tab-border) solid $workflow-color-tab-border;
          content: '';
        }

        &.active:before,
        &.done:before {
          border-left: $workflow-size-tab-arrow solid $workflow-color-tab-complete-bg;
        }

        a {
          border: 0;
          border-radius: 0;
          background: $workflow-color-tab-incomplete-bg;
          color: $workflow-color-tab-link-inactive;
          padding: 0 $workflow-size-tab-padding;
          padding-left: $workflow-size-tab-arrow + $workflow-size-tab-padding;
          line-height: $workflow-size-tab-arrow * 2;
          position: relative;
          margin: 0;
        }

        &:first-child a {
          padding-left: $workflow-size-tab-padding;
        }

        &.active a {
          background: $workflow-color-tab-complete-bg;
          color: $workflow-color-tab-link-active;
        }

        &.done a {
          background: $workflow-color-tab-complete-bg;
        }
      }
    }

    label.error {
      color: $workflow-color-label-error;
    }
  }
}
