:root {
    --border-radius: 22px;
    --cc-bg: transparent;

    --widget-background: {{ colors.surface.default.rgba | set_alpha: 0.7 }};
    --noti-bg-alpha: 0.6;

    --padding: calc(var(--border-radius) / 2);
}

.control-center {
    border-radius: 0;
}

.widgets>.widget,
.widget-mpris>carouselindicatordots,
.widget-mpris>box>button {
    background: var(--widget-background);
    border-radius: var(--border-radius);
    padding: calc(var(--border-radius) / 2);
    border: var(--border);
}

.control-center-list-placeholder {
    padding: var(--border-radius);
}

.notification-group {
    border-radius: var(--border-radius);
    padding: 8px;
}

.widget.widget-mpris {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

.widget.widget-mpris>carouselindicatordots {
    --dots-padding: 4px;
    padding: var(--dots-padding);
    padding-left: var(--dots-padding);
    padding-right: calc(6px + var(--dots-padding));
    margin: 0;
    margin-top: var(--padding);
}

.widget-mpris>box>button:hover {
    background: rgba(46, 46, 46, 1);
}

.widget-mpris-player {
    box-shadow: none;
    border: var(--border);
    margin: 0 var(--padding);
}

.widget-mpris-player:only-child {
    margin: 0;
}