@define refs {
  name: picker;
}

@define props {
  menu: 10;
  bgActive: #4c9bff;
  bdActive: #4890eb;
}

@alga {refs.name} {
  .{refs.name} {
    ref: width-auto;
  }
    
  .pickerWrap {
    ref: display-block position-relative;
  }
    
  .picker.dropdown .pickerWrap {
    ref: display-inlineBlock;
  }
    
  .pickerBackdrop {
    ref: position-fixed zIndex-74 inset-0_3em_3em_0 maxWidth-100vw maxHeight-100vh width-100pct height-100pct display-none;
  }
    
  .picker.active .pickerBackdrop {
    ref: display-block;
  }
    
  .pickerToggler {
    ref: padding-0.5rem userSelect-none;
  }
    
  .select.pickerToggler {
    ref: paddingLeft-0.75rem paddingRight-2.25rem cursor-default fontSize-inherit;
    ref: textOverflow-ellipsis overflow-hidden whiteSpace-nowrap width-100pct;
  }
   
  .pickerContent {
    ref: position-absolute zIndex-75 top-2.45rem left-0 minWidth-240px backgroundColor-hexfff border-1px_solid_hexd9d9d9 display-none borderRadius-0.375rem;
    prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexfff borderColor-hexd9d9d9;
    
    .pickerHeader {
      ref: padding-0.5rem;
      ref-borderBottom: 1px solid #d9d9d9;
      prefers-dark: borderBottomColor-hex5f5f5f;
      prefers-toDark: borderBottomColor-hex5f5f5f;
      prefers-toLight: borderBottomColor-hexd9d9d9;
    }
    
    .pickerBody {
      ref: padding-0.75rem;
    }
    
    .pickerMenu {
      ref: overflowY-auto;
      ref-maxHeight: times({{props.menu}},42px);
    }
    
    .pickerItem {
      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;
    }
    
    .pickerItem:last-child {
      ref: borderBottom-0;
    }
    
    .pickerItem:hover {
      ref: backgroundColor-hexededed;
      prefers-dark: backgroundColor-hex242424;
      prefers-toDark: backgroundColor-hex242424;
      prefers-toLight: backgroundColor-hexededed;
    }
    
    .pickerItem.active {
      ref: pointerEvents-none borderColor-{props.bdActive} backgroundColor-{props.bgActive};
      ref: color-hexfff cursor-default;
    }
    
    .pickerFooter {
      ref: padding-0.5rem;
      ref-borderTop: 1px solid #d9d9d9;
      prefers-dark: borderTopColor-hex5f5f5f;
      prefers-toDark: borderTopColor-hex5f5f5f;
      prefers-toLight: borderTopColor-hexd9d9d9;
    }
  }
  
  .pickerContent.pickerSizing {
    ref: overflowY-auto;
    ref-maxHeight: times({{props.menu}},42px);
  }
  
  .suggestion .pickerContent,
  .fill .pickerContent {
    ref: width-100pct minWidth-auto;
  }
  
  .pickerEnd .pickerContent {
    ref: right-0 left-auto textAlign-left;
  }
  
  .pickerUp .pickerContent {
    ref: bottom-2.5rem top-auto;
  }
  
  .picker:not(.pickerUp).suggestion.active .input.pickerToggler,
  .picker:not(.pickerUp).suggestion.active .select.pickerToggler {
    ref: borderBottomRightRadius-0 borderBottomLeftRadius-0;
  }
  
  .picker:not(.pickerUp).suggestion.active .pickerContent {
    ref: borderTopRightRadius-0 borderTopLeftRadius-0;
  }
  
  .picker.pickerUp.suggestion.active .input.pickerToggler,
  .picker.pickerUp.suggestion.active .select.pickerToggler {
    ref: borderTopRightRadius-0 borderTopLeftRadius-0;
  }
  
  .picker.pickerUp.suggestion.active .pickerContent {
    ref: borderBottomRightRadius-0 borderBottomLeftRadius-0;
  }
  
  .picker.active .pickerContent {
    ref: display-block;
  }
}