@import "vars.pcss";
.cdx-block {
    padding: 0.4em 0;

    &::-webkit-input-placeholder {
        line-height:normal!important;
    }
}


@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ce-block {
    animation: fade-in 300ms ease;
    animation-fill-mode: initial;

    &:first-of-type {
        margin-top: 0;
    }

    &--selected &__content {
        background: var(--selectionColor);

        /**
         * Workaround Safari case when user can select inline-fragment with cross-block-selection
         */
        & [contenteditable] {
            -webkit-user-select: none;
            user-select: none;
        }

        img,
        .ce-stub {
            opacity: 0.55;
        }
    }

    &--stretched &__content {
        max-width: none;
    }

    &__content {
        position: relative;
        max-width: var(--content-width);
        margin: 0 auto;
        transition: background-color 150ms ease;
    }

    &--drop-target &__content {
        &:before {
            content: '';
            position: absolute;
            top: 100%;
            left: -20px;
            margin-top: -1px;
            height: 8px;
            width: 8px;
            border: solid var(--color-active-icon);
            border-width: 1px 1px 0 0;
            transform-origin: right;
            transform: rotate(45deg);
        }

        &:after {
            content: '';
            position: absolute;
            top: 100%;
            height: 1px;
            width: 100%;
            color: var(--color-active-icon);
            background: repeating-linear-gradient(
                    90deg,
                    var(--color-active-icon),
                    var(--color-active-icon) 1px,
                    #fff 1px,
                    #fff 6px
            );
        }
    }

    a {
        cursor: pointer;
        text-decoration: underline;
    }

    b {
        font-weight: bold;
    }

    i {
        font-style: italic;
    }
}

.codex-editor--narrow .ce-block--focused {
    @media (--not-mobile) {
        margin-right: calc(var(--narrow-mode-right-padding) * -1);
        padding-right: var(--narrow-mode-right-padding);
    }
}