@import "../../../less/variables.less";

@tagPadding: 3px;
@tooltipPadding: 10px;
@fontSize: 12px;
@expandedDescriptionWidth: 300px;

.tota11y-label {
    background-color: rgb(255, 232, 0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: default;
    padding: @tagPadding;
    position: absolute;
    z-index: @z-index--labels;

    &-error {
        background-color: rgb(255, 174, 174);

        &-icon {
            display: block;
            float: left;
            margin-right: 3px;
            width: @fontSize;
        }
    }

    &-success {
        background-color: #b9eda9;
    }

    &-warning {
        background-color: rgb(255, 232, 0);
    }

    // Label font styles
    &, &-text, &-detail, &-link, &-help {
        color: @darkGray;
        font-size: @fontSize;
    }

    &-text {
        float: left;
    }

    &-detail {
        clear: both;
        display: none;
        max-width: @expandedDescriptionWidth;
    }
    &:hover &-detail {
        display: block;
    }

    &-help {
        float: left;
        margin-left: 5px;
    }

    &-link {
        &:hover, &:focus {
            opacity: 0.6;
            text-decoration: underline;
        }
    }
}

.tota11y-highlight {
    background-color: @highlightColor;
    pointer-events: none;
    position: absolute;
    z-index: @z-index--highlights;
}