.mat-mdc-form-field {
  --mdc-filled-text-field-container-color: var(--form-field-background); //container-background
  --mdc-filled-text-field-label-text-color: var(--form-field-text-color); //label color
  --mdc-filled-text-field-hover-label-text-color: var(--form-field-text-color); //label color
  --mdc-filled-text-field-focus-label-text-color: var(--form-field-active-color); //label color
  --mdc-filled-text-field-active-indicator-color: var(--form-field-text-color); //active color
  --mdc-filled-text-field-focus-active-indicator-color: var(
    --form-field-active-color
  ); //focus color
  --mdc-filled-text-field-hover-active-indicator-color: var(
    --form-field-active-color
  ); //focus color

  .mdc-text-field {
    .mat-mdc-form-field-flex {
      .mat-mdc-select {
        --mat-select-enabled-trigger-text-color: var(--form-field-text-color);
        --mat-select-placeholder-text-color: var(--form-field-text-color);
        --mat-select-enabled-arrow-color: var(--form-field-text-color);
        --mat-select-focused-arrow-color: var(--form-field-active-color);
      }
    }
  }
}

.mat-mdc-select-panel {
  --mat-select-panel-background-color: var(--form-field-panel-background);
  --mat-select-container-elevation-shadow: var(--form-field-panel-shadow);

  --mat-option-selected-state-label-text-color: var(--form-field-active-color);
  --mat-option-label-text-color: var(--form-field-text-color);
  --mat-option-selected-state-layer-color: var(--form-field-background);
  --mat-option-hover-state-layer-color: var(--form-field-background);
  --mat-option-focus-state-layer-color: var(--form-field-background);

  --mat-option-min-height: calc(48px * var(--flow-scale, 1));
  --mat-option-label-text-size: calc(14px * var(--flow-scale, 1));
  --mat-option-label-text-line-height: calc(16px * var(--flow-scale, 1));
  --mat-option-padding: 0 calc(16px * var(--flow-scale, 1));
  --mat-panel-padding: calc(8px * var(--flow-scale, 1)) 0;

  padding: var(--mat-panel-padding);

  .mat-mdc-option {
    min-height: var(--mat-option-min-height);
    padding: var(--mat-option-padding);

    .mat-pseudo-checkbox {
      display: none;
    }
  }
}

.mat-mdc-button {
  --mat-text-button-state-layer-color: var(--form-field-active-color);
  --mdc-text-button-label-text-color: var(--form-field-text-color);
}
