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

// Set default customise component variables here,
// Override it in theme variables files
$x-input-group-icon-zindex:          4       !default;
$x-input-group-icon-position:        0.45em  !default;
$x-input-group-icon-form-padding-sm: 1.75rem  !default;
$x-input-group-icon-form-padding:    2.5rem  !default;

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

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

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

  .x-icon-container {
    @extend .position-absolute,
            .align-self-center,
            .text-info-transparent;

    &:first-child {
      left: $x-input-group-icon-position;
    }
    &:last-child {
      right: $x-input-group-icon-position;
    }
    ~ .form-control {
      padding-left: $x-input-group-icon-form-padding-sm;
    }
    @include media-breakpoint-up(sm) {
      font-size: map_get($icon-sizes, md);
      ~ .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) {
      @include border-right-radius($border-radius);
      padding-right: $x-input-group-icon-form-padding;
    }

    @include hover-focus-active {
      ~ .x-icon-container {
        z-index: $x-input-group-icon-zindex;
      }
    }
  }
  &:first-child:not(:last-child) {
    .form-control {
      @include border-right-radius(0);
    }
  }
  & + & {
    @extend .mt-2;
  }
}


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