// Full content region list modal forms
// Used in combine pdf modal
$x-ui-chips-full-max-height:                            7.5rem !default;
$custom-icon-close-color:                               theme-color("grey") !default;
$custom-icon-close-color-hover:                         $white !default;
$ui-chips-token-icon-close:                             str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{$custom-icon-close-color}' d='M50.0656072,44.2201911 L74.2849812,20.0008171 L79.9418354,25.6576714 L55.7224614,49.8770454 L80.1305346,74.2851185 L74.4736803,79.9419728 L50.0656072,55.5338996 L25.6576714,79.9418354 L20.0008171,74.2849812 L44.4087529,49.8770454 L20.1895163,25.6578087 L25.8463705,20.0009545 L50.0656072,44.2201911 Z'/%3E%3C/svg%3E"), "#","%23");
$ui-chips-token-icon-close-hover:                       str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{$custom-icon-close-color-hover}' d='M50.0656072,44.2201911 L74.2849812,20.0008171 L79.9418354,25.6576714 L55.7224614,49.8770454 L80.1305346,74.2851185 L74.4736803,79.9419728 L50.0656072,55.5338996 L25.6576714,79.9418354 L20.0008171,74.2849812 L44.4087529,49.8770454 L20.1895163,25.6578087 L25.8463705,20.0009545 L50.0656072,44.2201911 Z'/%3E%3C/svg%3E"), "#","%23");


.x-ui-chips-full {
  @extend .w-100,
          .d-block,
          .overflow-auto,
          .bg-white,
          .border;
  &.form-control {
    @extend .py-0,
            .px-2;
    max-height: $x-ui-chips-full-max-height;
  }
}

// Slim in sidebar details
.x-ui-chips-slim {
  @extend .d-flex,
          .mt-2,
          .align-items-center;
}

.ui-chips {
  padding-bottom: 3px;

  .form-control-sm & {
    padding-bottom: 4px;
  }

  .ui-inputtext {
    @extend .p-0,
            .m-0;
  }
}

.ui-chips-token {
  @extend .x-badge-tag,
          .p-0,
          .justify-content-between,
          .overflow-hidden;
  margin: 6px auto auto 6px;

  .form-control-sm & {
    margin-top: 4px;
  }
}

.ui-chips-token-label {
  @extend .px-2;
}

.ui-chips-token-icon {
  @extend .x-badge-tag-icon,
          .mt-0,
          .ml-1,
          .border-left,
          .order-2;

  &.pi-times {
    @include size(1.375rem!important);
    background-image: $ui-chips-token-icon-close;
    background-size: 54.54%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    @include hover-focus-active {
      @extend %cursor-pointer,
              .bg-info,
              .text-white;
      background-image: $ui-chips-token-icon-close-hover;
    }

    &:before {
      content: '' !important;
    }
  }
}

.ui-chips-input-token {
  @extend .d-none;
}