@import 'part:@lyra/base/theme/variables-style';

.frosted {
  background-color: color(var(--component-bg) a(95%));

  /*@supports (backdrop-filter: blur(10px)) {
    background-color: color(var(--component-bg) a(60%));
    backdrop-filter: blur(10px);
  }*/
}

.listItemStates {
  position: relative;

  @nest &:active {
    @nest &::after {
      z-index: 1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--selected-item-color);
      opacity: 0.5;
      pointer-events: none;
    }
  }

  @nest &:hover {
    @nest &::after {
      z-index: 1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--selectable-item-color-hover);
      pointer-events: none;
    }
  }

  @nest &:hover:active {
    @nest &::after {
      z-index: 1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--selected-item-color-hover);
      pointer-events: none;
    }
  }
}