.ui-tooltip {
  background-color: var(--tx-tooltip-background-color);
  border-radius: var(--tx-tooltip-border-radius);
  border: var(--tx-tooltip-border);
  box-shadow: var(--tx-tooltip-shadow);
  max-width: 1000px;
  min-height: 60px;
  padding: 20px;
  position: absolute;
  z-index: 1000;
}

.ui-tooltip::before {
  background-color: var(--tx-tooltip-background-color);
  content: '';
  height: 15px;
  position: absolute;
  transform: rotate(45deg);
  width: 15px;
  z-index: 10001;
}

.ui-tooltip_top {
  bottom: 100%;
  margin-bottom: var(--tx-tooltip-margin);
}

.ui-tooltip_right {
  left: 100%;
  margin-left: var(--tx-tooltip-margin);
}

.ui-tooltip_left {
  margin-right: var(--tx-tooltip-margin);
  right: 100%;
}

.ui-tooltip_bottom {
  margin-top: var(--tx-tooltip-margin);
  top: 100%;
}

.ui-tooltip_top.ui-tooltip_center,
.ui-tooltip_bottom.ui-tooltip_center {
  left: 50%;
  transform: translateX(-50%);
}

.ui-tooltip_top.ui-tooltip_end,
.ui-tooltip_bottom.ui-tooltip_end {
  right: 0;
}

.ui-tooltip_right.ui-tooltip_center,
.ui-tooltip_left.ui-tooltip_center {
  top: 50%;
  transform: translateY(-50%);
}

.ui-tooltip_right.ui-tooltip_start,
.ui-tooltip_left.ui-tooltip_start {
  top: 0;
}

.ui-tooltip_right.ui-tooltip_end,
.ui-tooltip_left.ui-tooltip_end {
  bottom: 0;
}

.ui-tooltip_top::before {
  border-right: var(--tx-tooltip-border);
  border-bottom: var(--tx-tooltip-border);
  bottom: -10px;
  box-shadow: var(--tx-tooltip-top-shadow);
  right: var(--tx-tooltip-arrow-align);
}

.ui-tooltip_bottom::before {
  border-left: var(--tx-tooltip-border);
  border-top: var(--tx-tooltip-border);
  box-shadow: var(--tx-tooltip-bottom-shadow);
  right: 15px;
  top: -10px;
}

.ui-tooltip_right::before {
  border-left: var(--tx-tooltip-border);
  border-bottom: var(--tx-tooltip-border);
  bottom: 15px;
  box-shadow: var(--tx-tooltip-right-shadow);
  left: -10px;
}

.ui-tooltip_left::before {
  border-right: var(--tx-tooltip-border);
  border-top: var(--tx-tooltip-border);
  bottom: 15px;
  box-shadow: var(--tx-tooltip-left-shadow);
  right: -10px;
}

.ui-tooltip_top.ui-tooltip_start::before,
.ui-tooltip_bottom.ui-tooltip_start::before {
  left: var(--tx-tooltip-arrow-align);
}

.ui-tooltip_top.ui-tooltip_end::before,
.ui-tooltip_bottom.ui-tooltip_end::before {
  right: var(--tx-tooltip-arrow-align);
}

.ui-tooltip_top.ui-tooltip_center::before,
.ui-tooltip_bottom.ui-tooltip_center::before {
  left: 50%;
  transform: rotate(45deg) translate(-50%, 50%);
}

.ui-tooltip_right.ui-tooltip_start::before,
.ui-tooltip_left.ui-tooltip_start::before {
  top: var(--tx-tooltip-arrow-align);
}

.ui-tooltip_right.ui-tooltip_end::before,
.ui-tooltip_left.ui-tooltip_end::before {
  bottom: var(--tx-tooltip-arrow-align);
}

.ui-tooltip_right.ui-tooltip_center::before,
.ui-tooltip_left.ui-tooltip_center::before {
  top: 50%;
  transform: rotate(45deg) translate(-50%, -50%);
}

.ui-tooltip_inactive {
  display: none;
}

.ui-tooltip__close-button-section {
  position: absolute;
  top: 8px;
  right: 7px;
}

.ui-tooltip__close-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: var(--tx-tooltip-close-button-size);
  outline: 0;
  padding: 0;
  width: var(--tx-tooltip-close-button-size);

  &::before,
  &::after {
    background: var(--tx-tooltip-close-button-color);
    content: '';
    cursor: pointer;
    display: block;
    height: var(--tx-tooltip-close-button-size);
    position: absolute;
    right: 50%;
    top: 0;
    width: var(--tx-tooltip-close-button-weight);
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }

  &:hover {
    &::before,
    &::after {
      background: var(--tx-tooltip-close-button-hover-color);
    }
  }
}