// Basic layout styles
html {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
body {
    @extend %text;
    background: #fff; // fallback
    color: #444;
    -webkit-font-smoothing: antialiased; // Fix for webkit renderin
    height: 100%;
    min-height: 100%;
    overflow-x: hidden; // open-projects-nav
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    .master {
        @include transition (transform 1s ease);
        &.ng-animate {
            @include transition();
        }
    }
    .menu {
        @include transform(translate3d(0, 0, 0));
        @include transition (transform 1s ease);
    }
    &.open-projects-nav {
        .projects-nav {
            @include transform(translate3d(0, 0, 0));
            @include transition (transform 1s ease);
        }
        .master {
            @include transform(translate3d(300px, 0, 0));
            @include transition (transform 1s ease);
            &.ng-animate {
                @include transition();
            }
        }
        .menu {
            @include transform(translate3d(300px, 0, 0));
            @include transition (transform 1s ease);
        }
        .projects-nav-overlay {
            @include transform(translate3d(300px, 0, 0));
            @include transition (all 1s ease);
            opacity: .9;
        }
        &.closed-projects-nav {
            .projects-nav {
                @include transform(translate3d(-300px, 0, 0));
                @include transition (transform 1s ease);
            }
            .projects-nav-overlay {
                @include transition (all 1s ease);
                @include transform(translate3d(0, 0, 0));
                opacity: 0;
            }
            .master {
                @include transform(translate3d(0, 0, 0));
            }
            .menu {
                @include transform(translate3d(0, 0, 0));
            }
        }
    }
    &.loading-project {
        overflow: hidden;
        .projects-nav-overlay {
            @include transition (opacity 1s ease);
            opacity: 1;
            overflow: hidden;
            div {
                @include transition (opacity 1s ease);
                opacity: 1;
            }
        }
    }
}

.loader-active {
    overflow: hidden;
}

.master {
    height: 100%;
    min-height: 100%;
    position: relative;
}

.wrapper {
    @include table-flex();
    min-height: 100%;
    padding-left: 90px;
}

.menu-secondary {
    @include table-flex-child(1, 260px, 0, 260px);
    background: $whitish;
    padding: 2rem 1rem;
    &.filters-bar {
        @include table-flex-child(0, 1px, 0, 1px);
        @include transition(all .2s linear);
        padding: 0;
        &.active {
            @include table-flex-child(1, 260px, 0, 260px);
            @include transition(all .2s linear);
            padding: 2em 1em;

            .filters-inner {
                @include transition (all .4s ease-in);
                opacity: 1;
            }
        }
    }
}

.menu-tertiary {
    @include table-flex-child(1, 210px, 0, 210px);
    background-color: $dark-grayish-lime-green;
    padding: 2em 1em;
}

.extrabar {
    background: $whitish;
}

.main {
    @include table-flex-child(8, 600px, 0, 600px);
    padding: 2rem;
    padding-bottom: 1rem;
}

.icon {
    @extend %taiga;
}

.hidden {
    display: none !important;
}

.header-with-actions {
    @include table-flex(stretch, center, flex, row, wrap, space-between);
    margin-bottom: 1rem;
    .action-buttons {
        @include flex-shrink(0);
    }
    .button {
        color: $white;
        float: right;
        margin-left: 10px;
        &:hover {
            color: $white;
        }
    }
    h1 {
        margin-bottom: 0;
    }
}