@import "variables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "mixins";
@import "FormText";
@import "FormControlSet";

$form-control-icon-width: 32px !default;
$select-icon-padding: .5625rem !default;

// A form input state used by the now deprecate Fieldset and asInput
// we can remove this when they are deleted.
.form-control.is-invalid.is-invalid-nodanger {
  @include form-control-focus(true);

  border-color: $input-border-color;
}

.form-control:hover {
  border: solid $input-hover-width $dark-700;
}

.pgn__form-group {
  margin-bottom: $form-group-margin-bottom;
  text-align: start;

  .form-check {
    [dir="rtl"] & {
      padding-left: 0;
      padding-right: 1.25rem;
    }

    [dir="rtl"] & .form-check-input {
      margin-left: 0;
      margin-right: -1.25rem;
    }
  }
}

// FormControlDecoratorGroup

.pgn__form-control-decorator-group {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: flex-start;

  @media (min-width: map-get($grid-breakpoints, "sm")) {
    margin-inline-end: $custom-control-gutter;
  }

  &.has-prepended-node {
    .form-control {
      padding-inline-start: calc(#{$input-padding-x} + #{$form-control-icon-width});

      [dir="rtl"] & {
        background-position: left $select-icon-padding center;
      }
    }

    .form-control-lg {
      padding-inline-start: calc(#{$input-padding-x-lg} + #{$form-control-icon-width});
    }

    .form-control-sm {
      padding-inline-start: calc(#{$input-padding-x-sm} + #{$form-control-icon-width});
    }
  }

  &.has-appended-node {
    .form-control {
      padding-inline-end: calc(#{$input-padding-x} + #{$form-control-icon-width});
    }

    .form-control-lg {
      padding-inline-end: calc(#{$input-padding-x-lg} + #{$form-control-icon-width});
    }

    .form-control-sm {
      padding-inline-end: calc(#{$input-padding-x-sm} + #{$form-control-icon-width});
    }
  }

  font-size: $input-font-size;
  line-height: $input-line-height;

  &.pgn__form-control-decorator-group-sm {
    font-size: $input-font-size-sm;
    line-height: $input-line-height-sm;
  }

  &.pgn__form-control-decorator-group-lg {
    font-size: $input-font-size-lg;
    line-height: $input-line-height-lg;
  }
}

// Control Decorators

.pgn__form-control-decorator {
  position: absolute;
  pointer-events: none;

  button {
    pointer-events: initial;
  }

  height: $input-height;
  min-width: $input-height;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: inherit;

  &.pgn__form-control-decorator-leading {
    inset-inline-start: 0;
    padding-inline-start: $input-padding-x;
    padding-inline-end: calc($input-padding-x / 2);
  }

  &.pgn__form-control-decorator-trailing {
    inset-inline-end: 0;
    padding-inline-start: calc($input-padding-x / 2);
    padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
  }

  .pgn__form-control-decorator-group-lg & {
    height: $input-height-lg;
    min-width: $input-height-lg;

    &.pgn__form-control-decorator-leading {
      padding-left: $input-padding-x-lg;
      padding-right: calc($input-padding-x-lg / 2);
    }

    &.pgn__form-control-decorator-trailing {
      padding-left: calc($input-padding-x-lg / 2);
      padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width});
    }
  }

  .pgn__form-control-decorator-group-sm & {
    height: $input-height-sm;
    min-width: $input-height-lg;

    &.pgn__form-control-decorator-leading {
      padding-left: $input-padding-x-sm;
      padding-right: calc($input-padding-x-sm / 2);
    }

    &.pgn__form-control-decorator-trailing {
      padding-left: calc($input-padding-x-sm / 2);
      padding-right: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
    }
  }

  .btn-icon {
    color: $gray-500 !important;

    &:hover {
      background-color: $gray-500 !important;
      color: $white !important;
    }

    &:focus {
      background-color: $white !important;
      color: $gray-500 !important;
      box-shadow: inset 0 0 0 2px $gray-500 !important;
    }
  }
}

// Floating Labels

.pgn__form-control-floating-label {
  position: absolute;
  inset-inline-start: $input-border-width;
  inset-inline-end: 0;
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .pgn__form-control-floating-label-content {
    border-top: solid 2px transparent;
    position: relative;
    inset-inline-start: -.5em;
    max-width: 100%;
  }

  .pgn__form-control-floating-label-text {
    transform-origin: left top;
    padding: 0 .5em;
    transition: transform 150ms ease, background-color 150ms linear;

    // Prevent background-color from being output as "transparent"
    // Firefox doesn't handle the first animation well from transparent to
    // a color. Adding an alpha channel smooths it out.
    background-color: rgba($input-bg, .01);
    white-space: nowrap;
    max-width: 75vw;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;

    [dir="rtl"] & {
      transform-origin: right top;
    }
  }

  .has-leading-element & {
    .pgn__form-control-floating-label-text {
      transform: translateX(#{$form-control-icon-width});

      [dir="rtl"] & {
        transform: translateX(#{-$form-control-icon-width});
      }
    }
  }

  @include form-control-floating-label-initial(
    $input-padding-x,
    $input-padding-y,
    $input-line-height,
    $input-font-size,
    $input-border-width
  );

  .pgn__form-control-decorator-group-lg & {
    @include form-control-floating-label-initial(
      $input-padding-x-lg,
      $input-padding-y-lg,
      $input-line-height-lg,
      $input-font-size-lg,
      $input-border-width
    );
  }

  .pgn__form-control-decorator-group-sm & {
    @include form-control-floating-label-initial(
      $input-padding-x-sm,
      $input-padding-y-sm,
      $input-line-height-sm,
      $input-font-size-sm,
      $input-border-width
    );
  }

  .form-control:focus ~ &,
  // select.form-control ~ &,
  .form-control.has-value ~ & {
    .pgn__form-control-floating-label-text {
      background-color: $input-bg;
    }

    @include form-control-floating-label-float(
      $input-padding-x,
      $input-padding-y,
      $input-line-height,
      $input-font-size,
      $input-border-width
    );
  }

  .float-label.pgn__form-control-decorator-group-lg & {
    @include form-control-floating-label-float(
      $input-padding-x-lg,
      $input-padding-y-lg,
      $input-line-height-lg,
      $input-font-size-lg,
      $input-border-width
    );
  }

  .float-label.pgn__form-control-decorator-group-sm & {
    @include form-control-floating-label-float(
      $input-padding-x-sm,
      $input-padding-y-sm,
      $input-line-height-sm,
      $input-font-size-sm,
      $input-border-width
    );
  }
}

.pgn__form-control-decorator-group.has-floating-label {
  input[type="date"],
  input[type="time"] {
    [dir="rtl"] & {
      text-align: right;
    }

    &:not(:focus):not(.has-value) {
      color: transparent;
    }

    &::-webkit-calendar-picker-indicator {
      [dir="rtl"] & {
        position: absolute;
        left: 0;
      }
    }
  }

  .form-control:not(:focus):not(.has-value) {
    &::placeholder,
    &::-webkit-datetime-edit {
      opacity: 0;
    }
  }

  select.form-control:not(.has-value):not(:focus) {
    // color: rgba(0,0,0,0); Force the rgba syntax to appear in the output rather
    // than transparent. IE11 does not understand color: transparent here.
    color: unquote("rgba(0,0,0,0)");
  }
}

select.form-control {
  padding-inline-end: 2rem + $select-icon-padding;
  background-image: $custom-select-indicator;
  background-position: right $select-icon-padding center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  appearance: none;

  [dir="rtl"] & {
    background-position: left $select-icon-padding center;
  }
}

// Regular Form Label

.pgn__form-label {
  font-size: $input-font-size;
  display: inline-block;
  margin-bottom: .5rem;

  &.pgn__form-label-inline {
    display: inline-block;
    margin: 0 1em 0 0;

    [dir="rtl"] & {
      margin: 0 0 0 1em;
    }
  }

  &.pgn__form-label-lg {
    font-size: $input-font-size-lg;
  }

  &.pgn__form-label-sm {
    font-size: $input-font-size-sm;
  }
}

// Checkbox, Radio, Switch

.pgn__form-checkbox-input,
.pgn__form-radio-input,
.pgn__form-switch-input {
  appearance: none;
  height: $custom-control-indicator-size;
  width: $custom-control-indicator-size;
  background-color: $custom-control-indicator-bg;
  border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color;
  border-radius: $custom-checkbox-indicator-border-radius;
  margin-inline-end: $custom-control-gutter;
  background-position: center;

  &:not(:disabled) {
    cursor: pointer;
  }

  &:not(:disabled):hover {
    box-shadow: $custom-control-indicator-focus-box-shadow;
  }

  &:disabled {
    opacity: .3;
  }

  &:checked {
    border-color: $custom-control-indicator-checked-border-color;
  }
}

.pgn__form-checkbox-input {
  &:checked {
    background-image: escape-svg($custom-checkbox-indicator-icon-checked);
  }

  &:indeterminate {
    background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
  }
}

.pgn__form-checkbox-input,
.pgn__form-radio-input {
  &:focus {
    position: relative;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    border-color: $input-focus-border-color;
  }

  &:focus::before {
    content: "";
    position: absolute;
    top: -$form-check-position-axis;
    right: -$form-check-position-axis;
    bottom: -$form-check-position-axis;
    left: -$form-check-position-axis;
    border: $form-check-border-width solid $input-focus-border-color;
    border-radius: $form-check-focus-border-radius;
  }
}

.pgn__form-switch-input {
  width: $custom-switch-width;
  border-radius: $custom-switch-indicator-border-radius;
  background-image: escape-svg($custom-switch-indicator-icon-off);
  background-position: left center;
  background-repeat: no-repeat;
  transition: background 150ms ease;

  &:checked {
    background-position: right center;
    background-color: $custom-switch-indicator-checked-bg;
    background-image: escape-svg($custom-switch-indicator-icon-on);
  }

  &:indeterminate {
    background-position: center;
    background-image: escape-svg($custom-switch-indicator-icon-off);
  }
}

.pgn__form-switch-helper-text {
  color: $gray-500;
  font-size: $font-size-xs;
  margin-top: .25rem;
}

.pgn__form-radio-input {
  border-radius: $custom-radio-indicator-border-radius;

  &:checked {
    background-image: escape-svg($custom-radio-indicator-icon-checked);
  }

  &:focus {
    border-color: $black;

    &::before {
      border-radius: $custom-radio-indicator-border-radius;
    }
  }
}

.pgn__form-checkbox,
.pgn__form-switch,
.pgn__form-radio {
  display: inline-flex;

  .pgn__form-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    line-height: $custom-control-indicator-size;
  }

  input:disabled ~ * {
    opacity: .3;
  }

  &.pgn__form-control-invalid input {
    border-color: $form-feedback-invalid-color;
  }

  &.pgn__form-control-valid input {
    border-color: $form-feedback-valid-color;
  }

  &.pgn__form-control-label-left {
    .pgn__form-label {
      order: 1;
      margin-inline-end: $custom-control-gutter;
    }

    input {
      order: 2;
    }
  }
}

.pgn__form-checkbox {
  &.pgn__form-control-invalid input {
    &:checked {
      background-image: escape-svg($custom-checkbox-indicator-icon-invalid-checked);
    }
  }

  &.pgn__form-control-valid input {
    &:checked {
      background-image: escape-svg($custom-checkbox-indicator-icon-valid-checked);
    }
  }
}

.pgn__form-radio {
  &.pgn__form-control-invalid input {
    &:checked {
      background-image: escape-svg($custom-radio-indicator-icon-invalid-checked);
    }
  }

  &.pgn__form-control-valid input {
    &:checked {
      background-image: escape-svg($custom-radio-indicator-icon-valid-checked);
    }
  }
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  [dir="rtl"] & {
    border-radius: 0 $input-border-radius $input-border-radius 0;
  }
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  [dir="rtl"] & {
    border-radius: $input-border-radius 0 0 $input-border-radius;
  }
}

.pgn__form-autosuggest__wrapper {
  position: relative;

  .pgn__form-control-decorator .btn-icon {
    &:hover {
      fill: $white;
    }

    &:focus {
      fill: $gray-500;
    }
  }

  .form-control {
    min-height: 2.75rem;
  }

  .pgn__icon.btn-icon__icon {
    height: $form-autosuggest-icon-height;
    width: $form-autosuggest-icon-width;
  }

  .pgn__form-autosuggest__dropdown {
    @include pgn-box-shadow(1, "centered");

    @media (min-width: map-get($grid-breakpoints, "sm")) {
      margin-inline-end: $custom-control-gutter;
    }

    border-radius: $border-radius-sm;
    max-height: 15rem;
    overflow-y: scroll;
    position: absolute;
    background-color: $white;
    width: calc(100% - .5rem);
    z-index: $zindex-dropdown;
    top: 3.125rem;
    padding: 0;

    .dropdown-item {
      display: block;
      text-align: start;
      max-width: 100%;
      padding: .625rem 1rem;
      overflow: hidden;
      text-overflow: ellipsis;

      &:active {
        color: $white;
      }
    }

    .pgn__form-autosuggest__dropdown-loading {
      padding: 6.25rem 0;
      text-align: center;

      .spinner-border {
        width: $form-autosuggest-spinner-width;
        height: $form-autosuggest-spinner-height;
        border: $form-autosuggest-border-width solid $black;
        border-right-color: transparent;
      }
    }
  }
}