@import (reference) "../../../Default/Bootstrap/variables.less";
@import "./cms.emailmarketing.emailbuilder.common.less";

@tab-link-height: @base-unit * 2;
@tabs-color: @color-white;

.email-builder .tabs {
    margin-top: @right-section-top-margin;
    height: calc(~"100% - "@right-section-top-margin);

    &.with-variants {
        height: calc(~"100% - "@right-section-top-margin + @variant-selection-size);
    }

    .tabs-nav {
        overflow: hidden;
        padding-left: @base-unit * 1.5;

        .tab-link {
            float: left;
            display: block;
            color: @color-black;
            text-align: center;
            padding: 0 @base-unit;
            line-height: @tab-link-height;
            text-decoration: none;

            &:hover,
            &:focus {
                background-color: @color-gray-150;
            }

            &.active {
                background-color: @tabs-color;
            }
        }
    }

    .tab-content {
        display: none;
        height: calc(~"100% - "@tab-link-height);
        margin-left: @right-section-left-margin;
        background-color: @tabs-color;

        &.active {
            display: block;
        }
    }
}