@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);
        width: 100%;

        .text {
            font-size: 10px;
            color: @text-color;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
            padding-right: @errorMarkerSize;
            padding-top: 3px;
            padding-bottom: 2px;
        }
    }

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

        .fa {
            padding: 6px;
        }
    }
}

.error-squiggle {
    position: absolute;
}