@hitachivantara/uikit-react-core/dist/cjs/BaseDropdown/BaseDropdown.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 focusUtils = require("../utils/focusUtils.cjs");
const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropdown", {
  root: { width: "100%", position: "relative" },
  rootDisabled: {
    cursor: "not-allowed",
    "&:focus": {
      outline: "none"
    }
  },
  anchor: { display: "inline-block", width: "100%" },
  container: { zIndex: uikitStyles.theme.zIndices.popover, width: "auto" },
  header: {
    cursor: "pointer",
    userSelect: "none",
    position: "relative",
    backgroundColor: uikitStyles.theme.colors.bgContainer,
    boxSizing: "border-box",
    border: `1px solid ${uikitStyles.theme.colors.text}`,
    borderRadius: uikitStyles.theme.radii.round,
    ":hover,:focus-visible": {
      borderColor: uikitStyles.theme.colors.primary
    },
    ":focus": {
      outline: "none"
    },
    ":focus-visible": {
      ...focusUtils.outlineStyles
    }
  },
  headerOpen: {
    "&,:hover": {
      borderColor: uikitStyles.theme.colors.text
    }
  },
  /** @deprecated use `[data-popper-placement*='top']` selector instead */
  headerOpenUp: {},
  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
  headerOpenDown: {},
  headerDisabled: {
    cursor: "not-allowed",
    pointerEvents: "none",
    color: uikitStyles.theme.colors.textDisabled,
    backgroundColor: uikitStyles.theme.colors.bgPage,
    "&,:hover": {
      borderColor: "currentcolor"
    }
  },
  headerReadOnly: {
    cursor: "not-allowed",
    pointerEvents: "none",
    color: uikitStyles.theme.colors.textSubtle,
    borderColor: "currentcolor",
    backgroundColor: uikitStyles.theme.colors.bgPage,
    userSelect: "text",
    ":focus-visible": {
      outline: "none",
      borderColor: "currentcolor"
    }
  },
  arrowContainer: {
    position: "absolute",
    pointerEvents: "none",
    top: -1,
    right: -1
  },
  arrow: {},
  selection: {
    display: "flex",
    alignItems: "center",
    height: "30px",
    boxSizing: "border-box",
    paddingLeft: uikitStyles.theme.space.xs,
    paddingRight: 32
  },
  selectionDisabled: {},
  placeholder: {
    display: "block",
    color: uikitStyles.theme.colors.textSubtle
  },
  panel: {
    // TODO: remove padding override in v6 (most elements need it)
    padding: 0,
    border: `1px solid ${uikitStyles.theme.colors.text}`
  },
  /** @deprecated leverage `[data-popper-placement]` instead */
  panelOpenedUp: {},
  /** @deprecated leverage `[data-popper-placement]` instead */
  panelOpenedDown: {},
  inputExtensionOpen: {
    height: "0px",
    backgroundColor: uikitStyles.theme.colors.bgContainer,
    borderTop: "none",
    borderBottom: "none",
    borderRight: `1px solid ${uikitStyles.theme.colors.text}`,
    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
  },
  inputExtensionLeftPosition: { marginLeft: "auto" },
  inputExtensionOpenShadow: {
    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
  },
  inputExtensionFloatRight: { float: "right" },
  inputExtensionFloatLeft: { float: "left" }
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;