//
// Copyright IBM Corp. 2016, 2018
//
// 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 '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/vars';

@include exports('data-table-v2-action') {
  .#{$prefix}--table-toolbar {
    display: flex;
    padding-top: $spacing-xs;
    padding-bottom: $spacing-xs;
    width: 100%;
    position: relative;

    .#{$prefix}--search-input {
      position: relative;

      &:focus {
        box-shadow: inset 0px 0px 0px 1px $brand-01;
        outline: 0;
      }
    }
  }

  .#{$prefix}--toolbar-content {
    display: flex;
    margin-left: auto;
  }

  .#{$prefix}--toolbar-action {
    @include button-reset;
    cursor: pointer;
    padding-left: $spacing-sm;
    padding-right: $spacing-sm;

    &:hover {
      > .#{$prefix}--toolbar-action__icon {
        fill: $hover-secondary;
      }
    }

    &:focus {
      @include focus-outline;
      > .#{$prefix}--toolbar-action__icon {
        fill: $hover-secondary;
      }
    }

    &:active {
      > .#{$prefix}--toolbar-action__icon {
        fill: $hover-secondary;
      }
    }

    &:last-of-type {
      padding-right: 0;
    }

    ~ .#{$prefix}--btn {
      margin-left: $spacing-sm;
      margin-right: $spacing-sm;
    }
  }

  .#{$prefix}--toolbar-action__icon {
    height: rem(16px);
    width: auto;
    max-width: 16px;
    fill: $ui-05;
    transition: $transition--base;
  }

  .#{$prefix}--batch-actions {
    display: flex;
    align-items: center;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    padding-left: $spacing-lg;
    padding-right: $spacing-lg;
    width: 100%;
    height: 100%;
    z-index: z('header');
    background-color: transparent;
    transition: opacity 200ms $carbon--standard-easing, background-color 200ms $carbon--standard-easing;
    pointer-events: none;
    visibility: hidden;

    &:focus {
      @include focus-outline;
    }

    .#{$prefix}--btn {
      color: $ui-01;
    }

    .#{$prefix}--btn__icon {
      fill: $ui-01;
    }

    .#{$prefix}--btn--ghost {
      &:hover,
      &:focus {
        background-color: $ui-01;
        color: $brand-01;

        .#{$prefix}--btn__icon {
          fill: $brand-01;
        }
      }

      &:focus {
        border: 2px solid $brand-01;
        outline: 2px solid $ui-02;
      }
    }
  }

  .#{$prefix}--batch-actions--active {
    visibility: visible;
    background-color: $brand-01;
    pointer-events: all;
    transition: opacity 200ms cubic-bezier(0.5, 0, 0.1, 1), background-color 200ms cubic-bezier(0.5, 0, 0.1, 1);
    opacity: 1;
  }

  .#{$prefix}--action-list {
    margin-left: -0.5rem;
  }

  .#{$prefix}--action-icons {
    margin-left: auto;
    svg {
      padding: 0 $spacing-sm;
      fill: $ui-01;
      height: rem(16px);
      width: auto;
    }
  }

  .#{$prefix}--batch-summary {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: $ui-01;
  }

  .#{$prefix}--batch-summary__para {
    @include typescale('zeta');
    margin-right: $spacing-lg;
  }

  .#{$prefix}--batch-summary__cancel {
    @include button-reset(auto);
    @include typescale('zeta');
    color: $ui-01;
    border-bottom: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    transition: border $transition--base $carbon--standard-easing;

    &:hover,
    &:focus {
      border-bottom: 1px solid $ui-01;
    }
  }

  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container,
  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content {
    opacity: 1;
    transition: opacity $transition--base;
  }

  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
    opacity: 0;
  }
}