@mantine/core/cjs/components/Slider/Marks/Marks.styles.js

React components library focused on usability, accessibility and developer experience

'use strict';

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

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

var useStyles = createMemoStyles.createMemoStyles({
  markWrapper: {
    position: "absolute",
    top: 0
  },
  mark: ({ theme, size }) => {
    const MARK_SIZE = getSizeValue.getSizeValue({ sizes: SliderRoot_styles.sizes, size });
    return {
      boxSizing: "border-box",
      border: `${getSizeValue.getSizeValue({ size, sizes: SliderRoot_styles.sizes }) >= 8 ? "2px" : "1px"} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
      zIndex: 1,
      height: MARK_SIZE,
      width: MARK_SIZE,
      borderRadius: 1e3,
      transform: `translateX(-${MARK_SIZE / 2}px)`,
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.white
    };
  },
  markFilled: ({ theme, color }) => ({
    borderColor: getThemeColor.getThemeColor({ theme, color, shade: 6 })
  }),
  markLabel: ({ theme }) => ({
    transform: "translate(-50%, 0)",
    fontSize: theme.fontSizes.sm,
    color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
    marginTop: theme.spacing.xs / 2
  })
});

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