@layer components {
  [data-ui="checkbox"] {
    --checkbox-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--checkbox-size);
    aspect-ratio: 1;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--spacing-6);
    cursor: pointer;
    transition: all var(--transition-expressive-fast-effects);

    &:not([aria-disabled]) {
      &:hover {
        background-color: var(--color-primary-container);
        border-color: var(--color-primary);
      }

      &:active {
        scale: 0.95;
      }

      &:focus-visible {
        outline: var(--spacing-4) solid var(--color-primary-container);
      }
    }

    [data-ui="checkbox-indicator"] {
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(var(--checkbox-size) / 5.5);
      height: calc(var(--checkbox-size) / 2);
      border-right: 1.5px solid transparent;
      border-block-end: 1.5px solid transparent;
      transform: translate(-50%, -60%) rotate(45deg);
    }

    &[data-checked],
    &[data-indeterminate] {
      &,
      [data-ui="checkbox-indicator"] {
        border-color: var(--color-primary);
      }
    }

    &[data-indeterminate] {
      [data-ui="checkbox-indicator"] {
        height: 0;
        transform: translate(-50%, -50%) rotate(0deg);
        border-inline-end: none;
        width: 70%;
      }
    }

    &[aria-disabled] {
      background-color: var(--color-surface-variant);
      cursor: default;
      border-color: var(--color-outline-variant);
      color: var(--color-on-surface-variant);

      [data-ui="checkbox-indicator"] {
        border-color: var(--color-outline);
      }
    }
  }
}
On this page
