#ingame_HUD_Waypoints_Hint {
    position: absolute;
    @include S(right, 10px);
    @include S(bottom, 10px);

    display: flex;
    flex-direction: column;

    @include PlainText;
    @include S(width, 150px);
    background: rgba(0, 10, 20, 0.5);
    @include S(padding, 5px);

    color: #eee;

    .desc {
        @include SuperSmallText;
        color: #babcbf;
        .keybinding {
            position: relative;
        }

        strong {
            color: #fff;
        }
    }
}

#ingame_HUD_Waypoints {
    position: absolute;
    @include S(right, 10px);
    @include S(top, 45px);
    display: flex;
    flex-direction: column;
    @include DarkThemeInvert();

    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: all;
    @include S(padding-right, 5px);
    @include S(padding-bottom, 5px);
    @include S(padding-top, 5px);

    // Scrollbar
    &::-webkit-scrollbar {
        @include S(width, 2px);
        @include S(height, 6px);
    }

    .waypoint {
        @include SuperSmallText;
        pointer-events: all;
        cursor: pointer;
        color: #333438;
        @include S(padding-left, 11px);
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        & {
            /* @load-async */
            background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
        }

        &.layer--wires {
            /* @load-async */
            background-image: uiResource("icons/waypoint_wires.png");
        }

        opacity: 0.7;
        @include S(margin-bottom, 1px);
        font-weight: bold;

        &:hover {
            opacity: 0.8;
        }

        .editButton {
            @include S(width, 10px);
            @include S(height, 10px);
            @include S(margin-left, 4px);
            & {
                /* @load-async */
                background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
            }
            pointer-events: all;
            cursor: pointer;
            position: relative;
            @include IncreasedClickArea(2px);
            transition: transform 0.04s ease-in-out;

            &:hover {
                transform: scale(1.5);
            }
        }

        &.hub {
            // Transform because there is a canvas before
            @include S(margin-left, -2px);

            grid-template-columns: auto 1fr;
            background: none !important;
            @include S(padding-left, 0);
            canvas {
                @include S(width, 12px);
                @include S(height, 12px);
                @include S(margin-right, 1px);
            }
        }

        &.shapeIcon {
            canvas {
                @include S(width, 15px);
                @include S(height, 15px);
                pointer-events: none;
                // Double invert, to make sure it has the right color
                @include DarkThemeInvert();
            }
        }
    }
}