.m-checkbox {
  display: inline-grid;
  grid-template-areas: 'checkbox slot';

  &.m-disabled {

    .m-checkbox-checkbox {
      cursor: var(--m-cursor-disabled);
    }
  }

  & input {
    display: none;
  }
}

.m-checkbox-checkbox {
  cursor: var(--m-cursor-pointer);
  grid-area: checkbox;
  display: inline-block;
  height: 24px;
  width: 24px;
  background: url(./assets/border.webp) no-repeat;
  background-size: 100% 100%;
}

.m-checkbox-slot {
  grid-area: slot;
  display: inline-block;
}

.m-checkbox-checkbox-inner {
  grid-area: checkbox;
  margin: 7px 0 0 6px;
  width: 12px;
  height: 10px;
  background: url(./assets/checkbox-checked.webp) no-repeat;
  background-size: 100% 100%;
}

.m-checkbox-checkbox-indeterminate {
  grid-area: checkbox;
  margin: 10px 0 0 6px;
  width: 12px;
  height: 10px;
  background: url(./assets/indeterminate.webp) no-repeat;
  background-size: contain;
}

html[dark] {

  .m-checkbox-checkbox-inner, .m-checkbox-checkbox {
    filter: invert(1);
  }

}