:root {
  --checkbox-size: 22px;
  --checkbox-border: 1px solid #c7c7cd;
  --checkbox-checked-background-color: var(--highlight-color); /* background color active */
  --background-color--before--checkbox: var(--checkbox-checked-background-color);
  --checkmark-border: 2px solid #fff;
  --material-checkbox-size: 18px;
  --material-checkbox-focus-ring-size: 40px;
  --material-checkbox-focus-ring-shadow-size: calc((var(--material-checkbox-focus-ring-size) - var(--material-checkbox-size)) / 2);

  --checkbox: {
    @apply(--reset-box-model);
    position: relative;
    display: inline-block;
    vertical-align: top;
    @apply(--reset-cursor);
    @apply(--reset-font);
    @apply(--hide-input-parent);
  }

  --checkbox__label: {
    position: relative;
    display: inline-block;
    vertical-align: top;
    @apply(--reset-cursor);
    @apply(--reset-font);
  }

  --checkbox--disabled: {
    @apply(--disabled);
  }

  --checkbox--before: {
    content: '';
    position: absolute;
  }

  --checkbox--after: {
    @apply(--checkbox--before);
  }
}

/*~
  name: Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox">
      <input type="checkbox" class="checkbox__input">
      <div class="checkbox__checkmark"></div>
      OFF
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" checked="checked">
      <div class="checkbox__checkmark"></div>
      ON
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" disabled>
      <div class="checkbox__checkmark"></div>
      Disabled
    </label>
*/

.checkbox {
  @apply(--checkbox__label);
  line-height: var(--checkbox-size);
}

.checkbox__checkmark {
  @apply(--checkbox);
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  pointer-events: none;
}

.checkbox__input,
.checkbox__input:checked {
  @apply(--hide-input);
}

.checkbox__checkmark:before {
  @apply(--checkbox--before);
  @apply(--reset-box-model);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background: transparent;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-size);
  left: 0;
}

/* checkmark's line */
.checkbox__checkmark:after {
  @apply(--checkbox--after);
  top: 7px;
  left: 5px;
  width: 11px;
  height: 5px;
  background: transparent;
  border: var(--checkmark-border);
  border-width: 1px;
  border-top: none;
  border-right: none;
  border-radius: 0;
  transform: rotate(-45deg);
  opacity: 0;
}

:checked + .checkbox__checkmark:before {
  background: var(--background-color--before--checkbox);
  border: none;
}

:checked + .checkbox__checkmark:after {
  opacity: 1;
}

:disabled + .checkbox__checkmark {
  @apply(--checkbox--disabled);
}

:disabled:active + .checkbox__checkmark:before { /* FIXME */
  background: transparent;
}

/*~
  name: No border Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      OFF
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      ON
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      Disabled
    </label>
 */

.checkbox--noborder {
  @apply(--checkbox__label);
  line-height: var(--checkbox-size);
  @apply(--hide-input-parent);
}

.checkbox--noborder__input {
  @apply(--hide-input);
}

.checkbox--noborder__checkmark {
  position: relative;
  display: inline-block;
  vertical-align: top;
  @apply(--reset-cursor);
  @apply(--reset-box-model);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background: transparent;
  border: none;
}

.checkbox--noborder__checkmark:before {
  content: '';
  position: absolute;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background: transparent;
  border: none;
  border-radius: var(--checkbox-size);
  left: 0;
}

/* checkmark's line */
.checkbox--noborder__checkmark:after {
  @apply(--checkmark);
}

:checked + .checkbox--noborder__checkmark:before {
  background: transparent;
  border: none;
}

:checked + .checkbox--noborder__checkmark:after {
  opacity: 1;
}

:focus + .checkbox--noborder__checkmark:before {
  border: none;
}

:disabled + .checkbox--noborder__checkmark {
  @apply(--disabled);
}

:disabled:active + .checkbox--noborder__checkmark:before {
  background: transparent;
  border: none;
}

/*~
  name: Material Checkbox
  category: Checkbox
  elements: ons-input
  markup: |
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      OFF
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      Disabled
    </label>
*/

.checkbox--material {
  line-height: var(--material-checkbox-size);
  @apply(--material-font);
  overflow: visible;
}

.checkbox--material__checkmark {
  width: var(--material-checkbox-size);
  height: var(--material-checkbox-size);
}

.checkbox--material__checkmark:before {
  border-radius: 2px;
  height: var(--material-checkbox-size);
  width: var(--material-checkbox-size);
  border: 2px solid var(--material-checkbox-inactive-color);
  transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
  background-color: transparent;
}

:checked + .checkbox--material__checkmark:before {
  border: 2px solid var(--material-checkbox-active-color);
  background-color: var(--material-checkbox-active-color);
  transition: background-color 0.1s linear, border-color 0.1s linear;
}

.checkbox--material__checkmark:after {
  border-color: var(--material-checkbox-checkmark-color);
  transition: transform 0.2s ease 0;
  width: 10px;
  height: 5px;
  top: 4px;
  left: 3px;
  transform: scale(0) rotate(-45deg);
  border-width: 2px;
}

:checked + .checkbox--material__checkmark:after {
  transition: transform 0.2s ease 0.2s;
  width: 10px;
  height: 5px;
  top: 4px;
  left: 3px;
  transform: scale(1) rotate(-45deg);
  border-width: 2px;
}

/* active ring effect */
.checkbox--material__input:before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--material-checkbox-size);
  height: var(--material-checkbox-size);
  box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-inactive-color);
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--material-checkbox-inactive-color);
  pointer-events: none;
  display: block;
  transform: scale3d(0.2, 0.2, 0.2);
  transition: opacity 0.25s ease-out, transform 0.1s ease-out;
}

.checkbox--material__input:checked:before {
  box-shadow: 0 0 0 var(--material-checkbox-focus-ring-shadow-size) var(--material-checkbox-active-color);
  background-color: var(--material-checkbox-active-color);
}

.checkbox--material__input:active:before {
  opacity: .15;
  transform: scale3d(1, 1, 1);
}

:disabled + .checkbox--material__checkmark {
  opacity: 1;
}

:disabled + .checkbox--material__checkmark:before {
  border-color: #afafaf;
}

:disabled:checked + .checkbox--material__checkmark:before {
  background-color: #afafaf;
}

:disabled:checked + .checkbox--material__checkmark:after {
  border-color: #ffffff;
}