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

/* Each item (clock, quick settings, extension indicators, ...) becomes a
   translucent rounded pill. Default theme highlights states with
   `box-shadow: inset 0 0 0 100px ...` (white overlay), so box-shadow must
   be cleared in every state and the highlight re-done via background. */
#panel .panel-button {
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    margin: 4px 3px;
    transition-duration: 150ms;
    box-shadow: none;
}

#panel .panel-button:hover,
#panel .panel-button:focus,
#panel .panel-button.clock-display:hover,
#panel .panel-button.clock-display:focus {
    background-color: rgba(0, 0, 0, 0.65);
    box-shadow: none;
}

#panel .panel-button:active,
#panel .panel-button:checked,
#panel .panel-button:active:hover,
#panel .panel-button:checked:hover,
#panel .panel-button.clock-display:active,
#panel .panel-button.clock-display:checked {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: none;
}

/* 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;
}

/* Tighter clock pill — panel buttons size horizontally via -natural-hpadding
   (default 12px), not regular padding */
#panel .panel-button.clock-display {
    -natural-hpadding: 6px;
}