.container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--size-l);
  height: var(--size-l);

  border-radius: var(--radius-small);
}

.dark {
  background-color: #f9ea12;

  --shadow-color: 60deg 100% 29%;
  --shadow-elevation-high:
      0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34),
      0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34),
      0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34),
      0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34),
      0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34),
      0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34),
      -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34),
      -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34);

  box-shadow: var(--shadow-elevation-high);
}

.dark img {
  filter: invert(0%);
}