/* @TODO: 使用简化扩展方案 */

$popup-background-color: white;
$popup-background-head-color: white;
$popup-border-color: $brand-secondary;
$popup-arrow-size: 8px;
$popup-outer-arrow-size: calc($popup-arrow-size + 1px);
$popup-arrow-offset: 16px;

.root {
    position: relative;
    min-width: 140px;
    background: $popup-background-color;
    border: 1px solid $popup-border-color;
    z-index: $z-index-popper;
}

.head {
    padding: 6px 10px;
    background: $popup-background-head-color;
    border-bottom: 1px solid $popup-border-color;
}

.title {
    font-weight: bold;
}

.body {
    padding: 6px 10px;
}

.foot {
    border-top: 1px solid $popup-border-color;
    padding: 6px 10px;
}

.arrow {
    display: block;
    position: absolute;
    border: $popup-arrow-size solid transparent;
}
.arrow:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    border: $popup-outer-arrow-size solid transparent;
}

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

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

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

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

.root[merge-borders] .arrow ~ * {
    border: none;
    box-shadow: none;
}