/*------------------------------------------------------------
FORMS
====================================*/

/* Variables Custom */
$form-feedback-icon-valid-width:    2rem;
$form-feedback-icon-valid-height:   2rem;

$form-feedback-icon-invalid-width:  1.5rem;
$form-feedback-icon-invalid-height: 1.5rem;

$form-block-padding-y-mobile: 20px;
$form-block-padding-x-mobile: 15px;

$form-block-padding-y-desktop: 40px;
$form-block-padding-x-desktop: 35px;
/***************************************/

/* Label */
label {
  @extend %label;
  &.required:after {
    content: '*';
    margin-left: 5px;
  }
}

/* Label checkbox/radio/switch */
.col-form-label {
  @extend %label;
  padding-left: 0;
  &.required:after {
    content: '*';
    margin-left: 5px;
  }
}
label.custom-control {
  &.required:after {
    display: none;
  }
}

/* Grouped input */
.input-group {
  .input-group-append {
    min-width: $input-height;
    border-width: 0;
    .input-group-text {
      display: flex;
      width: 100%;
      text-align: center;
      justify-content: center;
    }
  }
  .form-control {
    border-right-width: 0;
    &:focus {
      border-right-width: $input-border-width;
    }
  }
}

/* Placeholder */
.form-control {
  &::placeholder {
    @extend %placeholder;
  }
}

/* Search */
.input-search {
  position: relative;
  .form-control {
    padding-right: 50px;
    border-right-width: $input-border-width;
  }
  .input-group-append {
    position: absolute;
    right: $input-border-width;
    z-index: 3;
  }
  .btn {
    svg {
      transition: 0.3s;
      fill: $black;
    }

    &:not(:disabled):not(.disabled):hover {
      box-shadow: none;
    }
    &:hover {
      svg {
        opacity: 0.5;
      }
    }
  }
}

/* Validation */
.form-control {
  &.is-valid, &.is-invalid {
    &:focus {
      border-color: $input-focus-border-color;
      box-shadow: $input-focus-box-shadow;
    }
  }
  &.is-valid {
    background-image: str_replace($form-feedback-icon-valid, "#", "%23");
    background-position: center right calc(#{$input-height-inner} - 1rem - #{$form-feedback-icon-valid-width});
    background-size: $form-feedback-icon-valid-width $form-feedback-icon-valid-height;
  }
  &.is-invalid {
    background-image: str_replace($form-feedback-icon-invalid, "#", "%23");
    background-position: center right calc(#{$input-height-inner} - 1rem - #{$form-feedback-icon-invalid-width});
    background-size: $form-feedback-icon-invalid-width $form-feedback-icon-invalid-height;
  }
}

// Select
.bootstrap-select.is-invalid {
  padding-right: 0;
  .btn {
    border-color: $form-feedback-invalid-color;
  }
}
.bootstrap-select.is-valid {
  padding-right: 0;
  .btn {
    border-color: $form-feedback-valid-color;
  }
}

// Textarea
textarea.form-control {
  &.is-invalid, &.is-valid {
    background-position: top $input-padding-x - $input-border-width right calc(#{$input-height-inner} / 4);
  }
}

// Checkbox
.custom-control {
  .custom-control-input.is-invalid {
    & + .custom-control-field, input:checked ~ .custom-control-field {
      border-color: $form-feedback-invalid-color;
    }
    & + .custom-control-field + .custom-control-text {
      color: $form-feedback-invalid-color;
    }
  }
}

// Block form
.form-block {
  border: 1px solid $gray-200;
  padding: $form-block-padding-y-mobile $form-block-padding-x-mobile;

  hr {
    margin: 35px 0;
  }

  .btn-block {
    padding: $btn-padding-y 1rem;
    margin-top: 20px;
  }
}

//form buttons
.form-btn-wrapper {
  display: flex;
  margin-top: 20px;
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-down(sm) {
  //form buttons
  .form-btn-wrapper {
    flex-direction: column-reverse;
    .btn {
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
      & + .btn {
        margin-bottom: 20px;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .form-block {
    padding: $form-block-padding-y-desktop $form-block-padding-x-desktop;
    .btn-block {
      display: inline-block;
      width: auto;
      padding: $btn-padding-y $btn-padding-x;
    }
  }

  //form buttons
   .form-btn-wrapper {
    justify-content: center;
    align-items: center;
    .btn + .btn{
      margin-left: auto;
    }
  }
}
