.warning-icon {
    color: var(--main-color);
    position: relative;
    --size: 20px;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    cursor: pointer;
    margin-left: 10px
}

.warning-icon svg {
    width: 100%;
    height: 100%;
}

.warning-icon__tooltip {
    position: absolute;
    top: 0;
    left: calc(var(--size) + 10px);
    background: white;
    -webkit-box-shadow: 0 0 5px 0 rgba(34, 60, 80, 0.25);
    -moz-box-shadow: 0 0 5px 0 rgba(34, 60, 80, 0.25);
    box-shadow: 0 0 5px 0 rgba(34, 60, 80, 0.25);
    border-radius: 3px;
    z-index: -1;
    opacity: 0;
    transition: all .2s linear;
    transform: translateY(calc(-50% + calc(var(--size) / 2)));
    width: 241px;
    text-align: center;
    padding: 5px 11px;
    box-sizing: border-box;
}

.warning-icon:hover .warning-icon__tooltip {
    opacity: 1;
    z-index: 10;
}