@define props {
  menu: 10;
  rdBox: 0.375rem;
  bgActive: #07f;
  fgActive: #fff;
  bdActive: #06e;
}

@alga list {
  .list {
    ref: width-100pct backgroundColor-hexfff border-1px_solid_hexd9d9d9;
    ref-borderRadius: {props.rdBox};
    ref: margin-0px padding-0px;
    prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexfff borderColor-hexd9d9d9;
    
    .listHeader {
      ref: padding-0.5rem;
      ref-borderBottom: 1px solid #d9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    .listMenu {
      ref: overflowY-auto;
      ref-maxHeight: times({{props.menu}},36px);
    }
    
    .listItem {
      ref: display-block padding-0.675rem_0.75rem borderBottom-1px_solid_hexd9d9d9;
      ref: textDecoration-none color-hex283541 cursor-pointer;
      prefers-dark: borderBottomColor-hex5f5f5f color-hexf2f2f2;
      prefers-toDark: borderBottomColor-hex5f5f5f color-hexf2f2f2;
      prefers-toLight: borderBottomColor-hexd9d9d9 color-hex283541;
    }
    
    .listItem:last-child {
      ref: borderBottom-0;
    }
    
    .listItem:hover {
      ref: backgroundColor-hexededed;
      prefers-dark: backgroundColor-hex242424;
      prefers-toDark: backgroundColor-hex242424;
      prefers-toLight: backgroundColor-hexededed;
    }
    
    .listItem.active {
      ref: pointerEvents-none borderColor-{props.bdActive} backgroundColor-{props.bgActive};
      ref: color-hexfff cursor-default;
    }
    
    .listFooter {
      ref: padding-0.5rem;
      ref-borderTop: 1px solid #d9d9d9;
      prefers-dark: borderTopColor-hex5f5f5f;
      prefers-toDark: borderTopColor-hex5f5f5f;
      prefers-toLight: borderTopColor-hexd9d9d9;
    }
  }
  
  .list.sizing,
  .listSize {
    ref: overflowY-auto;
    ref-maxHeight: times({{props.menu}},36px);
  }
  
  .list.flush,
  .listFlush {
    ref: border-none borderRadius-0px;
  }
}