title: Floating label on input focus
body: <p>I am trying to implement floating label on input focus as this one with styled-components:</p>
  
  <blockquote>
    <p><a href="https://jsfiddle.net/273ntk5s/299/" rel="nofollow noreferrer">https://jsfiddle.net/273ntk5s/299/</a></p>
  </blockquote>
  
  <p>I have made this: <a href="https://codesandbox.io/s/92474z2wvw" rel="nofollow noreferrer">https://codesandbox.io/s/92474z2wvw</a></p>
  
  <p>I think the problem is this syntax: </p>
  
  <pre><code>&amp;:not(:focus):valid ~ ${Label} {
      top: 6px;
      left: 5px;
      font-size: 11px;
      opacity: 0.6;
    }
  </code></pre>
  
  <p>What is the proper syntax for this in styled-components? </p>
  
  <p>Thanks in advance.</p>