Bezel - pointer-events propagates to child elements

[MrDinsdale]

Expected Behaviour

Content with in the bezel should be interactive such as videos.

Current Behaviour

The pointer-events: none; is applied to any child elements preventing interaction without overriding manually.

Attempted Fixes

Currently set bezel to only show when video is not present and falls back to a static image. Possible fix would be to add:

.c-bezel > * {
  pointer-events: all;
}

however this could be considered a breaking change.

Steps to Reproduce (for bugs)

0. Add <button>test</button> within c-bezel.
1. Child element will not be intractable.

Context

On REDACTED we have the option to display a video in the details page or a static image if video not supplied. The designs have the media featuring a bezel.

Your Environment

Any environment

[joe-bell]

Hmm, there must be a reason was none in the first place?

I can only find this commit at the moment https://github.com/sky-uk/toolkit-ui/commit/aafc26f49bec48236c10948bd19fbc162849af00#diff-078ac6dd9e250a36f8ef88fbe0c6b708

[MrDinsdale]

@joebell93 The intention was likely to be preventing people from selecting the bezel however it also impacts child elements.

[joe-bell]

Could we instead replace the entire pseudo element with this:

box-shadow: inset 0 0 0 $bezel-border-width $bezel-border-colour;