@use 'sass:color';
@use '../../style/colors';

.bar {
    margin-left: 5px;
    margin-right: 15px;
    margin-bottom: 13px;

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

        transition: background-color 300ms;

        &:hover {
            background-color: color.adjust(colors.$window_bg_color, $lightness: 3%);
        }

        &.bluetooth icon,
        &.network icon,
        &.tablet-mode icon {
            min-width: 30px;
        }

        &.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 colors.$window_bg_color;
                background: colors.$accent_color;
                transition: background-color 0.3s ease-in-out;
            }

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

            .active {
                border: 2px solid #50fa7b;
                transition: margin-left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
        }

        &.system-tray {
            .tray-item {
                all: unset;
                font-size: 30px;
                min-width: 36px;
                border-radius: 100%;
                transition: background-color 300ms;

                &:hover {
                    background: colors.$window_bg_color;
                }
            }
        }
    }
}