.tour-element {
    background: $white;
    border-radius: $border-radius-base;
    box-shadow: 0 $border-radius-base $border-radius-extralarge $brand-dark;
    max-width: 400px;
    outline: none;
    width: 100%;
    z-index: 9999;
    &-sticky {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .tour-header {
        @extend .p-1;
        border-top-left-radius: $border-radius-base;
        border-top-right-radius: $border-radius-base;
        background: $brand-info;
        .tour-title {
            @extend .h5;
            @extend .m-0;
            @extend .p-1;
            color: $white;
        }
    }
    .tour-content {
        @extend .p-2;
        border-radius: $border-radius-base;
        color: $text-color;
    }
}

.tour-element,
.tour-element *,
.tour-element :after,
.tour-element :before {
    box-sizing: border-box;
}

.tour-arrow,
.tour-arrow:before {
    height: 16px;
    width: 16px;
    position: absolute;
    z-index: -1;
}

.tour-arrow:before {
    background: $white;
    content: "";
    transform: rotate(45deg);
}

.tour-element[data-popper-placement^="top"] > .tour-arrow {
    bottom: -8px;
}

.tour-element[data-popper-placement^="bottom"] > .tour-arrow {
    top: -8px;
}

.tour-element[data-popper-placement^="left"] > .tour-arrow {
    right: -8px;
}

.tour-element[data-popper-placement^="right"] > .tour-arrow {
    left: -8px;
}

.tour-element.tour-has-title[data-popper-placement^="bottom"] > .tour-arrow:before {
    background-color: $brand-info;
}