// Don't remove this magic comment. See gulpfile.js.
// @import "../../sass-utilities/all";
$pf-c-data-toolbar--breakpoint-map: build-breakpoint-map("base", "md", "lg", "xl", "2xl");
$pf-c-data-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");

// Data toolbar
.pf-c-data-toolbar {
  --pf-c-data-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-data-toolbar--RowGap: var(--pf-global--spacer--lg);
  --pf-c-data-toolbar--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-data-toolbar--PaddingBottom: var(--pf-global--spacer--md);

  // Content
  --pf-c-data-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-data-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);

  // Expandable content
  --pf-c-data-toolbar__expandable-content--PaddingTop: var(--pf-c-data-toolbar--RowGap);
  --pf-c-data-toolbar__expandable-content--PaddingRight: var(--pf-c-data-toolbar__content--PaddingRight);
  --pf-c-data-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-data-toolbar__expandable-content--PaddingLeft: var(--pf-c-data-toolbar__content--PaddingLeft);
  --pf-c-data-toolbar__expandable-content--lg--PaddingRight: 0;
  --pf-c-data-toolbar__expandable-content--lg--PaddingBottom: 0;
  --pf-c-data-toolbar__expandable-content--lg--PaddingLeft: 0;
  --pf-c-data-toolbar__expandable-content--ZIndex: var(--pf-global--ZIndex--xs);
  --pf-c-data-toolbar__expandable-content--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
  --pf-c-data-toolbar__expandable-content--BackgroundColor: var(--pf-c-data-toolbar--BackgroundColor);

  @media screen and (min-width: $pf-global--breakpoint--lg) {
    --pf-c-data-toolbar__expandable-content--PaddingRight: var(--pf-c-data-toolbar__expandable-content--lg--PaddingRight);
    --pf-c-data-toolbar__expandable-content--PaddingBottom: var(--pf-c-data-toolbar__expandable-content--lg--PaddingBottom);
    --pf-c-data-toolbar__expandable-content--PaddingLeft: var(--pf-c-data-toolbar__expandable-content--lg--PaddingLeft);
  }

  // Expanded
  --pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap: var(--pf-global--gutter);

  // Chip container
  --pf-c-data-toolbar__group--m-chip-container--MarginTop: calc(var(--pf-global--spacer--md) * -1);
  --pf-c-data-toolbar__group--m-chip-container__item--MarginTop: var(--pf-global--spacer--md);

  // Base spacer - shared value
  --pf-c-data-toolbar--spacer--base: var(--pf-global--spacer--md);

  // Spacer values
  --pf-c-data-toolbar__item--spacer: var(--pf-c-data-toolbar--spacer--base);
  --pf-c-data-toolbar__group--spacer: var(--pf-c-data-toolbar--spacer--base);

  // Toggle group
  --pf-c-data-toolbar__group--m-toggle-group--spacer: var(--pf-global--spacer--sm);

  // update
  --pf-c-data-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-c-data-toolbar__group--spacer);

  // Icon button group
  --pf-c-data-toolbar__group--m-icon-button-group--spacer: var(--pf-c-data-toolbar__group--spacer);
  --pf-c-data-toolbar__group--m-icon-button-group--space-items: 0;

  // Button group
  --pf-c-data-toolbar__group--m-button-group--spacer: var(--pf-c-data-toolbar__group--spacer);
  --pf-c-data-toolbar__group--m-button-group--space-items: var(--pf-global--spacer--sm);

  // Filter group
  --pf-c-data-toolbar__group--m-filter-group--spacer: var(--pf-c-data-toolbar__group--spacer);
  --pf-c-data-toolbar__group--m-filter-group--space-items: 0;

  // remove during breaking change
  // Separator
  --pf-c-data-toolbar__item--m-separator--spacer: var(--pf-c-data-toolbar__item--spacer);
  --pf-c-data-toolbar__item--m-separator--BackgroundColor: var(--pf-global--BorderColor--100);
  --pf-c-data-toolbar__item--m-separator--Width: var(--pf-global--BorderWidth--md);
  --pf-c-data-toolbar__item--m-separator--Height: var(--pf-global--FontSize--lg);

  // end - remove during breaking change

  // Overflow menu item
  --pf-c-data-toolbar__item--m-overflow-menu--spacer: var(--pf-c-data-toolbar__item--spacer);

  // Bulk select
  --pf-c-data-toolbar__item--m-bulk-select--spacer: var(--pf-global--spacer--lg);

  // Search filter
  --pf-c-data-toolbar__item--m-search-filter--spacer: var(--pf-global--spacer--sm);

  // Chip group
  --pf-c-data-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);

  // Label
  --pf-c-data-toolbar__item--m-label--spacer: var(--pf-c-data-toolbar__item--spacer);
  --pf-c-data-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);

  // Toggle
  --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);

  // Divider
  --pf-c-data-toolbar--c-divider--m-vertical--spacer: var(--pf-c-data-toolbar--spacer--base);

  position: relative;
  row-gap: var(--pf-c-data-toolbar--RowGap);
  display: grid;
  padding-top: var(--pf-c-data-toolbar--PaddingTop);
  padding-bottom: var(--pf-c-data-toolbar--PaddingBottom);
  background-color: var(--pf-c-data-toolbar--BackgroundColor);
}

// Divider
.pf-c-data-toolbar__content-section,
.pf-c-data-toolbar__group {
  // set this var here so specificity is 20
  > .pf-c-divider {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar--c-divider--m-vertical--spacer);
  }

  > .pf-c-divider.pf-m-vertical {
    margin-right: var(--pf-c-data-toolbar--spacer);

    &:last-child {
      --pf-c-data-toolbar--spacer: 0;
    }
  }
}

// Group
.pf-c-data-toolbar__group {
  --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--spacer);

  display: flex;
  align-items: center;
  margin-right: var(--pf-c-data-toolbar--spacer);

  // Button group
  &.pf-m-button-group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-button-group--spacer);

    > * {
      --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-button-group--space-items);
    }
  }

  // Icon button group
  &.pf-m-icon-button-group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-icon-button-group--spacer);

    > * {
      --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-icon-button-group--space-items);
    }
  }

  // Filter group
  &.pf-m-filter-group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-filter-group--spacer);

    > * {
      --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-filter-group--space-items);
    }

    > * + * {
      margin-left: -1px;
    }
  }

  // Toggle group
  &.pf-m-toggle-group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-toggle-group--spacer);

    .pf-c-data-toolbar__group,
    .pf-c-data-toolbar__item {
      display: none;
      visibility: hidden;
    }

    .pf-c-data-toolbar__toggle {
      display: inline-block;
      visibility: visible;
    }
  }

  // If pagination is sibling of align-right
  &.pf-m-align-right ~ *,
  &.pf-m-align-right ~ .pf-c-data-toolbar__item,
  &.pf-m-align-right ~ .pf-c-data-toolbar__group {
    margin-left: 0;
  }

  // &:last-child must always come last for spacing system to work properly, as it has the same specificity as the preceding modifiers
  &:last-child {
    --pf-c-data-toolbar--spacer: 0;
  }
}

// Item
.pf-c-data-toolbar__item {
  --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--spacer);

  margin-right: var(--pf-c-data-toolbar--spacer);

  // remove during breaking change
  // Separator
  &.pf-m-separator {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-separator--spacer);

    align-self: center;
    width: var(--pf-c-data-toolbar__item--m-separator--Width);
    height: var(--pf-c-data-toolbar__item--m-separator--Height);
    background-color: var(--pf-c-data-toolbar__item--m-separator--BackgroundColor);
  }

  // end - remove during breaking change

  // Overflow menu
  &.pf-m-overflow-menu {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-overflow-menu--spacer);
  }

  // Bulk select
  &.pf-m-bulk-select {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-bulk-select--spacer);
  }

  // Search filter
  &.pf-m-search-filter {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-search-filter--spacer);
  }

  // Search filter
  &.pf-m-chip-group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-chip-group--spacer);
  }

  // Label
  &.pf-m-label {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--m-label--spacer);

    font-weight: var(--pf-c-data-toolbar__item--m-label--FontWeight);
  }

  // Total items
  &.pf-m-pagination {
    margin-left: auto;

    .pf-c-pagination {
      flex-wrap: nowrap;
    }
  }

  // If pagination is sibling of align-right
  &.pf-m-align-right ~ *,
  &.pf-m-align-right ~ .pf-c-data-toolbar__item,
  &.pf-m-align-right ~ .pf-c-data-toolbar__group {
    margin-left: 0;
  }

  // &:last-child must always come last for spacing system to work properly, as it has the same specificity as the preceding modifiers
  &:last-child {
    --pf-c-data-toolbar--spacer: 0;
  }
}

.pf-c-data-toolbar__content,
.pf-c-data-toolbar__content-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

// Content
.pf-c-data-toolbar__content {
  position: relative;
  padding-right: var(--pf-c-data-toolbar__content--PaddingRight);
  padding-left: var(--pf-c-data-toolbar__content--PaddingLeft);
}

// Content section
.pf-c-data-toolbar__content-section {
  width: 100%;
}

// Expandable content
.pf-c-data-toolbar__expandable-content {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--pf-c-data-toolbar__expandable-content--ZIndex);
  display: none;
  width: 100%;
  padding: var(--pf-c-data-toolbar__expandable-content--PaddingTop) var(--pf-c-data-toolbar__expandable-content--PaddingRight) var(--pf-c-data-toolbar__expandable-content--PaddingBottom) var(--pf-c-data-toolbar__expandable-content--PaddingLeft);
  visibility: hidden;
  background-color: var(--pf-c-data-toolbar__expandable-content--BackgroundColor);
  box-shadow: var(--pf-c-data-toolbar__expandable-content--BoxShadow);

  @media screen and (min-width: $pf-global--breakpoint--lg) {
    position: static;
    box-shadow: none;
  }

  &.pf-m-expanded {
    display: grid;
    grid-row-gap: var(--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap);
    visibility: visible;
  }

  .pf-c-data-toolbar__group,
  .pf-c-data-toolbar__item {
    --pf-c-data-toolbar--spacer: 0;
  }

  .pf-c-data-toolbar__group {
    display: grid;
    grid-row-gap: var(--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap);
  }

  .pf-m-label {
    display: none;
    visibility: hidden;
  }
}

// Chip container
// extend chip container layout access to __content to allow custom configurations
.pf-c-data-toolbar__content.pf-m-chip-container,
.pf-c-data-toolbar__group.pf-m-chip-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--pf-c-data-toolbar__group--m-chip-container--MarginTop);
  grid-row-gap: 0;

  .pf-c-data-toolbar__item {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__item--spacer);

    margin-top: var(--pf-c-data-toolbar__group--m-chip-container__item--MarginTop);
  }

  .pf-c-data-toolbar__group {
    --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--spacer);

    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 0;
  }

  .pf-c-data-toolbar__group:last-child,
  .pf-c-data-toolbar__item:last-child {
    --pf-c-data-toolbar--spacer: 0;
  }
}

.pf-c-data-toolbar .pf-c-chip-group:last-child {
  --pf-c-chip-group--MarginRight: 0;
}

.pf-c-data-toolbar .pf-c-chip-group li:last-child {
  --pf-c-chip-group__li--m-toolbar--MarginRight: 0;
}

.pf-c-data-toolbar__toggle.pf-m-expanded .pf-c-button.pf-m-plain {
  color: var(--pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color);
}

// Toggle group modifiers
@each $breakpoint, $breakpoint-value in $pf-c-data-toolbar--breakpoint-map {
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

  @include pf-apply-breakpoint($breakpoint, $pf-c-data-toolbar--breakpoint-map) {
    .pf-m-toggle-group.pf-m-show#{$breakpoint-name} {
      --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--m-toggle-group--m-show--spacer);

      .pf-c-data-toolbar__group,
      .pf-c-data-toolbar__item {
        display: flex;
        flex: 0 1 auto;
        visibility: visible;
      }

      .pf-c-data-toolbar__toggle {
        display: none;
        visibility: hidden;
      }
    }
  }
}

// stylelint-disable max-nesting-depth, no-duplicate-selectors
.pf-c-data-toolbar {
  // Build spacing modifiers
  @each $breakpoint, $breakpoint-value in $pf-c-data-toolbar--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");


    @include pf-apply-breakpoint($breakpoint, $pf-c-data-toolbar--breakpoint-map) {
      // Align right
      .pf-c-data-toolbar__item.pf-m-align-right#{$breakpoint-name},
      .pf-c-data-toolbar__group.pf-m-align-right#{$breakpoint-name} {
        margin-left: auto;
      }

      // Align left
      .pf-c-data-toolbar__item.pf-m-align-left#{$breakpoint-name},
      .pf-c-data-toolbar__group.pf-m-align-left#{$breakpoint-name} {
        margin-left: 0;
      }

      // Hidden modifier
      .pf-m-hidden#{$breakpoint-name} {
        display: none;
        visibility: hidden;
      }

      // Visible modifier
      .pf-m-visible#{$breakpoint-name} {
        display: flex;
        visibility: visible;
      }
    }
  }

  // .pf-m-space-items-{size}{-on-breakpoint}
  @each $breakpoint, $breakpoint-value in $pf-c-data-toolbar--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-apply-breakpoint($breakpoint, $pf-c-data-toolbar--breakpoint-map) {
      @each $spacer, $spacer-value in $pf-c-data-toolbar--spacer-map {
        .pf-m-space-items-#{$spacer}#{$breakpoint-name} {
          > * {
            --pf-c-data-toolbar--spacer: #{$spacer-value};
          }

          > :last-child {
            --pf-c-data-toolbar--spacer: 0;
          }
        }
      }
    }
  }

  // .pf-m-spacer-{size}{-on-breakpoint}
  @each $breakpoint, $breakpoint-value in $pf-c-data-toolbar--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-apply-breakpoint($breakpoint, $pf-c-data-toolbar--breakpoint-map) {
      @each $spacer, $spacer-value in $pf-c-data-toolbar--spacer-map {
        .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
          --pf-c-data-toolbar--spacer: #{$spacer-value};

          &:last-child {
            --pf-c-data-toolbar--spacer: #{$spacer-value};
          }
        }
      }
    }
  }
}

// Override .pf-m-toggle-group margin modifier
.pf-c-data-toolbar__content-section > :last-child {
  --pf-c-data-toolbar--spacer: 0;
}
