$ag-grid-checkbox-bg:              $white                              !default;
$ag-grid-checkbox-bg-active-hover: $custom-control-indicator-active-bg !default;
$ag-grid-checkbox-bg-checked:      $custom-control-indicator-checked-bg !default;

$ag-grid-checkbox-border:          $border-color                       !default;
$ag-grid-checkbox-border-hover:    theme-color("primary")              !default;
$ag-grid-checkbox-border-active:   $border-color                       !default;

$ag-grid-checkbox-check:           theme-color("primary")              !default;
$ag-grid-checkbox-check-disabled:  $border-color                       !default;


$ag-grid-checkbox-default:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1,1 L1,15 L15,15 L15,1 L1,1 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z' fill='#{$ag-grid-checkbox-border}'%3E%3C/path%3E%3C/svg%3E"), "#", "%23");
$ag-grid-checkbox-hover:          str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1,1 L1,15 L15,15 L15,1 L1,1 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z' fill='#{$ag-grid-checkbox-border-hover}'%3E%3C/path%3E%3C/svg%3E"), "#", "%23");
$ag-grid-checkbox-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='#{$ag-grid-checkbox-check}' x='3' y='7' width='10' height='2'/%3E%3C/svg%3E"), "#", "%23");
$ag-grid-checkbox-checked:        str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='#{$ag-grid-checkbox-check}' points='4 6 7 9 12 4 12 7 7 12 4 9'%3E%3C/polygon%3E%3C/svg%3E"), "#", "%23");


%ag-checked-icon {
  @extend .border;
  width: 1rem !important;
  height: 1rem  !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem !important;
}

// ag-header-cell ag-header-cell-sortable is-centered
// ag-header-select-all ag-labeled ag-label-align-right ag-checkbox ag-input-field

.ag-header .ag-checkbox,
.ag-selection-checkbox div {
  @extend .rounded-0,
          %ag-checked-icon;
  &:hover:not(.ag-checked):not(.ag-indeterminate) {
    background-color: $ag-grid-checkbox-bg-active-hover;
    background-image: $ag-grid-checkbox-hover;
  }
}

.ag-header .ag-checkbox {
  @extend .ag-selection-checkbox;
}

.ag-checked {
  @extend %ag-checked-icon;
  background-color: $ag-grid-checkbox-bg-checked;
  background-image: $ag-grid-checkbox-checked;
}

.ag-unchecked {
  @extend %ag-checked-icon;
  background-color:  $ag-grid-checkbox-bg;
  background-image:  $ag-grid-checkbox-default;
  &:hover:not(.ag-checked):not(.ag-indeterminate)  {
    background-color: $ag-grid-checkbox-bg-active-hover;
    background-image: $ag-grid-checkbox-hover;
  }
}

.ag-indeterminate {
  @extend %ag-checked-icon;
  background-color:  $ag-grid-checkbox-bg-checked;
  background-image: $ag-grid-checkbox-indeterminate;
}

.ag-checkbox .ag-checkbox-input[type="checkbox"] {
  opacity: 0;
}