[data-lk-component="state-layer"] {
  z-index: 1;
  opacity: 0;

  pointer-events: none;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  transition: opacity 0.1s ease-out;
}

/* Only apply styles to the [data-lk-component="state-layer"] when its direct parent is hovered, active, or focused */
div:hover > [data-lk-component="state-layer"],
a:hover > [data-lk-component="state-layer"],
button:hover > [data-lk-component="state-layer"],
li:hover > [data-lk-component="state-layer"] {
  opacity: 0.16 !important;
}

div:active > [data-lk-component="state-layer"],
a:active > [data-lk-component="state-layer"],
button:active > [data-lk-component="state-layer"],
li:active > [data-lk-component="state-layer"] {
  opacity: 0.5 !important;
}

div:focus > [data-lk-component="state-layer"],
a:focus > [data-lk-component="state-layer"],
button:focus > [data-lk-component="state-layer"],
li:focus > [data-lk-component="state-layer"] {
  opacity: 0.35 !important;
}

.is-active [data-lk-component="state-layer"] {
  opacity: 0.16 !important;
}

.list-item.active [data-lk-component="state-layer"] {
  opacity: 0.24 !important;
}

[data-lk-forced-state="active"] {
  opacity: 0.12 !important;
}
