cyb/src/features/sense/ui/SenseList/SenseList.module.scss

@use 'src/style/mixins' as *;

.wrapper {
  width: 100%;

  .center {
    display: block;
    color: #616161;
    text-align: center;
    margin-top: 100%;
  }

  // > div {
  //   display: flex;
  //   flex-direction: column;
  // }

  > ul {
    li {
      &,
      &:not(:last-child) {
        border-bottom: 1px solid rgb(255 255 255 / 11%);
      }
    }
  }

  .filters {
    padding: 10px;
    min-height: 62px;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;

    &::before {
      $blur: 12px;

      content: '';
      position: absolute;
      background-color: black;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      top: -$blur;
      filter: blur($blur);
    }

    > * {
      margin: auto;
      justify-content: space-around;
      flex: 1;
      text-align: center;

      > * {
        width: 30px;

        label {
          font-size: 20px;
          display: block;
          width: 100%;
        }
      }
    }
  }
}

.item {
  > button {
    width: 100%;
  }

  &.selected,
  &:hover {
    @include tableHover;
  }
}