hoping you’re having a good day. So, on the page I have a list of lines, each being hoverable that displays a border on its left side when hovered. When one of the line is active, the hover style should change for the non active lines.

Now, there are two ways a line can be active, when a dropdown is opened(in which I set the [data-line-active]) attribute or the line has a focused input. Here’s my CSS for individual lines,

  .line {
    [data-line] {
      @apply h-full border-r-2 absolute top-0 border-tiger hidden -z-10;
    }

   &:hover, &:has(input:focus), &[data-line-active] {
      [data-line] {
        @apply flex;
      }
    }
  }

And here’s the CSS for targeting non active lines,

*:where(:has(.line[data-line-active])), *:where(:has(.line:has(input:focus))) {
  .line:hover:not(:has(input:focus)):not([data-line-active]) {
    [data-line] {
      @apply flex border-night-10;
    }
  }
}

The first where, i.e *:where(:has(.line[data-line-active])) works as expected when the line has the [data-line-active] attribute, but not when a line has a focused input.

Is there anything I’m doing wrong?

Thanks in advance.