/*!
  *  Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 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/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins';

$arrows-column-width: 10 * $grid-size;

:host {
  display: flex;

  & > .picklist-container {
    flex: 0 0 100%;
  }
}

.title {
  overflow: hidden;
  margin-bottom: $grid-size * 3;
  & > .source-title-container,
  & > .target-title-container {
    min-width: 0;
    flex: 0 1 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    @include make-font-bold($grid-size * 3, 34px);
    color: $boschBlack;
  }
}

.content {
  overflow: hidden;
}

.spacer {
  flex: 0 0 $arrows-column-width;
}

.filter-form-field {
  min-width: 0;

  &.hidden {
    visibility: hidden;
  }
}

.filters-container {
  height: $grid-size * 6;
  & > :not(.spacer) {
    min-width: 0;
  }
}

.lists-container {
  overflow: hidden;

  & > bci-drag-drop-list {
    min-width: 0;
  }
}

.arrow-buttons {
  padding: 0px $grid-size * 2;
}

button[disabled] {
  cursor: default;
}

::ng-deep {
  mat-form-field.mat-mdc-form-field.filter-form-field .mat-mdc-form-field-subscript-wrapper,
  .filters-container mat-form-field.mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper {
    line-height: 0px;
    margin-top: -4px !important;
  }
}

::ng-deep {
  .mat-menu-panel.picklistMenu {
    min-width: 150px !important;
    width: 150px;
    top: 14px;
  }

  .mat-menu-panel.picklistMenu .mat-menu-content .mat-menu-item:not(.labeled-divider),
  .mat-menu-panel.picklistMenu.mat-elevation-z4 .mat-menu-content .mat-menu-item:not(.labeled-divider) {
    height: 24px;
    line-height: 1.5;
    padding: 12px 14px;

    .mat-radio-label {
      padding: 0px;
    }
  }

  .mat-menu-panel.picklistMenu.mat-menu-before .mat-menu-content:after,
  .mat-menu-panel.picklistMenu.mat-elevation-z4.mat-menu-before .mat-menu-content:after {
    right: 17px;
  }

  .mat-menu-panel.picklistMenu.mat-menu-below .mat-menu-content:after,
  .mat-menu-panel.picklistMenu.mat-elevation-z4.mat-menu-below .mat-menu-content:after {
    top: 5px;
  }
}

//VP1
@media screen and (max-width: $screen-xs-min) {
  .title > div:not(.spacer),
  .filters-container mat-form-field,
  .selection-buttons div:not(.spacer) {
    max-width: 288px;
    min-width: 288px;
  }
}

//VP2
@media screen and (min-width: ($screen-xs-min + 1)) and (max-width: ($screen-sm-min)) {
  .title > div:not(.spacer),
  .filters-container mat-form-field,
  .selection-buttons div:not(.spacer) {
    max-width: 252px;
    min-width: 252px;
  }
}

//VP3
@media screen and (min-width: ($screen-sm-min + 1)) {
  .title > div:not(.spacer),
  .filters-container mat-form-field,
  .selection-buttons div:not(.spacer) {
    max-width: 336px;
    min-width: 336px;
  }
}
