theme.scss

$hud-background-color: rgba(0, 0, 0, 0.8);
$hud-background-color-negative: rgba(255, 255, 255, 0.3);
$hud-border-color: 1px solid rgba(0, 0, 0, 0.95);

$hud-text-title-font: Poppins;
$hud-text-title-color: white;

$hud-text-font: Poppins;
$hud-text-color: white;
$hud-text-color-negative: black;


.root {
    .flex-start {
        justify-content: flex-start;
    }

    .flex-end {
        justify-content: flex-end;
    }

    icon {
        color: $hud-text-color;
        font-family: MaterialIcons;
        align-items: center;
        justify-content: center;

        &.outline {
            font-family: MaterialIconsOutlined;
        }

        &.round {
            font-family: MaterialIconsRound;
        }

        &.sharp {
            font-family: MaterialIconsSharp;
        }

        &.twotone {
            font-family: MaterialIconsTwoTone;
        }
    }

    .tsx_avatar {
        z-index: 10;

        &:not(.big) .heroPortrait {
            width: 180px;
            height: 180px;
            background-color: black;
        }

        &.big .heroPortrait {
            width: 100%;
            height: 100%;
            background-image: url('https://i.gyazo.com/6b795d5103cfc80fddc3aa4c80627469.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }
    }

    .tsx_progress {
        margin-top: 2%;
        height: 20px;
        background-color: $hud-background-color-negative;
        justify-content: flex-start;
        align-items: center;
        border: $hud-border-color;
        border: 2px;
        border-radius: 50%;
        width: 90%;

        .value {
            border-radius: 50%;
            height: 100%;
        }

        .text {
            position: absolute;
            font-size: 18px;
            width: 100%;
            text-align: center;
            color: $hud-text-color-negative;
        }

        .currentxp-value {
            background-color: darkorange;
        }

        .currentitemcount-value {
            background-color: greenyellow;
        }
    }

    .scroller {
        overflow: scroll;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }



    CInventoryItem {
        background-color: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px) saturate(80%);
        border: 2px solid black;
        border-radius: 10px;
        margin: 3px;
        width: 120px;
        height: 120px;
        justify-content: space-around;
        align-items: center;


        .item-name {
            color: white;
        }

        .item-quantity {
            color: blue;
        }

        .item-description {
            display: none;
        }
    }
}