#bx-game-bar {
    z-index: var(--bx-game-bar-z-index);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 90px;
    overflow: visible;
    cursor: pointer;

    > svg {
        display: none;
        pointer-events: none;
        position: absolute;
        height: 28px;
        margin-top: 16px;
    }

    @media (hover: hover) {
        &:hover {
            > svg {
                display: block;
            }
        }
    }

    .bx-game-bar-container {
        opacity: 0;
        position absolute;
        display: flex;
        overflow: hidden;
        background: #1a1b1ee8;
        border-radius: 0 10px 10px 0;
        box-shadow: 0px 0px 6px #1c1c1c;
        transition: opacity 0.1s ease-in;

        &.bx-show {
            opacity: 1;

            + svg {
                display: none !important;
            }
        }

        &.bx-hide {
            opacity: 0;
            pointer-events: none;
        }

        button {
            width: 60px;
            height: 60px;
            border-radius: 0;

            svg {
                width: 28px;
                height: 28px;
                transition: transform 0.08s ease 0s;
            }

            &:hover {
                border-radius: 0;
            }

            &:active {
                svg {
                    transform: scale(0.75);
                }
            }

            &.bx-activated {
                background-color: white;

                svg {
                    filter: invert(1);
                }
            }
        }

        /* Touch controller buttons */
        div[data-enabled] {
            button {
                display: none;
            }
        }

        /* Show enabled button */
        div[data-enabled='true'] {
            button:first-of-type {
                display: block;
            }
        }

        /* Show enable button */
        div[data-enabled='false'] {
            button:last-of-type {
                display: block;
            }
        }
    }
}