/// main-navigation-bar.less - Main Layout Navigation bar


.main-navigation-bar {
    display: grid;
    color: white;
    grid-template-areas: 'logo . profile account-balances';
    grid-template-columns: 130px 3fr auto auto;
    background-color: #color[dark-blue];

    > .ethlance-logo {
        grid-area: logo;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 1em;

        > img {
            height: 1.6em;
        }
    }

    > .profile {
        grid-area: profile;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        
        > .ethlance-profile-image {
          margin: 0 1em;
        }

        > .name {
          font-weight: bold;
          padding: 0 1em;
        }
    }

    > .account-balances {
        grid-area: account-balances;
        display:flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background-color: darken(#color[dark-blue], 10%);
        margin-left: 1em;
        width: 200px;
        padding: 0 1em;
        line-height: 1.5em;

        > .token-value {
          font-weight: 600;
          font-size: 1.1em;
        }
        
        > .usd-value {
          font-weight: 300;
        }
    }
}
