@import 'hr-core-consts';

// (If you use Bootstrap, you'll have to add an override to your css file to make the clear button show in input field)
// input[type=search]::-webkit-search-cancel-button {
//     -webkit-appearance: searchfield-cancel-button;
// }


// confirm button in drop down layout
.buttonLayoutOk {
  cursor: pointer !important;
  top: 5px;
  right: 5px;
  margin-left: 5px;
  border-width: 0;
}

.buttonLayoutCancel {
  cursor: pointer !important;
  top: 5px;
  right: 5px;
  margin-left: 5px !important;
  border-width: 0;
}

.cbCheckedFirst {
  cursor: pointer !important;
  margin-top: 12px;
  right: 20px;
  margin-left: auto !important;
  border-width: 0;
  font-size: smaller;
  position: relative;
}

.hs_arrow {
  position: relative;
  top: 50%;
  transform: translate(0%, -50%) !important;
}

.hs_arrowheader {
  cursor: pointer;
  float: right;
  top: -5px;
}

.selected {
  background-color: rgba(0, 0, 0, .12) !important;
  color: $hrColor-LightBlue !important; // #3f51b5;
}

//set font size and width of drop down window
// ::ng-deep .cdk-overlay-pane {
//   width: auto !important;
//   min-width: 200px;
//   font-size: 14px;
// }

//*******************
::ng-deep .hs_form .mat-form-field-subscript-wrapper {
  z-index: 2;
}

::ng-deep .hs_form .mat-form-field-infix {
  display: flex; //get down array button in the same row
}

.hs_autocomplete {
  padding-right: 0px;
  max-height: 300px !important;
}

::ng-deep .hs_autocomplete .cbCheckedFirst .mat-checkbox-inner-container {
  order: 1;
}

::ng-deep .hs_autocomplete .buttonLayoutOk .dx-icon-check {
  font-size: 18px !important;
  font-weight: bold !important;
  color: green !important;
}


//set font size for items of drop down
::ng-deep .hs_autocomplete .mat-option {
  font-size: inherit;
}

::ng-deep .hs_autocomplete .dx-button-content {
  padding: 0px !important;
}

//label's color for the checked checkboxes if changed mark color not used
::ng-deep .hs_autocomplete .mat-option.multi_selected:not(.mat-option-disabled):not(.changedLabelColor) {
  //:not(.changed)
  color: $hrColor-LightBlue !important; // #78b7e5;
}

//label's color for the checked checkboxes if changed mark color used (changedLabelColor)
::ng-deep .hs_autocomplete .mat-option.multi_selected.changedLabelColor:not(.mat-option-disabled):not(.changed) {
  color: $hrColor-LightBlue !important; // #78b7e5;
}

//label's color for the changed checkboxes ifused (changedLabelColor)
::ng-deep .hs_autocomplete .mat-option.changed.changedLabelColor:not(.mat-option-disabled) {
  color: $hrColor-Green !important; // #78b7e5;
}

//checked check box filling's color for changed mark if used (changedCBColor)
::ng-deep .hs_autocomplete .mat-option.changed.changedCBColor .mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: $hrColor-Green !important; //transparent; //#78b7e5;
}

// check box frame's color for changed mark if used (changedCBColor)
::ng-deep .hs_autocomplete .mat-option.changed.changedCBColor:not(.mat-option-disabled) .mat-checkbox-frame {
  border-color: $hrColor-Green;
}

/*
//check box's check symbol color/style
::ng-deep .hs_autocomplete mat-option.changed:not(.mat-option-disabled) .mat-checkbox-checkmark-path {
    stroke: red !important;
    stroke-width: 3 !important;
}
*/
// ::ng-deep input:read-only{

// }

// ::ng-deep .hs_autocomplete .mat-form-field-underline:read-only {
//     border-bottom-style: dotted;
// }

// outlined symbols in items match to filter
::ng-deep .hs_autocomplete .hs_marked {
  background-color: rgba(0, 0, 0, .22);
}

::ng-deep .hs_grid .dx-datagrid-export-button .dx-icon-export-excel-button:before {
  content: "\f001" !important;
}

::ng-deep .hs_grid .dx-datagrid-export-button .dx-icon-export-excel-button {
  font-size: 25px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

::ng-deep .hs_grid .dx-datagrid-export-button .dx-icon-xlsxfile:before {
  content: "\f001" !important;
}

::ng-deep .hs_grid .dx-datagrid-export-button .dx-icon-xlsxfile {
  font-size: 25px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

::ng-deep .hs_grid .dx-button .dx-button-content {
  left: 0px; // -4px;
}


.hs_grid_header {
  // font-family: inherit !important;
  font-size: 14px;
  font-weight: normal;
}

.hs_required .hs_grid_header {
  color: red;
}

::ng-deep .hs_required .dx-datagrid-nodata {
  color: red;
}

.hs_pointer {
  cursor: pointer;
}

.hs_div {
  outline: none;
  pointer-events: auto;
}

.zoom {
  transform: scale(0.2);
}

::ng-deep .hs_form:has(.material-icons.ng-star-inserted) .mat-form-field-suffix {
  bottom: 8px;
}


::ng-deep .hs_form.no-placeholder .mat-form-field-infix {
  border-top-width: 0px;
}
