.bar {
    .bar-item {
        padding: 5px 10px 5px 10px;
        border-radius: 7px;
        background-color: darken($window_bg_color, 3%);
        font-size: 20px;
        min-height: 35px;

        .battery icon {
            &.charging {
                color: green;
            }

            &.low {
                color: red;
            }
        }

        .workspaces {
            .button {
                margin: 0 2.5px;
                min-height: 22px;
                min-width: 22px;
                border-radius: 100%;
                border: 2px solid transparent;
            }

            .occupied {
                border: 2px solid $window_bg_color;
                background: $accent_color;
                transition: background-color 0.6s ease-in-out;
            }

            .urgent {
                border: 2px solid $window_bg_color;
                background: red;
                transition: background-color 0.6s ease-in-out;
            }

            .active {
                border: 2px solid #50fa7b;
                transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
        }
    }
}