/*
    The planting planner's plant thumbnails, from the WordPress site. Nested and
    rewritten on the same terms as style.css beside it.
*/
/*
    HOISTED OUT OF THE WRAPPER BELOW, AND THEY HAVE TO STAY OUT.

    `@keyframes` is invalid inside a style rule. Nested, the browser drops it
    silently and every `animation:` naming it resolves to nothing — no console
    error, no failed request, the rule just never runs. That is how the plant
    list came to render at the right size in the right place and be invisible,
    stuck on the 0% frame of `grow`.

    Being out here makes the names global. `Tests\Unit\Calculators\
    VendoredStylesheetsTest` checks both halves: that none is nested, and that
    none collides with the theme or with the other calculator.
*/
@keyframes grow {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes growMobile {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.calc-planting-planner {
        
        
    .beansBtn {
        background: url(/calculator-assets/planting-planner/beans.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .dwarfBeansBtn {
        background: url(/calculator-assets/planting-planner/dwarfbeans.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .cucumberBtn {
        background: url(/calculator-assets/planting-planner/cucumber.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .tomatoBtn {
        background: url(/calculator-assets/planting-planner/tomatoes.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .chilliBtn {
        background: url(/calculator-assets/planting-planner/chilli-peppers.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .broccoliBtn {
        background: url(/calculator-assets/planting-planner/broccoli.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .lettuceBtn {
        background: url(/calculator-assets/planting-planner/lettuce.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .carrotBtn {
        background: url(/calculator-assets/planting-planner/carrot.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .brussel-sproutsBtn {
        background: url(/calculator-assets/planting-planner/brussel-sprouts.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .beetrootBtn {
        background: url(/calculator-assets/planting-planner/beetroot.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .leekBtn {
        background: url(/calculator-assets/planting-planner/leeks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .cabbageBtn {
        background: url(/calculator-assets/planting-planner/cabbage.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .cauliflowerBtn {
        background: url(/calculator-assets/planting-planner/cauliflower.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .kumaraBtn {
        background: url(/calculator-assets/planting-planner/kumara.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .parsnipBtn {
        background: url(/calculator-assets/planting-planner/parsnip.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .cornBtn {
        background: url(/calculator-assets/planting-planner/corn.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .cabbageBtn {
        background: url(/calculator-assets/planting-planner/cabbage.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .asparagusBtn {
        background: url(/calculator-assets/planting-planner/asparagus.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .onionBtn {
        background: url(/calculator-assets/planting-planner/onion.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .capsicumBtn {
        background: url(/calculator-assets/planting-planner/capsicum.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .pumpkinBtn {
        background: url(/calculator-assets/planting-planner/pumpkin.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .peasBtn {
        background: url(/calculator-assets/planting-planner/peas.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .courgetteBtn {
        background: url(/calculator-assets/planting-planner/courgette.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .parsleyBtn {
        background: url(/calculator-assets/planting-planner/parsley.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .silverbeetBtn {
        background: url(/calculator-assets/planting-planner/silverbeet.jpg);
        background-size: cover;
        background-position: center;
    }
    
    .spinachBtn {
        background: url(/calculator-assets/planting-planner/spinach.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .eggplantBtn {
        background: url(/calculator-assets/planting-planner/eggplant.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .radishBtn {
        background: url(/calculator-assets/planting-planner/radish.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .turnipBtn {
        background: url(/calculator-assets/planting-planner/turnip.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .spring-onionBtn {
        background: url(/calculator-assets/planting-planner/spring-onions.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .basilBtn {
        background: url(/calculator-assets/planting-planner/basil.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .chivesBtn {
        background: url(/calculator-assets/planting-planner/chives.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .garlicBtn {
        background: url(/calculator-assets/planting-planner/garlic.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .mintBtn {
        background: url(/calculator-assets/planting-planner/mint.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .corianderBtn {
        background: url(/calculator-assets/planting-planner/coriander.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .dillBtn {
        background: url(/calculator-assets/planting-planner/dill.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .oreganoBtn {
        background: url(/calculator-assets/planting-planner/oregano.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .rosemaryBtn {
        background: url(/calculator-assets/planting-planner/rosemary.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .strawberryBtn {
        background: url(/calculator-assets/planting-planner/strawberries.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .potatoBtn {
        background: url(/calculator-assets/planting-planner/potato.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .rhubarbBtn {
        background: url(/calculator-assets/planting-planner/rhubarb.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .thymeBtn {
        background: url(/calculator-assets/planting-planner/thyme.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .celeryBtn {
        background: url(/calculator-assets/planting-planner/celery.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .fennelBtn {
        background: url(/calculator-assets/planting-planner/fennel.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}