// Wizard
//================================================== //

// NOTE: See also "_header.scss" for Wizard styles that are specific to the header.

//Internal Variables
$wizard-height: 164px;
$wizard-tick-border-width: 2px;
$wizard-tick-size: 14px;
$wizard-current-state-size: ($wizard-tick-size * 1.3);

.wizard-header {
  @include transition(opacity 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  background-color: inherit;
  opacity: 0.1;
  padding: (calc($wizard-height / 2) - $wizard-tick-border-width) calc($wizard-height / 4);
  position: relative;

  .bar {
    background-color: $wizard-bar-bg;
    height: 2px;
    position: relative;
  }

  .completed-range {
    @include transition(width 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    background-color: $wizard-active-color;
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    width: 0%;
  }

  .tick {
    background-color: $wizard-default-bg;
    border-radius: calc($wizard-tick-size / 2);
    color: $wizard-bar-bg;
    display: inline-block;
    height: $wizard-tick-size;
    margin-left: -3px;
    margin-top: -(calc($wizard-tick-size / 2) + calc($wizard-tick-border-width / 2));
    position: absolute;
    -webkit-touch-callout: none;
    width: $wizard-tick-size;

    // Border for incomplete or non-current ticks
    &::after {
      border: $wizard-tick-border-width solid $wizard-bar-bg;
      border-radius: calc($wizard-tick-size / 2);
      content: '';
      height: $wizard-tick-size - $wizard-tick-border-width * 2;
      left: 0;
      position: absolute;
      top: 0;
      width: $wizard-tick-size - ($wizard-tick-border-width * 2);
    }

    // Default Placement for Focus State
    &::before {
      border: 1px solid rgba($wizard-active-color, 0);
      border-radius: 0;
      content: '';
      height: 0;
      left: calc($wizard-tick-size / 2);
      position: absolute;
      top: calc($wizard-tick-size / 2);
      width: 0;
    }

    .label {
      //@include transition(border-color 200ms cubic-bezier(.17, .04, .03, .94));
      border: 1px solid transparent;
      border-radius: 2px;
      color: $wizard-color;
      display: inline-block;
      height: 24px;
      line-height: 22px;
      padding: 0 3px;
      position: absolute;
      top: ($wizard-tick-size * 2) - 8;
      white-space: nowrap;

      &.is-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &.current,
    &.complete {
      color: $wizard-active-color;

      &::after {
        border: 0;
        left: 0;
        top: 0;
      }

      .label {
        color: $wizard-active-text-color;
        top: ($wizard-tick-size * 2) - 8;
      }
    }

    &.current {
      @include css3(box-shadow, 0 0 0 2px $wizard-default-bg);

      background-color: $wizard-active-color;
      border-radius: 50%;

      &::before {
        border: 1px solid rgba($wizard-active-color, 1);
        border-radius: 50%;
        height: 18.1px;
        left: -3px;
        top: -3px;
        width: 18.1px;
      }

      .label {
        font-weight: $ids-number-font-weight-bold;
      }
    }

    &.complete {
      background-color: $wizard-active-color;
    }

    &.is-disabled {
      @include unselectable;

      cursor: default;
      text-decoration: none;
      width: $wizard-tick-size - 2;

      &::after {
        border-width: calc($wizard-tick-border-width / 2);
      }

      .label {
        color: $wizard-disabled-color;
        font-weight: $ids-number-font-weight-base;
      }

      &.current,
      &.complete {
        background-color: $wizard-default-bg;

        &::after {
          border: calc($wizard-tick-size / 2) solid $wizard-bar-bg;
          border-radius: calc($wizard-tick-size / 2);
          content: '';
          height: $wizard-tick-size - $wizard-tick-border-width * 2;
          left: 0;
          position: absolute;
          top: 0;
          width: $wizard-tick-size - ($wizard-tick-border-width * 2);
        }
      }
    }
  }

  a.tick {
    &.current {
      cursor: default;
    }

    &:hover:not(.current):not(.is-disabled):not([disabled]) .label::after {
      bottom: 1px;
      content: '';
      left: 0;
      margin-left: 3px;
      position: absolute;
      width: calc(100% - 6px);
    }

    &:focus:not(.hide-focus):not(.is-disabled):not([disabled]) .label {
      box-shadow: $wizard-focus-box-shadow, $focus-box-shadow;
    }
  }
}

// Styles used by the Header Wizard
.header {
  .wizard {
    margin: 0 20px;
  }

  .wizard-header {
    background-color: transparent;
    padding: (calc($wizard-height / 8) - $wizard-tick-border-width) calc($wizard-height / 4) (calc($wizard-height / 4) - $wizard-tick-border-width);

    .bar {
      background-color: $wizard-header-secondary-color;
    }

    .completed-range {
      background-color: $wizard-header-color;
    }

    .tick {
      background-color: $header-bg-color;

      &::after {
        background-color: $header-bg-color;
        border: $wizard-tick-border-width solid $wizard-header-secondary-color;
      }

      &:focus .label {
        border: 1px solid $wizard-header-color;
        border-radius: 8px;
      }

      .label {
        color: $wizard-header-text-color;
      }

      &.current,
      &.complete {
        background-color: $wizard-header-color;

        &::after {
          background-color: $wizard-header-color;
          border-color: transparent;
        }

        .label {
          color: $wizard-header-color;
        }
      }

      &.current {
        border-color: $wizard-header-color;

        &::before {
          border-color: $wizard-header-color;
        }
      }

      &.is-disabled {
        .label {
          color: $wizard-header-disabled-color;
          font-weight: $ids-number-font-weight-base;
        }

        &.current,
        &.complete {
          background-color: $header-bg-color;

          &::after {
            border: calc($wizard-tick-size / 2) solid $wizard-header-disabled-color;
            border-radius: calc($wizard-tick-size / 2);
            content: '';
            height: $wizard-tick-size - $wizard-tick-border-width * 2;
            left: 0;
            position: absolute;
            top: 0;
            width: $wizard-tick-size - ($wizard-tick-border-width * 2);
          }
        }
      }
    }

    a.tick {
      &:hover:not(.current):not(.is-disabled):not([disabled]) .label {
        color: $wizard-header-color;
      }

      &:focus:not(.is-clicked):not(.is-disabled):not([disabled]) .label {
        box-shadow: $wizard-header-focus-box-shadow;
      }
    }
  }
}

// Toolbar with wizard for some patterns
.wizard-toolbar {
  background-color: $wizard-toolbar-bg-color;
  border-bottom: 1px solid $wizard-toolbar-border-color;
  display: inline-block;
  height: 72px;
  padding: 0 30px;
  width: 100%;

  .hyperlink {
    display: inline-block;
    margin-top: -22px;
    position: relative;
    top: 50%;
  }

  .wizard-header {
    background-color: $wizard-toolbar-bg-color;
    padding: 27px 0 0;
  }

  .wizard {
    float: right;
    padding-right: 30px;
    width: 45%;

    .tick:not(.current):not(.complete) {
      background-color: $wizard-toolbar-bg-color;
    }
  }
}

// Sectional Wizard (used as an alternative to Wizard in the Header)
.section-wizard {
  background-color: $ids-color-palette-white;
  border-bottom: 1px solid $ids-color-palette-slate-20;
  padding: 20px 0 0;

  .wizard-header {
    background-color: transparent;

    .tick:not(.complete):not(.current) {
      background-color: $ids-color-palette-white;
    }
  }

  &.alternate {
    background-color: $panel-bg-color;
    border-bottom-color: $panel-border-color;
  }
}

// RTL Styles
html[dir='rtl'] {
  .wizard-header {
    .completed-range {
      left: auto;
      right: 0;
    }

    .tick {
      margin-left: inherit;
      margin-right: -3px;

      // Border for incomplete or non-current ticks
      &::after {
        left: auto;
        right: 0;
      }

      // Default Placement for Focus State
      &::before {
        border-radius: 50%;
        left: auto;
        right: -2.9px;
      }

      &.current,
      &.complete {
        &::after {
          left: auto;
          right: $wizard-tick-border-width;
        }
      }
    }
  }

  // Toolbar with wizard for some patterns
  .wizard-toolbar {
    .wizard {
      float: left;
      padding-left: 30px;
      padding-right: inherit;

      .label {
        padding-left: inherit;
        padding-right: 2.5px;
      }
    }
  }
}