@import "variables.scss";
@import "mixins.scss";
@import "grid.scss";

@import "components/explorer.scss";
@import "components/icons.scss";
@import "components/tabs.scss";
@import "components/dropdowns.scss";
@import "components/modals.scss";
@import "components/forms.scss";
@import "components/listing.scss";
@import "components/messages.scss";
@import "components/formatters.scss";
@import "components/header.scss";
@import "components/datetimepicker.scss";

@import "fonts.scss";

html{
    background:$color-grey-4;
    height:100%;
}

body{
    -webkit-font-smoothing: antialiased; /* Do not remove! */
    font-family:Open Sans,Arial,sans-serif;
    font-size:80%;
    line-height:1.5em;
    color:$color-text-base;
    overflow-x: hidden;
    position: relative;

    &.reordering{
        overflow:visible;
    }
}

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}

h1{
    line-height:1.3em;
    font-size:1.5em;
    text-transform:uppercase;
    color:$color-grey-1;
    font-weight:600;

    span{
        text-transform:none;
        font-weight:300;
    }

    .homepage &{
        text-transform:none;
    }
}
h2{
    text-transform:uppercase;
    font-size:1.3em;
    font-family:Open Sans;
    font-weight:600;
    color:$color-grey-2;

    .page-explorer &{
        text-transform:none;
    }
}
a{
    outline:none;
    color:$color-link;
    text-decoration:none;

    &:hover{
        color:$color-link-hover;
    }
}

code{
    @include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
    background-color:$color-fieldset-hover;
    padding:2px 5px;
}

kbd{
    @include border-radius(3px);
    font-family:Open Sans, Arial, sans-serif;
    border:1px solid $color-grey-2;
    border-color:rgba(0,0,0,0.2);
    padding:0.3em 0.5em;
}

img{
    max-width:100%;
    height:auto;
    border: 3px solid $color-grey-4;
}

.browsermessage{
    background-color:$color-red;
    color:white;
    padding:1em 2em;
    margin:0;
    position:relative;
    left:0;
    top:0;
    right:0;

    a{
        color:white;
        text-decoration:underline;
    }
}

.wrapper{
    @include clearfix();
}

.nav-wrapper{
    @include box-shadow(inset -5px 0px 5px -3px rgba(0, 0, 0, 0.3));
    position:relative;
    background: $color-grey-1;
    margin-left: -100%;
    width: 180px;
    float: left;
    height:100%;
    min-height:800px;
}
    .logo{
        display:block;
        margin:2em auto;
        text-align:left;
        text-decoration:none;
        color:white;
        padding: 0.9em 1.2em;
        margin:0;
        font-size:0.9em;
        -webkit-font-smoothing: auto;

        span{
            text-transform:uppercase;
        }

        img{
            width:20px;
            float:left;
            border:0;
            margin-right:1em;
        }
    }

    #nav-toggle{
        left:$mobile-nice-padding;
        cursor:pointer;
        position:absolute;

        &:before{
            font-size:40px;
            color:white;
            line-height:40px;
            content:"\2261";
        }
    }

    .nav-main{

        top: 43px;
        bottom: 0px;
        overflow: auto;
        width:100%;

        ul, li{
            margin:0;
            padding:0;
            list-style-type:none;
        }

        ul{
            border-top:1px solid $color-grey-1-1;
        }

        li{
            border-bottom:1px solid $color-grey-1-1;
            position:relative;

            &.selected{
                background-color:$color-grey-1;
            }

            a:before{
                font-size:1.2rem;
            }

            .menu-snippets &.menu-snippets,
            .menu-users &.menu-users,
            .menu-snippets &.menu-snippets,
            .menu-documents &.menu-documents,
            .menu-images &.menu-images,
            .menu-search &.menu-search,
            .menu-explorer &.menu-explorer{
                background:darken($color-grey-1, 10%);

                a{
                    color:white;
                }
            }
        }

        a {
            -webkit-font-smoothing: auto;
            text-decoration:none;
            text-transform:uppercase;
            display: block;
            color: #AAA;
            padding: 0.9em 1.2em;
            position:relative;
            font-size:0.85em;
            font-weight:400;
            white-space:nowrap;
            text-shadow:-1px -1px 0px rgba(0,0,0,0.3);

            &:before{
                vertical-align:-20%;
                margin-right:0.5em;
            }
            &:hover{
                color:white;
            }
        }

        .avatar{
            display:none;
        }

        /* search form */
        #menu-search{
            position:relative;

            .fields{
                @include transition(background-color 0.2s ease);
                border:0;
                li{
                    border:0;
                }
            }
            .field{
                padding:0;
                color: #AAA;

                &:before{
                    position:absolute;
                    left:0.75em;
                    top:0.45em;
                }
            }
            .submit{
                @include visuallyhidden();
            }
            label{
                font-weight:normal;
                -webkit-font-smoothing: auto;
                line-height:inherit;
                text-transform:uppercase;
                padding: 0.9em 1.2em 0.9em 3.7em;
                color: #AAA;
                font-size:0.95em;
            }
            input{
                float:left;
                margin-top:-1000px;
                text-transform:uppercase;
                font-size:1em;
                padding: 0.9em 1.2em 0.9em 3.5em;
                border:0;
                border-radius:0;
                background-color:transparent;
                line-height:inherit;
            }

            &:hover{
                .field, input{
                    color:white;
                }
            }

            &.focussed{
                label{
                    display:none;
                }
                .fields{
                    background-color:$color-grey-4;
                }
                .field{
                    color: $color-grey-1;
                }
                input{
                    margin-top:0px;
                    color:$color-grey-1;
                }
            }
        }
    }

    .explorer{
        position:absolute;
        margin-top:70px;
        font-size:0.9em;
    }

.content-wrapper{
    width:100%;
    height:100%; /* this has no effect on desktop, but on mobile it helps aesthetics of menu popout action */
    float: right;
    position: relative;
    background-color:$color-grey-4;
    border-bottom:1px solid $color-grey-3;

   /* transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);*/
}
    .content{
        @include row();
        background:white;
        border-top:0px solid $color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
        padding-bottom:4em;
        position:relative; /* yuk. necessary for positions for jquery ui widgets */
    }

body.nav-open .nav-wrapper{
    margin-left:0;
}

body.nav-open .content-wrapper{
    transform: translate3d(180px,0,0);
    -webkit-transform: translate3d(180px,0,0);

    position:fixed;
}

body.nav-open footer{
    bottom:1px;
}
body.nav-closed footer{
    bottom:0;
}

body.explorer-open {
    .nav-wrapper{
        width:80%;
    }
    .nav-main{
        display:none;
    }
    .content-wrapper{
        transform: translate3d(80%,0,0);
        -webkit-transform: translate3d(80%,0,0);

        position:fixed;
    }

    .explorer{
        display:block;
        border-top:1px solid rgba(200,200,200,0.1);

        &:before{
            position:absolute;
            top:-3em;
            content:"Close explorer";
            padding:0.9em;
        }
    }
}

footer{
    @include row();
    @include border-radius(3px 3px 0 0);
    @include box-shadow(0px 0px 2px rgba(255,255,255,0.5));
    @include transition(bottom 0.5s ease 1s);
    background: $color-grey-1;
    position:fixed;
    bottom:0;
    padding:0.5em;
    width:90%;
    margin:0 5%;
    color:white;

    ul{
        @include unlist();
    }
    li{
        float:left;
    }

    .actions{
        width:250px;
        margin-right:$grid-gutter-width/2;
    }

    .meta{
        float:right;
        text-align:right;
        padding-right:$grid-gutter-width/2;
        line-height:3.5em;
        font-size:0.85em;

        p{
            margin:0;
            margin-right:$grid-gutter-width;
            white-space: nowrap;
        }
    }
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: $color-grey-1;
}
::-webkit-scrollbar-thumb {
    background: $color-grey-2;
    -webkit-border-radius: 1ex;
}
::-webkit-scrollbar-corner {
    background: $color-grey-1;
}

.breadcrumb{
    @include unlist();
}

.breadcrumb{
    @include clearfix();
    overflow:hidden;
    padding-top:1.4em;
    font-size:0.85em;

    li {
        display: block;
        float: left;
        padding: 0.5em 1.3em;
        position: relative;

        text-decoration: none;
        color: #fff;
        line-height:1em;
        white-space: nowrap;

        line-height:1.5em;

        a, span{
            color:lighten($color-teal,40%);
            display:block;
            max-width:12em;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            line-height:1.6em;
            padding-right:1em;

            &:after{
                right:0;
                z-index:5;
                position:absolute;
                font-family:wagtail;
                content:"n";
                padding-left:20px;
                font-size:2em;
                color:$color-teal-darker;
                line-height:0.9em;
            }
        }

        /*   &:after, &:before{
            content: "";
            border-top: 1.2em solid transparent;
            border-bottom: 1.2em solid transparent;
        }
        &:after {
            border-left: 1em solid $color-teal-darker;
            position: absolute; right: -1.2em; top: 0;
            z-index: 1;
            border:1em solid red;
        }
        &:before {
            border-left: 1em solid white;
            position: absolute; left: 0; top: 0;
        } */
        &:hover {
            background: $color-teal-dark;
            a{
                color:white;
            }
        }
        &:hover:after {
            border-left-color: $color-teal-dark;
        }

        &.home {
            a {
                padding-right:0;
                text-align:center;
                width:3em;
                font-size:1em;

                &:before{
                    line-height:1em;
                    font-size:1.15rem;
                    line-height: 0.85em;
                    padding-top: 0.10em;
                }
                &:after{
                    right:-0.3em;
                }
            }
        }
    }

    header &  li{
        &:before {
            border-left: 1em solid white;
            position: absolute; left: 0; top: 0;
        }
    }

    &.single{
        li a{
            white-space: nowrap;
            text-overflow:inherit;
            max-width:100%;
        }
    }
}

.row{
    @include clearfix();
}

.nice-padding{
    padding-left:$mobile-nice-padding;
    padding-right:$mobile-nice-padding;
}


/* Z-indexes */
#nav-toggle{
    z-index:5;
}
.nav-wrapper{
    z-index:2;
}
.content-wrapper{
    z-index:3;
}
footer, .logo{
    z-index:100;
}


@media screen and (min-width: $breakpoint-mobile){
    .col1{
        @include column(1);
    }
    .col2{
        @include column(2);
    }
    .col3{
         @include column(3);
    }
    .col4{
        @include column(4);
    }
    .col5{
        @include column(5);
    }
    .col6{
        @include column(6);
    }
    .col7{
        @include column(7);
    }
    .col8{
        @include column(8);
    }
    .col9{
        @include column(9);
    }
    .col10{
        @include column(10);
    }
    .col11{
        @include column(11);
    }
    .col12{
        @include column(12);
    }

    .row{
        @include row();
    }
    .row-flush{
        @include row-flush();
    }

    .nice-padding{
        padding-left:$desktop-nice-padding;
        padding-right:$desktop-nice-padding;
    }

    .wrapper{
        margin-left:$menu-width;
    }

    .browsermessage{
        margin:0 0 0 -150px;
    }
    .content-wrapper{
        -webkit-transform:none;
        transform:none;
        border-bottom-right-radius: 5px;
    }

    .nav-wrapper{
        /* heigt and position necessary to force it to 100% height of screen (with some JS help) */
        position:absolute;
        left:0;
        height:100%;
        width:$menu-width;
        margin-left: 0;

        .inner{
            height:100%;
            position:fixed;
            width:$menu-width;
        }
    }
        .logo{
            margin:1em auto;
            text-align:center;

            span{
                display:none;
            }
            img{
                width:60px;
                float:none;
                margin:auto;
                display:block;
            }
        }

    .content{
        border-top:0;
        background-color:none;
        padding-top:0;
    }

    #nav-toggle{
        display:none;
    }

    .nav-main{
        position:absolute;
        top: 125px;
        margin-bottom: 116px; /* WARNING: magic number - the height of the .footer */

        .footer{
            padding-top:1em;
            background-color:$color-grey-1;
            position:fixed;
            width:$menu-width - 7;
            bottom:0;
            text-align:center;
        }
        .avatar{
            display:block;
            margin:auto;
            text-align:center;
            margin-bottom:1em;

            a{
                padding:0 0 1em 0;
            }
            &:hover{
                @include box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
            }
        }
    }

    .explorer {
        width: 400px;
        position: absolute;
        top:0;
        left:99%;
        margin-top:124px; /* same as .nav-main minus 1 pixel for border */
    }
    .dl-menu {
        position: absolute;
    }

    /* UN-set the transformations used on mobile */
    body.nav-open{
        .content-wrapper{
            position:relative;
            transform: none;
            -webkit-transform: none;
        }
        .nav-wrapper{
            margin-left: -$menu-width;
        }
        .nav-wrapper,
        .nav-main{
            width:$menu-width;
        }
    }

    body.explorer-open {
        .nav-wrapper{
            width:$menu-width;
        }
        .explorer:before{
            display:none;
        }
        .nav-main{
            display:block;
        }
        .content-wrapper{
            transform: none;
            -webkit-transform: none;

            position:relative;
        }
    }

    footer{
        width:80%;
        margin-left:50px;
    }

    .breadcrumb{
        padding-top:0;
        background:$color-teal-darker;

        li {
            a, span{
                &:after{
                    color:$color-teal;
                }
            }
        }
    }

    /* Z-indexes */
    .nav-main{
        li{
            z-index:1;
        }
        .footer{
            z-index:2;
        }
    }
    .explorer {
        z-index:$explorer-z-index;
    }
    .nav-wrapper{
        z-index:auto; /* allows overspill of messages banner onto left menu, but also explorer to spill over main content */
    }
}

@media screen and (min-width: 90em){
    .wrapper{
        max-width:$breakpoint-desktop-larger;
    }
    .nav-wrapper .inner{
         background:$color-grey-1;
    }

    footer{
        width:90em;
    }
}

/* Transitions (resolution agnostic) */
.content-wrapper,
.nav-main,
#nav-toggle,
footer,
.logo{
    @include transition(all 0.2s ease);
}
.nav-wrapper{
    @include transition-transform(0.2s ease);
}
.nav-main a, a{
    @include transition(color 0.2s ease, background-color 0.2s ease);
}