@use './mixins.scss' as mixins;
@use './tokens.scss' as tokens;

$_check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.178 7.363.808 4.697 0 5.598l3.178 3.573L10 1.501 9.198.6l-6.02 6.763Z' fill='%23fff'/%3E%3C/svg%3E");

@mixin choice-checkbox-base(
  $border-color: tokens.$bm-comp-input-color-border,
  $bg-color: tokens.$bm-comp-input-color-bg,
  $border-width: tokens.$bm-comp-input-border-width-field-default
) {
  box-sizing: border-box;
  width: tokens.$bm-comp-input-size-choice-checkbox;
  height: tokens.$bm-comp-input-size-choice-checkbox;
  border-style: solid;
  border-width: $border-width;
  border-color: $border-color;
  border-radius: tokens.$bm-comp-input-radius-choice-checkbox;
  background-color: $bg-color;
}

@mixin choice-checkbox-checked(
  $border-color: tokens.$bm-comp-input-color-choice-checkbox-selected-border,
  $bg-color: tokens.$bm-comp-input-color-choice-checkbox-selected-bg,
  $icon-color: tokens.$bm-comp-input-color-choice-checkbox-selected-icon
) {
  border-color: $border-color;
  background-color: $bg-color;

  &::after {
    @include mixins.svg-icon($_check-mask);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(#{tokens.$bm-comp-input-size-choice-checkbox} * 5 / 8);
    height: calc(#{tokens.$bm-comp-input-size-choice-checkbox} * 5 / 8);
    background-color: $icon-color;
  }
}

@mixin choice-radio-base(
  $border-color: tokens.$bm-comp-input-color-border,
  $bg-color: tokens.$bm-comp-input-color-bg,
  $border-width: tokens.$bm-comp-input-border-width-field-default
) {
  box-sizing: border-box;
  width: tokens.$bm-comp-input-size-choice-radio;
  height: tokens.$bm-comp-input-size-choice-radio;
  border-style: solid;
  border-width: $border-width;
  border-color: $border-color;
  border-radius: tokens.$bm-comp-input-radius-choice-radio;
  background-color: $bg-color;

  &::after {
    content: '';
    position: absolute;
    width: tokens.$bm-comp-input-size-choice-radio-inside;
    height: tokens.$bm-comp-input-size-choice-radio-inside;
    border-radius: tokens.$bm-comp-input-radius-choice-radio;
    top: calc(50% - #{tokens.$bm-comp-input-size-choice-radio-inside} / 2);
    left: calc(50% - #{tokens.$bm-comp-input-size-choice-radio-inside} / 2);
  }
}

@mixin choice-radio-checked(
  $border-color: tokens.$bm-comp-input-color-choice-radio-selected-border,
  $bg-color: tokens.$bm-comp-input-color-choice-radio-selected-bg,
  $inner-color: tokens.$bm-comp-input-color-choice-radio-selected-inner-circle
) {
  border-color: $border-color;
  background-color: $bg-color;

  &::after {
    background-color: $inner-color;
  }
}