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

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

/* Label checkbox/radio/switch */
.col-form-label {
  @extend %label;
  padding-left: 0;
  &.required:after {
    content: '*';
    margin-left: 0.5rem;
  }
}
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;
    }
  }
  .btn {
    border-radius: 0;
  }
}

/* Placeholder */
.form-control {
  &::placeholder {
    @extend %placeholder;
  }
  &[readonly]:not([disabled]) {
    background-color: $input-bg;
  }
}

/* Search */
.input-search {
  position: relative;
  .form-control {
    padding-right: 5rem;
    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;
  .dropdown-toggle {
    border-color: $form-feedback-invalid-color;
  }
}
.bootstrap-select.is-valid {
  padding-right: 0;
  .dropdown-toggle {
    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;
    }
  }
}

// File
.custom-file {
  display: block;
  input, span, label {
    cursor: pointer;
  }
  .input-group-append {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .disabled, [disabled] {
    cursor: default;
    & + label + .input-group-append .btn {
      opacity: 0.4;
    }
  }
  .btn {
    border-radius: 0;
  }
}
.custom-file-input {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}
.custom-file-label {
  display: flex;
  align-items: center;
  padding-right: 35%;
  font-size: $input-font-size;
  line-height: 1.2;
  overflow: hidden;
  &:after {
    display: none;
  }
}
.custom-file-placeholder {
  @extend %placeholder;
}

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

  hr {
    margin: 3.5rem 0;
  }

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

//form buttons
.form-btn-wrapper {
  display: flex;
  margin-top: 2rem;
}

/* 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: 2rem;
      }
    }
  }

  // File
  .custom-file {
    .btn {
      padding: 1.4rem 0.5rem;
      font-size: 1.2rem;
    }
  }
}

@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;
    }
  }
}
