.battery {
    position: relative;
    width: 7rem;
    height: 11rem;
    border: 0.325rem solid var(--batteryBorder);
    border-radius: 1.625rem;
    margin-top: 1rem;

    &:after {
        position: absolute;
        top: -1.25rem;
        left: calc(50% - 1rem);
        width: 2rem;
        height: 1.25rem;
        background-color: var(--batteryBorder);
        border-radius: 10rem 10rem 0 0;
        content: "";
    }

    &.observed {
        .acid-container {
            .acid {
                .fill {
                    height: var(--acid-height);
                }
            }
        }
    }

    .acid-container {
        overflow: hidden;
        height: calc(100% - 0.5rem);
        border-radius: 1rem;
        margin: 0.25rem;

        .acid {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-flow: column-reverse;

            .fill {
                background: var(--accentBlue);
                height: 0;
                width: 100%;
                flex-shrink: 0;
                transition: height 2s ease-in-out;
            }

            .waves {
                display: block;
                width: 100%;
                height: 1rem;
                margin-bottom: -1px;

                .parallax > use {
                    animation: move-forever 12s linear infinite;
                    &:nth-child(1) {
                        animation-delay: -2s;
                        fill: rgba(var(--accentBlueRGB), 0.6);
                    }
                    &:nth-child(2) {
                        animation-delay: -2s;
                        animation-duration: 5s;
                        fill: rgba(var(--accentBlueRGB), 0.8);
                    }
                    &:nth-child(3) {
                        animation-delay: -4s;
                        animation-duration: 3s;
                        fill: var(--accentBlue);
                    }
                }

                @keyframes move-forever {
                    0% {
                        transform: translate(-90px, 0%);
                    }
                    100% {
                        transform: translate(85px, 0%);
                    }
                }
            }
        }
    }
}
