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

.page-editor .content-wrapper{
    margin-bottom:10em;
}

.page-editor .breadcrumb{
    margin-top:-1.2em;
    margin-bottom:2em;
}
.page-editor .modal .breadcrumb{
    margin:0;
    background-color:transparent;

    a{
        color:$color-grey-2;
    }
    li:hover{
        background-color:$color-grey-4;
    }
    .home{
        padding-left:0;
    }
}

.object{
    position:relative;
    overflow:hidden;
    @include nice-padding();

    &:first-child{
        border:0;
    }

    &.focused{
        border-color: darken($color-input-focus, 40%);
    }

    fieldset{
        padding-top:4em;
        padding-left:0;
        padding-right:0;
    }

    .object-help{
        display:block;
        position:relative;
        z-index:1;
        top:1em;
        padding-right:$grid-gutter-width/2;
        margin-top:4em;
        opacity:1;
        padding-left:3em;

        &:before{
            display:block;
            float:left;
            content:"?";
            border:1px solid $color-grey-2;
            color:$color-grey-2;
            @include border-radius(100%);
            height:15px;
            width:15px;
            line-height:15px;
            text-align:center;
            font-size:1.1em;
            margin-left:-2em;
            margin-top:0.3em;
        }
    }

    &:hover .object-help{
        opacity:1;
    }

    > h2, &.single-field label{
        -webkit-font-smoothing: auto;
        background:$color-salmon-light;
        text-transform:uppercase;
        padding:0.9em 0 0.9em 4.1em;
        font-size:0.95em;
        margin:0 0 0.2em 0;
        line-height:1.5em;
        font-weight:normal;
        position:absolute;
        top:0;
        left:0;
        right:0;
        z-index:1;
        overflow:hidden;

        &:before{
            text-shadow:none;
            font-family:wagtail;
            text-transform:none;
            content:"q";
            text-align:center;
            display:block;
            position:absolute;
            z-index:2;
            font-size:2em;
            top:0px;
            line-height:1.8em;
            left:0px;
            width:1.7em;
            color:white;
            padding:0;
            margin:0;
            cursor:pointer;
            background-color:$color-salmon;
        }
    }

    .richtext{
        padding-top:1em; /* to provide space for editor buttons */
        padding-bottom:1em;

        &.inEditMode{
            padding-top:5em; /* to provide space for editor buttons */
            padding-bottom:2em;
        }
    }

    &.single-field{
        h2, .object-help{
            display:none; /* The field label is used instead */
        }
    }

    /* Special full-width, one-off fields i.e a single text or textarea input */
    &.full{
        h2{
            display:none; /* The field label is used instead */
        }

        .object-help{
            display:block;
        }

        fieldset{
            display:block;
            float:none;

            .help{
                display:none;
            }
        }
        li{
            padding:0;
        }

        input, textarea, .richtext{
            @include nice-padding();
            @include border-radius(0px);
            font-family:Bitter, Georgia, serif;
            padding-top:2em;
            padding-bottom:2em;
            font-size:1.2em;
            line-height:1.6em;
        }

        .richtext{
            padding-top:3em; /* to provide space for editor buttons */
            padding-bottom:3em;

            &.inEditMode{
                padding-top:5em; /* to provide space for editor buttons */
                padding-bottom:5em;
            }
        }

        .error-message{
            @include nice-padding();
            padding-bottom:2em;
        }

        .error,
        .error input,
        .error textarea,
        .error .richtext{
            background-color:$color-input-error-bg;
        }
    }

    /* special panel for the publishing fields, requires a bit more pizzazz */
    &.publishing{
        h2:before{
            content:"7";
            font-size:2.4em;
            line-height:1.4em;
            width:1.4em;
        }
       
    }

    &.title input,
    &.title textarea{
        font-size:2em;
        padding-top:2em;
    }

    &.title input{
        padding-top:1.5em;
        padding-bottom:1.5em;
    }

    .multiple{
        padding:4.5em 0 0 0;

        fieldset{
            padding-top:0;
            padding-bottom:0;
        }
    }

    .fields{
        max-width:100%;
    }

    /* removes top padding from multiples used within another panel */
    .fields .multiple{
        padding-top:0;
    }

    .add{
        padding-top:1em;
    }

    &.empty{
        border-bottom:1px solid white;

        > h2, &.single-field label{
            margin:0 0;
            border-bottom:1px solid white;
        }

        /* wrapper around add button for mutliple objects. Default version is wordless plus button for contracted groups of fields */
        .add{
            @include transition(background-color 0.2s ease);
            position:relative;
            z-index:2;
            top:0px;
            left:0px;
            width:3.3em;
            padding:0;
            margin:0 0 0 -20px;
            cursor:pointer;

            .button{
                @include border-radius(0);
                overflow: visible;
                display:inline-block;
                padding:0;
                width:3.45em;
                background-color:$color-salmon;

                &:before{
                    position:relative;
                    padding:0;
                    line-height:1.8em; /* specific height required as parent 'a' has no height */
                    font-size:1.4rem;
                    width:100%;
                    background-color:transparent;
                }
            }
        }

        .multiple{
            padding:0;
        }
    }

    &.collapsible {
        /* li.collapsed gets its height from the fieldset only, which is now hidden
        and h2 has position:absolute which doesn't add to it either, so it would be 0 without this */
        min-height: 41px;

        h2{
            cursor: pointer;
        }
        h2:before{
            content: '6';
            text-shadow:none;
            line-height: 40px;
            padding-right: 1px;
            opacity: 1;
            color: #666;
            background-color: transparent;
            @include transition(background-color 0.2s ease, color 0.2s ease);
        }
        h2:hover:before{
        }

        &.collapsed{
            background: #fff;
            h2{
                 @include box-shadow(none);
            }
            h2:before{
                content: '5';
                color: #fff;
                background-color:$color-teal;
            }
            h2:hover:before{
                background-color:$color-teal-darker;
            }
        }
    }
}

footer .preview{
    button, .button{
        background-color:lighten($color-grey-2,10%);
        border-color:lighten($color-grey-2,10%);

        &:hover{
            background-color:$color-grey-2;
            border-color:$color-grey-2;
        }
    }
    .dropdown{
        input[type=button], input[type=submit], button, .button{
            background-color:lighten($color-grey-2,10%);
            border-color:lighten($color-grey-2,10%);

            &:hover{
                background-color:$color-grey-2;
                border-color:$color-grey-2;
            }
        }
        ul, .dropdown-toggle{
            background-color:lighten($color-grey-2,10%);
        }
        .dropdown-toggle:hover,
        &.open > .button + .dropdown-toggle{
            background-color:$color-grey-2;
        }
    }
}

@media screen and (min-width: $breakpoint-mobile){
    .page-editor .breadcrumb{
        margin-top:-1.8em;
    }
    .object{
        fieldset{
            max-width:1024px;
            @include column(10);
            padding-left:0;
            padding-right:0;

            fieldset{
                width:100%;
            }
        }

        .object-help{
            @include column(2);
            display:block;
            position:absolute;
            z-index:1;
            right:0;
            top:1em;
            padding-right:$grid-gutter-width/2;
            float:right;
            margin-top:4em;
            opacity:0;
            padding-left:3em;
        }

        &.full{
            fieldset{
                @include column(11);
                margin-left:-51px;
                padding:3.2em 0 0 0;
            }
            input, textarea, .richtext{
                border-width:0 1px;
            }
            .field{
                padding:0;
            }
            .field-content{
                display: block;
                float: none;
                width: auto;
                padding: inherit; 
            }
        }
        .multiple{
            @include column(10);
            padding-left:0;
            padding-right:0;
        }

        &.empty .add{
            margin:0 0 0 -50px;
        }

        &.single-field label{
            display: block;
            float: none;
            width: auto;
            padding:auto;
        }
    }
}
