/**
Standardization Checkbox and Radio
 */
%check-radio {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  min-width: size(14px);
  min-height: size(14px);
  width: size(14px);
  height: size(14px);
  position: relative;
  padding: 0;
  vertical-align: top;
  border-radius: size(get("border.radius"));
  border-color: var(--basic-700);
  // float: left;

  &::before {
    display: inline-block;
    content: "";
    background: currentColor;
    color: transparent;
    width: size(13px);
    height: size(13px);
    position: absolute;
    top: size(-1px);
    left: size(-1px);
  }

  &:checked, &:checked:hover {
    background-color: var(--primary) !important;
    border: size(1px) solid transparent;
  }

  + label {
    @extend %label-medium;

    white-space: normal;
    vertical-align: center;
    height: auto;
    padding-bottom: 0;
    color: var(#{get("font.color.name")}-#{get("font.color.value")});
  }

  + span {
    display: inline-block;
  }

  @each $type in get("type") {
    @each $color, $value in get("color.semantic") {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector}:checked {
        border: size(1px) solid var(--#{$color});
      }
    }
  }

  @each $size, $value in get("size") {
    &.#{$size}, &-#{$size} {
      $margin-size: size((map-get($value, height) - 14px) / 2);

      margin: $margin-size size(5px) $margin-size 0;

      + label {
        @extend %label-#{$size};
      }

      + span {
        margin-top: $margin-size;
      }
    }
  }

  &:active, &:focus {
    @include nb-outline();

    outline: none;
  }
}

%checkbox {
  &:checked, &:indeterminate {
    &::before {
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      color: var(--white);
    }
  }

  &:checked {
    &::before {
      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3C!-- Generated by IcoMoon.io --%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'%3E %3Ctitle%3Esmall-check%3C/title%3E %3Cpath d='M17.29 8.518c0.576-0.644 1.56-0.694 2.197-0.112 0.588 0.537 0.676 1.425 0.233 2.065l-0.122 0.154-7.031 7.857c-0.576 0.643-1.546 0.687-2.175 0.132l-0.139-0.139-3.858-4.358c-0.573-0.647-0.518-1.64 0.123-2.219 0.591-0.534 1.474-0.528 2.057-0.015l0.139 0.139 2.704 3.054 5.871-6.56z'/%3E %3C/svg%3E");
    }
  }

  &:indeterminate {
    background-color: var(--primary) !important;
    border: none;

    &::before {
      width: size(16px);
      height: size(16px);
      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgOCAyIiBmaWxsPSdjdXJyZW50Q29sb3InPgogICAgPHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iMiIgeD0iMyIgeT0iNiIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiByeD0iMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMgLTYpIi8+Cjwvc3ZnPgo=");
    }
  }
}
