// MAT MENU
.mat-mdc-menu-panel .mat-mdc-menu-item {
  min-height: unset;
}

.mat-mdc-menu-panel .mat-mdc-menu-item .mat-mdc-menu-item-text {
  font-size: 14px;
}

.action-menu.mat-mdc-menu-panel {
  max-width: 100%;
}


.action-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
  font-size: 14px;
  height: 14px;
  width: 14px;
}

.btn-table-action .mat-icon {
  color: $blue-primary;
}

// END MAT MENU

// PAGINATOR
.mat-mdc-paginator-container .mat-mdc-form-field-infix {
  padding: 0 !important;
  min-height: unset !important;
}

.mat-mdc-paginator-page-size-select {
  width: 60px;

  .mat-mdc-text-field-wrapper {
    padding: 0 9px 0 9px;
  }
}

.mat-mdc-paginator-container {
  align-items: baseline;
}

.mat-mdc-paginator-page-size-select>*>*>.mdc-notched-outline>* {
  border: none !important;
}

// END PAGINATOR

// BUTTON
.mat-mdc-icon-button {
  .mat-mdc-button-persistent-ripple {
    visibility: hidden;
  }
}

// END BUTTON

// CHIP
.mat-mdc-chip.mat-mdc-standard-chip {
  background: $black-bluish;
  color: white;
  border-radius: 5px;
}

.mat-mdc-chip.mat-mdc-standard-chip.secondary {
  background: $gray-blue-primary;
}

.mat-mdc-chip {
  height: 22px;
  box-shadow: 0 1px 2px rgba(68, 93, 123, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
  letter-spacing: 0.25px;
}

.mat-mdc-standard-chip {
  --mdc-chip-label-text-color: white !important;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white !important;
}

// END CHIP

// FORM FIELD
.mat-mdc-form-field {
  font-size: 12px;
  letter-spacing: 0.25px;
}

.mat-form-field-appearance-outline .mat-mdc-form-field-infix {
  padding: 0 !important;
  min-height: 26px;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-width: 2px;
  border-color: $blue-primary !important;
}

.mdc-text-field--invalid .mdc-notched-outline > * {
  border-color: red !important;
}

.mat-mdc-form-field .mat-icon {
  color: $blue-primary;
}

.mdc-text-field--outlined {
  padding-left: 9px;
  padding-right: 9px;
}

// END FORM FIELD

//ICON in form-field

.mat-mdc-form-field-has-icon-suffix {
  .mat-mdc-form-field-icon-suffix {
    height: 26px;
    display: inline-flex;

    .mat-mdc-icon-button {
      display: inline-flex;
      align-items: center;
      width: 15px;
      padding: 0;
      height: 26px;
    }
  }

  .mat-icon {
    height: 15px;
    width: 15px;
    font-size: 15px;
  }

  .mat-mdc-icon-button {
    .mat-mdc-focus-indicator, .mat-mdc-button-touch-target {
      height: 15px;
      width: 15px;
    }
  }

  .mat-mdc-text-field-wrapper {
    padding-right: 10px;
  }
}

//END ICON in form-field

// CALENDAR & datepicker
.mat-datepicker-content .mat-calendar {
  width: 230px;
  height: auto;
}

.mat-calendar-header {
  padding-top: 0;
}

.mat-calendar-controls {
  margin-bottom: 0;
}

.mat-datepicker-toggle .mat-mdc-icon-button {
  --mdc-icon-button-icon-size: 15px;
}

.mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 1.5em;
}

// END CALENDAR

// CHECKBOX
.mdc-checkbox__background {
  width: 16px;
  height: 16px;
}

.mat-mdc-checkbox .mdc-label{
  color: $gray-primary;
}
// END CHECKBOX


// RADIO BUTTON
.mat-mdc-radio-button .mdc-form-field>label {
  color: $gray-primary;
}
//END RADIO BUTTON





// TABLE ROW
.mat-mdc-table {
  box-shadow: none !important;
}

.mat-mdc-row {
  -webkit-font-smoothing: initial;
  line-height: normal;

  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }

  .mat-mdc-input-element, .mat-mdc-select {
    padding: 0 4px 0 2px;
    border-radius: 4px;
  }

  .mdc-text-field--filled {
    padding: 0;
    border-radius: 4px;
  }

  .mat-mdc-form-field-infix {
    padding: 0 !important;
    min-height: 26px;
  }

  .mat-mdc-text-field-wrapper {
    height: 26px;
  }
}





// Cell & Header
.mat-mdc-header-cell {
 padding-top: 8px;
}
.mat-mdc-table .mat-mdc-cell, .mat-mdc-header-cell {
  font-size: 12px;
}

.mdc-data-table__cell, .mdc-data-table__header-cell {
  padding-left: 2px;
  padding-right: 5px;

  &:first-of-type {
    padding-left: 5px;
  }
}

.mat-mdc-header-row {
  min-height: 40px;
  max-height: 40px;


  .mat-mdc-form-field.mat-form-field-appearance-fill {
    .mat-mdc-form-field-infix {
      min-height: 52px;
      max-height: 52px;
      padding-top: 18px;
      padding-bottom: 8px;

      .mat-mdc-floating-label {
        font-size: 12px;
        top: 26px;
      }

      .mat-mdc-input-element {
        font-size: 12px
      }
    }
  }
}

.mat-mdc-form-field.mat-form-field-appearance-fill {
  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
    display: none;
  }

  .mat-mdc-form-field-focus-overlay {
    opacity: 0 !important;
  }

  .mat-mdc-text-field-wrapper {
    padding: 0;
  }
}

// END TABLE



//LIST
.mdc-list-item__primary-text {
  display: inline-block;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
// END LIST


// POPUP
.mat-mdc-dialog-container .btn-primary,
.mat-mdc-dialog-container .btn-danger,
.mat-mdc-dialog-container .btn-secondary {
  height: 24px !important;
  color: white !important;
  padding: 0 8px 0 8px;
  margin-right: 10px;
}

.mat-mdc-dialog-container .btn-primary {
  background: $blue-primary !important;
}

.mat-mdc-dialog-container .btn-danger {
  background: $red-primary !important;
}

.mat-mdc-dialog-container .btn-secondary {
  background: $purple-primary !important;
}

.mat-mdc-dialog-container {
  border-radius: 4px;
}

.mat-mdc-dialog-container .mat-mdc-dialog-surface {
  padding: 24px;
}

// END POPUP

// autofill log in local
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  transition: background-color 5000000s ease-in-out 0s !important;
}
// END autofill


// CHIP
.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
  padding: 2px 4px;
}

.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
  font-size: 12px;
}

// END CHIP

// FORM
.mat-mdc-form-field-subscript-wrapper {
  height: 0.9em;
}

.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-mdc-select {
  border: 1px solid red;
}

.mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-select {
  border: 1px solid red;
}

//END FORM


// MAT SELECT
.mat-mdc-select {
  font-size: 12px;
}
.mat-mdc-select-arrow {
  color: $blue-primary;
}

.mat-form-field-disabled .mat-mdc-select-value-text {
  color: gray;
}

// END MAT SELECT

// MAT OPTION
.mat-mdc-option {
  min-height: unset;
  font-size: 12px;
  -webkit-font-smoothing: initial;
}

.cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text {
  white-space: nowrap;
}

.multiline-mat-option.mat-mdc-option {
  white-space: normal;
  line-height: normal;
  margin-bottom: 7px;
}
// END MAT OPTION


@import "mdc-light-theme";
@import "mdc-dark-theme";