Media queries and styled

[Coachonko]

The following style

import { Link } from '@dark-engine/web-router'
import { styled, css } from '@dark-engine/styled'

const disabledStyle = ({ disabled }) => {
  if (disabled) {
    return css`
    pointer-events: none;
    opacity: .2;`
  }
  return css`
  pointer-events: auto;
  opacity: 1;`
}

const underlineStyle = ({ underline }) => {
  if (underline) {
    return css`text-decoration: none;
    background-image: linear-gradient(currentColor,currentColor);
    background-repeat: no-repeat;
    transition: background-size .3s;`
  }
}

const activeStyle = ({ active }) => {
  if (active) {
    return css`
    background-position: 0 100%;
    background-size: 100% 1px;
    @media(hover: hover) {
      &:hover {
        background-position:100% 100%;
        background-size: 0 1px
      }
    }

    @media(hover: none) {
      &:active {
        background-position:100% 100%;
        background-size: 0 1px
      }
    }`
  }

  return css`
  background-position: 100% 100%;
  background-size: 0 1px;
  @media(hover: hover) {
    &:hover {
        background-position:0 100%;
        background-size: 100% 1px;
    }
  }

  @media(hover: none) {
    &:active {
        background-position:0 100%;
        background-size: 100% 1px;
    }
  }`
}

export const button = ({ disabled, underline, active }) => css`
  position: relative;
  display: inline-flex;
  align-items: center;

  ${disabledStyle({ disabled })}
  ${underlineStyle({ underline })}
  ${activeStyle({ active })}`

const StyledLink = styled(Link)`
  ${({ disabled, active }) => button({ disabled, underline: true, active })}
`

Results into this in the browser

.dk-jeihhc {
  position: relative;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  opacity: 1;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  transition: background-size .3s;
  background-position: 100% 100%;
  background-size: 0 1px;
}

@media(hover: hover) {
  .dk-jeihhc {}

  .null:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

@media(hover: none) {
  .dk-jeihhc {}

  .null:active {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

.dk-jeihhc {
  position: relative;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  opacity: 1;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  transition: background-size .3s;
  background-position: 100% 100%;
  background-size: 0 1px;
}

@media(hover: hover) {
  .dk-jeihhc {}

  .null:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

@media(hover: none) {
  .dk-jeihhc {}

  .null:active {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

I see a few weird things happening, but most importantly, the media queries are broken. &:hover becomes .null:hover Am I doing it wrong?