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

@use '../../button';
@use '../../overflow-menu';
@use '../../search';
@use '../../../config' as *;
@use '../../../motion' as *;
@use '../../../spacing' as *;
@use '../../../theme' as *;
@use '../../../type' as *;
@use '../../../utilities/button-reset';
@use '../../../utilities/convert';
@use '../../../utilities/focus-outline' as *;

/// Data table action styles
/// @access public
/// @group data-table
@mixin data-table-action {
  //-------------------------------------------------
  //TOOLBAR
  //-------------------------------------------------
  .#{$prefix}--table-toolbar {
    // Need for batch actions
    position: relative;
    z-index: 1;
    display: flex;
    background-color: $layer;
    inline-size: 100%;
    min-block-size: $spacing-09;
  }

  .#{$prefix}--toolbar-content {
    display: flex;
    justify-content: flex-end;
    block-size: $spacing-09;
    inline-size: 100%;
    transform: translate3d(0, 0, 0);
    transition:
      transform $duration-fast-02 motion(standard, productive),
      clip-path $duration-fast-02 motion(standard, productive);
  }

  .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
    padding: 0 3rem;
    // For toolbar animation with (esp.) persistent search box
    background-color: transparent;
    block-size: 3rem;
  }

  .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
    block-size: 3rem;
    inline-size: 3rem;
  }

  //-------------------------------------------------
  //DEPRECATED v10/v9 search behavior
  //-------------------------------------------------
  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container {
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 110ms;
  }

  //-------------------------------------------------
  //HIDDEN SEARCH - DEFAULT TOOLBAR
  //-------------------------------------------------
  .#{$prefix}--toolbar-search-container-expandable {
    position: relative;
    block-size: $spacing-09;
    box-shadow: none;
    cursor: pointer;
    inline-size: $spacing-09;
    transition:
      width $transition-expansion $standard-easing,
      background-color $duration-fast-02 motion(entrance, productive);

    &:hover {
      background-color: $field-hover;
    }
  }

  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
    inline-size: 3rem;
  }

  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
    block-size: 100%;
    cursor: pointer;
    opacity: 0;
  }

  .#{$prefix}--toolbar-search-container-expandable:not(
      .#{$prefix}--toolbar-search-container-active
    )
    .#{$prefix}--search-input {
    padding: 0;
  }

  .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input {
    cursor: not-allowed;
  }

  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
    .#{$prefix}--label {
    visibility: hidden;
  }

  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
    .#{$prefix}--search-close {
    block-size: $spacing-09;
    inline-size: $spacing-09;

    &::before {
      background-color: $field-hover;
      block-size: calc(100% - #{convert.to-rem(4px)});
      inset-block-start: convert.to-rem(2px);
    }
  }

  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
    .#{$prefix}--search-close:focus::before {
    background-color: $focus;
  }

  //-------------------------------------------------
  // Seach icon
  //-------------------------------------------------v
  // lg expandable icon spacing
  .#{$prefix}--table-toolbar
    .#{$prefix}--search--lg
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: 0;
  }

  // lg persistent icon spacing
  .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm)
    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: 1rem;
  }

  // sm expandable icon spacing
  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
    .#{$prefix}--search--sm:not(
      .#{$prefix}--toolbar-search-container-active
    ):not(.#{$prefix}--toolbar-search-container-persistent)
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: 0;
  }

  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
    .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: 0.5rem;
  }

  // sm persistent icon spacing
  .#{$prefix}--table-toolbar
    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: 0.5rem;
  }

  .#{$prefix}--toolbar-search-container-expandable
    .#{$prefix}--search-magnifier-icon {
    padding: $spacing-05;
    block-size: $spacing-09;
    inline-size: $spacing-09;
  }

  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
    .#{$prefix}--search-magnifier-icon {
    background-color: $layer;
    cursor: not-allowed;
    transition: background-color none;
  }

  .#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-magnifier-icon:focus,
  .#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-magnifier-icon:active,
  .#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-magnifier-icon:hover {
    border: none;
    background-color: transparent;
    outline: none;
  }

  //-------------------------------------------------
  //ACTIVE SEARCH - DEFAULT TOOLBAR
  //-------------------------------------------------

  .#{$prefix}--toolbar-search-container-active.#{$prefix}--search {
    inline-size: 100%;
  }

  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
    opacity: 1;
  }

  .#{$prefix}--toolbar-search-container-active .#{$prefix}--label,
  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
    padding: 0 $spacing-09;
    cursor: text;
  }

  .#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-input:focus
    + .#{$prefix}--search-close {
    border: none;
    box-shadow: none;
    outline: none;
  }

  .#{$prefix}--toolbar-search-container-active
    .#{$prefix}--search-input:not(:placeholder-shown) {
    border: none;
    background-color: $field-hover;
  }

  //-------------------------------------------------
  //SEARCH CLOSE BUTTON
  //-------------------------------------------------
  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-close:hover,
  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close,
  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover {
    border: none;
    background-color: transparent;
  }

  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-close::before {
    display: none;
  }

  //-------------------------------------------------
  //TOOLBAR BUTTONS
  //-------------------------------------------------
  .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
    @include button-reset.reset;

    display: flex;
    padding: $spacing-05;
    block-size: $spacing-09;
    cursor: pointer;
    inline-size: $spacing-09;
    transition: background $duration-fast-02 motion(entrance, productive);
  }

  // DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead
  .#{$prefix}--toolbar-action {
    @include button-reset.reset;

    display: flex;
    block-size: $spacing-09;
    cursor: pointer;
    inline-size: $spacing-09;
    transition: background $duration-fast-02 motion(entrance, productive);
  }

  .#{$prefix}--toolbar-action:hover:not([disabled]) {
    background-color: $field-hover;
  }

  .#{$prefix}--toolbar-action[aria-expanded='true'],
  .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
    background-color: $layer-02;
  }

  .#{$prefix}--toolbar-action[disabled] {
    cursor: not-allowed;
  }

  .#{$prefix}--toolbar-action[disabled] .#{$prefix}--toolbar-action__icon {
    cursor: not-allowed;
    fill: $icon-disabled;
  }

  .#{$prefix}--toolbar-action:focus:not([disabled]),
  .#{$prefix}--toolbar-action:active:not([disabled]) {
    @include focus-outline('outline');

    &.#{$prefix}--toolbar-search-container-expandable {
      // The focus style is handled by search input in it, need to avoid duplicate animation
      outline: none;
    }
  }

  .#{$prefix}--toolbar-action ~ .#{$prefix}--btn {
    margin: 0;
    max-inline-size: none;
    white-space: nowrap;
  }

  .#{$prefix}--overflow-menu--data-table {
    block-size: $spacing-09;
  }

  //-------------------------------------------------
  //TOOLBAR BUTTON ICONS
  //-------------------------------------------------
  .#{$prefix}--toolbar-action__icon {
    block-size: $spacing-05;
    fill: $icon-primary;
    inline-size: auto;
    max-inline-size: $spacing-05;
  }

  //-------------------------------------------------
  //TOOLBAR Menu
  //-------------------------------------------------
  .#{$prefix}--toolbar-action__menu,
  .#{$prefix}--toolbar-action__menu.#{$prefix}--overflow-menu-options::after {
    background-color: $layer-02;
  }

  //-------------------------------------------------
  //PERSISTENT SEARCH - OPTIONAL TOOLBAR
  //-------------------------------------------------
  .#{$prefix}--toolbar-search-container-persistent {
    position: relative;
    block-size: $spacing-09;
    inline-size: 100%;
    opacity: 1;
  }

  .#{$prefix}--toolbar-search-container-persistent
    + .#{$prefix}--toolbar-content {
    position: relative;
    inline-size: auto;
  }

  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search {
    position: initial;
  }

  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-magnifier-icon {
    inset-inline-start: $spacing-05;
  }

  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
    padding: 0 $spacing-09;
    border: none;
    block-size: $spacing-09;
  }

  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-input:focus:not([disabled]) {
    @include focus-outline('outline');
  }

  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-input:hover:not([disabled]) {
    background-color: $field-hover;
  }

  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-input:active:not([disabled]),
  .#{$prefix}--toolbar-search-container-persistent
    .#{$prefix}--search-input:not(:placeholder-shown) {
    background-color: $field-hover;
  }

  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
    block-size: $spacing-09;
    inline-size: $spacing-09;
  }

  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
    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);
  }

  //-------------------------------------------------
  //BATCH ACTIONS
  //-------------------------------------------------
  .#{$prefix}--batch-actions {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $background-brand;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    inset-block-end: 0;
    inset-inline: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 48px, 0);
    transition:
      transform $duration-fast-02 motion(standard, productive),
      clip-path $duration-fast-02 motion(standard, productive),
      opacity $duration-fast-02 motion(standard, productive);
    will-change: transform;
  }

  .#{$prefix}--batch-actions:focus {
    @include focus-outline;
  }
  // 200% to allow tooltips
  .#{$prefix}--batch-actions--active {
    z-index: 1;
    clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
    opacity: 1;
    pointer-events: all;
    transform: translate3d(0, 0, 0);
  }

  //btns container
  .#{$prefix}--action-list {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--action-list .#{$prefix}--btn,
  .#{$prefix}--batch-summary .#{$prefix}--btn {
    color: $text-on-color;
    padding-inline: $spacing-05 $spacing-05;
    white-space: nowrap;
  }

  .#{$prefix}--action-list .#{$prefix}--btn:disabled {
    border-color: transparent;
    background-color: transparent;
    color: $text-on-color;
    opacity: 0.5;
  }

  .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon {
    position: static;
    fill: $icon-on-color;
    margin-inline-start: $spacing-03;
  }

  .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon .st0 {
    fill: none;
  }

  .#{$prefix}--batch-download {
    //makes it smaller to match other icons
    padding: convert.to-rem(1px);
  }

  // Override btn styles
  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::before,
  .#{$prefix}--action-list .#{$prefix}--btn--primary::before,
  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::after,
  .#{$prefix}--action-list .#{$prefix}--btn--primary::after {
    display: none;
  }

  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus,
  .#{$prefix}--batch-summary .#{$prefix}--btn--primary:focus {
    outline: 2px solid $layer;
    outline-offset: convert.to-rem(-2px);
  }

  // cancel btn pseudo element
  .#{$prefix}--action-list
    .#{$prefix}--btn--primary:nth-child(3):hover
    + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before,
  .#{$prefix}--action-list
    .#{$prefix}--btn--primary:nth-child(3):focus
    + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
    opacity: 0;
  }

  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
    position: absolute;
    display: block;
    border: none;
    background-color: $text-on-color;
    block-size: $spacing-05;
    content: '';
    inline-size: convert.to-rem(1px);
    //visually 16px spacing is 1px too low
    inset-block-start: convert.to-rem(15px);
    inset-inline-start: 0;
    opacity: 1;
    transition: opacity $duration-fast-02 motion(standard, productive);
  }

  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
    opacity: 0;
    transition: opacity $transition-base $standard-easing;
  }

  // items selected text
  .#{$prefix}--batch-summary {
    position: sticky;
    z-index: 100000;
    display: flex;
    align-items: center;
    padding: 0 $spacing-05;
    background-color: $background-brand;

    color: $text-on-color;
    inset-inline-start: 0;
    min-block-size: 3rem;
  }

  .#{$prefix}--batch-summary__scroll {
    box-shadow: 0.5px 0 0.2px $link-primary-hover;
  }

  .#{$prefix}--batch-summary__para {
    @include type-style('body-compact-01');
  }

  .#{$prefix}--batch-summary__divider {
    padding-inline-start: $spacing-03;
  }

  //-------------------------------------------------
  //SMALL TOOLBAR
  //-------------------------------------------------

  .#{$prefix}--table-toolbar--sm {
    block-size: convert.to-rem(32px);
    min-block-size: convert.to-rem(32px);

    .#{$prefix}--toolbar-search-container-expandable,
    .#{$prefix}--toolbar-search-container-persistent {
      block-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
      block-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
      block-size: convert.to-rem(32px);
      inline-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-search-container-expandable
      .#{$prefix}--search-magnifier-icon,
    .#{$prefix}--toolbar-search-container-persistent
      .#{$prefix}--search-magnifier-icon {
      padding: $spacing-03;
      block-size: convert.to-rem(32px);
      inline-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent {
      inline-size: 100%;
    }

    //hidden
    .#{$prefix}--toolbar-search-container-expandable {
      inline-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-search-container-expandable
      .#{$prefix}--search
      .#{$prefix}--search-input {
      padding: 0 $spacing-09;
    }

    //active
    .#{$prefix}--toolbar-search-container-active {
      flex: auto;
      transition: flex 175ms $standard-easing;
    }

    .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
      visibility: inherit;
    }

    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-input:focus {
      @include focus-outline('outline');

      background-color: $field-hover;
    }

    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-input:active,
    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-input:not(:placeholder-shown) {
      background-color: $field-hover;
    }

    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-magnifier-icon:focus,
    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-magnifier-icon:active,
    .#{$prefix}--toolbar-search-container-active
      .#{$prefix}--search-magnifier-icon:hover {
      @include focus-outline('reset');

      background-color: transparent;
    }

    .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
      block-size: convert.to-rem(32px);
      inline-size: convert.to-rem(32px);
      //:after element is 2rem but w/o this trigger button is for some reason 28px
      min-inline-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-content {
      block-size: convert.to-rem(32px);
    }

    .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
      block-size: 2rem;
      inline-size: 2rem;
    }
  }

  .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
    background-color: transparent;
  }

  //-------------------------------------------------
  // SMALL BATCH ACTIONS
  //-------------------------------------------------

  .#{$prefix}--table-toolbar--sm
    .#{$prefix}--batch-actions
    .#{$prefix}--action-list {
    block-size: convert.to-rem(32px);
  }

  .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
    padding: $spacing-03 0;
    block-size: convert.to-rem(32px);
    inline-size: convert.to-rem(32px);
  }

  .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
    block-size: convert.to-rem(32px);
    min-block-size: auto;
    padding-block: 0.375rem;
  }

  .#{$prefix}--table-toolbar--sm
    .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
    inset-block-start: convert.to-rem(8px);
  }

  .#{$prefix}--table-toolbar--sm
    .#{$prefix}--toolbar-action
    ~ .#{$prefix}--btn {
    overflow: hidden;
    block-size: convert.to-rem(32px);
  }

  .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
    min-block-size: 2rem;
  }
}