/*!
  *  Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins';
@import 'commandbar.mixins';

:host.active mat-toolbar {
  background: $boschBlue95;
}

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

.fill-space {
  flex: 1 1 auto;

  &.hidden {
    display: none;
  }
}

.m-r-16 {
  margin-right: $grid-size * 2 !important;
}

.m-l-16 {
  margin-left: $grid-size * 2;
}

mat-toolbar-row.mat-toolbar-row {
  padding: 0px $grid-size * 2;
}

:host ::ng-deep {
  // hide group search and filter, when empty

  .options-menu.m-r-0 button {
    margin-right: 0px;
  }

  .commandbar-group-search-and-filters:empty {
    display: none;
  }

  bci-commandbar-active-filters mat-chip-list.mat-chip-list {
    .mat-chip-list-wrapper {
      border: none;
      padding-left: 0;
      padding-top: $grid-size * 2;

      > bci-chip {
        margin-left: 0;

        > mat-chip {
          margin-left: 0;
        }
      }
    }
  }

  bci-commandbar-button.commandbar-item button mat-icon.Bosch-Ic-show-more-vertical {
    &:before {
      display: inline-block;
      transform: rotate(90deg);
    }
  }

  .commandbar-group {
    @include make-commandbar-item;

    &.hidden {
      display: none;
    }

    // reset margins of nested command bar items and groups
    > .commandbar-item,
    .commandbar-group {
      margin: 0;
    }

    bci-commandbar-actions {
      > .mat-mdc-icon-button:last-of-type {
        margin-right: 8px;
      }

      .mat-mdc-icon-button {
        min-width: 3 * $grid-size;
      }

      > .commandbar-item {
        // fix ripple for icons created as custom bci-commandbar-item instead of bci-commandbar-button
        .mat-mdc-icon-button:not(.commandbar-item) {
          .mat-button-focus-overlay {
            margin-top: 0;
          }
        }
      }
    }
  }

  bci-chip-selectable,
  bci-chip {
    height: 32px;
  }

  .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle button.mat-mdc-icon-button {
    color: $boschBlack;
  }

  .commandbar-item {
    .mat-button-wrapper > mat-icon {
      margin: 0px;
    }
  }

  .commandbar-item {
    @include make-commandbar-item;
    // fix ripple for icons within command bar items
    .mat-button-focus-overlay {
      width: $grid-size * 5;
      height: $grid-size * 5;
      margin-top: $grid-size * 1.5;
    }

    .options-menu {
      width: $grid-size * 6;
    }

    .commandbar-action-add {
      height: $grid-size * 6;
      padding: 12px;

      // fix ripple
      .mat-button-focus-overlay {
        width: $grid-size * 8;
        height: $grid-size * 8;
        margin-top: 0;
      }
    }
  }

  .entry-count.active {
    &,
    &.mat-mdc-icon-button.mat-mdc-icon-button {
      color: $boschBlack;
    }
  }

  .commandbar-button-active {
    @include make-integrated-button-active;
  }

  .entry-count {
    max-width: 120px;

    span {
      margin-right: 0px;
      font-size: 12px;
      line-height: 18px;
    }

    + .commandbar-group-search-and-filters
      > bci-commandbar-inlinefilters
      > .flex-style
      > .commandbar-inline-filter:first-child
      > bci-datetime-picker {
      margin-left: 16px;
    }

    + .commandbar-group-search-and-filters
      > bci-commandbar-inlinefilters
      > .flex-style
      > .commandbar-inline-filter:first-child
      > mat-form-field.mat-mdc-form-field {
      margin-left: 16px;
    }

    + .commandbar-group-search-and-filters
      > bci-commandbar-inlinefilters
      > .flex-style
      > .commandbar-inline-filter:first-child
      > .commandbar-item
      > .commandbar-item
      > bci-chip-selectable {
      margin-left: 16px;
    }
  }

  bci-commandbar-quickfilters,
  bci-commandbar-actions {
    .commandbar-item + .commandbar-item > bci-chip-selectable {
      margin-left: 12px;
    }
  }

  bci-commandbar-quickfilters {
    .commandbar-item + .commandbar-item > mat-slide-toggle {
      margin-left: 16px;
    }
  }

  .commandbar-inline-filter {
    mat-form-field.mat-mdc-form-field {
      .mat-mdc-form-field-subscript-wrapper {
        display: none;
      }
      .mat-mdc-select {
        @include make-border(0px 0px 0px 0px, $boschWhite);
      }
    }

    + .commandbar-inline-filter > bci-datetime-picker,
    + .commandbar-inline-filter
      > .commandbar-item
      > .commandbar-item
      > bci-chip-selectable
      > mat-chip-option.mat-mdc-chip-option,
    + .commandbar-inline-filter > mat-form-field.mat-mdc-form-field {
      margin-left: 16px;
    }

    .commandbar-item + .commandbar-item > .commandbar-item > bci-chip-selectable {
      margin-left: 12px !important;
    }
  }

  .commandbar-search-field {
    margin-left: 2 * $grid-size;
    @include make-commandbar-mat-input;
    form {
      height: 6 * $grid-size;
    }

    &:not(.commandbar-search-field-small) {
      mat-form-field.mat-mdc-form-field {
        .mat-mdc-form-field-subscript-wrapper {
          display: none;
        }
      }
    }

    .mat-input-element:focus + .mat-mdc-floating-label {
      background-color: transparent;
    }

    &.commandbar-search-field-small {
      z-index: 10;
      width: $grid-size * 6;
      margin-right: 0px;

      button {
        pointer-events: none;
        height: 48px;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }

      &.active {
        mat-form-field.mat-mdc-form-field {
          .mat-mdc-form-field-flex {
            background-color: transparent;
          }

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

      mat-form-field.mat-mdc-form-field {
        min-width: none !important;

        .mat-mdc-text-field-wrapper {
          border: none;
        }

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

        .mat-mdc-form-field-flex {
          background-color: transparent;
        }

        .mat-mdc-form-field-icon-prefix {
          min-width: none !important;
          padding-right: 0;
          background-color: $boschGray95;
        }

        .mat-mdc-form-field-icon-suffix {
          min-width: none !important;
          width: 0;
          overflow: hidden;
          padding: 0;
        }
      }

      .mat-mdc-form-field-infix {
        display: none;
        width: 0;
        overflow: hidden;
        input {
          width: 0;
        }
      }
    }
  }

  // make the search bar to use full space available
  .commandbar-group-search-and-filters {
    &.commandbar-groupsearch-fullspace {
      flex: 1 1 auto;
      margin-right: $grid-size;
      justify-content: flex-end;
      overflow: hidden;

      .commandbar-search-field {
        width: 100%;

        form {
          height: 49px;
        }

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

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

  .margin-chips-next-to-commandbar-group-search-and-filters {
    .commandbar-group-search-and-filters {
      + bci-commandbar-quickfilters > .flex-style > .commandbar-item:first-child > bci-chip-selectable,
      + .commandbar-group-filter
        + bci-commandbar-quickfilters
        > .flex-style
        > .commandbar-item:first-child
        > bci-chip-selectable,
      + .commandbar-group-filter
        + .commandbar-group-sort
        + bci-commandbar-quickfilters
        > .flex-style
        > .commandbar-item:first-child
        > bci-chip-selectable,
      + .commandbar-group-sort
        + bci-commandbar-quickfilters
        > .flex-style
        > .commandbar-item:first-child
        > bci-chip-selectable {
        margin-left: 2 * $grid-size;
      }
    }
  }
}

::ng-deep {
  // make the options menu indicator
  .bci-commandbar-options-menu-top:before,
  .bci-commandbar-options-menu-top-with-Add:before,
  .bci-commandbar-options-menu-bottom-with-Add:before,
  .bci-commandbar-options-menu-bottom:before {
    content: '';
    position: fixed;
    display: block;
    height: 17px;
    width: 17px;
    transform-origin: center;
    background: $boschWhite;
    box-shadow: -2px 2px 3px rgb(0 0 0 / 12%) !important;
  }

  // positioning of the indicator
  .bci-commandbar-options-menu-bottom:before {
    right: 8px;
    top: -8px;
    transform: rotate(135deg);
  }

  .bci-commandbar-options-menu-bottom-with-Add:before {
    right: 16px;
    top: -8px;
    transform: rotate(135deg);
  }

  .bci-commandbar-options-menu-top:before {
    right: 8px;
    bottom: -8px;
    transform: rotate(-45deg);
  }

  .bci-commandbar-options-menu-top-with-Add:before {
    right: 16px;
    bottom: -8px;
    transform: rotate(316deg);
  }

  .bci-commandbar-options-menu-bottom,
  .bci-commandbar-options-menu-bottom-with-Add,
  .bci-commandbar-options-menu-top-with-Add,
  .bci-commandbar-options-menu-top {
    &.cdk-overlay-pane:not(.bci-commandbar-add-menu) {
      position: absolute !important;
      right: -25px;
    }
    &.cdk-overlay-pane.bci-commandbar-add-menu {
      position: absolute !important;
      right: -17px;
    }
    bci-commandbar-optionsmenu {
      border: 0;
    }
    mat-list {
      box-shadow: 0px 0px $grid-size rgb(0 0 0 / 25%) !important;
      min-width: 160px !important;
    }
  }
}
