@import '~cn-next/variables.scss';

.cn-list-filter {
  font-size: $font-size-body-1;
  color: $color-text1-4;
  max-height: 100%;
  overflow: auto;

  .cn-list-filter-list {
    & > div {
      &.cn-list-filter-item {
        display: flex;
        align-items: center;
        padding: #{$s-2} #{$s-4};
        border-radius: 4px;
      }
    }
    &.cn-list-filter-wrapper {
      flex: 1 1 auto;
      overflow: auto;
    }
  }

  .cn-list-filter-checkbox {
    margin-right: 10px;
  }
  .cn-list-filter-selected {
    background-color: $color-fill1-1;
  }
  .cn-list-filter-search {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: #{$s-1};
  }
  .cn-list-filter-opened {
    transform: rotate(90deg);
  }
}