/* stylelint-disable selector-class-pattern */

.popper {
  &:global(.MuiPopperUnstyled-root) {
    padding: 12px 8px;
  }

  :global {
    .MuiAutocomplete-popper .MuiAutocomplete-groupUl {
      border: 0 !important;
    }

    div.MuiAutocomplete-popper div.MuiPaper-root,
    .MuiInputBase-input,
    .MuiInputBase-root {
      padding: 0 !important;
    }

    .MuiInputAdornment-root path {
      fill: #000;
    }
  }

  .autoComplete {
    @apply px-2;

    > div {
      @apply p-0 m-0;
      @apply border-b border-black rounded-none;
    }

    fieldset {
      border: 0 !important;
    }
  }
}

div.complexFilter {
  @apply w-full space-y-sds-s;

  // TODO Replace with CSS classes if / when czifui exposes an API for it.
  // https://v4.mui.com/customization/components/#overriding-styles-with-classes
  :global {
    .MuiChip-root {
      background: theme('colors.hub-primary.200') !important;

      // &:hover {
      //   background: theme('colors.hub-gray.200') !important;
      // }

      @apply rounded-sds-l;

      .MuiChip-label {
        @apply text-black font-semibold;

        font-size: 11px;
      }

      .MuiChip-deleteIcon {
        @apply w-4 h-4;

        path {
          fill: #000;
        }
      }
    }
  }

  &.categories :global {
    .MuiChip-root {
      @apply bg-hub-primary-100 hover:bg-napari-hover;
    }
  }
}

.hiddenInputCaret {
  caret-color: transparent;
}
