@import 'settings';

.chatbot {
  --mat-form-field-container-vertical-padding: 12px;
  --mat-form-field-container-height: 48px;
  --mdc-filled-text-field-input-text-color: var(--color-grey-900);
  --mdc-filled-text-field-container-color: var(--color-grey-200);
  --mdc-icon-button-state-layer-size: 16px;
  --mdc-icon-button-icon-size: 16px;
  --mdc-theme-primary: var(--color-primary-500);
  --mdc-theme-on-primary: var(--color-white);
  --mdc-filled-text-field-focus-label-text-color: var(--color-grey-500);
  --mat-option-selected-state-label-text-color: var(--color-primary-500);
  --mat-select-focused-arrow-color: var(--color-primary-500);
  --mdc-filled-text-field-label-text-size: 14px;

  line-height: 1.5;

  .mat-primary {
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
      --color-primary-500
    );
  }

  .mat-mdc-form-field-infix {
    width: 100%;
  }

  mat-form-field {
    width: 100%;
    font-size: 14px;
  }

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

  .mdc-text-field--filled,
  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
    border-radius: var(--border-radius-default);
  }

  .mdc-line-ripple {
    display: none;
  }

  .mat-mdc-form-field-icon-suffix .mat-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--color-grey-500);
  }

  .mat-mdc-icon-button:hover {
    .mat-icon {
      color: var(--color-grey-900);
    }
  }

  &.mat-typography p {
    margin-bottom: 0;
  }

  .mat-mdc-icon-button.mat-mdc-button-base {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 32px;
  }

  .mat-mdc-raised-button.mat-primary {
    --mdc-protected-button-container-color: var(--color-primary-500);
  }

  .mdc-button {
    width: 100%;
    min-height: 42px;
  }

  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: 28px;
  }

  .popover {
    background: var(--color-grey-600);
    transition: none;
    padding: 4px 12px;
    margin-bottom: 4px;
    margin-left: -20px;
    color: white;

    .mat-mdc-menu-content {
      align-items: center;
      display: flex;
      padding: 0;
      font-size: 12px;
    }

    .icon {
      font-size: inherit;
      height: initial;
      width: initial;
    }
  }
}
