Bordered style

[mrleblanc101]

Hi,
I was trying to add a border around the tooltip and the arrow tip:

The arrow is made using the classic CSS border hack, which makes it difficult to add a border to it.
I ended up using a pseudo-element with a clip-path to create the arrow tip.

I then translated the arrow tip by 1px to hide the border around the tooltip when the arrow join:

I wonder if we could make this easier.
Here is the code I used to override the theme:

.v-popper__popper[data-popper-placement^='top'] .v-popper__arrow-inner,
.v-popper__popper[data-popper-placement^='top'] .v-popper__arrow-outer {
    &::before {
        rotate: 45deg;
        left: -6px;
        top: -12px;
        translate: 0 -1px;
    }
}
.v-popper__popper[data-popper-placement^='left'] .v-popper__arrow-inner,
.v-popper__popper[data-popper-placement^='left'] .v-popper__arrow-outer {
    &::before {
        rotate: -45deg;
        left: -12px;
        top: -6px;
        translate: -1px 0;
    }
}
.v-popper__popper[data-popper-placement^='bottom'] .v-popper__arrow-inner,
.v-popper__popper[data-popper-placement^='bottom'] .v-popper__arrow-outer {
    &::before {
        rotate: -135deg;
        left: -6px;
        top: 0;
        translate: 0 1px;
    }
}
.v-popper__popper[data-popper-placement^='right'] .v-popper__arrow-inner,
.v-popper__popper[data-popper-placement^='right'] .v-popper__arrow-outer {
    &::before {
        rotate: 135deg;
        left: 0;
        top: -6px;
        translate: 1px 0;
    }
}
.v-popper--theme-tooltip {
    .v-popper__inner {
        border: 1px solid red;
        background: rgb(92, 45, 44);
    }
    .v-popper__arrow-outer {
        &::before {
            content: '';
            width: 12px;
            height: 12px;
            border: 1px solid red;
            background: rgb(92, 45, 44);
            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
        }
    }
}