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

// Matches gb-input pattern: display: inline-block on the inner container
// so that a parent's adjacentField class (margin-right: 14px) takes effect
// in both flex and non-flex contexts.
.date_container {
  display: inline-block;
}
.underline {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transition: width 0.3s ease;
}

.form_input:focus +.underlinewidth .underline {
  width: 100%;
}

.dateinput{
  outline-style: none;
  border-style: none;
  background-color: inherit;
  padding: 0px;
}

::ng-deep .today-btn-wrapper {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
}

.labelFocused {
  color: var(--action-primary-default); /* Change label color on input focus */
  transition: .4s ease-in-out;
}


/* Readonly mode — gray background, default cursor, no focus highlight */
::ng-deep .Mat_Form_Field.readonly-field .mat-mdc-text-field-wrapper {
  background-color: var(--field-bg-readonly, #f0f0f0) !important;
  cursor: default;
}

::ng-deep .Mat_Form_Field.readonly-field .dateinput {
  color: var(--field-text-readonly, #757575) !important;
  cursor: default !important;
}

::ng-deep .Mat_Form_Field.readonly-field.mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
  border: 1px solid var(--mat-form-field-outlined-idle-border-color, rgba(0, 0, 0, 0.38)) !important;
}

::ng-deep .date_Form_Field .mat-mdc-form-field-infix{
  width: auto !important;
}

::ng-deep .date_Form_Field .mat-mdc-icon-button .mat-mdc-button-touch-target {
  width: 32px !important;
  height: 32px !important;
}

::ng-deep .date_Form_Field .mat-mdc-icon-button.mat-mdc-button-base{
  width: 32px !important;
  height: 32px !important;
  padding: 0px !important;
}

::ng-deep .date_Form_Field .mat-mdc-form-field-icon-suffix{
  display: flex !important;
}
:host ::ng-deep .Mat_Form_Field .mdc-text-field {
  width: 120px !important;
  min-width: 136px !important;
  max-width: 140px !important;
}
// ::ng-deep .DateToggleToday .mat-mdc-icon-button.mat-mdc-button-base{
//   padding: 0px !important;
//   text-align: right !important;
// }

// .DateToogleButton{
//   display: flex;
//   align-items: center;
// }

// ::ng-deep .DateToogleButton .mat-mdc-icon-button{
//   padding: 0px !important;
//   width: 36px !important;
//   height: 36px !important;
//   padding-top: 5px !important;
// }