$platforms:
    mobile,
    desktop,
    hardware,
    web;

$oses:
    ios,
    android,
    windowsphone,
    blackberry,
    linux,
    mac,
    windows;

// Wallet menu
.walletmenu {
    text-align: center;
    position: relative;
    z-index: 90;

    > ul {
        display: inline-block;
        text-align: left;
        padding: 0 0 25px 0;
        border-bottom: 1px solid #E2E2E2;
        background-color: #fff;

        // Disable border radius of menu buttons
        // TODO: rework, so it doesn't rely on the order of submenus
        &:hover > li:first-child,
        &:hover > li:first-child + li {
            -webkit-border-bottom-left-radius: 0;
            -webkit-border-bottom-right-radius: 0;
            -moz-border-radius-bottomleft: 0;
            -moz-border-radius-bottomright: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        > li.active,
        > li:hover {
            background-position: left -62px;
        }
        > li:hover > ul {
            display: block;
        }
        > li > ul > li.active,
        > li > ul > li:hover {
            background-position: left -24px;
        }

        li {
            font-family: 'Ubuntu', sans-serif;
            position: relative;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: left 6px;
            padding: 0;
            margin: 15px 10px;
            font-size: 130%;
            font-weight: bold;
            -moz-transition: background-color 400ms ease-out;
            -webkit-transition: background-color 400ms ease-out;
            transition: background-color 400ms ease-out;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: 0;
            }

            a,
            a:link,
            a:active,
            a:visited {
                color: #383838;
            }
            a {
                white-space: nowrap;
                cursor: pointer;
                display: block;
                padding: 8px 10px 5px 42px;
            }

            ul {
                display: none;
                position: absolute;
                background-color: #fff;
                border: 1px solid #0d579b;
                padding: 4px 0;
                min-width: 110%;
                left: 0;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;

                li {
                    font-size: 80%;
                    display: block;
                    margin: 0;
                    background-position: left 10px;
                    -webkit-border-radius: 0px;
                    -moz-border-radius: 0px;
                    border-radius: 0px;

                    > a {
                        background-image: url(/img/icons/wallet_select.svg);
                        background-repeat: no-repeat;
                        background-position: -32px center;
                        padding: 8px 32px 5px 32px;
                        margin: 1px 0;
                    }

                    &.active > a {
                        background-position: right center;
                    }
                }
            }

            &.active,
            &:hover {
                background-color: #0d579b;
            }

            &:hover > a,
            &:hover > a:link,
            &:hover > a:active,
            &:hover > a:visited,
            &.active > a,
            &.active > a:link,
            &.active > a:active,
            &.active > a:visited {
                color: #fff;
            }
        }
    }

    // Generating icon classes for platforms
    @each $platform in $platforms {
        .wallet-#{$platform} {
            background-image: url('/img/icons/wallet_menu_#{$platform}.svg');
        }
    }

    // Generating icon classes for OSes
    @each $os in $oses {
        .wallet-#{$os} {
            background-image: url('/img/os/wallet_menu_#{$os}.svg');
        }
    }
}