/* Fully transparent top bar */
#panel {
    background-color: transparent;
}

/* Each item (clock, quick settings, extension indicators, ...) becomes a
   translucent rounded pill */
#panel .panel-button {
    background-color: rgba(20, 20, 24, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    margin: 4px 3px;
    padding: 0 12px;
    transition-duration: 150ms;
}

#panel .panel-button:hover {
    background-color: rgba(45, 45, 52, 0.65);
}

#panel .panel-button:active,
#panel .panel-button:checked,
#panel .panel-button:focus {
    background-color: rgba(60, 60, 70, 0.75);
}

/* Clock: default theme paints its own highlight on the inner .clock child,
   which doubles up with our pill — kill it in every state */
#panel .panel-button.clock-display .clock,
#panel .panel-button.clock-display:hover .clock,
#panel .panel-button.clock-display:active .clock,
#panel .panel-button.clock-display:checked .clock,
#panel .panel-button.clock-display:focus .clock {
    background-color: transparent;
    box-shadow: none;
}