@import url('./../../../../../projects/gbhost/public/gbstyle/gbcommonstyle.scss');

.gbcheckbox {
  display: inline-flex;
  justify-content: end;
}

.checkbox-container {
  display: flex;
  min-height: 36px;
  align-items: flex-start;
  height: auto; 

  .form-label {
    margin-right: 6px;

    &.label-disabled {
      opacity: 0.6;
      pointer-events: none;
    }
  }

  .label-span {
    max-width: unset;
    display: inline-block;

    &.label-focused {
      color: var(--action-primary-default);
      transition: .4s ease-in-out;
    }
  }
}


::ng-deep.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
  border-color: var(--action-primary-default) !important;
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep.mdc-checkbox:active .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background {
  border-color: var(--action-primary-default) !important;
  background-color: var(--action-primary-default) !important;
}

::ng-deep .mdc-checkbox__background {
  border-color: var(--mat-sys-inverse-surface) !important;
}

::ng-deep .mdc-checkbox__checkmark {
  color: #FFFFFF !important;
}


::ng-deep .Checkbox_Form_Field .mdc-text-field--filled {
  background-color: transparent !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field--focused {
  background-color: transparent !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay {
  opacity: 0 !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay {
  opacity: 0 !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
  color: var(--action-primary-default, #834DD0) !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label {
  // color: var(--action-primary-default, #834DD0) !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
  border-bottom-color: transparent !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
  border-bottom-color: transparent !important;
}

::ng-deep .Checkbox_Form_Field .mdc-text-field {
  padding: 0px !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: 23px !important;
  color: var(--mat-sys-inverse-surface) !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-infix {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  min-height: 0px !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-subscript-wrapper,
.mat-mdc-form-field-bottom-align::before {
  line-height: 0px !important;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-bottom-align::before {
  height: 0px;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above {
  color: var(--mat-sys-inverse-surface) !important;
  font-weight: 700;
}

::ng-deep .Checkbox_Form_Field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  color: var(--mat-sys-inverse-surface) !important;
}

// .CounterCheckboxalign{
//   position:relative;
//   top: 10px;
//   margin-left: -67px;
//   right:53px;
// }
.formSidelabel {
  font-weight: 400;
  font-size: 12px;
  height: 17px;
  text-align: left;
  position: relative;
  right: 10px;
  top: 12px;

}

:host {
  .checkbox-container {
    display: flex;
    gap: 6px;
    padding-left: 4px;
  }
}