colorshell/eww/styles/bar.scss

.bar {
    background: transparent;
    padding: 4px;

    & label {
        font-weight: 500;
    }
}

/* Styles .widgets-[left/center/right] */
.widgets-left,
.widgets-center,
.widgets-right {
    background: rgba($background, 0.6);
    border-radius: 18px;
    padding: 6px;

    & > * {
        margin: 0 3px;
    }

    & > *:first-child {
        margin-left: 0;
    }

    & > *:last-child {
        margin-right: 0;
    }

    & > *:only-child {
        margin: 0 0px;
    }
}

// Styles the literal script for workspace indicators
.workspaces {
    padding: 2px 0px;
    border-radius: 50%;

    & > button {
        $padding-block: 5px;

        border-radius: 16px;
        margin: 0 2px;
        padding: $padding-block 12px;
        background: lighten($color: $color1, $amount: 10);

        &.active {
            padding: $padding-block 22px;
            background: $foreground;
        }
    }
}

.distro-logo {
    padding: 0;
    padding-left: 12px;
    padding-right: 6px;

    & > label {
        font-size: 15px;
        padding-right: 2px;
    }
}

.systray {
    all: unset;

    & > * > * {
        margin: 0 6px;
    }
}

.mediaplayer {
    border-radius: 12px;

    & > .media {
        border-radius: inherit;
        
        &:hover {
            & > box {
                box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .1);
            }
        }
        & > box {
            border-radius: inherit;
            background: darken($color: $color3, $amount: 5);

            & > label {
                color: $foreground;
                font-size: inherit;

                &:first-child {
                    margin-left: 8px;
                }

                &:last-child {
                    margin-right: 8px;
                }
            }

            & > box.separator {
                margin: 8px 4px;
                padding: 0 1px;
                background: darken($color: $foreground, $amount: 20);
            }
        }
    }

    &.revealed {
        background: darken($color: $color3, $amount: 25);
        transition: 80ms linear;

        .media > box {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .media-controls {
            background: darken($color: $color3, $amount: 25);
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;

            & button:last-child {
                border-radius: inherit;
            }
        }
    }

    button {
        padding: 0 7px;
        border-radius: 0px;
    }
}

.window {
    padding: 0 4px;

    & > .icon {
        margin-right: 6px;
    }

    & > box.info {
        & > label.window-class {
            font-size: 9.8px;
            font-family: monospace;
            color: darken($color: $foreground, $amount: 20);
        }

        & > label.window-title {
            font-size: 12px;
            color: $foreground;
            margin-top: -3px;
        }
    }
}

.network button {
    padding-left: 10px;
    padding-right: 7px;
}

.bluetooth button {
    padding-left: 10px;
    padding-right: 7px;
}

.audio-eventbox { 
    &:hover box.audio {
        background: darken($color: $color2, $amount: 5);
    }

    & > .audio {
        padding: 0 8px;
        border-radius: 12px;

        &.open {
            background: darken($color: $color3, $amount: 10);
        }

        label {
            font-weight: 600;

            &:first-child {
                margin-right: 2px;
            }

            &:last-child {
                margin-left: 2px;
            }
        }
    }
}

.clock button.cal-open {
    background: darken($color: $color3, $amount: 10);
}

.control-center-toggle {
    border-radius: 12px;
    
    &:hover {
        background: darken($color: $color2, $amount: 10);
    }

    & > box {
        padding-left: 12px;
        padding-right: 14px;

        label {
            font-size: 12px;
        }
    }

    &.open {
        background: darken($color: $color3, $amount: 10);
    }
}