@use "@infineon/design-system-tokens/dist/tokens";

// Check + Radio
// 
.form-check-input {
  &:hover:not(:checked) {
    background-color: tokens.$color-gray-200;
  }
}

.form-check-input:disabled {
  &,
  &:hover {
    background-color: $disabled-color;
    border-color: $disabled-color;
  }
}

.form-check-input:checked[type="checkbox"] {
  background-size: 70%;
}

.form-check-input:checked[type="radio"] {
  background-color: $white;
}

.form-check-input:disabled:checked[type="radio"] {
  background-image: escape-svg($form-check-radio-checked-disabled-bg-image);
}

.was-validated .form-check-input:valid~.form-check-label,
.form-check-input.is-valid~.form-check-label {
  color: $body-color;
}

.form-check-input {
  &:valid:focus,
  &.is-valid:focus {
    border-color: $input-border-color;
    box-shadow: $input-btn-focus-box-shadow;
  }
  
  &:invalid:focus,
  &.is-invalid:focus {
    border-color: $input-border-color;
    box-shadow: $input-btn-focus-box-shadow;
  }
}






.form-switch {
  margin-left: 13px;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.7' fill='%237D6F72'/%3E%3C/svg%3E");
}

.form-switch .form-check-input:checked {
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.5' fill='%23FFF'/%3E%3C/svg%3E");
}

.form-switch .form-check-input {
  height: 22px;
  width: 40px;
  margin-top: 3px;
  margin-left: -53px;
  border: 1px solid tokens.$color-gray-500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.7' fill='%237D6F72'/%3E%3C/svg%3E");
}

#switch.form-check-input:disabled {
  opacity: 1;
  border-color: tokens.$color-gray-400;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.7' fill='%23C5BBBD'/%3E%3C/svg%3E");
}

#switch.form-check-input:disabled:checked {
  background-color: #59B29B66;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.5' fill='%23FFF'/%3E%3C/svg%3E");
}

.form-check-label {
  font-weight: 600;
  color: tokens.$color-text-black;
}