colorshell/eww/styles/bar.scss

.bar {
    background: transparent;
    padding: 4px;
    padding-bottom: 0;

    & 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;
        border-radius: 12px;
        &.button {
            margin: 0;
            & > box {
                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 {
    border-radius: 50%;

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

        &:not(.active):hover {
            box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .5);
        }

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

        &.special {
            background: darken($color: $color3, $amount: 5);
        }
    }
}

.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;
                }
            }
        }
    }

    &.revealed {
        transition: 80ms linear;

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

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

            & button {
                background: $color2;
                margin: 0 1px;
                border-radius: 2px;

                &:hover {
                    background: lighten($color: $color2, $amount: 5);
                }

                &:first-child {
                    border-top-left-radius: 8px;
                    border-bottom-left-radius: 8px;
                    margin-left: 0;
                }

                &:last-child {
                    border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                    margin-right: 0;
                }
            }
        }
    }

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

.window {
    padding: 0 6px;

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

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

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

.network-eventbox > box {
    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 {
    & .cal-open > box {
        background: darken($color: $color3, $amount: 10);
    }

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

    & label:not(.icon) {
      margin-right: 3px;
    }
}

.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);
    }
}

.hardware {
    & > box {
        margin: 0 5px;

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

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