@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/pageControl/styles.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PAGE_CONTROL_STYLES = void 0;
const pageControlStates_1 = require("../../../../components/pageControl/types/pageControlStates");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const variants_1 = require("./variants");
const commonProps = {
    container: {
        display: 'flex',
        align_items: 'center',
        justify_content: 'center',
        width: 'auto',
    },
    dotsContainer: {
        display: 'flex',
        align_items: 'center',
        justify_content: 'center',
        gap: spacings_1.SPACINGS.spacing_150,
    },
};
const arrowCommonProps = {
    leftArrowControlContainer: {
        margin_right: spacings_1.SPACINGS.spacing_150,
    },
    rightArrowControlContainer: {
        margin_left: spacings_1.SPACINGS.spacing_150,
    },
};
const commonArrowStateProps = {
    icon: {
        width: sizes_1.SIZES.size_250,
        height: sizes_1.SIZES.size_250,
    },
};
exports.PAGE_CONTROL_STYLES = {
    [variants_1.PageControlVariant.BULLETS]: {
        isBullet: true,
        ...commonProps,
        dotsContainer: {
            ...commonProps.dotsContainer,
            flex: 'none',
        },
        [pageControlStates_1.PageControlState.CURRENT]: {
            pageDot: {
                position: 'relative',
                border_radius: borders_1.RADIUS.radius_50,
                background_color: colors_1.COLORS.SECONDARY.color_secondary_icon_100,
                height: spacings_1.SPACINGS.spacing_150,
                width: spacings_1.SPACINGS.spacing_300,
                flex: 'none',
            },
        },
        [pageControlStates_1.PageControlState.DEFAULT]: {
            pageDot: {
                position: 'relative',
                border_radius: borders_1.RADIUS.radius_100,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_icon_150,
                height: spacings_1.SPACINGS.spacing_150,
                width: spacings_1.SPACINGS.spacing_150,
                flex: 'none',
            },
        },
        [pageControlStates_1.PageControlState.LAST]: {
            pageDot: {
                position: 'relative',
                border_radius: borders_1.RADIUS.radius_100,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_icon_150,
                height: spacings_1.SPACINGS.spacing_100,
                width: spacings_1.SPACINGS.spacing_100,
                flex: 'none',
            },
        },
    },
    [variants_1.ArrowsControlVariant.DEFAULT]: {
        ...arrowCommonProps,
        [pageControlStates_1.ArrowsControlState.INACTIVE]: {
            icon: {
                ...commonArrowStateProps.icon,
                color: colors_1.COLORS.NEUTRAL.color_neutral_icon_100,
            },
        },
        [pageControlStates_1.ArrowsControlState.ACTIVE]: {
            icon: {
                ...commonArrowStateProps.icon,
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
            },
        },
    },
};
//# sourceMappingURL=styles.js.map