@import "../../config";

$angular-squire-container-bg: #fff !default;
$angular-squire-border-color: #d2d2d2 !default;
$angular-squire-popover-bg: #eeeeee !default;
$angular-squire-highlight-color: #d2d2d2 !default;
$angular-squire-wrapper-padding: 10px !default;
$angular-squire-dark-bg: #f6f6f6 !default;
$angular-squire-svg-base-color: #848484 !default;
$angular-squire-svg-hover-color: #4c4c4c !default;
$angular-squire-min-height: 150px !default;
$angular-squire-max-height: 150px !default;
$angular-squire-body-color: #848484 !default;
$angular-squire-body-font-family: "Lato", sans-serif, sans-serif !default;
$angular-squire-body-font-size: 14px !default;
$angular-squire-expanding-height-min: 70px !default;
$angular-squire-expanding-height-max: 150px !default;



@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.angular-squire {
    transition: all 2s;
    outline: none;
    $transition-duration: 250ms;
    &.angular-squire-wrap-contents, &.angular-squire-wrap-contents .angular-squire-wrapper {
        max-height: none;
        min-height: 100px;
    }

    &.angular-squire-chrome-on-focus {
        transition: border-color $transition-duration;
        svg { transition: opacity $transition-duration;}
        div::after { transition: background-color $transition-duration;}
        div {
            transition: border-color $transition-duration;
        }
    }

    &.angular-squire-chrome-on-focus:not(.focus):not(:hover) {
        border-color: transparent;
        svg { opacity: 0;}
        div::after { background-color: transparent !important;}
        div {
            border-color: transparent;
            background-color: transparent !important;
        }
    }

    //border: 1px solid $angular-squire-border-color;

    .hl {
        background-color: $angular-squire-highlight-color;
        //svg path {
        //    fill: $angular-squire-svg-hover-color;
        //}
    }

    &.input-focus-expanding .angular-squire-container .placeholder {
        height: 30px;
    }

    &.input-focus-expanding .editor-container {
        height: $angular-squire-expanding-height-min;
        transition: height 0.25s ease-in;
    }

    &.input-focus-expanding.input-focus .editor-container {
        height: $angular-squire-expanding-height-max;
        transition: height 0.25s ease-in;
    }

    .popover-visible  .squire-popover {
        display: block;
    }

    .squire-popover {

        position: absolute;
        z-index: 101;
        top: 4rem;
        display: none;
        border-radius: 3px;
        min-width: 250px;
        transition: all 160ms ease-out;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, .25));



        svg.squire-arrow {
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, .25));
            left: calc(50% - 1.5rem);
            position: absolute;
            top: calc(-1.5rem + 1px);
            transition: all 160ms ease-out;
            width: 3rem !important;
            height: calc(2rem + 1px) !important;
            z-index: 100;


            polygon {
                fill: $angular-squire-popover-bg;
                //  stroke: $angular-squire-border-color;
                stroke-linecap: butt;
                stroke-linecap: butt;
                stroke-linejoin: miter;
                stroke-width: 1;
            }


        }

        .content {
            background: $angular-squire-popover-bg;
            border: 1px solid $angular-squire-border-color;

            z-index: 110;
            padding: 10px;

            .title {
                font-weight: bold;
                padding: 1rem 0;
            }

            input, button {
                border-radius: 4px;
                border: 1px solid $angular-squire-container-bg;
                height: 30px;
                padding: 2px;
                display: block;
                width: 100%;
                background-color: #fff;
                margin: 5px 0;
                &:hover, &:active {
                    span.fa {
                        color: $angular-squire-highlight-color;
                    }
                }
                &.disabled {
                    opacity: 0.5;
                    span.fa {
                        color: inherit;
                    }
                }
            }
            .button-row {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            button.double {
                width: 48%;
                margin-bottom: 10px;
            }
        }
        .squire-popover-overlay {
            background-color: transparent;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 0;
            z-index: -1;
        }
    }

    .editor-container {
        animation-duration: 0.4s;
        animation-fill-mode: both;
        animation-name: fadeIn;
        padding-bottom: 30px;

        height: 100%;
        background-color: $angular-squire-container-bg;
        .ng-hide {
            height: 0;
        }

        &.editor-hide {
            height: 0;
            overflow: hidden;
        }
    }
    .angular-squire-controls, .angular-squire-cover {
        display: block;
    }

    .menu {
        border-top: 1px solid $angular-squire-border-color;
        border-bottom: 1px solid $angular-squire-border-color;
        display: block;
        height: 30px;
        margin: 0;
        padding: 5px 14px;
        -webkit-touch-callout: none;
        user-select: none;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;

        .item {
            border-radius: 3px;
            display: inline-block;
            line-height: 0;
            margin-bottom: 0;
            margin-right: 8px;
            outline: none;
            padding: 2px;
            position: relative;
            width: auto;

            svg {
                height: 14px;
                width: 14px;

                g {
                    fill: $angular-squire-svg-base-color;
                }
            }

            &:hover {
                @extend .hl;
            }
        }
    }

    .item.underline, .item.ulist, .item.header, .item.quote {
        margin-right: 20px;
        &:after {
            content: "";
            width: 1px;
            height: 10px;
            background-color: $angular-squire-border-color;
            display: inline-block;
            position: absolute;
            top: 4px;
            right: -13px;
        }
    }

    .menu.b .item.bold, .menu.i .item.italic , .menu.ul .item.ulist, .menu.ol .item.olist, .menu.u .item.underline,
    .menu.blockquote .item.quote, .menu.align-left .item.aleft, .menu.align-right .item.aright, .menu.code .item.code,
    .menu.align-center .item.acenter, .menu.size .item.header, .menu.a .item.add-link {
        @extend .hl;
    }

    .angular-squire-container {
        position: relative;

        .placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 1rem;
            background: #fff;
            color: $angular-squire-highlight-color;
            z-index: 0;
        }
    }

    .angular-squire-wrapper {
        position: relative;
        padding: $angular-squire-wrapper-padding;
        min-height: $angular-squire-min-height;
        overflow: auto;
        //color: $angular-squire-body-color;
        //font-family: $angular-squire-body-font-family;
        font-size: $angular-squire-body-font-size;
        outline-width: 0;
        font-family: OpenSans, sans-serif;
        color: $grey-a87;
        //max-height: $angular-squire-max-height;

        p {
            margin: 0;
            line-height: 1.4;

            &.h4 {
                font-size: $font-24;
                font-weight: 600;
                line-height: 1.2;
            }
        }

        b {
            color: $black;
        }

        blockquote {
            border-left: 2px solid $grey-a54;
            padding-left: $size-1x;
            margin-left: $size-3x;
        }

        pre, code {
            box-sizing: border-box;
            display: block;
            width: 100%;
            padding: $size-half $size-1x;
            background-color: $grey-a54;
            color: $white;
        }

        @media (max-width: 375px) { //iphone 5
            min-height: 60px;
            max-height: none;
        }
    }
    textarea {
        width: 100%;
        border: none;
        padding: 10px;
    }
}

.angular-squire-theme-dark.angular-squire {
    .editor-container, .angular-squire-wrapper .placeholder {
        background-color: $angular-squire-dark-bg;
    }
}
html.angular-squire-theme-dark.angular-squire-iframe body {
    background-color: $angular-squire-dark-bg;
}

.angular-squire .angular-squire-wrapper .placeholder div {
    padding: $angular-squire-wrapper-padding;
}
