@mantine/core/esm/Divider/Divider.styles.js

React components library focused on usability, accessibility and developer experience

import { createStyles, rem, getSize } from '@mantine/styles';

const sizes = {
  xs: rem(1),
  sm: rem(2),
  md: rem(3),
  lg: rem(4),
  xl: rem(5)
};
function getColor(theme, color) {
  const themeColor = theme.fn.variant({ variant: "outline", color }).border;
  return typeof color === "string" && (color in theme.colors || color.split(".")[0] in theme.colors) ? themeColor : color === void 0 ? theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4] : color;
}
var useStyles = createStyles((theme, { color }, { size, variant }) => ({
  root: {},
  withLabel: {
    borderTop: "0 !important"
  },
  left: {
    "&::before": {
      display: "none"
    }
  },
  right: {
    "&::after": {
      display: "none"
    }
  },
  label: {
    display: "flex",
    alignItems: "center",
    "&::before": {
      content: '""',
      flex: 1,
      height: rem(1),
      borderTop: `${getSize({ size, sizes })} ${variant} ${getColor(theme, color)}`,
      marginRight: theme.spacing.xs
    },
    "&::after": {
      content: '""',
      flex: 1,
      borderTop: `${getSize({ size, sizes })} ${variant} ${getColor(theme, color)}`,
      marginLeft: theme.spacing.xs
    }
  },
  labelDefaultStyles: {
    color: color === "dark" ? theme.colors.dark[1] : theme.fn.themeColor(color, theme.colorScheme === "dark" ? 5 : theme.fn.primaryShade(), false)
  },
  horizontal: {
    border: 0,
    borderTopWidth: rem(getSize({ size, sizes })),
    borderTopColor: getColor(theme, color),
    borderTopStyle: variant,
    margin: 0
  },
  vertical: {
    border: 0,
    alignSelf: "stretch",
    height: "auto",
    borderLeftWidth: rem(getSize({ size, sizes })),
    borderLeftColor: getColor(theme, color),
    borderLeftStyle: variant
  }
}));

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