// Checkbox (mat-checkbox, class sln-mat-checkbox)

.sln-mat-checkbox {
  .mat-mdc-checkbox-touch-target {
    height: var(--CHECKBOX-SIZE);
    width: var(--CHECKBOX-SIZE);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .mdc-checkbox {
    height: var(--CHECKBOX-SIZE);
    width: var(--CHECKBOX-SIZE);
    padding: 0;
    flex: 0 0 var(--CHECKBOX-SIZE);
  }

  .mdc-form-field > label,
  .mdc-label {
    padding-left: 10px;
    text-align: left;
    color: var(--DARK-GREY);
    font-family: var(--font-medium);
    font-size: 14px;
    line-height: 1.4;
  }

  .mat-internal-form-field {
    gap: 0;
    align-items: center;
  }

  .mdc-checkbox__background {
    width: var(--CHECKBOX-SIZE);
    height: var(--CHECKBOX-SIZE);
    border-radius: var(--CHECKBOX-RADIUS);
    left: 0;
    top: 0;
  }

  .mdc-checkbox .mdc-checkbox__native-control {
    width: var(--CHECKBOX-SIZE);
    height: var(--CHECKBOX-SIZE);
    top: 0;
  }

  // unchecked
  .mdc-checkbox
    .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not(
      [data-indeterminate='true']
    )
    ~ .mdc-checkbox__background {
    border: 1px solid var(--CONTROL-BORDER);
    background: var(--WHITE);
  }

  .mdc-checkbox:hover
    .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not(
      [data-indeterminate='true']
    )
    ~ .mdc-checkbox__background {
    border-color: var(--CONTROL-BORDER-HOVER);
  }

  // checked
  .mdc-checkbox
    .mdc-checkbox__native-control:enabled:checked
    ~ .mdc-checkbox__background,
  .mdc-checkbox
    .mdc-checkbox__native-control:enabled:focus:checked
    ~ .mdc-checkbox__background,
  .mdc-checkbox:hover
    .mdc-checkbox__native-control:enabled:checked
    ~ .mdc-checkbox__background,
  .mdc-checkbox:not(:disabled):active
    .mdc-checkbox__native-control:enabled:checked
    ~ .mdc-checkbox__background {
    background: var(--PRIMARY);
    border: 1px solid var(--PRIMARY);
    border-radius: var(--CHECKBOX-RADIUS);
    color: var(--WHITE);
  }

  .mdc-checkbox
    .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)
    ~ .mdc-checkbox__background {
    border-color: var(--PRIMARY);
    box-shadow: 0 0 0 2px rgba(52, 105, 244, 0.18);
  }

  .mdc-checkbox
    .mdc-checkbox__native-control:enabled:indeterminate
    ~ .mdc-checkbox__background {
    background: var(--WHITE);
    border: 1px solid var(--PRIMARY);
    color: var(--PRIMARY);
  }

  // disabled
  .mdc-checkbox
    .mdc-checkbox__native-control[disabled]:checked
    ~ .mdc-checkbox__background {
    border-color: var(--GRAY-SOFT);
    background-color: var(--GRAY-SOFT) !important;
    opacity: 0.55;
  }

  .mdc-checkbox
    .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not(
      [data-indeterminate='true']
    )
    ~ .mdc-checkbox__background {
    border-color: var(--GRAY-SOFT) !important;
    background: #f4f6f8;
    opacity: 0.55;
  }

  .mat-mdc-checkbox.mat-mdc-checkbox-disabled label {
    color: var(--GRAY-SOFT) !important;
  }

  .mat-form-field-required-marker {
    color: var(--DANGER);
  }

  .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
    background-color: var(--PRIMARY) !important;
    border-color: var(--PRIMARY) !important;
    color: var(--WHITE) !important;
  }
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(
    .mat-mdc-option-multiple
  ) {
  background-color: #f0f4fe !important;
}

.sln-user-widgets-checkbox {
  line-height: 0;

  .sln-core-field-bool {
    border: 1px solid var(--CONTROL-BORDER);
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--INPUT-RADIUS);
  }
}
