/*
Mega-tabs

These are default styles for mega-tabs used on the company financials page.

Markup:
<div style="background: #F4F4F4; padding: 25px;">
    <div class="mega-tab">
        <div class="mega-tab__container" role="tablist" style="padding-bottom: 113px; padding-left: 15px;">
            <div class="mega-tab__item--large mega-tab__item mega-tab__item--active" role="tab" aria-selected="true" tabindex="0" style="width: 32.5%;">
                <div>
                    <div class="mega-tag__title">Company cash</div>
                    <div class="mega-tab__summary mega-tab__summary--positive">$55,000</div>
                    <div class="mega-tab__extra-info">Default account</div>
                </div>
            </div>
            <div class="mega-tab__item--large mega-tab__item" role="tab" aria-selected="false" tabindex="0" style="width: 32.5%;">
                <div>
                    <div class="mega-tag__title">Unpaid bills</div>
                    <div class="mega-tab__summary mega-tab__summary--negative">$922.90</div>
                    <div class="mega-tab__extra-info">3 due</div>
                    <div class="mega-tab__extra-info mega-tab__extra-info--danger">3 overdue</div>
                </div>
            </div>
            <div class="mega-tab__item--large mega-tab__item" role="tab" aria-selected="false" tabindex="0" style="width: 32.5%;">
                <div>
                    <div class="mega-tag__title">Net income</div>
                    <div class="mega-tab__summary">$0.00</div>
                    <div class="mega-tab__extra-info">Current month</div>
                </div>
            </div>
        </div>
        <div class="mega-tab__subview-container" role="tabpanel" aria-expanded="true">
            Page Content
        </div>
    </div>
</div>

Name: tabsMega

Styleguide 2.7
*/
.mega-tab * {
    box-sizing: border-box;
}

.mega-tab__container {
    display: block;
    position: relative;
    z-index: @z-index-mega-tab;
}

.mega-tab__subview-container {
    display:inline-block;
    position: relative;
    width: 100%;
    top: -1px;
    padding: 15px;
    border: 1px solid @color-border-tabs;
    border-radius: @border-radius-default;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.05);
    background: #FFFFFF;
}

.mega-tag__title {
    font-weight: bold;
}

.mega-tab__summary {
    font-weight: bold;
    font-size: @font-size--12 * 2;
    line-height: @font-size--12 * 4;
}

.mega-tab__extra-info {
    display: inline-block;
    color: @color-text-grey;

    & + .mega-tab__extra-info {
        border-left: 1px solid @color-border-standard;
        margin-left: 5px;
        padding-left: 5px;
    }
}

.mega-tab__extra-info--danger {
    color: @color-error;
}

.mega-tab__item {
    margin-right: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-color: @color-border-tabs;
    float: left;
    cursor: pointer;
    background-image: linear-gradient(-180deg, #fbfcfd 85%, #e8eaed 100%);
}

.mega-tab__item--large {
    padding: 15px;
    width: 32.82%;
    border-width: 1px;
    border-style: solid;

    & + .mega-tab__item--large {
        margin-left: 1px;
    }
}

.mega-tab__item--active {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-color: @color-border-tabs;
    border-bottom-color: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 0 -2px 5px 0 rgba(0,0,0,0.03);

    .mega-tab__summary--positive {
        color: @color-success;
    }

    .mega-tab__summary--negative {
        color: @color-error;
    }
}