label.m3.m3-checkbox-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
  position: absolute;
  width: 2.5rem;
  aspect-ratio: inherit;
  border-radius: 50%;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

span.m3.m3-checkbox-ripple-layer {
  z-index: 20;
  contain: content;
  border-radius: 50%;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
}

input[type="checkbox"].m3.m3-checkbox {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  z-index: 10;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  outline-offset: -0.14rem;
  border-radius: 0.14rem;
  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="checkbox"].m3.m3-checkbox:is(
    :user-invalid:is(:checked, :indeterminate),
    .m3.m3-error:is(:checked, :indeterminate)
  ) {
  outline-color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
  outline-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(
    :checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
        .m3.m3-error,
        :disabled
      ),
    :indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
        .m3.m3-error,
        :disabled
      )
  ) {
  outline-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
}
input[type="checkbox"].m3.m3-checkbox:disabled:is(
    :hover,
    input[type="checkbox"].m3.m3-checkbox:disabled
  ) {
  opacity: 38%;
  border: 2px solid var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
    :hover,
    input[type="checkbox"].m3.m3-checkbox:disabled
  ) {
  opacity: 38%;
  background-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox::after {
  line-height: 1.125rem;
  font-family: Material-Symbols-Outlined-Regular, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--md-sys-color-on-primary);
}
input[type="checkbox"].m3.m3-checkbox:checked::after {
  content: "done";
}
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
  content: "check_indeterminate_small";
}
input[type="checkbox"].m3.m3-checkbox:hover {
  outline-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:hover, :indeterminate:hover),
    .m3.m3-error:hover
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:active, :indeterminate:active),
    .m3.m3-error:active
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:active, :indeterminate:active),
    .m3.m3-error:active
  )
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 20%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:hover,
    :indeterminate:hover
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 20%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
  + span.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    transparent
  );
}

/*# sourceMappingURL=checkbox.css.map */
