.h-bar {
    width: 100% !important;
    height: var(--bar-height);
    min-height: var(--bar-height);
    max-height: var(--bar-height);
}
.v-bar {
    height: 100% !important;
    width: var(--bar-width) !important;
    min-width: var(--bar-width) !important;
    max-width: var(--bar-width) !important;
}
.h-minibar {
    width: 100% !important;
    height: var(--minibar-height);
    min-height: var(--minibar-height);
    max-height: var(--minibar-height);
}
.v-minibar {
    height: 100% !important;
    width: var(--minibar-width);
    min-width: var(--minibar-width) !important;
    max-width: var(--minibar-width) !important;
}
.cube {
    width: var(--cube);
    height: var(--cube);
}
.icon-box {
    width: var(--icon-box);
    height: var(--icon-box);
}
.favicon-box {
    width: var(--favicon-box);
    height: var(--favicon-box);
}

.gap-0-25 { gap: calc(var(--unit)*.25) }
.gap-0-5 { gap: calc(var(--unit)*.5) }
.gap-1 { gap:calc(var(--unit)*1) }
.gap-2 { gap:calc(var(--unit)*2) }
.gap-3 { gap:calc(var(--unit)*3) }
.gap-4 { gap:calc(var(--unit)*4) }
.gap-5 {gap: calc(var(--unit)*5) }


.panel {
    position: relative;
    background-color: var(--panel);
    box-sizing: border-box !important;
}

.side-panel {
    width: calc( var(--bar-width) * 6 );
}

.terminal {
    position: relative;
    background-color: var(--option-selected);
    box-sizing: border-box !important;
    height: calc( var(--bar-height) * 12 );
}

.option:hover {
    cursor: pointer;
    background-color: var(--option-hover);
    color: white;
}
.option.option-selected {
    background-color: var(--option-selected)
}

.module-icon img {
    filter: invert(1) grayscale(1);
}

.module-icon-active img {
    filter: invert(0) grayscale(0) !important;
}