@import "variables";

vn-debug-info {
    position: fixed;
    bottom: 16px;
    left: 16px;
    padding: 16px;
    min-width: 128px;
    background-color: #3f51b5;
    color: $color-font-dark;
    border-radius: 4px;
    z-index: 999;
    box-shadow: $shadow;
    transition: opacity 400ms ease-in-out;

    &:hover {
        opacity: .5;
    }
    & > h6 {
        font-weight: normal;
        color: rgba(255, 255, 255, .5);
        font-size: 1rem;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        & > li {
            margin-top: 3px;
            font-size: .94rem;

            & > span {
                padding: 1px 3px;
                border-radius: 4px;
                transition: background-color 200ms ease-in-out;
                
                &.alert {
                    background-color: $color-alert;
                }
            }
        }
    }
}