//
// Logo
// ---
// bigchaindb.com
//

// default logo
.logo {
    fill: $brand-main-blue;
    color: $brand-main-green; // the fill="currentColor" trick
    width: 300px;
    height: 60px;
    display: block;
}


//
// Color modifiers
//
.logo--white {
    fill: #fff;
    color: #fff;
}

.logo--white--green {
    fill: #fff;
    color: $brand-main-green;
}

.logo--dark {
    fill: $brand-main-blue-dark;
}


//
// size modifiers
//
.logo--sm {
    width: 140px;
    height: 30px;
}

.logo--full {
    display: block;
    width: 100%;
    height: auto;
}


.logo-services {
    .logo {
        @extend .logo--sm;
        display: inline-block;
        color: $brand-main-blue-light;
        fill: $brand-main-blue-light;
    }
}

.logo-services--text {
    font-size: $font-size-h3 * 1.1;
    display: inline-block;
    color: $brand-main-blue-light;
    padding-left: $spacer;
    position: relative;
    top: -3px;

    &:before {
        content: '';
        position: absolute;
        left: $spacer / 3;
        width: 1px;
        height: 100%;
        background: $brand-main-violet;
        display: block;
    }
}