@mantine/core/cjs/components/Autocomplete/Autocomplete.styles.js

React components library focused on usability, accessibility and developer experience

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Input = require('../Input/Input.js');
var createMemoStyles = require('../../theme/create-memo-styles.js');
var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');

var useStyles = createMemoStyles.createMemoStyles({
  wrapper: {
    position: "relative"
  },
  dropdown: ({ theme, size }) => ({
    position: "absolute",
    zIndex: 1,
    top: getSizeValue.getSizeValue({ size, sizes: Input.INPUT_SIZES }) + theme.spacing.sm / 2,
    left: 0,
    right: 0,
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.white,
    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`,
    paddingTop: getSizeValue.getSizeValue({ size, sizes: theme.spacing }) / 2,
    paddingBottom: getSizeValue.getSizeValue({ size, sizes: theme.spacing }) / 2
  }),
  item: ({ theme, size }) => ({
    textAlign: "left",
    width: "100%",
    padding: [
      getSizeValue.getSizeValue({ size, sizes: theme.spacing }) / 1.5,
      getSizeValue.getSizeValue({ size, sizes: theme.spacing })
    ],
    fontSize: getSizeValue.getSizeValue({ size, sizes: theme.fontSizes }),
    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
  }),
  hovered: ({ theme }) => ({
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
  })
});

exports.default = useStyles;
//# sourceMappingURL=Autocomplete.styles.js.map