@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../../base/checkBox";

// adduse


$generic-checkbox-disable-opacity: 0.4;
$icon-position: relative;

.dx-checkbox {
  line-height: 0;

  &.dx-state-readonly {
    .dx-checkbox-icon {
      border-color: $checkbox-readonly-border-color;
      background-color: $checkbox-readonly-bg;
    }
  }

  &.dx-state-hover {
    .dx-checkbox-icon {
      border: 1px solid $checkbox-hover-border-color;
    }
  }

  &.dx-state-focused {
    .dx-checkbox-icon {
      border: 1px solid $checkbox-focused-borderd-color;
    }
  }

  &.dx-state-active {
    .dx-checkbox-icon {
      background-color: $checkbox-active-icon-bg;
    }
  }
}

.dx-checkbox-icon {
  width: $generic-checkbox-size;
  height: $generic-checkbox-size;
  border-radius: $checkbox-icon-border-radius;
  border: 1px solid $checkbox-border-color;
  background-color: $checkbox-bg;

  .dx-checkbox-checked & {
    @include dx-icon(check);

    color: $checkbox-checked-color;

    @include dx-icon-font-centered-sizing($generic-checkbox-arrow-icon-size, $icon-position);

    font-size: $generic-checkbox-arrow-font-size;
  }

  .dx-checkbox-indeterminate & {
    color: $checkbox-indeterminate-bg;

    @include dx-icon-font-centered-sizing($generic-checkbox-indeterminate-icon-size, $icon-position);

    font-size: $generic-checkbox-indeterminate-font-size;

    &::before {
      content: '';
      background-color: $checkbox-checked-color;
      border-radius: 2px;
      height: $generic-checkbox-indeterminate-icon-size;
    }
  }
}

.dx-state-disabled {
  &.dx-checkbox,
  .dx-checkbox {
    opacity: 1;

    .dx-checkbox-icon {
      opacity: $generic-checkbox-disable-opacity;
    }
  }

  .dx-checkbox-text {
    opacity: $generic-checkbox-disable-opacity;
  }
}

.dx-invalid {
  .dx-checkbox-container {
    .dx-checkbox-icon {
      border: 1px solid $checkbox-invalid-faded-border-color;
    }
  }

  &.dx-state-focused {
    .dx-checkbox-container {
      .dx-checkbox-icon {
        border-color: $checkbox-invalid-focused-border-color;
      }
    }
  }
}