calcite-checkbox.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-checkbox-size: the width and height of the checkbox
 */

:host([scale="s"]) {
  --calcite-checkbox-size: theme("spacing.3");
}
:host([scale="m"]) {
  --calcite-checkbox-size: theme("fontSize.n1");
}
:host([scale="l"]) {
  --calcite-checkbox-size: theme("spacing.4");
}
:host {
  @apply inline-flex
    cursor-pointer
    relative
    select-none;
  -webkit-tap-highlight-color: transparent;
  .check-svg {
    @apply overflow-hidden
      block
      bg-foreground-1
      pointer-events-none
      box-border
      transition-all
      duration-150
      ease-in-out
      stroke-current
      stroke-1
      fill-current;
    width: var(--calcite-checkbox-size);
    height: var(--calcite-checkbox-size);
    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
    color: theme("backgroundColor.background");
  }
}
:host([checked]),
:host([indeterminate]) {
  .check-svg {
    @apply bg-brand;
    box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
  }
}
:host([hovered]) .toggle,
:host .toggle:hover {
  .check-svg {
    box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
  }
}

:host {
  .toggle:focus .check-svg,
  .toggle:active .check-svg {
    @include focus-box-shadow(inset 0 0 0 1px var(--calcite-ui-brand));
  }
}
:host([disabled]) {
  @apply cursor-default opacity-disabled pointer-events-none;
}

@include hidden-form-input();