.Checkbox {
  --checkbox-color: #{$textColorPrimary}; // tick color [√]
  --checkbox-color-active: #{$contentColor};
  --checkbox-bgc-active: #{$kontenaBlue};

  flex-shrink: 0;

  &.theme {
    &-dark {
      // default
    }
    &-light {
      --checkbox-color-active: #{$kontenaBlue};
      --checkbox-bgc-active: none;
    }
  }

  &:hover {
    input:not(:checked):not(:disabled) {
      ~ .tick:after {
        opacity: 1;
      }
    }
  }

  input[type="checkbox"] {
    display: none;
    &:checked {
      ~ .box {
        color: var(--checkbox-color-active);
        background: var(--checkbox-bgc-active);
        border-color: var(--checkbox-bgc-active);
        &:after {
          opacity: 1;
        }
      }
    }
    &:disabled {
      ~ .box {
        color: var(--checkbox-color);
      }
      ~ * {
        opacity: .5;
        pointer-events: none;
      }
    }
    &:not(:disabled) ~ * {
      cursor: pointer;
    }
  }

  .label {
    margin-right: $margin;
  }

  > .box {
    $boxSize: round(1.7 * $unit);

    position: relative;
    width: $boxSize;
    height: $boxSize;
    border-radius: 2px;
    color: var(--checkbox-color);
    border: 2px solid currentColor;
    flex-shrink: 0;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60%;
      border: 2px solid currentColor;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      opacity: 0;
    }

    + * {
      margin-left: .5em;
    }
  }
}