/**
 * @file
 * Progress tracker styles.
 *
 * @see http://nigelotoole.github.io/progress-tracker/
 */

/**
 * Reduce top/bottom margins around progress tracker.
 */
.webform-progress-tracker.progress-tracker {
  margin-top: 20px;
  margin-bottom: 20px;
}

/**
 * Update progress text to show completed and active.
 */
.webform-progress-tracker .progress-step .progress-text {
  padding-top: 5px;
  padding-bottom: 0;
  color: #777;
}

.webform-progress-tracker .progress-step::after {
  background-color: #777;
}

.webform-progress-tracker .progress-step.is-active .progress-text {
  color: #333;
}

.webform-progress-tracker .progress-step.is-active .progress-title {
  font-weight: bold;
}

.webform-progress-tracker .progress-step.is-complete .progress-text {
  color: #333;
}

.webform-progress-tracker .progress-step .progress-marker,
.webform-progress-tracker .progress-step:hover .progress-marker {
  background-color: #777;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker,
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker,
.webform-progress-tracker .progress-step.is-complete::after {
  background-color: #333;
}

.webform-progress-tracker .progress-step.is-active .progress-marker,
.webform-progress-tracker .progress-step.is-active:hover .progress-marker {
  background-color: #2196f3;
}

/**
 * Make progress text smaller for tablets.
 */
@media screen and (max-width: 800px) {
  .webform-progress-tracker .progress-text {
    font-size: smaller;
  }
}

/**
 * Hide progress text smaller for mobile.
 */
@media screen and (max-width: 600px) {
  .webform-progress-tracker .progress-text {
    display: none;
  }
}

/**
  * Progress link styles.
 */
.webform-progress-tracker [role="link"] {
  cursor: pointer;
}

.webform-progress-tracker .progress-title[role="link"] {
  color: #1976d2;
}

.webform-progress-tracker .progress-title[role="link"]:hover,
.webform-progress-tracker .progress-title[role="link"]:focus {
  text-decoration: underline;
  color: #2196f3;
}

.webform-progress-tracker .progress-step.is-complete:hover .progress-marker[role="link"] {
  background-color: #1976f2;
}

/**
 * RTL support.
 *
 * @see https://github.com/NigelOToole/progress-tracker/issues/5
 */

[dir="rtl"] .progress-step:not(:last-child)::after {
  display: none;
}

[dir="rtl"] .progress-step:not(:first-child)::after {
  position: absolute;
  z-index: -10;
  top: 12px;
  right: -14px;
  bottom: 12px;
  display: block;
  width: 100%;
  height: 4px;
  content: "";
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

[dir="rtl"] .progress-tracker--center .progress-step::after {
  right: -50%;
}

[dir="rtl"] .webform-progress-tracker .progress-step {
  z-index: inherit;
}

[dir="rtl"] .progress-step:not(:first-child)::after {
  z-index: 0;
}