@hitachivantara/uikit-react-core/dist/cjs/BaseSwitch/BaseSwitch.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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitch", {
  root: {
    padding: 0,
    cursor: "pointer",
    width: "40px",
    height: "32px",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: uikitStyles.theme.radii.round,
    "&:hover": {
      backgroundColor: uikitStyles.theme.colors.bgHover
    },
    // Higher CSS specificity here
    "& $switchBase": {
      "&:hover": {
        backgroundColor: "transparent"
      },
      "&$checked": {
        transform: "translateX(16px)",
        "& + $track": {
          opacity: 1,
          backgroundColor: uikitStyles.theme.colors.primary,
          borderColor: "transparent"
        },
        "& $thumb:not:has($disabled)": {
          borderColor: "transparent"
        },
        "&:hover": {
          backgroundColor: "transparent"
        }
      }
    },
    // Higher CSS specificity here
    "&$disabled": {
      "& $switchBase": {
        "& + $track": {
          opacity: 1,
          backgroundColor: uikitStyles.theme.colors.bgDisabled,
          border: `solid 1px ${uikitStyles.theme.colors.borderDisabled}`
        }
      }
    }
  },
  switch: {
    width: "40px",
    height: "32px",
    padding: 0,
    "&$readOnly $switchBase": {
      cursor: "default"
    }
  },
  switchBase: {
    width: "40px",
    height: "32px",
    padding: 0
  },
  track: {
    opacity: 1,
    borderRadius: uikitStyles.theme.radii.full,
    height: "16px",
    width: "32px",
    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
    backgroundColor: uikitStyles.theme.colors.bgContainer
  },
  thumb: {
    position: "relative",
    left: "-9px",
    width: "10px",
    height: "10px",
    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
    backgroundColor: uikitStyles.theme.colors.bgContainer,
    marginLeft: "2px",
    marginTop: 0,
    boxShadow: "none"
  },
  checked: {},
  disabled: {
    cursor: "not-allowed",
    "& $switch": {
      cursor: "not-allowed"
    },
    "& $thumb": {
      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
      border: `solid 1px ${uikitStyles.theme.colors.textDisabled}`
    }
  },
  readOnly: {},
  focusVisible: {
    borderRadius: uikitStyles.theme.radii.round,
    ...focusUtils.outlineStyles
  }
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;