.token {
    position: relative;
    display: inline-block;
    cursor: help;
    color: rgba(var(--terUser), 1);

    .token-tooltip {
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
    }

    &:hover .token-tooltip {
        display: block; // legacy fallback; .tt is JS-portal-only (no CSS hover)
    }
}

.token--empty {
    cursor: help;

    > i { opacity: 0.4; }
}

// Aperture foundation lives universally in _base.scss; nothing
// wallet-specific to override.

.wallet-page {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wallet-tokens {
    display: flex;
    flex-direction: column;
    overflow: visible;

    .token-row {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        overflow: visible;
    }

    .token {
        font-size: 1.5rem;
    }

    .token:hover .token-tooltip { display: none; }
}

#id_payment_methods {
    overflow-y: auto;
}

@media (max-width: 768px) {
    .token .token-tooltip {
        width: 13rem;
        max-width: 90vw;
        left: 0;
        transform: none;
    }

    .wallet-tokens .token-tooltip {
        left: 50%;
        transform: translateX(-50%);
    }
}