.button-input-secondary {
  min-height: $input-min-height;
}

.submit-button {
  padding: $form-group-child-padding;
}

.wig-hamburger {
  outline: none;
  @include breakpoint(small) {
    position: absolute;
    left: 15px;
    top: 15px;
  }
  @include breakpoint(medium) {
    display: none;
  }
  &--collapse {
    @extend .hamburger--collapse;
  }
  &--is-active {
    @extend .is-active;
  }
}

$step-button-height: 48px;
$tab-button-height: $step-button-height;
%step-button-primary-active {
  border-radius: 2px 2px 0 0;
  font-weight: $font-weight-bold;
  background-color: $white;
  border-bottom-color: $white;
  border-top: 3px solid $primary-color;
}

.step-button {
  @include flex-align(center, middle);
  padding-left: 20px;
  padding-right: 20px;
  text-transform: capitalize;
  display: inline-flex;
  height: $step-button-height;
  cursor: pointer;
  white-space: nowrap;
  &--primary {
    border-bottom: 1px solid $gray-border-color;
    border-left: 1px solid $gray-border-color; //  :nth-child(5) > span
    &:last-of-type {
      border-right: 1px solid $gray-border-color;
    }
    &.step-button--active {
      @extend %step-button-primary-active;
    }
  }
  &--danger {
    flex-direction: row-reverse;
    color: $alert-color;
    .wig-icon {
      color: $alert-color;
      background-color: transparent;
    }
    &:before {
      font: normal normal normal 24px/1 FontAwesome;
      content: "\F06A";
      padding-left: 10px;
    }
  }
}

.wig-tab-button {
  @extend .step-button;
  background-color:#f6f6f7;
  &--primary {
    @extend .step-button--primary;

    &.wig-tab-button--active {
      @extend %step-button-primary-active;
    }
  }
  &__text-container {
    height: 100%;
    display: flex;
    align-items: center;
  }
  &__close-button {
    font-size: rem-calc(20px)
  }
}