
.navbar-user-button {
    @icon-img: url('./img/icon.svg');
    @icon-active-img: url('./img/icon-active.svg');

    float: right;
    display: inline-block;
    position: relative;
    margin-left: 16px;

    .navbar-user-dropdown {
        top: 62px;
        right: 0;
    }

    > .navbar-button {
        span {
            background-image: @icon-img;
            background-repeat: no-repeat;
            background-position: 8px 7px;
            padding-right: 16px;

            &:before {
                display: none;
                content: @icon-active-img; /* preload */
            }
        }

        a {
            &:hover,
            &:active {
                span {
                    background-image: @icon-active-img;
                }
            }
        }
    }

    &.open {
        .navbar-user-dropdown {
            display: block;
        }

        > .navbar-button {
            a {
                span {
                    background-image: @icon-active-img;
                    border-color: #fff;
                }
            }
        }
    }
}
