Is there a way to make elements clickable/focusable within a div that has an inset shadow, like the .calendar in this example? Check out this code snippet: https://jsfiddle.net/axel50397/846ostv5/9/
<div class="calendar">
<div class="card-deck p-2 w-100">
<div class="card mx-2">
<div class="card-header">
2020-04-01
</div>
<div class="card-body">
<button type="button" class="btn btn-sm btn-primary btn-block">09:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">10:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">11:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">12:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">13:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">14:00</button>
<button type="button" class="btn btn-sm btn-primary btn-block">15:00</button>
</div>
</div>
</div>
</div>
As per my limited CSS knowledge, it seems challenging because the .calendar needs to be positioned above its content. If achieving this in CSS is not possible, I'm open to alternative suggestions.