/* The mouse and dongle cards side by side; either one alone stays centred. */
#hid-webapp .rgb-led-layout {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

#hid-webapp .rgb-led-card {
    flex: 0 1 calc(50% - 0.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#hid-webapp .rgb-led-card .settings-card-title {
    margin-bottom: 0;
}

/* Both pictures fit the same height, so both cards' controls line up. */
#hid-webapp .rgb-led-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18rem;
}

/* --ratio is the picture's width over its height. */
#hid-webapp .rgb-led-figure {
    position: relative;
    width: min(100%, calc(18rem * var(--ratio, 1)));
}

/* The dongle at half the size it would fit. */
#hid-webapp #rgb-led-dongle-figure {
    width: calc(min(100%, 18rem * var(--ratio, 1)) / 2);
}

#hid-webapp .rgb-led-figure-image {
    display: block;
    width: 100%;
    height: auto;
}

/* The profile's picture places and sizes it (--led-left, --led-top, --led-size). */
#hid-webapp .rgb-led-glow {
    --led-level: 0;
    position: absolute;
    left: var(--led-left);
    top: var(--led-top);
    width: var(--led-size);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: calc(0.3 + 0.7 * var(--led-level));
    transform: translate(-50%, -50%) scale(calc(0.45 + 0.55 * var(--led-level)));
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* The dongle's linked colour, blue. */
#hid-webapp .rgb-led-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #eef4ff 0 10%,
        rgb(70 140 255) 22%,
        rgb(40 110 255 / 0.4) 42%,
        transparent 70%
    );
    animation: rgb-led-breathe 2.4s ease-in-out infinite;
}

/* A ring of light that spreads from the LED at the top of each breath; hidden at rest. */
#hid-webapp .rgb-led-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        transparent 36%,
        rgb(70 140 255 / 0.75) 46%,
        rgb(40 110 255 / 0.3) 54%,
        transparent 64%
    );
    opacity: 0;
    animation: rgb-led-ripple 2.4s ease-out infinite;
}

@keyframes rgb-led-breathe {
    50% {
        opacity: 0.4;
        transform: scale(0.78);
    }
}

@keyframes rgb-led-ripple {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    #hid-webapp .rgb-led-glow::before,
    #hid-webapp .rgb-led-glow::after {
        animation: none;
    }
}

#hid-webapp .rgb-led-control {
    align-self: center;
    width: 100%;
    max-width: 24rem;
}

#hid-webapp .rgb-led-control .sensor-input-unit-row .sensor-number-input {
    flex: 0 0 5rem;
    padding: 0.55rem 0.85rem;
}

#hid-webapp .rgb-led-slider {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0.5rem;
}