hover срабатывает не на весь блок

У меня есть вот такой свитчер, и я хочу чтобы если я навожу на него, то та часть, которая не закрыта белым блоком, меняла свой background-color.

Я реализовал это следующим образом:

HTML

<label class="product-switcher">
   <input type="checkbox">
   <div class="product-switcher-current"></div>
   <div class="product-switcher-left">2,5 кг</div>
   <div class="product-switcher-right active">25 кг </div>
</label>

LESS

.product-switcher {
            display: flex;
            position: absolute;
            width: 180px;
            height: 24px;
            background: #E6F3D9;
            border-radius: 40px;
            left: 50%;
            transform: translateX(-50%);
            bottom: 8px;
            :hover {
                background: #81C341;
                border-radius: 40px;
                height: 100%;
                width: 100%;
            }
            input {
                display: none;
            }
            .product-switcher-current {
                position: absolute;
                left: 0;
                top:0;
                background: #FFFFFF;
                width: 94px;
                height: 24px;
                border-radius: 40px;
                border: 1px solid #81C341;
                transition-duration: .2s;
            }
            input:checked + .product-switcher-current {
                transform: translateX(86px);        
        }
        .product-switcher-left, .product-switcher-right {
            flex-basis: 50%;
            text-align: center;
            color: @primary60;
            z-index: 1;
            &.active {
                color: @black;
            }
        }

Но в итоге имею вот такой результат:

Что я делаю не так?