/* ====== scss/compiled/core_removed/Wizard.scss ====== */

@import "_variables";


@l_Wizard-BG: @g_Region-BG;

.t-Dialog-page--wizard {
  border: contrast(@l_Wizard-BG, darken(@l_Wizard-BG,   10%), lighten(@l_Wizard-BG,   10%),  43%);
}

.t-Wizard {
  background-color: @l_Wizard-BG;
  border-radius: @g_Container-BorderRadius;
  border-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG,   10%), lighten(@l_Wizard-BG,   10%),  43%);
  box-shadow: 0 1px 2px @_base-shadow-2;

  .t-Wizard-title {
    color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG,  85%), 100%), desaturate(lighten(@l_Wizard-BG,  85%), 50%)), 100%);
  }

  .t-Wizard-header {
    @headerBg: contrast(@l_Wizard-BG, darken(@l_Wizard-BG,   2%), lighten(@l_Wizard-BG,   2%),  43%);
    background-color: @headerBg;
    border-color: contrast(@headerBg, darken(@headerBg,   5%), lighten(@headerBg,   5%),  43%);
  }
}


.t-WizardSteps-wrap {
  &:after {
    background-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG,   10%), lighten(@l_Wizard-BG,   10%),  43%);
  }
}

.t-WizardSteps-step .t-WizardSteps-marker {
  background-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG,   20%), lighten(@l_Wizard-BG,   20%),  43%);
}

.t-WizardSteps-step.is-complete .t-WizardSteps-marker {
  background-color: @g_Success-BG;
  color: #FFF;
}

.t-WizardSteps-step.is-active .t-WizardSteps-marker {
  background-color: @g_Accent-BG;
}

.t-WizardSteps-label {
  color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG,  85%), 100%), desaturate(lighten(@l_Wizard-BG,  85%), 50%)), 100%);
}

a.t-WizardSteps-wrap[href]:hover,
a.t-WizardSteps-wrap[href]:focus {
  .t-WizardSteps-label {
    color: @g_Link-Base;
    text-decoration: underline;
  }
}

a.t-WizardSteps-wrap[href]:focus .t-WizardSteps-marker {
  box-shadow: 0 0 0 1px @g_Region-BG, 0 0 0 2px @g_Focus, 0 0 1px 2px fade(@g_Focus, 25%);
}