import styled from 'styled-components';
export var ellipsis = "\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n";
export var Root = styled.div.withConfig({
  displayName: "Selectstyles__Root",
  componentId: "sc-1u6d1mr-0"
})(["display:inline-block;position:relative;width:", ";"], function (_ref) {
  var theme = _ref.theme,
    $width = _ref.$width,
    $fullWidth = _ref.$fullWidth;
  return $fullWidth ? '100%' : "".concat(theme.spacing.unit($width), "px");
});
export var ListContainer = styled.div.withConfig({
  displayName: "Selectstyles__ListContainer",
  componentId: "sc-1u6d1mr-1"
})(["position:absolute;width:100%;cursor:pointer;z-index:", ";", ""], function (_ref2) {
  var theme = _ref2.theme;
  return theme.zIndex.dropdown;
}, function (_ref3) {
  var $hidden = _ref3.$hidden;
  return $hidden ? "opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.4s ease, visibility 0.4s step-end;" : '';
});
export var ListboxContainer = styled.div.withConfig({
  displayName: "Selectstyles__ListboxContainer",
  componentId: "sc-1u6d1mr-2"
})(["margin-top:", "px;background:", ";border:1px solid ", ";box-sizing:border-box;padding:", "px 0;border-radius:4px;overflow:auto;"], function (p) {
  return p.theme.spacing.unit(1);
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colorTokens.neutral.background_default;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colorTokens.neutral.border_default;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.unit(1);
});
export var Listbox = styled.ul.withConfig({
  displayName: "Selectstyles__Listbox",
  componentId: "sc-1u6d1mr-3"
})(["list-style-type:none;padding:0;margin:0;"]);