@hitachivantara/uikit-react-core/dist/cjs/Carousel/Carousel.styles.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel", {
  /** Styles applied to the component root class. */
  root: {
    display: "flex",
    alignItems: "stretch",
    flexDirection: "column",
    backgroundColor: uikitStyles.theme.colors.bgContainer,
    margin: 0,
    paddingTop: uikitStyles.theme.spacing(2),
    paddingBottom: uikitStyles.theme.spacing(2)
  },
  xs: {
    "&:not(._)": {
      padding: 0
    },
    // put dots on top of Slide
    "& $dots": {
      position: "relative",
      top: "-40px"
    },
    "& $actions": {
      top: 0
    },
    "& $controls": {
      display: "flex"
    }
  },
  fullscreen: {
    width: "100vw",
    height: "100vh",
    position: "fixed",
    inset: 0,
    zIndex: uikitStyles.theme.zIndices.modal,
    "&:not(._)": {
      padding: uikitStyles.theme.spacing("xs", "xl")
    }
  },
  title: {
    display: "flex",
    justifyContent: "flex-start",
    marginBottom: uikitStyles.theme.space.xs
  },
  actions: {
    display: "flex",
    justifyContent: "flex-end",
    right: 0,
    position: "relative"
  },
  closeButton: {},
  mainContainer: {},
  controls: {
    display: "flex",
    alignItems: "center",
    position: "relative",
    height: 32,
    justifyContent: "center",
    backgroundColor: uikitStyles.theme.colors.bgPage,
    border: `1px solid ${uikitStyles.theme.colors.border}`,
    gap: uikitStyles.theme.space.xs,
    "&:has($dots)": {
      justifyContent: "center"
    }
  },
  pageCounter: {},
  main: {
    padding: 0,
    display: "flex",
    flexDirection: "column",
    position: "relative",
    "&:hover $slideControls": {
      opacity: 1
    }
  },
  mainXs: {},
  mainFullscreen: {
    maxHeight: "80vh"
  },
  counterContainer: {
    position: "absolute",
    top: uikitStyles.theme.space.xs,
    right: uikitStyles.theme.space.md,
    zIndex: 1,
    display: "none"
  },
  counter: {
    color: uikitStyles.theme.colors.textLight,
    backgroundColor: uikitStyles.theme.colors.textDark,
    padding: uikitStyles.theme.spacing(0, "sm")
  },
  slideControls: {
    position: "absolute",
    left: 0,
    right: 0,
    top: `calc(50% - (32px / 2))`,
    padding: uikitStyles.theme.spacing(0, "sm"),
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    opacity: 0,
    "& button": {
      zIndex: 1
    },
    "&:focus-within": {
      opacity: 1
    }
  },
  slidesViewport: {
    overflow: "hidden"
  },
  slidesContainer: {
    display: "flex",
    flexDirection: "row",
    height: "100%"
  },
  dots: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: uikitStyles.theme.space.xs,
    height: uikitStyles.theme.space.md
  },
  dotsXs: {},
  dot: {
    width: 5,
    height: 5,
    margin: uikitStyles.theme.space.xs,
    borderRadius: uikitStyles.theme.radii.full,
    backgroundColor: uikitStyles.theme.colors.border
  },
  dotSelected: {
    width: 10,
    height: 10,
    backgroundColor: uikitStyles.theme.colors.textSubtle
  },
  panel: {
    display: "flex",
    width: "100%",
    overflowX: "auto",
    // "hidden",
    overflowY: "hidden",
    padding: uikitStyles.theme.spacing("xs", "2px", "2px")
  },
  thumbnail: {
    height: "unset",
    padding: 0,
    "& img": {
      width: "100%",
      height: "100%",
      textAlign: "center",
      aspectRatio: "16/9",
      opacity: "50%",
      borderRadius: uikitStyles.theme.radii.round
    }
  },
  thumbnailSelected: {
    "& img": {
      border: "none",
      opacity: "100%"
    }
  }
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;