@mantine/core/esm/components/Select/Select.styles.js

React components library focused on usability, accessibility and developer experience

import { INPUT_SIZES } from '../Input/Input.js';
import { createMemoStyles } from '../../theme/create-memo-styles.js';
import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';

var useStyles = createMemoStyles({
  wrapper: {
    position: "relative"
  },
  notSearchable: {
    cursor: "pointer"
  },
  dropdown: ({ theme, size }) => ({
    position: "absolute",
    zIndex: 1,
    top: getSizeValue({ size, sizes: 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({ size, sizes: theme.spacing }) / 2,
    paddingBottom: getSizeValue({ size, sizes: theme.spacing }) / 2,
    overflowY: "auto"
  }),
  item: ({ theme, size }) => ({
    textAlign: "left",
    width: "100%",
    padding: [
      getSizeValue({ size, sizes: theme.spacing }) / 1.5,
      getSizeValue({ size, sizes: theme.spacing })
    ],
    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
  }),
  selected: ({ theme }) => ({
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors[theme.primaryColor][0],
    color: theme.colorScheme === "dark" ? theme.white : theme.colors[theme.primaryColor][9]
  }),
  hovered: ({ theme }) => ({
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
  }),
  nothingFound: ({ theme, size }) => ({
    color: theme.colors.gray[6],
    paddingTop: getSizeValue({ size, sizes: theme.spacing }) / 2,
    paddingBottom: getSizeValue({ size, sizes: theme.spacing }) / 2,
    textAlign: "center"
  })
});

export default useStyles;
//# sourceMappingURL=Select.styles.js.map