@import "~bootstrap/scss/input-group";

// Set default customise component variables here,
// Override it in theme variables files
$x-input-group-input-zindex:        4      !default;
$x-input-group-icon-zindex:         auto      !default;
$x-input-group-icon-position:       0.5rem !default;
$x-input-group-icon-form-padding:   2.0rem !default;

.x-input-group {
  @extend .input-group,
          .flex-nowrap;

  .ng-select {
    @extend .flex-auto;
  }

  // For elements as direct children and thoses wrapped in components
  & > *:first-child:not(:only-child):not(.ui-widget-content),
  & > *:not(:last-child):not(.ui-widget-content) {
    .ng-select-container,
    *:not(.ng-value) {
      @include border-right-radius(0);

      &:focus {
        z-index: $x-input-group-input-zindex;
      }
    }
  }

  & > *:last-child:not(:only-child):not(.ui-widget-content),
  & > *:not(:first-child):not(.ui-widget-content) {
    .ng-select-container,
    *:not(.ng-value) {
      @include border-left-radius(0);

      &:focus {
        z-index: $x-input-group-input-zindex;
      }
    }
  }

  .x-is-invalid {
    .form-control,
    .custom-select,
    .ui-inputtext,
    .ng-select-container {
      z-index: $x-input-group-input-zindex;
    }
  }
}

.x-input-group-prepend {
  @extend .input-group-prepend;
}

.x-input-group-prepend,
.input-group-prepend {
  & > *:first-child {
    @include border-left-radius($border-radius);
    @include border-right-radius(0);
  }

  // Form control inside a component
  & + * > .form-control {
    @include border-left-radius(0);
  }
}

.x-input-group-append {
  @extend .input-group-append;
}

.x-input-group-append,
.input-group-append {
  *,
  .ui-inputtext { // p-calendar
    @include border-left-radius(0);
  }
  & > *:last-child {
    @include border-right-radius($border-radius);
  }
}

.x-input-group-prepend,
.x-input-group-append {
  min-width: 2.250rem;

  > * {
    width: 100%;
  }

  .btn {
    @extend %btn-sm;
    @include hover-focus-active {
        z-index: $x-input-group-input-zindex;
    }

    &:disabled {
      @extend  .text-info-transparent;
      opacity: 1!important;
      background: $input-disabled-bg;
    }
  }

  .x-btn-icon-only {
    @extend %p-0;
  }
}

.x-input-group-icon {
  @extend %d-flex,
          %flex-1,
          %position-relative;

  .x-icon-container {
    @extend %position-absolute,
            %align-self-center,
            %text-muted,
            %x-icon-md;

    z-index: $x-input-group-icon-zindex;

    &:first-child {
      left: $x-input-group-icon-position;
    }
    &:last-child {
      right: $x-input-group-icon-position;
    }
    &.btn, &button {
      &:last-child {
        right: 0;
      }
    }
    ~ .form-control {
      padding-left: $x-input-group-icon-form-padding;
    }
  }
  .x-form-control-inputMask {
    padding-left: $x-input-group-icon-form-padding;
    @include hover-focus-active {
      position: relative;
      background: none;
      z-index: $x-input-group-icon-zindex;
    }
  }

  .form-control {
    &:nth-last-child(2) {
      padding-right: $x-input-group-icon-form-padding;
    }

    @include hover-focus-active {
      ~ .x-icon-container {
        z-index: $x-input-group-icon-zindex;
      }
    }
  }
  & + & {
    @extend .mt-2;
  }
}

.x-overlay-panel {
  .x-input-group-icon {
    .x-icon-container {
      z-index: 5 !important;
    }
  }
}


.x-attendees {
  @extend %d-flex,
          %bg-white,
          .border,
          %p-2,
          %align-items-center,
          %position-relative;

  .x-attendees-prepend {
    @extend %d-flex,
            %align-items-center,
            %align-self-start,
            %justify-content-center,
            %p-1,
            %mr-2,
            .h-100;

    .x-avatar {
      @extend %bg-primary,
              %text-white;
    }
  }

  .x-attendees-list {
    @extend %d-flex,
            %justify-content-start,
            .h-100,
            %overflow-auto,
            %flex-wrap;
    flex-grow: 1;
    max-height: 8em;
    min-height: 2em;

    &.x-border {
      @extend %pl-2,
              .border-left;
    }
  }

  .x-attendees-item {
    @extend %d-flex,
            %justify-content-center,
            %align-items-center,
            %position-relative,
            %p-1;

    @include hover-focus {
      .x-notification {
        @extend %d-block;
      }
    }
  }

  .x-attendees-item--add {
    min-width: 2.67em;

    .x-icon-container {
      @extend %text-muted,
              %x-icon-lg;

      @include hover-focus {
        @extend %text-primary;
        cursor: pointer;
      }
    }
  }
}