import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { component, mergeConfig } from "../../../engines";
import { iconButtonConfig, iconButtonTokens } from "../../IconButton";
import { classes, tokens } from "./Carousel.tokens";
const mergedConfig = mergeConfig(iconButtonConfig);
export const IconButtonComponent = component(mergedConfig);
export const base = /*#__PURE__*/ css("position:relative;", "base");
export const CarouselWrapper = /*#__PURE__*/ styled("div", {
    target: "eyydgzr0",
    label: "CarouselWrapper"
})("position:relative;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:pan-y;cursor:", ({ isSwipeEnabled })=>isSwipeEnabled ? 'grab' : 'default', ";&:active{cursor:", ({ isSwipeEnabled })=>isSwipeEnabled ? 'grabbing' : 'default', ";}");
export const CarouselTrack = /*#__PURE__*/ styled("div", {
    target: "eyydgzr1",
    label: "CarouselTrack"
})("display:inline-flex;flex-direction:row;gap:", ({ gap })=>gap, ";vertical-align:top;& > div{scroll-snap-align:none;}");
export const CarouselVirtualItem = /*#__PURE__*/ styled("div", {
    target: "eyydgzr2",
    label: "CarouselVirtualItem"
})("display:flex;flex:0 0 auto;");
export const IconButton = /*#__PURE__*/ styled(IconButtonComponent, {
    target: "eyydgzr3",
    label: "IconButton"
})("position:absolute;top:50%;transform:translateY(-50%);left:0.75rem;z-index:10;", iconButtonTokens.iconButtonColor, ":var(", tokens.controlIconButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", tokens.controlIconButtonBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", tokens.controlIconButtonColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", tokens.controlIconButtonBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", tokens.controlIconButtonColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", tokens.controlIconButtonBackgroundColorActive, ");", iconButtonTokens.iconButtonHeight, ":2.5rem;", iconButtonTokens.iconButtonWidth, ":2.5rem;", iconButtonTokens.iconButtonPadding, ":1rem;", iconButtonTokens.iconButtonRadius, ":var(", tokens.controlIconButtonRadius, ");&.", classes.rightControlButton, "{left:auto;right:0.75rem;}");
export const ControlsWrapper = /*#__PURE__*/ styled("div", {
    target: "eyydgzr4",
    label: "ControlsWrapper"
})("position:relative;");
