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

.hallotoolbar{
    position:absolute;
    z-index:5;
    margin-top:4em;
    margin-left:1.2em;

    &.affixed{
        position:fixed;
        margin-top:0;
    }

}
/* full is added to hallotoolbar when invoked on a field set to the full layout style */
.hallotoolbar.full{
    margin-left:$mobile-nice-padding;
}
/* stream-field is added to hallotoolbar when invoked on a field within a stream-field */
.hallotoolbar.stream-field{
    margin-top:-1em;
    margin-left:0;

    &.affixed{
        margin-top:0;
    }
}

.hallotoolbar button{
    @include border-radius(0);
    height:2.4em;
}

.richtext {
    font-family:Bitter, Georgia, serif;
    padding-top:4em;
    min-height:50px;
    overflow: hidden;
    line-height:1.5em;

    /* Resetting various html tags that have been messed with by Wagtail's main css */
    h1{
        text-transform:none;
    }
    h2 {
        text-transform:none;
        display:block !important;
    }
    h1 span {
        font-weight: normal;
        color: inherit;
    }
    *:before,
    *:after{
        display:none;
    }

    ol,
    ul {
        margin: 1em 0;
        padding: 0 0 0 40px;
    }
    li{
        display:list-item !important;
    }
    ul li{
        list-style-type:disc !important;
    }
    ol li{
        list-style-type:decimal !important;
    }

    /* Delete controls on embedded blocks with contenteditable="false" */
    .rich-text-deletable {
        position: relative;
        a.delete-control {
            position: absolute;
            right: 0;
            cursor: pointer;
            display: none;

            &:before{
                background-color:rgba(255,255,255,0.8);
            }
            &:hover:before{
                background-color:white;
            }
        }
    }
    &.inEditMode {

        .rich-text-deletable a.delete-control {
            display: block;
        }
    }

    /* Set some reasonable default heading styles. These can be overridden in site-specific custom CSS
    to make them better reflect their appearance on the front-end (however, it's arguably better for editors
    NOT to be thinking about a specific visual appearance when they choose heading levels...) */

    h1,h2,h3,h4,h5,h6{
        font-family:inherit;
    }
    h1{} /* shouldn't be used */

    h2 {
        font-size: 2em;
        line-height: 1.2em;
        clear:both;
    }
    h3 {
        font-size: 1.7em;
        line-height: 1.194em;
    }
    h4 {
        font-size: 1.5em;
        line-height: 1.267em;
    }
    h5 {
        /* used for large body text, not really heading */
        font-size: 1.200em;
        line-height: 1.278em;
    }

    hr {
        border-bottom: 1px solid #ccc;
        border-top: none;
        border-left: none;
    }

    /*
    These styles correspond to the image formats defined in wagtailimages/formats.py,
    so that images displayed in the rich text field receive more or less the same
    styling that they would receive on the site front-end.

    Wagtail installations that define their own image formats (in a myapp.image_formats module)
    should ideally use the insert_editor_css hook to pass in their own custom CSS to have those
    images render within the rich text area in the same styles that would appear on the front-end.
    */

    .richtext-image {
        margin-top: 3px; /* close as possible to match line-height space above p */
        img {
            width:100%;
        }
        figcaption {
            display: block;
            width: 100%;
            text-align: left;
            margin-top: 16px;
            margin-bottom: 16px;
        }
        &.small {
            max-width: 45%;
        }
        &.left {
            float: left;
            margin-right: 16px;
        }
        &.right {
            float: right;
            margin-left: 16px;
        }
    }
}

@media screen and (min-width: $breakpoint-mobile){
    .hallotoolbar.full{
        margin-left:$desktop-nice-padding;
    }
}
