/*!
 *  Copyright (c) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */
@import '@bci-web-core/common-styles/sass/bci/colors';
@import '@bci-web-core/common-styles/sass/bci/mixins';

mat-chip {
  white-space: nowrap;
}

:host {
  cursor: pointer;

  ::ng-deep {
    mat-chip-list {
      .mat-chip {
        margin: 4px 0 4px !important;
        margin-right: $grid-size !important;
        cursor: pointer;
      }
      input {
        min-width: auto;
        padding-left: 16px !important;
        flex: none;
        padding-bottom: 3px;
      }
    }

    mat-chip-list.inline-style div.mat-chip-list-wrapper {
      margin-left: 0;
      margin-right: 0;

      .chip-input-container {
        padding-left: 2 * $grid-size;
      }
    }

    mat-chip-list:not(.inline-style) div.mat-chip-list-wrapper {
      background-color: $boschWhite;
      border: hidden;
      padding-top: 4px;
      padding-left: 0;
      gap: 0;

      mat-chip:first-child {
        margin-left: 0px;
      }
    }
  }

  input[readonly='true'].mat-chip-input,
  input[readonly='true'].mat-chip-input:hover:focus:active {
    background-color: $boschWhite !important;
    @include placeholder($boschBlack);
  }
}

::ng-deep {
  .mat-mdc-autocomplete-panel {
    max-height: 240px !important;
  }

  mat-error:not(:first-of-type) {
    display: none;
  }

  mat-form-field.mat-mdc-form-field.mat-form-field-disabled bci-chip-list-autocomplete {
    input[readonly='true'].mat-mdc-chip-input,
    input[readonly='true'].mat-mdc-chip-input:hover:focus:active {
      background-color: $form-field-default-theme-disabled-background-color !important;
      @include placeholder($form-field-placeholder-color);
    }
  }
}

::ng-deep {
  .notification {
    background-color: white !important;
    display: grid;

    bci-form-field-notification {
      margin-bottom: 0px;
    }

    mat-error {
      padding: 4px 16px 4px 12px;
      line-height: 24px;
    }

    mat-hint {
      color: $boschBlack !important;
      font-weight: 400;
      padding: 4px 16px 4px 12px;
      line-height: 24px;
    }
  }
}

.text-overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

//VP1 480px
@media screen and (max-width: $screen-xs-min) {
  .text-wdith-removable {
    max-width: 238px;
  }

  .text-wdith {
    max-width: 260px;
  }
}

//VP2 && VP3 768px
@media screen and (min-width: ($screen-xs-min + 1)) {
  .text-wdith-removable {
    max-width: 411px;
  }

  .text-wdith {
    max-width: 424px;
  }
}
