/**
 * style definitions for the SectionEditor component
 *
 * @module fonio/components/SectionEditor
 */
@import '../../parameters.scss';


.fonio-SectionEditor
{
    display: flex;

    flex-flow: row nowrap;
    justify-content: stretch;
    // @extend .flex-stretched-column;
    q
    {
        quotes: none;

        // background: $color-warm-grey;
    }
    pre,
    blockquote
    {
        // padding: $gutter-medium;

        // background: $color-warm-grey;
    }
    blockquote
    {
        position: relative;

        margin: 0;
        // padding: $gutter-large;

        quotes: '« ' ' »' '‹ ' ' ›';
        &:before
        {
            position: absolute;
            top: 0;
            left: $gutter-small / 2;

            content: open-quote;
        }
        &:after
        {
            position: absolute;
            right: $gutter-small / 2;
            bottom: 0;

            content: close-quote;
        }
    }

    .player-container{
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .editor-wrapper
    {
        position: relative;

        overflow: auto;

        flex: 1;

        // padding-bottom: 10rem;// todo: parametrize that
        .scholar-draft-Editor
        {
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            .custom-scrollbars {
                > div > div {
                    overflow-x: visible!important;
                    // overflow-x: hidden!important;
                }
            }

            .editor-bibliography
            {
                display: none;
            }

            .main-container-editor,
            .notes-container,
            .editor-bibliography
            {
                // padding-left: 3rem;
                // padding-right: 3rem;
            }
            .csl-entry
            {
                word-break: break-all;
            }
            .scholar-draft-BasicEditor
            {
                background: rgb(249,249,249);
                .public-DraftEditor-content
                {
                    padding: 1rem;
                }

                // background: $color-very-light;
                &:not(.active)
                {
                    .public-DraftEditor-content
                    {
                        cursor: text;

                        background: rgb(240,240,240);
                        // background: $color-sec-stroke;
                    }
                }
            }
            .public-DraftEditorPlaceholder-root{
                z-index: 1000;
                width: 100%;
                top: 0;
            }
            .public-DraftEditor-content,
            .public-DraftEditorPlaceholder-inner
            {
                // font-family: $editable-font-stack;
                line-height: 1.75;

                padding: 1rem;

                // padding: $gutter-medium;

                // @extend .animated;
                .public-DraftStyleDefault-block
                {

                    margin-bottom: 1.5rem;
                }
                .public-DraftStyleDefault-ltr{
                    margin-bottom: .5rem;
                    // display: flex;
                    // flex-flow: row nowrap;
                }

                .public-DraftStyleDefault-depth0{
                    margin-left: 0rem;
                }

                .public-DraftStyleDefault-depth1{
                    margin-left: 1rem;
                }
                .public-DraftStyleDefault-depth2{
                    margin-left: 2rem;
                }
                .public-DraftStyleDefault-depth3{
                    margin-left: 3rem;
                }
                .public-DraftStyleDefault-depth4{
                    margin-left: 4rem;
                }
                .public-DraftStyleDefault-depth5{
                    margin-left: 5rem;
                }
                .public-DraftStyleDefault-depth6{
                    margin-left: 6rem;
                }
            }

            .scholar-draft-NoteContainer
            {
                // margin-top: $gutter-large;
                // padding: $gutter-medium 0 $gutter-medium 0;

                // border-top: 1px solid $color-warm-grey;
                // &:not(:first-of-type)
                // {
                //     border-bottom: 1px solid $color-warm-grey;
                // }
                .note-header
                {
                    // padding: $gutter-small;

                    // border-bottom: 1px solid $color-very-light;

                    // @extend .flex-stretched-row;
                    button
                    {
                        // width: $font-size-1*2.5;
                        // height: $font-size-1*2.5;
                        text-align: center;
                        vertical-align: center;

                        border-radius: 50%;

                        // @extend .interactive-item;
                        // &:hover
                        // {
                        //     @extend .interactive-item-intent;
                        // }
                    }
                    button:first-of-type
                    {
                        order: 2;

                        // @extend .dangerous-item;
                        // &:hover
                        // {
                        //     @extend .dangerous-item-intent;
                        // }
                    }
                    h3
                    {
                        flex: 1;
                        order: 1;

                        // margin-left: $gutter-small;
                    }
                }
            }
            .scholar-draft-InlineAssetContainer{
                word-break: break-all;
                // for embedded modals
                > div{
                    display: inline;
                }
                // display: inline-block;
            }
            .scholar-draft-NotePointer
            {
                // font-size: $font-size-1;
                // line-height: $font-size-1*3;
                display: inline-block;
                display: inline-block;
                // width: $font-size-2 * 1.4;
                // height: $font-size-2 * 1.4;
                // margin-left: $gutter-small;

                cursor: pointer;
                cursor: pointer;
                text-align: center;
                vertical-align: unset;

                border-radius: 50%;// todo: parametrize that

                // @extend .important-item;
                // &:hover
                // {
                //     @extend .important-item-intent;
                // }
            }
            .block-asset-side-toolbar{
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                flex-flow: column nowrap;
                flex-direction: flex-end;
                max-width: 0;
                transition: all .2s ease;
                .button {
                    margin-bottom: .3rem;
                }

                opacity: 0;
                &.is-active{
                    opacity: 1;
                    max-width: 10rem;
                    left: -4rem;
                }
            }
            .scholar-draft-BlockAssetContainer
            {
                position: relative;
                // min-height: 15rem;// todo: parametrize that
                // padding: $gutter-medium;

                // background: $color-warm-grey;
                  -webkit-user-select: none;  /* Chrome all / Safari all */
                  -moz-user-select: none;     /* Firefox all */
                  -ms-user-select: none;      /* IE 10+ */
                  user-select: none;          /* Likely future */     

                &:hover{
                    .block-asset-side-toolbar{
                        opacity: 1;
                        max-width: 10rem;
                        left: -4rem;
                    }
                }
            }

            
        }

        // span{
        //    word-break: break-all;
        // }

        &.hide-placeholder{
            .public-DraftEditorPlaceholder-root {
              display: none;
            }
        }
    }
    .editor-bibliography
    {
        // margin-bottom: $gutter-large;
        overflow: hidden;
        // .csl-entry{
        //     margin-bottom: $gutter-medium;
        // }
    }
    .ReactTable
    {
        // max-width: 50rem;// todo: parametrize that
        height: 100%;

        background: white;
    }

    .contextualization-loading-placeholder
    {
        // padding: $gutter-small;

        // @extend .important-item;
    }

    .scholar-draft-InlineButton,
    .scholar-draft-BlockButton,
    .fonio-LinkButton
    {
        float: left;
    }

    .fonio-LinkButton
    {
        font-size: 1em;

        position: relative;
        top: 0;

        height: 100%;
        margin: 0;
        padding: 0;
        .button-content
        {
            display: flex;

            height: 100%;

            align-items: center;
            flex-flow: row nowrap;
            justify-content: center;

            // padding-right: $gutter-small;
            // padding-left: $gutter-small;
            img
            {
                width: 1em;
            }
        }
    }

    .native-link
    {
        display: inline;
        // @extend .interactive-item;

        text-decoration: underline;
        .link-content
        {
            .pin-container
            {
                display: inline;
            }
        }
    }

    .scholar-draft-SideToolbar
    {
        &:not(:hover)
        {
            button:not(.is-primary)
            {
                opacity: .5;
            }
        }
        padding-right: .5rem;
    }

    /**
     * Inline contextualizations containing an input
     */
    .items-container
    {
        font-size: inherit;
        font-style: inherit;

        display: flex;

        align-items: center;
        input
        {
            font-size: inherit;
            font-style: inherit;

            display: inline;

            color: inherit;
            border: transparent;
            outline: none;
            background: inherit;
        }
    }

    .inline-icon-container
    {
        display: inline;

        height: 1em;
        margin-left: -.5em;
        // position: absolute;
        // right: -2rem;

        -webkit-user-select: none;  /* Chrome all / Safari all */
           -moz-user-select: none;     /* Firefox all */
            -ms-user-select: none;      /* IE 10+ */
                user-select: none;          /* Likely future */
        img
        {
            display: inline;

            max-height: 1em;
        }
    }
}
