.tooltip-arrow,
.tooltip-arrow:before {
    background: inherit;
    width: 8px;
    height: 8px;
    position: absolute;
}

.tooltip-arrow {
    visibility: hidden;
}

.tooltip-arrow:before {
    content: "";
    visibility: visible;
    transform: rotate(45deg);
}

[data-tooltip-style^="light"] + .tooltip > .tooltip-arrow:before {
    border-style: solid;
    border-color: var(--color-gray-200);
}

[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="top"] > .tooltip-arrow:before {
    border-bottom-width: 1px;
    border-right-width: 1px;
}

[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="right"] > .tooltip-arrow:before {
    border-bottom-width: 1px;
    border-left-width: 1px;
}

[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="bottom"] > .tooltip-arrow:before {
    border-top-width: 1px;
    border-left-width: 1px;
}

[data-tooltip-style^="light"] + .tooltip[data-popper-placement^="left"] > .tooltip-arrow:before {
    border-top-width: 1px;
    border-right-width: 1px;
}

.tooltip[data-popper-placement^="top"] > .tooltip-arrow {
    bottom: -4px;
}

.tooltip[data-popper-placement^="bottom"] > .tooltip-arrow {
    top: -4px;
}

.tooltip[data-popper-placement^="left"] > .tooltip-arrow {
    right: -4px;
}

.tooltip[data-popper-placement^="right"] > .tooltip-arrow {
    left: -4px;
}

.tooltip.invisible > .tooltip-arrow:before {
    visibility: hidden;
}

[data-popper-arrow],
[data-popper-arrow]:before {
    background: inherit;
    width: 8px;
    height: 8px;
    position: absolute;
}

[data-popper-arrow] {
    visibility: hidden;
}

[data-popper-arrow]:before {
    content: "";
    visibility: visible;
    transform: rotate(45deg);
}

[data-popper-arrow]:after {
    content: "";
    visibility: visible;
    background: inherit;
    width: 9px;
    height: 9px;
    position: absolute;
    transform: rotate(45deg);
}

[role="tooltip"] > [data-popper-arrow]:before {
    border-style: solid;
    border-color: var(--color-gray-200);
}

.dark [role="tooltip"] > [data-popper-arrow]:before {
    border-style: solid;
    border-color: var(--color-gray-600);
}

[role="tooltip"] > [data-popper-arrow]:after {
    border-style: solid;
    border-color: var(--color-gray-200);
}

.dark [role="tooltip"] > [data-popper-arrow]:after {
    border-style: solid;
    border-color: var(--color-gray-600);
}