How to conditionally animate with styled-components - styled-components

Question

I'm trying to animate a line when an input is checked with styled-components.
I've tried with (a) and without (b) keyframes, and both return (c):
(a)
import styled, { keyframes } from 'styled-components';
const Input = styled.input``
const NavIconLine = styled.span`
display: block;
position: absolute;
height: 3px;
`;
const Animation = keyframes`
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 70%;
}
to {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 100%;
}
`;
const NavIconLine2 = styled(NavIconLine)`
width: 70%;
${Input}:checked ~ & {
animation: ${Animation} 0.15s ease-in-out;
}
`;
(b)
import styled from 'styled-components';
const Input = styled.input``
const NavIconLine = styled.span`
display: block;
position: absolute;
height: 3px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
`;
const NavIconLine2 = styled(NavIconLine)`
width: 70%;
${Input}:checked ~ & {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 100%;
}
`;
(c)
function Component {
return (
<Input type="checkbox" id="menu" />
<NavIcon for="menu">
<NavIconLine1 />
</NavIcon>
)
}
I think that perhaps the issue is with the targeting of the element in "${Input}:checked ~ & {...}" as "~ &" refers to the sibling and not the parent's sibling? If that's the case, is possible to target it?
Thanks!

Answer 1

Solved:
Instad of writing the condition on the descendant, it's written on the parent's sibling:
const Input = styled.input`
display: whatever;
:checked + ${NavIcon} {
${NavIconLine1} {
animation: whatever;
}
}
`;