@import 'https://www.nerdfonts.com/assets/css/webfont.css';

:root {
    /* Colors */
    --color-text: #a6adc8;
    --color-label: #cba6f7;
    --bg-root: #1819262f;
    --bg-workspace: #181926;
    --bg-workspace-focused: #24273a;
    --mid-usage: #f9e2af;
    --high-usage: #f38ba8;

    /* Fonts */
    --font-family: 'Consolas', monospace;
    --font-size: 0.8rem;

    /* Spacing */
    --margin-label: 0.5rem;
    --margin-container: 1rem;
    --workspace-margin-right: .25rem;
    --workspace-padding: .125rem .375rem;
    --workspace-padding-right: .375rem;
    --workspace-border-width: .125rem;
    --app-padding: .25rem 1rem;
}

.mid {
    color: var(--mid-usage);
}

.high {
    color: var(--high-usage);
}

body {
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size);
}

html,
body,
#root {
    height: 100%;
}

#root {
    background: var(--bg-root);
    backdrop-filter: blur(.375rem);
    position: relative;
}

.app {
    display: grid;
    grid-template-columns: .5fr 1fr;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--app-padding);
    backdrop-filter: blur(.75rem);
}

.left,
.right {
    display: flex;
    align-items: center;
}

.right {
    justify-self: end;
}

.network,
.cpu,
.memory {
    margin-right: var(--margin-container);
}

.memory,
.cpu {
    display: flex;
    align-items: center;
}

.fixed-container {
    display: flex;
    justify-content: space-between;
    width: fit-content;
}

.label {
    color: var(--color-label);
    width: fit-content;
    margin-right: var(--margin-label);
}

.value {
    width: fit-content;
    text-align: right;
}

.workspaces {
    display: flex;
    align-items: center;
    margin-top: -1px;
    margin-right: var(--margin-label);
}

.workspace {
    background: var(--bg-workspace);
    margin-right: var(--workspace-margin-right);
    padding: var(--workspace-padding);
    padding-right: var(--workspace-padding-right);
    color: var(--color-text);
    border: inset var(--workspace-border-width);
    border-color: transparent;
    cursor: pointer;

    &.displayed {
        background: var(--bg-workspace);
    }

    &.focused {
        background: var(--bg-workspace-focused);
    }

    &.focused:hover {
        background: var(--bg-workspace);
    }

    &:hover {
        background: var(--bg-workspace-focused);
    }
}