// Name:            Steps
//
// Component:       `pearls`
//
// Modifiers:       'pearl-icon'
//                  'pearl-number'
//                  'pearl-title'
//                  'pearl-desc'
//                  'current'
//                  'done'
//                  'error'
//                  'disabled'
//                  'pearls-vertical'
//                  'pearls-lg'
//                  'pearls-sm'
//                  'pearls-xs'
//
// Markup:
// <div class="pearl done">
//   <span class="pearl-number">1</span>
//   <div class="pearl-title">Title</div>
// </div>
// ========================================================================

// Variables
// ========================================================================
$pearls-margin-bottom: $line-height-computed !default;
$pearl-line-bg: $gray-100 !default;
$pearl-line-size: 4px !default;
$pearl-line-xs-size: 2px !default;
$pearl-color: $inverse !default;
$pearl-bg: $gray-300 !default;
$pearl-border-size: 2px !default;
$pearl-border-color: $pearl-bg !default;
$pearl-current-scale: 1.3 !default;
$pearl-current-color: $brand-primary !default;
$pearl-current-bg: $inverse !default;
$pearl-current-line-bg: $brand-primary !default;
$pearl-current-border-color: $pearl-current-color !default;
$pearl-done-color: $inverse !default;
$pearl-done-bg: $brand-primary !default;
$pearl-done-line-bg: $brand-primary !default;
$pearl-done-border-color: $pearl-done-bg !default;
$pearl-error-color: $brand-danger !default;
$pearl-error-bg: $inverse !default;
$pearl-error-line-bg: $brand-primary !default;
$pearl-error-border-color: $pearl-error-color !default;
$pearl-disabled-color: $pearl-color !default;
$pearl-disabled-bg: $pearl-bg !default;
$pearl-disabled-line-bg: $pearl-line-bg !default;
$pearl-disabled-border-color: $pearl-disabled-bg !default;
$pearl-title-margin-top: .5em !default;
$pearl-title-font-size: 16px !default;
$pearl-number-font-size: 18px !default;
$pearl-icon-font-size: $pearl-number-font-size !default;
$pearl-size: 36px !default;
$pearl-lg-title-font-size: 18px !default;
$pearl-lg-number-font-size: 20px !default;
$pearl-lg-icon-font-size: $pearl-lg-number-font-size !default;
$pearl-lg-size: 40px !default;
$pearl-sm-title-font-size: 14px !default;
$pearl-sm-icon-font-size: $pearl-sm-title-font-size !default;
$pearl-sm-number-font-size: 16px !default;
$pearl-sm-size: 32px !default;
$pearl-xs-title-font-size: 12px !default;
$pearl-xs-icon-font-size: $pearl-xs-title-font-size !default;
$pearl-xs-number-font-size: 12px !default;
$pearl-xs-size: 24px !default;

// Component: pearls
// ========================================================================
.pearls {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 $pearls-margin-bottom;
}

.pearl {
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center;

  &::before, &::after {
    position: absolute;
    top: ($pearl-size / 2);
    z-index: $zindex-init;
    width: 50%;
    height: $pearl-line-size;
    content: "";
    background-color: $pearl-line-bg;
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  &:first-child::before, &:last-child::after {
    display: none !important;
  }
}

.pearl-number, .pearl-icon {
  position: relative;
  z-index: $zindex-base;
  display: inline-block;
  width: $pearl-size;
  height: $pearl-size;
  line-height: ($pearl-size - 2 * $pearl-border-size);
  color: $pearl-color;
  text-align: center;
  background: $pearl-bg;
  border: $pearl-border-size solid $pearl-border-color;
  border-radius: 50%;
}

.pearl-number {
  font-size: $pearl-number-font-size;
}

.pearl-icon {
  font-size: $pearl-icon-font-size;
}

.pearl-title {
  @include text-truncate();
  display: block;
  margin-top: $pearl-title-margin-top;
  margin-bottom: 0;
  font-size: $pearl-title-font-size;
  color: $subtitle-color;
}

// State Modifier
// ========================================================================
.pearl {
  &.current, &.active {
    &::before, &::after {
      background-color: $pearl-current-line-bg;
    }

    .pearl-number, .pearl-icon {
      color: $pearl-current-color;
      background-color: $pearl-current-bg;
      border-color: $pearl-current-border-color;
      transform: scale($pearl-current-scale);
    }
  }

  &.disabled {
    pointer-events: none;
    cursor: auto;

    &::before, &::after {
      background-color: $pearl-disabled-line-bg;
    }

    .pearl-number, .pearl-icon {
      color: $pearl-disabled-color;
      background-color: $pearl-disabled-bg;
      border-color: $pearl-disabled-border-color;
    }
  }

  &.error {
    &::before {
      background-color: $pearl-error-line-bg;
    }

    &::after {
      background-color: $pearl-line-bg;
    }

    .pearl-number, .pearl-icon {
      color: $pearl-error-color;
      background-color: $pearl-error-bg;
      border-color: $pearl-error-border-color;
    }
  }

  &.done {
    &::before, &::after {
      background-color: $pearl-done-line-bg;
    }

    .pearl-number, .pearl-icon {
      color: $pearl-done-color;
      background-color: $pearl-done-bg;
      border-color: $pearl-done-border-color;
    }
  }
}

// Size Modifier
// ========================================================================

.pearls-lg {
  .pearl {
    &::before, &::after {
      top: ($pearl-lg-size / 2);
    }

    &-title {
      font-size: $pearl-lg-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-lg-size;
      height: $pearl-lg-size;
      line-height: ($pearl-lg-size - 2 * $pearl-border-size);
    }

    &-icon {
      font-size: $pearl-lg-icon-font-size;
    }

    &-number {
      font-size: $pearl-lg-number-font-size;
    }
  }
}

.pearls-sm {
  .pearl {
    &::before, &::after {
      top: ($pearl-sm-size / 2);
    }

    &-title {
      font-size: $pearl-sm-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-sm-size;
      height: $pearl-sm-size;
      line-height: ($pearl-sm-size - 2 * $pearl-border-size);
    }

    &-number {
      font-size: $pearl-sm-number-font-size;
    }

    &-icon {
      font-size: $pearl-sm-icon-font-size;
    }
  }
}

.pearls-xs {
  .pearl {
    &::before, &::after {
      top: ($pearl-xs-size / 2);
      height: $pearl-line-xs-size;
    }

    &-title {
      font-size: $pearl-xs-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-xs-size;
      height: $pearl-xs-size;
      line-height: ($pearl-xs-size - 2 * $pearl-border-size);
    }

    &-number {
      font-size: $pearl-xs-number-font-size;
    }

    &-icon {
      font-size: $pearl-xs-icon-font-size;
    }
  }
}