SO-73744680

by David Thomas

HTML

<!-- for brevity I removed all but the one element you said you wanted to have the shadow
     (and, similarly, removed the unnecessary CSS for the removed elements): -->
<div class="things">
    <!-- I added a single class-name 'withShadow' to apply the CSS (because I was unsure of
         the situations in which you wanted the shadow added; obviously you can add the
         CSS declarations to another class if it makes more sense: -->
    <div class="thing thing-3 withShadow">
      <div class="indicator left-indicator state-3">&nbsp;</div>
      <div class="name">Name 3</div>
      <div class="change">Property 1</div>
      <div class="indicator right-indicator state-3">state-3 longer</div>
    </div>
</div>

CSS

:root {
 --shadowColor: hsl(0deg 20% 20% / 0.7);
}

.thing {
  display: flex;
  align-content: center;
  gap: 0;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: default;
}

.thing>div {
  padding: 10px;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

.thing .indicator {
  border-left: 1px solid #666;
  border-right: 1px solid #666;
}

.thing .left-indicator {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex-basis: 13px;
}

.thing .left-indicator.state-3 {
  background-color: #bff2c6;
}

.thing .name {
  background-color: #FFFFFF;
  flex-basis: 195px;
}

.thing .change {
  background-color: #FFFFFF;
  flex-basis: 135px;
}

.thing .right-indicator {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.thing .right-indicator.state-3 {
  background-color: #fcf95c;
  cursor: pointer;
}

.thing .right-indicator.state-3:hover {
  background-color: #E3E043;
}

.withShadow {
  /* using the 'filter' property to apply a drop-shadow, using the
     drop-shadow() function:
      (first) 0:          the x-offset (positive numbers moves to the right,
                          negative to the left),
      (second) 0:         the y-offset (positive numbers move down, negative
                          numbers go up),
      0.5em:              the spread of the colour,
      var(--shadowColor): the colour of the shadow (here using a CSS property)
     */
  filter: drop-shadow(0 0 0.5em var(--shadowColor));
}