//
// Copyright IBM Corp. 2019, 2021
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import 'carbon-components/scss/components/button/button';
@import 'carbon-components/scss/components/search/search';
@import 'carbon-components/scss/components/data-table/data-table-action';

//
// Table toolbar
//

:host(#{$prefix}-table-toolbar) {
  @extend .#{$prefix}--table-toolbar;
}

:host(#{$prefix}-table-toolbar-content) {
  @extend .#{$prefix}--toolbar-content;

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

  ::slotted(#{$prefix}-overflow-menu) {
    @include button-reset;
    display: flex;
    cursor: pointer;
    height: $layout-04;
    width: $layout-04;
    padding: $spacing-md;
    transition: background-color $duration--fast-02 motion(entrance, productive);
  }

  ::slotted(#{$prefix}-overflow-menu:hover) {
    background-color: $hover-field;
  }

  ::slotted(#{$prefix}-overflow-menu[disabled]:hover) {
    background-color: transparent;
  }

  .#{$prefix}--search .#{$prefix}--search-input {
    background-color: transparent; // For tool bar animation with (esp.) persistent search box
  }
}

:host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transform: translate3d(0, 48px, 0);
  transition: transform $duration--fast-02 motion(standard, productive), clip-path $duration--fast-02 motion(standard, productive);
}

:host(#{$prefix}-table-toolbar-search) {
  @extend .#{$prefix}--toolbar-action;
  @extend .#{$prefix}--toolbar-search-container-expandable;

  flex: none;
  transition: flex 175ms $carbon--standard-easing;

  .#{$prefix}--search {
    width: 100%;
    height: 100%;

    .#{$prefix}--search-magnifier {
      height: $layout-04;
      width: $layout-04;
      padding: $spacing-md;
      left: 0;
      cursor: pointer;
      pointer-events: all;
      transition: background $duration--fast-02 motion(entrance, productive);
    }

    .#{$prefix}--search-close {
      height: $layout-04;
      width: $layout-04;

      &:before {
        top: 2px;
        height: calc(100% - 4px);
        background-color: $hover-ui;
      }
    }
  }
}

:host(#{$prefix}-table-toolbar-search[expanded]) {
  @extend .#{$prefix}--toolbar-search-container-active;

  flex: auto;
}

:host(#{$prefix}-table-toolbar-search[persistent]) {
  @extend .#{$prefix}--toolbar-search-container-persistent;
}

:host(#{$prefix}-table-batch-actions) {
  @extend .#{$prefix}--batch-actions;

  box-sizing: border-box;
}

:host(#{$prefix}-table-batch-actions[active]) {
  @extend .#{$prefix}--batch-actions--active;
}