import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { hexToRgb } from '../../lib/hexToRgb.js';
import { opacity } from '../shared/opacity.js';
import { colors } from '../shared/colors.js';

var _a = hexToRgb(colors.gray[900]), r = _a[0], g = _a[1], b = _a[2];
var parts = [
    'container',
    'carousel',
    'slide',
    'slideContainer',
    'buttonContainer',
    'button',
    'icon',
    'pagination',
    'paginationButton',
    'paginationIconContainer',
];
var fullScreen = {
    container: {
        backgroundColor: 'black',
        position: {
            base: 'fixed',
            md: 'static',
        },
    },
    carousel: {
        paddingX: {
            md: '5xl',
        },
    },
    pagination: {
        overflow: 'hidden',
        position: 'relative',
        paddingX: {
            base: 'md',
            md: '5xl',
        },
        height: '7.5rem',
    },
    paginationButton: {
        position: 'absolute',
        top: '0',
        width: 'lg',
        height: 'full',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        backgroundColor: 'transparent',
    },
    paginationIconContainer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: 'md',
        height: 'md',
        borderRadius: 'sm',
        backgroundColor: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",0.8)"),
    },
    buttonContainer: {
        backgroundColor: 'black',
        width: 'xl',
        visibility: {
            base: 'hidden',
            md: 'visible',
        },
    },
    slide: {
        height: 'full',
    },
    button: {
        opacity: opacity[100],
        backgroundColor: 'black',
    },
    icon: {
        boxSize: 'md',
    },
};
var numbersPaginationButton = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    verticalAlign: 'middle',
    textAlign: 'center',
    minWidth: 'md',
    height: 'md',
    borderRadius: 'sm',
    _hover: {
        backgroundColor: 'gray.100',
    },
};
var dotsPaginationIndicator = {
    backgroundColor: 'transparent',
    touchAction: 'pan-x',
    display: 'inline-flex',
    textDecoration: 'none',
    border: 0,
    padding: 0,
    width: '6px',
    height: '6px',
    marginX: '6px',
    _last: {
        width: '4px',
        height: '4px',
        _after: {
            width: 'full',
            height: '4px',
            content: '""',
        },
    },
    _after: {
        backgroundColor: 'gray.300',
        opacity: opacity[40],
        borderRadius: 'full',
        width: 'full',
        height: '6px',
        content: '""',
    },
};
var dotsPaginationIndicatorActive = __assign(__assign({}, dotsPaginationIndicator), { width: '8px', height: '8px', _last: {
        width: '8px',
        height: '8px',
        _after: {
            width: 'full',
            height: '8px',
            content: '""',
        },
    }, _after: {
        backgroundColor: 'white',
        borderRadius: 'full',
        opacity: opacity[100],
        width: 'full',
        height: '8px',
        content: '""',
    } });
var Carousel = {
    parts: parts,
    baseStyle: {
        container: {
            height: 'full',
            width: 'full',
        },
        carousel: {
            overflow: 'hidden',
            position: 'relative',
        },
        slide: {
            flexGrow: '0',
            flexShrink: '0',
            flexBasis: 'full',
        },
        slideContainer: {
            height: 'full',
            alignItems: 'center',
            display: 'flex',
        },
        buttonContainer: {
            position: 'absolute',
            top: '0',
            width: 'lg',
            height: 'full',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'white',
            visibility: 'hidden',
            _groupHover: { md: { visibility: 'visible' } },
            _focus: {
                outline: 'none',
            },
        },
        button: {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: 'md',
            height: 'md',
            borderRadius: 'sm',
            backgroundColor: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",0.4)"),
            color: 'white',
            _hover: { backgroundColor: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",0.8)") },
        },
        icon: {
            boxSize: 'sm',
        },
        numbersPaginationButton: numbersPaginationButton,
        numbersPaginationButtonActive: __assign(__assign({}, numbersPaginationButton), { color: 'white', backgroundColor: 'gray.900', _hover: {
                backgroundColor: 'gray.900',
            } }),
        dotsPaginationContainer: {
            position: 'absolute',
            width: 'full',
            bottom: 'lg',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        },
        dotsPaginationIndicator: dotsPaginationIndicator,
        dotsPaginationIndicatorActive: dotsPaginationIndicatorActive,
    },
    variants: {
        fullScreen: fullScreen,
    },
};

export { Carousel as default };
//# sourceMappingURL=carousel.js.map
