@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" as *;
@use "../../base/checkBox";
@use "../../base/checkBox/mixins" as *;

// adduse

$material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

.dx-checkbox {
  .dx-checkbox-container {
    overflow: visible;
  }

  &.dx-state-readonly,
  &.dx-state-disabled {
    border-color: color.change($checkbox-border-color, $alpha: 0.26);
  }

  &.dx-state-focused,
  &.dx-state-active {
    .dx-checkbox-icon::after {
      background-color: color.change($checkbox-border-color, $alpha: 0.1);
      transform: scale(1);
    }
  }

  &.dx-checkbox-checked,
  &.dx-checkbox-indeterminate {
    &.dx-state-focused,
    &.dx-state-active {
      .dx-checkbox-icon::after {
        background-color: color.change($checkbox-bg, $alpha: 0.1);
        transform: scale(1);
      }
    }

    &.dx-state-readonly,
    &.dx-state-disabled {
      .dx-checkbox-icon {
        background-color: color.change($checkbox-border-color, $alpha: 0.26);
      }
    }
  }
}

.dx-checkbox,
.dx-checkbox-indeterminate,
.dx-checkbox-checked {
  &.dx-state-readonly.dx-state-focused {
    .dx-checkbox-icon::after {
      background-color: color.change($checkbox-border-color, $alpha: 0.1);
      transform: scale(1);
    }
  }
}

.dx-checkbox-icon {
  width: $material-checkbox-arrow-icon-size;
  height: $material-checkbox-arrow-icon-size;
  font-size: $material-checkbox-icon-font-size;
  border-width: $material-checkbox-border-width;
  border-style: solid;
  border-color: $checkbox-border-color;
  border-radius: $material-checkbox-border-radius;

  &::after {
    content: "";
    width: $material-checkbox-ripple-size;
    height: $material-checkbox-ripple-size;
    top: 50%;
    left: 50%;
    margin-top: math.div(-$material-checkbox-ripple-size, 2);
    margin-left: math.div(-$material-checkbox-ripple-size, 2);
    border-radius: 50%;
    display: block;
    position: absolute;
    z-index: 1;
    transform: scale(0.5);
    transition: $material-checkbox-ripple-transition;
  }

  &::before {
    z-index: 1;
  }

  .dx-checkbox-checked & {
    color: $checkbox-checked-color;
    background-color: $checkbox-bg;
    border: none;

    @include dx-icon(check);

    font-size: $material-checkbox-icon-font-size;

    @include dx-checkbox-icon-centered($material-checkbox-arrow-icon-size, $material-checkbox-arrow-icon-size, $material-checkbox-arrow-font-size);
  }

  .dx-checkbox-indeterminate & {
    background-color: $checkbox-indeterminate-bg;
    border: none;
  }
}

@include dx-checkbox-icon-indeterminate(
  $checkbox-indeterminate-bg,
  $checkbox-checked-color,
  $material-checkbox-indeterminate-icon-height,
  $material-checkbox-indeterminate-icon-width,
  $material-checkbox-indeterminate-icon-border-radius,
);

.dx-invalid {
  .dx-checkbox-icon {
    border-width: $material-checkbox-border-width;
    border-style: solid;
    border-color: $checkbox-invalid-focused-border-color;
  }

  &.dx-state-focused {
    .dx-checkbox-icon::after {
      background-color: color.change($checkbox-invalid-focused-border-color, $alpha: 0.1);
      transform: scale(1);
    }
  }
}