@mixin checkbox-control-custom($block) { ... }@mixin checkbox-control-custom($block) { 
  @include common.choice-control-custom($block);

  border-radius: settings.$radius;

  &::after {
    border-radius: settings.$radius + settings.$border-width * 2;
  }

  #{$block}__native:checked ~ & {
    #{$block}__fill {
      opacity: 1;

      &::after {
        transform: translateX(100%);
        transition-delay: 0.2s;
      }
    }
  }

  #{$block}__native:indeterminate ~ & {
    border-color: settings.$border-color-checked;

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: settings.$border-color-checked;
      width: 60%;
      height: 10%;
      content: '';
      transform: translate(-50%, -50%);
    }
  }
 }

@mixin checkbox-control-fill() { ... }@mixin checkbox-control-fill() { 
  overflow: hidden;
  background: settings.$brand no-repeat center settings.$checkmark-icon;
  background-size: 75% 55%;
  border-radius: settings.$radius - settings.$border-width;
  opacity: 0;
  transition: opacity 0.2s;

  &,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &::after {
    background: settings.$brand;
    transition: transform 0.2s;
    content: '';
  }
 }

$radius: kib-core-dimensions-get('tiny') !default;

$checkmark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 11'%3E%3Cpath fill='%23fff' d='M4.5 8.5L1.58 5.58a.82.82 0 00-1.16 0 .82.82 0 000 1.17l3.49 3.5c.32.32.85.32 1.17 0l8.84-8.83a.82.82 0 000-1.17.82.82 0 00-1.17 0L4.5 8.5z'/%3E%3C/svg%3E") !default;