KennethanCeyer/formulize

.formulize-wrapper {
    position: relative;
    .formulize-text {
        opacity: 0;
        color: transparent;
        position: absolute;
        font-size: 0;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        text-indent: -10000px;
        z-index: 20;
    }

    .formulize-container {
        padding: 40px;
        cursor: text;
        position: relative;
        line-height: 2.8;
        .formulize-drag {
            display: inline;
            margin-top: -4px;
            padding: 12px 0;
            border-radius: 3px;
            vertical-align: middle;
            background-color: rgba(26, 94, 255, 0.15);
        }
        .formulize-cursor {
            display: inline-block;
            vertical-align: middle;
            height: 16px;
            width: 3px;
            background-color: rgba(0, 0, 0, 0.6);
            animation: blink .5s ease alternate infinite;
        }
        .formulize-item {
            display: inline;
            vertical-align: middle;
            padding: 4px 10px;
            word-break: break-all;
            margin: 6px;
            background-color: #ffffff;
            border-radius: 999px;
            color: #333333;
            position: relative;
            overflow: hidden;
        }
        .formulize-operator {
            color: #f6474e;
        }
        .formulize-bracket {
            background-color: transparent;
            color: #12c2b7;
        }
    }

    .formulize-alert {
        position: absolute;
        width: 140px;
        height: 42px;
        line-height: 38px;
        color: #777777;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        border-top: 3px solid #ababab;
        border-right: 0;
        background-color: #fafafa;
        text-align: center;
        top: 0;
        right: 1px;
        z-index: 10;
        &.formulize-alert-good {
            color: #88ccab;
            border-top-color: #88ccab;
        }
        &.formulize-alert-error {
            color: #ff9090;
            border-top-color: #ff9090;
        }
    }

    .formulize-prefix {
        color: rgba(0, 0, 0, 0.7);
    }

    .formulize-suffix {
        color: rgba(0, 0, 0, 0.3);
    }
}

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