.more-info-wrapper {
    .more-info-color-set();

    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-left: 8px;

    .question-mark {
        cursor: default;

        &::before {
            color: @icon-help-round-before-color;
            background-color: @icon-help-round-before-bg-color;
        }

        &:hover {
            &::before {
                color: @icon-help-round-hover-before-color;
            }

            + .row-description {
                color: @icon-help-description-hover-color;
            }
        }

        &.igz-icon-alert-message {
            &::before {
                color: @icon-warn-hover-before-color;
                background-color: @icon-warn-before-bg-color;
            }

            &:hover {
                &::before {
                    color: @icon-warn-before-color;
                }
            }
        }

        &.click-trigger {
            cursor: pointer;
        }

        &+ .row-description {
            display: none;
        }

        &:not(.click-trigger):hover + .row-description, &.open + .row-description {
            display: block;
        }
    }

    .row-description {
        width: 280px;
        padding: 16px 19px;
        position: absolute;
        border-radius: 2px;
        box-shadow: @row-description-box-shadow;
        background-color: @row-description-bg-color;
        color: @row-description-color;
        font-family: @font-family-sans-serif;
        font-size: 12px;
        font-weight: 400;
        white-space: pre-line;
        z-index: 9999;

        &::before {
            position: absolute;
            content: '';
        }

        &.top,
        &.bottom {
            left: -132px;

            &::before {
                right: calc(50% - 9px);
            }

            &-left {
                left: -260px;

                &::before {
                    right: 4px;
                }
            }

            &-right {
                left: -6px;

                &::before {
                    right: calc(100% - 22px);
                }
            }
        }

        &.top,
        &.top-left,
        &.top-right {
            bottom: calc(100% + 8px);

            &::before {
                .triangle-arrow(down; @row-description-triangle-color; 8px; 10px);

                bottom: -10px;
            }
        }

        &.bottom,
        &.bottom-left,
        &.bottom-right {
            top: calc(100% + 8px);

            &::before {
                .triangle-arrow(up; @row-description-triangle-color; 8px; 10px);

                top: -10px;
            }
        }

        &.right,
        &.left {
            top: calc(50% - 20px);

            &::before {
                top: 7px;
            }

            &-left {
                top: calc(50% - 20px);

                &::before {
                    top: 7px;
                }
            }

            &-right{
                top: calc(50% - 20px);

                &::before {
                    top: 7px;
                }
            }
        }

        &.right {
            left: 32px;

            &::before {
                .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);

                left: -8px;
            }
        }

        &.left {
            left: -290px;

            &::before {
                .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);

                right: -8px;
            }
        }
    }
}