@import "../../assets/sass/core/vars.scss";
@import "../../assets/sass/global.scss";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");


$checkbox-color: #bababa;
$checkbox-checked-color: #000000;
$checkbox-disabled-color: #d3d3d3;

.checkbox-gtc-rc-div {
  display: flex;
  align-items: center;
  gap: 8px; 
  cursor: pointer;

  
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  
  .cb-gtc-rc {
    display: flex;
    font-size: 23px;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    margin-right: 8px;
    &:before {
      content: '\e835'; 
      font-family: "Material Icons";
    }
  }

  
  input[type="checkbox"]:checked + .cb-gtc-rc:before {
    content: '\e834'; 
    color: $checkbox-checked-color;
  }

  
  .indeterminate-gtc-rc + .cb-gtc-rc:before {
    content: '\e909' !important; 
  }

  
  input[type="checkbox"]:disabled + .cb-gtc-rc {
    cursor: not-allowed;
    color: $checkbox-disabled-color;
  }
}

.wrapper-gtc-rc {
    display: flex;
    align-items: center;
}
