.list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 25rem);
  overflow: hidden auto; }

.list-header {
  display: grid;
  background-color: var(--item__background-color__darkest);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-bottom: .5rem;
  text-transform: uppercase;
  font-size: .8em;
  padding-block: .675rem .5rem; }

.list-header > div,
.list .item > div > div {
  padding-inline: .5rem; }

.list::after {
  content: '';
  background-color: red;
  height: .5rem;
  background-color: var(--item__background-color);
  border-radius: 0 0 var(--border-radius) var(--border-radius); }

.list .item {
  transition: .1s, border-color 0s;
  z-index: 0;
  box-shadow: 0 0 1rem -.5rem #0000;
  outline: 0.125rem solid var(--item__background-color);
  margin: .125rem; }

.list .item:not(:has(> div:nth-child(2).display-none)) {
  z-index: 1;
  box-shadow: 0 0 1rem -.5rem #000f;
  outline-color: #67bf; }

.list:has(.item > div:nth-child(2):not(.display-none))
.item:has(> div:nth-child(2).display-none) {
  opacity: .5; }

.list .item:has([data-bind="enabled"]):not(:has([data-bind="enabled"]:checked)) {
  filter: brightness(0.6) contrast(0.8) saturate(0) !important; }

.list .item > div:nth-child(1) {
  display: grid;
  cursor: pointer;
  line-height: 1.5;
  padding-block: .75rem;
  background-color: var(--item__background-color); }

.list .item:has(> div:nth-child(1):hover) {
  border-color: var(--item__background-color__hover); }

.list .item > div:nth-child(1):hover {
  background-color: var(--item__background-color__hover); }

.list .item > div:nth-child(1)[ripple] > .ripple {
  width: 16rem;
  filter: opacity(0.5) blur(1em); }

.list .item > div:nth-child(2) {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: .5rem;
  padding-inline: .5rem;
  background-color: var(--item__background-color__darker);
  border-radius: var(--border-radius);
  border-bottom: 0.5rem solid var(--item__background-color);
  transition: opacity 120ms;
  padding-block: .5rem; }

.list .item > div:nth-child(2).display-none {
  opacity: 0;
  height: 0;
  overflow: hidden;
  border-bottom-width: 0;
  padding: 0; }

.list .item > div:nth-child(2):has([data-bind="enabled"]):not(:has([data-bind="enabled"]:checked)) * {
  pointer-events: none; }

.list .item > div:nth-child(2) [data-bind="enabled"] {
  pointer-events: all !important; }