@import "config/_config.scss";

//
// FORMS
// --------------------------------------------------

//
// FIELDSETS
// --------------------------------------------------

fieldset + fieldset {
  margin-top: $input-btn-padding-y-lg *3;
}

fieldset {
  legend {
    display: flex;
    align-items: center;

    font-size: 1rem;
    color: $text-color;

    > * {
      flex: none;
      margin: 0;
    }

    // horizontal divider
    &:after {
     border-bottom: 1px solid $gray-divider;
     content: "";
     display: block;
     height: 1px;
     width: 100%;
     //margin-left: .5rem;
    }

    // Mimic h2 style as only phrased element go in legend
    em {
      color: theme-color("secondary");
      font-size: $h2-font-size;
      font-style: normal;
    }

    // alternative header style
    strong {
      color: theme-color("brand");
      font-size: $h3-font-size;
    }
  }
}

//
// FORM GROUPS & COLS
// --------------------------------------------------
.form-row {
  + .form-row,
  + .row {
    margin-top: $input-btn-padding-y-lg;
  }
}

.form-inline {
  label {
    margin-left: $input-btn-padding-x-lg*2;
  }

  > * {
    margin-left: $input-btn-padding-x-lg;
    &:first-child {
      margin-left: 0;
    }
  }
}

.form-inline {
  margin-bottom: $input-btn-padding-y-lg*2;
}

//
// LABELS
// --------------------------------------------------

.col-form-label,
label {
  color: $text-dim;
  position: relative;
}

.form-group.row,
.form-row {
  // Right align labels while honoring breakpoints
  @include media-breakpoint-up(sm){
    .col-form-label[class*="col-sm"] {
      text-align: right;
    }
  }
  @include media-breakpoint-up(md){
    .col-form-label[class*="col-md"] {
      text-align: right;
    }
  }
  @include media-breakpoint-up(lg){
    .col-form-label[class*="col-lg"] {
      text-align: right;
    }
  }
  @include media-breakpoint-up(xl){
    .col-form-label[class*="col-xl"] {
      text-align: right;
    }
  }
}

//
// INPUTS
// --------------------------------------------------

// suppress clear input icon in IE
input[type=text]::-ms-clear {
   display: none;
}

// suppress visual focus on readonly inputs
// tabindex="-1" should still be added
input[readonly] {
  &:focus {
    color: $text-color;
    box-shadow: none;
    outline: 0;
    border-color: $input-border-color;
  }
}
input.form-control-plaintext[readonly] {

  background-color: transparent;
  box-shadow: none;

  &:focus {
    border-color: transparent;
  }
}

input.input-date {
  // compress inputdate to fit
  min-width: 6em !important;
  //compress layout in table filter
  .cell-with-filter & {
    //flex: initial;
    padding-left: $input-padding-y-sm;
    padding-right: $input-padding-y-sm;
  }
}

//
// INPUTS SIZES
// --------------------------------------------------

// Container class to minimize form size
.form-condensed {
  .form-control {
    height: $input-height-sm;
    padding: $input-padding-y-sm $input-padding-x-sm;
    line-height: $input-line-height-sm;
    border-radius: $input-border-radius-sm;
  }

  .form-group,
  .form-text:last-child,
  .invalid-feedback:last-child,
  .valid-feedback:last-child {
    margin-bottom: $input-padding-y;
  }

  .col-form-label,
  label {
    padding-top: calc(#{$input-padding-y-sm} + 1px);
    padding-bottom: calc(#{$input-padding-y-sm} + 1px);
  }

  .form-check-group {
    .checkbox {
       margin-bottom: $input-padding-y;
    }
  }

  .form-check-group-inline {
    padding-top: $input-padding-y-sm;
  }

  fieldset + fieldset {
    margin-top: $input-btn-padding-y-lg *2;
  }
}

//
// INPUTS VALIDATION
// --------------------------------------------------

// required indicator
// placed on label
// or as legend
label.required:after,
.is-required label:after,
span.required:before {

  display: inline-block;
  position: relative;
  top: .25rem;
  font-family: 'cnam icons';
  content: "\002A";

  font-size: 1rem !important;
  font-style: normal;
  font-weight: normal;
  color: theme-color("danger");
}

label.required:after,
.is-required label:after {
  right: -.75rem;
}

span.required {
  margin: 0 0 .5rem 0;
  font-size: $font-size-base;
  font-style: italic;
  color: $text-dim;
  text-align: right;
  position: relative;
  display: block;

  // asterisk positionning
  &:before{
    margin-left:  .5em;
    margin-right: .5em;
    width: auto;
  }
}

// help texts
.invalid-feedback,
.valid-feeback {
  font-size: $font-size-base;
}

small.form-text {
   color: $text-dim;
}

// Invalid indicator
// box shadow from Bootsrap 3
.is-invalid {
  &.form-control,
  &.custom-select {
    &:focus {
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten(theme-color("danger"),15%);
    }
  }
}

select.is-invalid.form-control {
  background-position: right calc(#{$input-height-inner-quarter} + .5rem) center;
}

//
// INPUTS groups
// --------------------------------------------------

// reset border radius for borderless inoput group
.input-group-icon {
  .form-control,
  .custom-select {
    &:not(:last-child){
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    }
  }
}

// overide input-group bootstrap behaviour
.form-group-sm .input-group-icon {
  .form-control,
  .custom-select,
  .btn {
    border-radius: $input-border-radius-sm !important;
  }
}

// adjust .btn and icons size in input groups
.input-group-append,
.input-group-prepend {

  .btn{
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.input-group-sm + .input-group-append,
.input-group-append,
.input-group-prepend  {
  .am-icon {
    font-size: 1.25rem;
  }
}

.form-inline .input-group {
  > .form-control,
  > .form-control-plaintext,
  > .custom-select,
  > .custom-file {
    flex: auto;
  }
}

//
// CHECKBOXES & RADIOS
// --------------------------------------------------

// with input in label
// label.checkbox
//  - input
//  - span

.checkbox,
.form-check-label {
  display: flex;
  align-items: center;

  &:hover {
    cursor: pointer;
  }

  > input {
    margin-right: .5rem;
    flex: none;
  }

  > span {
    flex: 1
  }

  input[disabled] + span {
    opacity: .7;
  }
}

// stacked layout
.form-check-group {
  // align with form-col-label
  padding-top: $input-btn-padding-y;
}

// inline layout
.form-check-group-inline {
  display: flex;
  padding-top: $input-btn-padding-y;
  .checkbox {
    +.checkbox {
      margin-left: 1.25rem;
    }
  }
}
// invalide state
.form-check-group,
.form-check-group-inline {
  &.is-invalid {
    //background-color: color-level(theme-color("danger"), $alert-bg-level);
    background-color: lighten($main-bg,5%);
    margin-left: -0.25rem;
    padding-left: 0.25rem;
  }
}
