@import "theme_cat_mocha"
@import "theme_jwm"

* {
    font-family: 'Iosevka Comfy Duo, Symbols Nerd Font, Font Awesome';
}

.background {
    background-color: rgba(#000, 0);
}

.bar {
    background-color: rgba($cat-mantle, 0.9);
    padding: 5px 10px;
    border-radius: 10px;
    margin: 10px;
    margin-bottom: 0px;
}

.modules > widget {
    background-color: rgba(#000, 0);
}

.modules > widget > *,
.modules > * {
    background-color: rgba($cat-surface1, 0.7);
    border-radius: 10px;
    margin: 0px 10px;
    padding: 0px 10px;
}

.modules > .container {
    padding: 0px;
}

.modules > .container > widget > *,
.modules > .container > * {
    padding: 0px 8px;
}
.modules > .container > widget:first-child > *,
.modules > .container > *:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 10px;
}
.modules > .container > widget:last-child > *,
.modules > .container > *:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 10px;
}

.workspaces { padding: 0px; }
.workspaces .item {
    font-size: 90%;
    min-width: 12px;
    padding: 0px 8px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0);
    color: $cat-text;
}

.workspaces .item:focus,
.workspaces .item.workspace-active,
.workspaces .item:hover {
    font-size: 100%;
}

.workspaces .item.workspace-active {
    background-color: $jwm-accent;
    color: $jwm-accent-contrast;
}

.audio-controls { padding: 0; }
.audio-controls .volume-control { padding-right: 6px; }
.audio-controls .mic-control .icon { padding-left: 6px; }

.volume-control .icon { font-size: 18px; }
.volume-control .value { padding-left: 6px; }
.volume-control.muted .icon { color: $cat-red; }
.volume-control.muted .value {
    color: $cat-subtext0;
    text-decoration: line-through;
}

.mic-control.muted .icon { color: $cat-subtext0; }

.playerctl.playing .music-icon {
    background-color: $jwm-accent;
    color: $jwm-accent-contrast;
}
.playerctl.paused .details { color: $cat-subtext0; }
.playerctl .details > *:first-child, .playerctl > *:first-child { padding-left: 0px; }
.playerctl .details > *:last-child, .playerctl > *:last-child { padding-right: 0px; }
.playerctl .details > * { padding: 0px 5px; }