btu-form-filter {
  @apply grid items-center [grid-template-columns:0fr_auto];
}

btu-form-filter.is-open {
  @apply w-full [grid-template-columns:1fr_auto];
}

.FormFilter-container {
  @apply min-w-0 origin-right scale-x-0 opacity-0 transition-[opacity,_transform] duration-200;
}

.FormFilter-container.is-open {
  @apply mx-2 scale-x-100 opacity-100;
}

.FormFilter-container > label {
  @apply absolute top-[50%] z-[1] ms-4 translate-y-[-50%] after:btu-icon after:btu-icon-search;
}

.FormFilter-container input {
  @apply border-transparent bg-gray-100 !ps-11 focus:border-primary-600;
}

.FormFilter-icon {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray after:btu-icon after:btu-icon-search;
}

.FormFilter-icon.is-open {
  @apply btu-button-pressed after:btu-icon-x;
}

.CIG.is-filtering {
  > *,
  > .Tab > *,
  .PluginItem:not(.is-filterResult) {
    @apply !hidden;
  }

  > .Tab {
    @apply blokk;
  }
}

.CIG.is-filtering .CIG-row.is-filterResult {
  @apply !flex;
}

.CIG-title.is-filterResult {
  @apply bg-gray-50 after:text-gray-400;

  .CIG-titleText {
    @apply text-gray-400;
  }
}

.CIG.is-filtering .is-filterResult,
.CIG.is-filtering :has(.is-filterResult):not([hidden]) {
  @apply !blokk;

  &.CIG-row[data-tab]:not(.has-title),
  &.Tab[data-tab],
  &.CIG-title[data-tab] {
    @apply relative mt-[calc(theme(spacing.7)_*_1.6)];
  }

  &.CIG-row[data-tab]:not(.has-title)::before,
  &.Tab[data-tab]::after,
  &.CIG-title[data-tab]::after {
    @apply absolute top-[calc(theme(spacing.4)_*_-1.6)] w-full border-b-[1px] border-b-gray-300 text-xs uppercase leading-3 content-[attr(data-tab)];
  }

  &.CIG-title[data-tab]::after {
    @apply left-0;
  }

  &.Tab[data-tab]::after,
  &.CIG-row[data-tab]:not(.has-title)::before {
    @apply left-[calc(theme(spacing.3)_*_-1)];
  }

  &.CIG-title {
    @apply pointer-events-none;
  }

  .CIG-titleToggle {
    @apply invisible;
  }
}

.CIG.is-loading {
  @apply visible blokk min-h-[80vh] before:btu-loader before:absolute before:left-[50%] before:top-[50%] before:z-10 before:size-[--loader-size] before:translate-x-[-50%] before:translate-y-[-50%];
}
