:root {
    --total-plantwaterer-animation-time: calc(4*var(--default-animation-time));

    --plantwaterer-container-size: calc(0.45*var(--variable-widget-width));

    --plant-icon-size: calc(0.22*var(--variable-widget-width));

    --waterhead-size: calc(0.14*var(--variable-widget-width));
    --waterhead-top-offset: calc(0.08*var(--waterhead-size));
    --waterhead-inward-offset: calc(0.1*var(--waterhead-size));

    --droplet-size: calc(0.22*var(--waterhead-size));
    --droplet-margin: calc(0.9*var(--waterhead-size));
    --droplet-spacing: calc(1.5*var(--droplet-size));

    --clock-size: calc(0.15*var(--variable-widget-width));
}

.plantwaterer-container {
    position: relative;
    width: calc(1.3*var(--plantwaterer-container-size));
    height: var(--plantwaterer-container-size);
    margin: 2rem auto;
    box-sizing: border-box;
}

.waterhead {
    position: absolute;
    top: 20px;
    left: 20px;
    width: var(--waterhead-size);
    height: calc(var(--waterhead-size) / 2);
    background-color: var(--base-color-3);
    border-color: black;
    border-width: calc(0.15*var(--waterhead-size));
    border-style: solid;
    border-top-left-radius: calc(var(--waterhead-size));
    border-top-right-radius: calc(var(--waterhead-size));
    border-bottom-left-radius: calc(0.15*var(--waterhead-size));
    border-bottom-right-radius: calc(0.15*var(--waterhead-size));
    transform: rotate(-45deg);
    transform-origin: center;
    animation: waterhead-animation var(--total-plantwaterer-animation-time) infinite forwards;
}

@keyframes waterhead-animation {
    0%, 10% {
        top: var(--waterhead-top-offset);
        left: 0;
    }
    20%, 85% {
        top: calc(var(--waterhead-top-offset) + var(--waterhead-inward-offset));
        left: var(--waterhead-inward-offset);
    }
    100% {
        top: var(--waterhead-top-offset);
        left: 0;
    }
}

.streams {
    position: absolute;
    top: calc(0.7*var(--waterhead-size));
    left: calc(0.7*var(--waterhead-size));
    pointer-events: none;
}

.stream {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.stream-1 {
    margin: var(--droplet-margin) 0;
    transform: rotate(-15deg);
}
.stream-2 {
    margin: calc(0.5*var(--droplet-margin)) calc(0.5*var(--droplet-margin));
    transform: rotate(-45deg);
}
.stream-3 {
    margin: 0 var(--droplet-margin);
    transform: rotate(-75deg);
}

.droplet {
    position: absolute;
    left: 0;
    width: var(--droplet-size);
    height: var(--droplet-size);
    background: black;
    border-radius: 50%;
    opacity: 0;
}

.stream .droplet:nth-child(1) { top: 0; }
.stream .droplet:nth-child(2) { top: var(--droplet-spacing); }
.stream .droplet:nth-child(3) { top: calc(2*var(--droplet-spacing)); }

@keyframes plant-animation {
    0%, 19% {
        width: var(--plant-icon-size)
    }
    85% {
        width: calc(1.1*var(--plant-icon-size))
    }
    100% {
        width: var(--plant-icon-size)
    }
}

#plant {
    position: absolute;
    right: calc(0.2*var(--plantwaterer-container-size));
    bottom: 0;
    animation: plant-animation var(--total-plantwaterer-animation-time) infinite forwards;
}

@keyframes drop-a-animation {
    0%,19% { opacity: 0; }
    24%,39% { opacity: 1; }
    45%,57% { opacity: 0; }
    62%,77% { opacity: 1; }
    83%,100% { opacity: 0; }
}

@keyframes drop-b-animation {
    0%,24% { opacity: 0; }
    29%,45% { opacity: 1; }
    51%,62% { opacity: 0; }
    67%,83% { opacity: 1; }
    89%,100% { opacity: 0; }
}

@keyframes drop-c-animation {
    0%,29% { opacity: 0; }
    34%,51% { opacity: 1; }
    57%,67% { opacity: 0; }
    72%,89% { opacity: 1; }
    95%,100% { opacity: 0; }
}

.droplet-group-A { animation: drop-a-animation var(--total-plantwaterer-animation-time) infinite forwards; }
.droplet-group-B { animation: drop-b-animation var(--total-plantwaterer-animation-time) infinite forwards; }
.droplet-group-C { animation: drop-c-animation var(--total-plantwaterer-animation-time) infinite forwards; }

#clock {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--clock-size);
    height: var(--clock-size);
    animation: clock-animation var(--total-plantwaterer-animation-time) infinite forwards;
}

@keyframes clock-animation {
    0%, 5% {
        opacity: 0;
        top: 10%;
        transform: rotate(0deg);
    }
    20%, 80% {
        opacity: 1;
        top: 0;
        transform: rotate(360deg);
    }
    95%, 100% {
        opacity: 0;
        top: 10%;
        transform: rotate(0deg);
    }
}