//
// Stepper
// --------------------------------------------------

.stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  &-item {
    flex: 1;
    display: flex;
    position: relative;
    padding-bottom: $padding-small-vertical + $stepper-title-line-height;

    &:before {
      content: "";
      left: -50%;
      height: $stepper-line-height;
      margin-left: ceil($stepper-size * 0.5);
      margin-right: ceil($stepper-size * 0.5);
      right: 50%;
      position: absolute;
      top: ceil($stepper-size * 0.5);
      margin-top: -(ceil($stepper-line-height * 0.5));
      z-index: 1;

      @include themes(background, stepper-default-border);
    }

    &:first-child {
      &:before {
        content: none;
      }
    }

    &:not(.stepper-item-disabled) {
      cursor: pointer;

      &:hover,
      &:focus {
        .stepper-item-title {
          @include themes(color, color-new-heading);
        }

        .stepper-item-btn {
          @include themes(background-color, color-new-body-dark);
        }
      }
    }

    // Elements

    &-btn {
      height: $stepper-dot-size;
      width: $stepper-dot-size;
      margin-top: ceil(($stepper-size - $stepper-dot-size) * 0.5);
      margin-bottom: ceil(($stepper-size - $stepper-dot-size) * 0.5);
      padding: 0;
      font-size: $font-size-small;
      line-height: $stepper-dot-size - 1;
      border-radius: ceil($stepper-dot-size * 0.5);
      position: relative;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      z-index: 2;
      border-width: 0;
      font-weight: $font-weight-medium;

      @include themes(background, stepper-btn-default-bg);
      @include themes(color, stepper-btn-default-color);
    }

    &-title {
      position: absolute;
      top: $stepper-size + $padding-small-vertical;
      right: 50%;
      text-align: center;
      font-size: $font-size-base;
      line-height: $stepper-title-line-height;
      font-weight: $font-weight-medium;

      @include themes(color, stepper-title-color);

      @include transform(translateX(50%));
      @include text-overflow();
    }

    // States

    &-checked {
      &:before {
        background: $brand-success;
      }

      .stepper-item-btn {
        background-color: transparent;
        height: $stepper-size;
        width: $stepper-size;
        margin-top: 0;
        margin-bottom: 0;
        color: $brand-success;

        &:before {
          content: "\f00c";
          font-family: $font-family-awesome;
          font-weight: $font-family-awesome-weight;
          font-size: $font-size-extra-small;
        }
      }

      &:not(.stepper-item-disabled) {
        &:hover,
        &:focus {
          .stepper-item-btn {
            @include themes-value(background-color, transparent);
            @include themes(color, color-new-body-dark);
          }
        }
      }
    }

    &-active {
      cursor: default;

      &:before {
        background: $brand-primary;
      }

      .stepper-item-btn {
        background-color: $brand-primary;
      }

      .stepper-item-title {
        @include themes(color, color-new-heading);
      }
    }
  }

  // Number Variation

  &-numbered {
    $size-numbered: ceil($grid-unit-y * 4.5);
    $size-numbered-btn: ceil($grid-unit-y * 2.5);

    .stepper-item {
      padding-bottom: $stepper-title-line-height;

      &:before {
        margin-left: ceil($size-numbered * 0.5);
        margin-right: ceil($size-numbered * 0.5);
        top: ceil($size-numbered * 0.5);
        margin-top: -(ceil($stepper-line-height * 0.5));
        z-index: 1;
      }

      &:not(.stepper-item-disabled) {
        &:hover,
        &:focus {
          .stepper-item-title {
            @include themes(color, color-new-body-dark);
          }

          .stepper-item-btn {
            @include themes(color, color-new-body-dark);
            @include themes(
              background-color,
              stepper-numbered-btn-default-hover-bg
            );
            @include themes-border(stepper-numbered-btn-default-hover-border);
          }
        }
      }

      &-title {
        top: $size-numbered;
        right: 50%;
      }

      &-btn {
        height: $size-numbered-btn;
        width: $size-numbered-btn;
        margin-top: ceil(($size-numbered - $size-numbered-btn) * 0.5);
        margin-bottom: ceil(($size-numbered - $size-numbered-btn) * 0.5);
        line-height: $size-numbered-btn - 1;
        border-radius: ceil($size-numbered-btn * 0.5);

        @include themes(background-color, stepper-numbered-btn-default-bg);
        @include themes-border(stepper-numbered-btn-default-border);
        @include themes(color, stepper-numbered-btn-default-color);
      }

      &-checked {
        .stepper-item-btn {
          //line-height: $size-numbered-btn + 1;

          //@include themes-value(border-width, 0);
          @include themes(background-color, stepper-numbered-btn-checked-bg);
          @include themes(color, stepper-numbered-btn-checked-color);
          @include themes-value(border-color, transparent);

          &:before {
            content: none;
          }

          //&:hover,
          //&:focus {
          //  line-height: $size-numbered-btn - 1;
          //}
        }
      }

      &-active {
        .stepper-item-btn {
          //@include themes-value(border-width, 0);
          @include themes(background-color, stepper-numbered-btn-active-bg);
          @include themes(color, stepper-numbered-btn-active-color);
          @include themes-value(border-color, transparent);
        }
      }
    }
  }

  &-md {
    $size: $grid-unit-y * 4;

    $size-md: $grid-unit-y * 6;
    $size-md-btn: $grid-unit-y * 4;

    .stepper-item {
      padding-bottom: $stepper-title-line-height;

      &:before {
        margin-left: ceil($size-md * 0.5);
        margin-right: ceil($size-md * 0.5);
        top: ceil($size-md * 0.5);
        margin-top: -(ceil($stepper-line-height * 0.5));
        z-index: 1;
      }

      &:not(.stepper-item-disabled) {
        &:hover,
        &:focus {
          .stepper-item-title {
            @include themes(color, color-new-body-dark);
          }

          .stepper-item-btn {
            @include themes(color, color-new-body-dark);
            @include themes(
              background-color,
              stepper-numbered-btn-default-hover-bg
            );
            @include themes-border(stepper-numbered-btn-default-hover-border);
          }
        }
      }

      &-btn {
        height: $size-md-btn;
        width: $size-md-btn;
        margin-top: ceil(($size-md - $size-md-btn) * 0.5);
        margin-bottom: ceil(($size-md - $size-md-btn) * 0.5);
        line-height: $size-md-btn - 1;
        border-radius: ceil($size-md-btn * 0.5);
        font-size: $font-size-small;

        @include themes(background-color, stepper-numbered-btn-default-bg);
        @include themes-border(stepper-numbered-btn-default-border);
        @include themes(color, stepper-numbered-btn-default-color);
      }

      .stepper-item-title {
        top: $size-md;
      }

      &-checked {
        .stepper-item-btn {
          @include themes-value(border-width, 0);
          @include themes(background-color, stepper-numbered-btn-checked-bg);
          @include themes(color, stepper-numbered-btn-checked-color);

          &:before {
            content: none;
          }
        }
      }

      &-active {
        .stepper-item-btn {
          @include themes-value(border-width, 0);
          @include themes(background-color, stepper-numbered-btn-active-bg);
          @include themes(color, stepper-numbered-btn-active-color);
        }
      }
    }
  }
}