@lobehub/ui/es/LobeSwitch/style.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

import { createStaticStyles } from "antd-style";
import { cva } from "class-variance-authority";

//#region src/LobeSwitch/style.ts
const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
	icon: css$1`
    pointer-events: none;

    position: absolute;
    inset-block: 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: ${cssVar$1.colorTextLightSolid};
  `,
	iconLeft: css$1`
    inset-inline-start: 5px;
  `,
	iconLeftSmall: css$1`
    inset-inline-start: 4px;
  `,
	iconRight: css$1`
    inset-inline-end: 5px;
  `,
	iconRightSmall: css$1`
    inset-inline-end: 4px;
  `,
	iconThumb: css$1`
    position: relative;
    inset: unset;
    transform: none;
    color: ${cssVar$1.colorPrimary};
  `,
	loading: css$1`
    @keyframes lobe-switch-loading {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    animation: lobe-switch-loading 1s linear infinite;
  `,
	root: css$1`
    cursor: pointer;
    user-select: none;

    position: relative;

    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;
    padding: 2px;
    border: 0;
    border-radius: 100px;

    background: ${cssVar$1.colorTextQuaternary};
    outline: none;

    transition: background 150ms ${cssVar$1.motionEaseOut};

    &:focus-visible {
      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
      outline-offset: 1px;
    }

    &:hover:not([data-disabled]) {
      background: ${cssVar$1.colorTextTertiary};
    }

    &[data-checked] {
      justify-content: flex-end;
      background: ${cssVar$1.colorPrimary};

      &:hover:not([data-disabled]) {
        background: ${cssVar$1.colorPrimaryHover};
      }
    }

    &[data-disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
  `,
	rootDefault: css$1`
    width: 44px;
    min-width: 44px;
    height: 22px;
  `,
	rootSmall: css$1`
    width: 28px;
    min-width: 28px;
    height: 16px;
  `,
	thumb: css$1`
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: ${cssVar$1.colorBgContainer};
    box-shadow:
      0 2px 4px 0 rgba(0, 35, 11, 20%),
      0 1px 2px 0 rgba(0, 0, 0, 8%);

    [data-disabled] > & {
      box-shadow: none;
    }
  `,
	thumbDefault: css$1`
    width: 18px;
    height: 18px;
  `,
	thumbSmall: css$1`
    width: 12px;
    height: 12px;
  `
}));
const rootVariants = cva(styles.root, {
	defaultVariants: { size: "default" },
	variants: { size: {
		default: styles.rootDefault,
		small: styles.rootSmall
	} }
});
const thumbVariants = cva(styles.thumb, {
	defaultVariants: { size: "default" },
	variants: { size: {
		default: styles.thumbDefault,
		small: styles.thumbSmall
	} }
});

//#endregion
export { rootVariants, styles, thumbVariants };
//# sourceMappingURL=style.mjs.map