import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../../BoxSizingStyle";
import { FontStyle } from "../../FontStyle";
import { Body2 } from "../../Typography";
export const StyledOptionGroupLi = styled.li.withConfig({
  displayName: "Styles__StyledOptionGroupLi",
  componentId: "sc-16v5afu-0"
})(["flex-direction:column;"]);
export const StyledOptionGroup = styled.div.withConfig({
  displayName: "Styles__StyledOptionGroup",
  componentId: "sc-16v5afu-1"
})(["", " ", " ", ""], {
  "userSelect": "none"
}, FontStyle, BoxSizingStyle);
StyledOptionGroup.displayName = "StyledOptionGroup";
export const StyledOptionGroupHeader = styled.div.withConfig({
  displayName: "Styles__StyledOptionGroupHeader",
  componentId: "sc-16v5afu-2"
})(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:6px 0;*{margin:auto 0;}"]);
StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
export const StyledOptionGroupHeaderName = styled(Body2).withConfig({
  displayName: "Styles__StyledOptionGroupHeaderName",
  componentId: "sc-16v5afu-3"
})(["padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
StyledOptionGroupHeaderName.displayName = "StyledOptionGroupHeaderName";
export const StyledOptionGroupOption = styled.div.withConfig({
  displayName: "Styles__StyledOptionGroupOption",
  componentId: "sc-16v5afu-4"
})(["", ""], props => props.hover && css(["background-color:var(--color-theme-200);"]));
StyledOptionGroupOption.displayName = "StyledOptionGroupOption";
//# sourceMappingURL=Styles.js.map