@neu-ui/web-components/dist/src/components/checkbox/checkbox.styles.es.js

A Neumorphic web component library built with @microsoft/fast-element and Vite using javascript

import { css as o } from "@microsoft/fast-element";
import { styles as e } from "../../styles/styles.es.js";
import { neumorphicLightStyles as r } from "../../styles/neu-ui-light.es.js";
const n = o`
  ${e}
  ${r}

  :not(:defined) {
    visibility: hidden;
  }

  :host {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--gap);
    position: relative;
    width: auto;
    cursor: pointer;
  }

  :host .checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    position: relative;
  }

  :host .checkbox {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: var(--border);
    background: var(--background-light);
    background-blend-mode: var(--background-blend-mode);
    box-shadow: var(--drop-light-shadow); /* Default drop shadow */
    cursor: pointer;
  }

  :host .tick-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.0625rem;
    font-size: 14px;
    fill: var(--color-white);
    display: none;
    pointer-events: none;
  }

  :host .checkbox:checked + .tick-icon {
    display: block;
  }

  :host .checkbox:checked {
    background: var(--background-primary);
    background-blend-mode: soft-light, normal;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
      inset -2.5px -2.5px 5px rgba(250, 251, 255, 0.1),
      inset 2.5px 2.5px 5px #366cbd;
  }

  :host .checkbox:focus-visible {
    outline: none;
    box-shadow: var(--inner-light-shadow); /* Default inner shadow */
  }

  :host .checkbox:checked:focus-visible {
    background: var(--background-primary);
    background-blend-mode: soft-light, normal;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
      inset -2.5px -2.5px 5px rgba(250, 251, 255, 0.1),
      inset 2.5px 2.5px 5px #366cbd;
    outline: none;
  }

  :host .checkbox[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* Size Style */
  :host([size="s"]) {
    font-size: var(--font-size-small);
  }

  :host .checkbox[size="s"] {
    width: 1rem;
    height: 1rem;
    font-size: var(--font-size-small);
  }

  :host([size="l"]) {
    font-size: var(--font-size-large);
  }

  :host .checkbox[size="l"] {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--font-size-large);
  }
`;
export {
  n as styles
};