$tooltip-background-color: rgba(71,88,107,0.9);
$tooltip-arrow-size: 6px;
$tooltip-arrow-offset: 16px;

.root {
    position: relative;
    padding: 12px 16px;
    background: $tooltip-background-color;
    color: white;
    font-size: 12px;
    border-radius: 2px;
    z-index: $z-index-popper;
}

.arrow {
    display: block;
    position: absolute;
    border: $tooltip-arrow-size solid transparent;
}

.root[x-placement^="top"] { margin-bottom: $tooltip-arrow-size; }
.root[x-placement^="top"] .arrow {
    bottom: -$tooltip-arrow-size;
    margin-left: -$tooltip-arrow-size;
    border-width: $tooltip-arrow-size $tooltip-arrow-size 0;
    border-top-color: $tooltip-background-color;
}
.root[x-placement="top-start"] .arrow { left: $tooltip-arrow-offset; }
.root[x-placement="top"] .arrow { left: 50%; }
.root[x-placement="top-end"] .arrow {
    right: $tooltip-arrow-offset;
    margin-right: -$tooltip-arrow-size;
}

.root[x-placement^="bottom"] { margin-top: $tooltip-arrow-size; }
.root[x-placement^="bottom"] .arrow {
    top: -$tooltip-arrow-size;
    margin-left: -$tooltip-arrow-size;
    border-width: 0 $tooltip-arrow-size $tooltip-arrow-size;
    border-bottom-color: $tooltip-background-color;
}
.root[x-placement="bottom-start"] .arrow { left: $tooltip-arrow-offset; }
.root[x-placement="bottom"] .arrow { left: 50%; }
.root[x-placement="bottom-end"] .arrow {
    right: $tooltip-arrow-offset;
    margin-right: -$tooltip-arrow-size;
}

.root[x-placement^="left"] { margin-right: $tooltip-arrow-size; }
.root[x-placement^="left"] .arrow {
    right: -$tooltip-arrow-size;
    margin-top: -$tooltip-arrow-size;
    border-width: $tooltip-arrow-size 0 $tooltip-arrow-size $tooltip-arrow-size;
    border-left-color: $tooltip-background-color;
}
.root[x-placement="left-start"] .arrow { top: $tooltip-arrow-offset; }
.root[x-placement="left"] .arrow { top: 50%; }
.root[x-placement="left-end"] .arrow {
    bottom: $tooltip-arrow-offset;
    margin-bottom: -$tooltip-arrow-size;
}

.root[x-placement^="right"] { margin-left: $tooltip-arrow-size; }
.root[x-placement^="right"] .arrow {
    left: -$tooltip-arrow-size;
    margin-top: -$tooltip-arrow-size;
    border-width: $tooltip-arrow-size $tooltip-arrow-size $tooltip-arrow-size 0;
    border-right-color: $tooltip-background-color;
}
.root[x-placement="right-start"] .arrow { top: $tooltip-arrow-offset; }
.root[x-placement="right"] .arrow { top: 50%; }
.root[x-placement="right-end"] .arrow {
    bottom: $tooltip-arrow-offset;
    margin-bottom: -$tooltip-arrow-size;
}

.body {
    max-width: 260px;
    line-height: 20px;
    word-break: break-all;
}

.body[size$="small"] {
    max-width: 120px;
}

.body[size^="small"] {
    max-height: 80px;
    overflow-y: auto;
}

.body[size$="normal"] {
    max-width: 260px;
}

.body[size^="normal"] {
    max-height: 140px;
    overflow-y: auto;
}

.body[size$="large"] {
    max-width: 440px;
}

.body[size^="large"] {
    max-height: 240px;
    overflow-y: auto;
}

.body[size$="auto"] {
    max-width: none;
}

.body[size^="auto"] {
    max-height: none;
}