@import '~variables.scss';
@import '~mixins.scss';
@import "~sf-additional.scss";

.editor-type-html {
    &:before{
        display: block; /* For Firefox */
    }
    &:empty:before{
          content: attr(placeholder);
          pointer-events: none;
          display: block; /* For Firefox */
          color: rgba(150, 150, 150, 0.5)
    }
    &:focus:before{
        display: none;
    }
    // prevent chrome to add extra markup with style in contenteditable
    span, p, h1, h2, h3, h4 {
        background-color: transparent;
        font-family: inherit;
    }

    span, h3 {
        font-size: inherit;
        line-height: 150%;
    }

    pre {
        font-size: inherit;
        line-height: 150%;

        span, h3 {
            font-size: inherit;
            line-height: 150%;
        }
    }
}

.headline {
    .editor-type-html {
        span {
            font-size: inherit;
            line-height: 120%;
            font-weight: 500;
        }
    }
}

.dropdown__menu--suggestions {
    font-size: 14px;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.medium-editor-toolbar {
    z-index: 1020;
    // disabled state for toolbar button
    li .medium-editor-button-disabled {
        background-color: gray;
        cursor: default;
        pointer-events: none;
    }
}
.block {
    // hide text field on mouse out when empty if not alone
    &--not-alone-and-empty {
        .text-editor:not(.medium-editor-dragover) {
            opacity: 0;
            @include transition(opacity .25s);
            &:focus, &:hover {
                opacity: 1;
            }
        }
    }
    &__container {
        position: relative;
        .text-editor {
            padding: 0;
            // leave the space for the `add-embed` when the toolbar is shown
            margin-top: 6px;
            &.medium-editor-dragover, & .medium-editor-dragover {
                background: $sd-hover;
                border: 2px dashed $sd-blue;
            }
        }
        .preview--caption, .editor--caption {
            margin: 0;
            border: 1px solid rgba(150, 150, 150, 0.15);
            input, select, textarea {
                color: inherit;
            }
        }
        .editor--caption [contenteditable] {
            padding: 8px;
            min-height: 18px;
        }
        .editor--embed {
            min-height: 200px;
        }
    }
    &__actions {
        position: absolute;
        right: -38px;
        top: 0;
        cursor: pointer;
        opacity: .1;
        i {
            color: inherit;
        }
        & > div {
            display: inline-block;
        }
    }
    // shows actions on hover
    &__container:hover .block__actions {opacity: 1;}
}
.add-content { // (+) button
    position: absolute;
    z-index: 1;
    // translate the button by its dimension
    transform: translate(-48px, -12px);
    -moz-transform: translate(-48px, -12px);
    -wekit-transform: translate(-48px, -12px);
    &--expanded {
        .add-content__plus-btn {
            opacity: 1;
            i {transform: rotate(45deg);}
        }
        .add-content__actions span {
            transform: scale(1);
            &:hover {
                z-index: 1; // for sd-tooltip
            }
        }
    }
    &__plus-btn {
        position: absolute;
        opacity: .7;
        &:hover {
            opacity: 1;
        }
        i {
            @include transition(transform .25s);
        }
    }
    &__actions {
        position: relative;
        top: 10px;
        left: 50px;
        &.ng-hide:not(.ng-hide-animate) {
            display: block !important;
            position: absolute;
            pointer-events: none;
            width: 200px; // ensure that inner inline-block is inlined
        }
        span {
            display: inline-block;
            transform: scale(0);
            @include transition(transform .25s);
            &:nth-of-type(2) {
                transition-delay: .1s;
                -moz-transition-delay: .1s;
                -webkit-transition-delay: .1s;
            }
            border-radius: 24px;
            border: 2px solid $sd-blue;
            padding: 5px 5px 0px;
            background-color: $white;
            i {color: $sd-blue;}
            &:hover {
                cursor: pointer;
                background-color: $sd-blue;
                i {color: $white;}
            }
        }
    }
}
.add-embed {
    &__body {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid $sd-blue;
        @include border-radius(3px);
        form {
            position: relative;
        }
    }
    &__input {
        // leave place for action buttons on the sides
        margin-right: 100px;
    }
    // action buttons
    &__actions {
        // align right
        position: absolute;
        top: 0;
        right: 0;
        // centers icons
        i {
            left: 2px;
            position: relative;
        }
    }
}

// Embed previews
.block__container .preview--embed,
.add-embed__body .preview {
    &--loading {
        min-height: 100px;
        img {
            opacity: .3;
        }
        &:before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            @include spinner-big;
        }
    }
    text-align: center;
    margin: 10px 0 0;
    .instagram-media {
        margin: auto !important;
    }
    iframe, video {
        max-width: 100%;
    }
    img {
        max-width: 100%;
        height: auto;
        &:hover {
            cursor: pointer;
        }
    }
    .embed--link {
        &__title {
            font-size: 1.75em;
            line-height: 1.25em;
            margin-bottom: .50em;
        }
    }
}