.bar { margin-bottom: 13px; .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); } } &.system-tray { .tray-item { all: unset; font-size: 30px; min-width: 36px; border-radius: 100%; transition: background-color 300ms; &:hover { background: $window_bg_color; } } } } }