.ui-tip {
    position: absolute;
    z-index: 9000;

    display: none;

    max-width: 320px;

    font-size: 12px;
    line-height: 1.4;
}

.ui-tip__content {
    padding: 8px 14px 10px;
}

.ui-tip__tail {
    position: absolute;
    z-index: -1;

    display: block;

    width: 8px;
    height: 8px;

    content: '';

    transform: rotate(45deg);
}

.ui-tip_theme_dark .ui-tip__tail {
    background: #474747;
}

.ui-tip_theme_dark .ui-tip__content {
    color: #fff;
    background: #474747;
}

.ui-tip_theme_light {
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}

.ui-tip_theme_light .ui-tip__tail {
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}

.ui-tip_theme_light .ui-tip__content {
    color: #000;
    background: #fff;
}

.ui-tip__container {
    position: relative;
}

.ui-tip__visible {
    display: block;
}

.ui-tip_position_top-right {
    bottom: 0;
    left: calc(100% + 4px);
}

.ui-tip_position_top-right .ui-tip__tail {
    bottom: 5px;
    left: -2px;
}

.ui-tip_position_middle-right {
    left: calc(100% + 4px);

    margin-top: -8px;

    transform: translateY(-50%);
}

.ui-tip_position_middle-right .ui-tip__tail {
    top: calc(50% - 4px);
    left: -4px;
}

.ui-tip_position_middle-left {
    right: calc(100% + 4px);

    margin-top: -8px;

    transform: translateY(-50%);
}

.ui-tip_position_middle-left .ui-tip__tail {
    top: calc(50% - 4px);
    right: -4px;
}
