import '../form/components/styled-primitives/StyledFormElements.esm.js';
import { baseInputCss } from '../form/styles/index.esm.js';
import '../form/components/FormFieldBlock.esm.js';
import '../form/components/styled-primitives/StyledInput.esm.js';
import '../form/components/InputFieldBlock.esm.js';
import '../form/hooks/useConnectedField.esm.js';
import '../form/components/InputConnectedField.esm.js';
import '../form/components/styled-primitives/StyledTextArea.esm.js';
import '../form/components/TextAreaFieldBlock.esm.js';
import '../form/components/TextAreaConnectedField.esm.js';
import '../form/components/styled-primitives/StyledSelect.esm.js';
import '../form/components/SelectFieldBlock.esm.js';
import '../form/components/SelectConnectedField.esm.js';
import '../form/components/styled-primitives/StyledCheckbox.esm.js';
import '../form/components/CheckboxFieldBlock.esm.js';
import '../form/components/CheckboxConnectedField.esm.js';
import '../form/components/CheckboxGroupFieldBlock.esm.js';
import '../form/components/CheckboxGroupConnectedField.esm.js';
import '../form/components/styled-primitives/StyledRadio.esm.js';
import '../form/components/RadioButtonFieldBlock.esm.js';
import '../form/components/RadioButtonConnectedField.esm.js';

var comboboxCss = function comboboxCss() {
  return {
    position: "relative"
  };
};
var popoverCss = function popoverCss(theme) {
  return {
    position: "absolute",
    zIndex: 1000,
    width: "100%",
    background: theme.colors.primaryBackground,
    border: "1px solid ".concat(theme.colors.grey[10]),
    borderBottomLeftRadius: theme.radii[3],
    borderBottomRightRadius: theme.radii[3],
    boxShadow: "0 5px 10px 3px rgba(0, 0, 0, 0.1)",
    color: theme.colors.grey[90],
    fontSize: theme.fontSizes[1]
  };
};
var searchIconCss = function searchIconCss(theme) {
  return {
    position: "absolute",
    color: theme.colors.grey[60],
    fontSize: theme.fontSizes[3],
    top: "calc((100% - ".concat(theme.fontSizes[3], ") / 2)"),
    margin: "0 ".concat(theme.space[3]),
    zIndex: 2
  };
};
var inputCss = function inputCss(theme) {
  return [baseInputCss(theme), {
    // offset padding based on search icon spacing and size
    paddingLeft: "calc(".concat(theme.fontSizes[3], " + 2 * ").concat(theme.space[3], ")")
  }];
};
var inputWithSelectedValueCss = function inputWithSelectedValueCss(theme) {
  return {
    "&:focus + span": {
      fontSize: theme.fontSizes[0],
      transform: "translate3d(0, 0, 0)",
      backgroundColor: theme.colors.white,
      color: theme.colors.purple[70],
      opacity: 1
    }
  };
};
var selectedValueCss = function selectedValueCss(theme) {
  return {
    fontSize: theme.fontSizes[2],
    lineHeight: theme.lineHeights.solid,
    position: "absolute",
    zIndex: 2,
    color: theme.colors.grey[90],
    top: "calc(-".concat(theme.fontSizes[0], " / 2)"),
    left: theme.space[5],
    maxWidth: "calc(100% - ".concat(theme.space[5], " - ").concat(theme.space[8], ")"),
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    padding: "0 ".concat(theme.space[2]),
    opacity: 0,
    transform: "translate3d(0.8rem, 1.1rem, 0)",
    transition: "all ".concat(theme.transitions.curve["default"], " ").concat(theme.transitions.speed["default"]),
    pointerEvents: "none"
  };
};
var inputWithToggleButtonCss = function inputWithToggleButtonCss(theme) {
  return {
    // offset padding based on toggle button padding and size
    paddingRight: "calc(".concat(theme.fontSizes[5], " + 2 * ").concat(theme.space[3], ")")
  };
};
var toggleButtonCss = function toggleButtonCss(theme) {
  return {
    position: "absolute",
    top: 1,
    right: 1,
    zIndex: 1,
    background: theme.colors.white,
    border: "none",
    margin: 0,
    padding: "0 ".concat(theme.space[3]),
    display: "flex",
    alignItems: "center",
    color: theme.colors.grey[70],
    fontSize: theme.fontSizes[5],
    height: "calc(100% - 2px)",
    borderRadius: theme.radii[2]
  };
};
var listCss = function listCss() {
  return {
    listStyle: "none",
    margin: 0,
    padding: 0,
    userSelect: "none",
    maxHeight: "18rem",
    height: "auto",
    overflowY: "scroll"
  };
};
var optionCss = function optionCss(highlightMatches) {
  return function (theme) {
    return [{
      cursor: "pointer",
      padding: "".concat(theme.space[4], " ").concat(theme.space[5]),
      margin: 0,
      overflow: "hidden",
      position: "relative",
      textDecoration: "none",
      "&:hover": {
        background: theme.colors.purple[10]
      },
      "&[data-highlighted]": {
        background: theme.colors.purple[10],
        color: theme.colors.purple[50],
        outline: "none"
      }
    }, highlightMatches && {
      "[data-suggested-value]": {
        fontWeight: theme.fontWeights.body
      },
      "[data-user-value]": {
        color: theme.colors.purple[60],
        fontWeight: theme.fontWeights.bold,
        textDecoration: "underline"
      }
    }];
  };
};
var selectedOptionIconCss = function selectedOptionIconCss(theme) {
  return {
    transition: "0.5s",
    marginRight: theme.space[3],
    "[data-reach-combobox-option][data-highlighted] > &": {
      transform: "scale(1.2)"
    }
  };
};

export { comboboxCss, inputCss, inputWithSelectedValueCss, inputWithToggleButtonCss, listCss, optionCss, popoverCss, searchIconCss, selectedOptionIconCss, selectedValueCss, toggleButtonCss };
//# sourceMappingURL=Combobox.styles.esm.js.map
