@import (reference) "./common.less";

@errorMarkerSize: 25px;

@errorMessageSize: 200px;

.error-marker {
    position: absolute;
    right: @bufferScrollBarSize;
    opacity: 0.5;
    width: 200px;
    display: flex;

    &.active {
        opacity: 0.8;

        .error {
            left: 0px;
            opacity: 1;
        }
    }

    .error {
        opacity: 0;
        flex: 1 1 auto;
        transition: all 0.5s;
        position: absolute;
        left: 200px;
        background-color: rgb(60, 60, 60);

        display: flex;

        align-items: center;
        height: 100%;
        width: 100%;

        .text {
            font-size: 10px;
            color: @text-color;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;

            justify-content: center;
            align-items: center;
            padding: 8px;
        }
    }

    .icon-container {
        position: absolute;
        right: 0px;
        background-color: rgb(80, 80, 80);

        .fa {
            padding: 6px;
        }
    }
}

.error-squiggle {
    position: absolute;
}