@mixin box-shadow-as-border-with-hover-transition(
    $transition, $color, $width: 1px, $border-radius: 0, $transition-leave: '0s'
) {
    &::after {
        content: '';
        @include fill-parent();
        @include box-shadow-as-border(
            $color,
            $width
        );
        opacity: 0;
        transition: opacity $transition-leave, box-shadow $transition-leave;
        border-radius: $border-radius;
    }

    &:hover:after {
        transition: opacity $transition, box-shadow $transition;
        opacity: 1;
    }
}