.required-info {
  margin: ($grid-gutter-width / 2) 0;
  .required-star {
    color: $danger;
  }
}
// floating labels
.label-slide {

  .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    position: relative;

    label {
      display: block;
      background: $white;
      position: absolute;
      cursor: text;
      top: 0;
      font-size: $input-font-size * .86;
      margin: 0;
      padding: 0 rem(5px);
      transform: translateY(-50%);
      transition: $transition-base;
      left: $input-padding-x;
      z-index: 10;
      line-height: 1.3;
      pointer-events: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: calc(100% - (2 * #{$input-padding-x}));

      &:after {
        /* Shop 5.5
        content: " ";
        display: block;
        position: absolute;
         */
        background: $white;
        height: rem(2px);
        top: 45%;
        z-index: -1;
      }
    }

    .form-control {
      &::placeholder {
        transition: $transition-base;
      }

      &:placeholder-shown {
        &:not(:focus) {
          &::placeholder {
            opacity: 0;
          }

          & ~ label {
            top: calc((#{$input-line-height * 1em} + #{$input-btn-padding-y * 2} + #{$input-height-border}) / 2);
            font-size: $input-font-size;
            color: $input-placeholder-color;
            /* Shop 5.5
            &:after {
              display: none;
            }
             */
          }

          &.form-control-sm ~ label {
            top: calc((#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) / 2);
            font-size: $input-font-size-sm;
          }

          &.form-control-lg ~ label {
            top: calc((#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) / 2);
            font-size: $input-font-size-lg;
          }
        }
      }
    }

    &.typeahead-required {
      .col-form-label::after {
        content: '*';
        color: $danger;
      }
      label:not(.focused) {
        top: calc((#{$input-line-height * 1em} + #{$input-btn-padding-y * 2} + #{$input-height-border}) / 2); font-size: $input-font-size; color: $input-placeholder-color;
      }
    }

    .input-group-prepend + input + label {
      left: 3.5rem;
    }
  }

  input[required],
  textarea[required],
  select[required] {
    + .col-form-label::after {
      content: '*';
      color: $danger;
    }
  }
  /* Do not show required star on the coupon field, although it technically is required, it doesn't make sense. */
  input[required]#couponCode {
    + .col-form-label::after {
      content: '';
    }
  }

  @each $state, $data in $form-validation-states {
    .form-group {
      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }
    }
  }

}

// form counter / choose_quantity
.choose_quantity {
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;

  .form-control {
    border: 0;
    text-align: right;
    font-weight: $font-weight-bold;
    -moz-appearance: auto;
  }

  .quantity.has-unit {
    padding-right: rem(5px);
  }

  .input-group-text {
    border: 0;
    background: none;
    font-weight: $font-weight-normal;
    padding: rem(10px) rem(8px);
  }
}

// labels with images
.custom-control-label-image {
  display: flex;
  align-items: center;

  &::before, &::after {
    top: auto;
  }
}

// font weight bold for checked inputs
input[type='radio'], input[type='checkbox'] {
  &:checked + label {
    font-weight: $font-weight-bold;
  }
}

// toggle password visibility
[data-toggle-password] {
  position: absolute;
  right: rem(15px);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

// form visibility triggered by icon
.form-icon-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .form-control {
    padding-right: ($spacer + 2 * $input-padding-x);
    transition: $transition-base;
    width: auto;

    &:not(:focus) {
      width: 0;
      padding: 0;
      border: 0;
      opacity: 0;

      + .form-icon-trigger-label {
        margin-left: 0;
      }
    }
  }
}

.form-icon-trigger-label {
  margin: 0;
  padding: $input-padding-y $input-padding-x;
  width: ($spacer + 2 * $input-padding-x);
  text-align: center;
  z-index: 1;
  cursor: pointer;
  transition: color $transition-base-duration $transition-base-timing;
  @include hover {
    color: $link-hover-color;
  }
}

.custom-select {
  -webkit-appearance: none;
}

.bootstrap-select.custom-select {
  button.dropdown-toggle {
    height: inherit;

    &:hover, &:focus {
      background: $white;
      outline: 0;
      box-shadow: none;
    }

    &:focus {
      border-color: $primary;
    }
  }

  &.show button.dropdown-toggle {
    background: $white;
    border-color: $primary;
    outline: 0;
  }

  button.dropdown-toggle {
    background-color: $input-bg;
    border: 1px solid $colorNeutral4;
    box-shadow: none;
    color: color-yiq($input-bg);

    &:not(:disabled):not(.disabled):not(.et-hover-underline):hover {
      background-color: inherit;
      border-color: inherit;
      color: inherit;
    }
    &:focus:not(.navbar-toggler):not(.et-collapse) {
      outline: 0 !important;
    }
  }

  .filter-option {
    display: flex;
    align-items: center;
  }
}

legend {
  font-size: 1rem;
  font-weight: $font-weight-bolder;
  padding-bottom: 5px;
  margin: 10px 0 20px 0;
  border-bottom: solid 1px $colorNeutral5;
}

label[for="city"],
label[for="register-shipping_address-city"] {
  padding: 0;
}

label {
  display: block;
}

.form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-group.has-error {
  .form-control {
    border: 1px solid theme-color("danger");
  }
}

.radio-w-100 {
  .custom-control-inline {
    display: block;
    width: 100%;
    padding-bottom: $spacer / 2;
  }
}

// ET 360 Styles
.input-group {
  &.et-input-group-round {
    & > .form-control:first-child,
    & > .custom-select:first-child {
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }
    & > .input-group-append>.btn,
    & > .input-group-append>.input-group-text {
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }
  }
}