$item-gap: var(--wds-table-toolbar-item-gap, 12px);
$divider-gap: var(--wds-table-toolbar-divider-gap, 12px);
$label-gap: 12px;

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: var(--wds-table-toolbar-padding-block-start, 15px) 24px
    var(--wds-table-toolbar-padding-block-end, 15px);
  height: initial;
  min-height: 60px;

  &#{&}--remove-vertical-padding {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
  }

  &#{&}--mobile {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* stylelint-disable-next-line plugin/use-baseline */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &--mobile &__item-group,
  &--mobile &__item {
    flex-shrink: 0;
  }

  &__item {
    display: flex;

    &:not(:first-child) {
      margin-inline-start: $item-gap;
    }
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  &__item:has(> &__selected-count) + &__item {
    margin-inline-start: 12px;
  }

  &__item-label {
    display: flex;
    align-items: center;
    gap: $label-gap;
  }

  /* @supports hoisted to root level (instead of nesting inside &__item-label) to stay within max-nesting-depth */
  @supports (not (translate: none)) and (not (appearance: auto)) {
    &__item-label {
      gap: 0;
      margin: calc(#{$label-gap} / -2) calc(#{$label-gap} / -2);
    }

    &__item-label > * {
      margin: calc(#{$label-gap} / 2) calc(#{$label-gap} / 2);
    }
  }

  &__item-group {
    display: flex;
    align-items: center;

    &#{&}--position-end {
      justify-content: flex-end;
    }

    &#{&}--position-start {
      justify-content: flex-start;
    }

    &:last-child:not(:only-child) {
      margin-inline-start: 24px;
    }
  }

  /* doubled: dropping this re-ties Heading's compiled `.root` (margin: 0), and the title
     silently loses its inline-end gap once Heading migrates off Stylable */
  &__title#{&}__title {
    margin-inline-end: 12px;
  }

  &__divider {
    height: 18px;
    width: 1px;
    margin-inline-start: $divider-gap;
    background-color: var(
      --wds-color-black-600,
      var(--wsr-color-D60, #dfe5eb)
    );
  }

  &__divider + &__item {
    margin-inline-start: $divider-gap;
  }

  /* consumers often nest the standalone Divider inside a plain Item instead of using TableToolbar.Divider */
  /* stylelint-disable-next-line plugin/use-baseline */
  &__item-group &__item:has(hr):not(:first-child) {
    margin-inline-start: $divider-gap;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  &__item-group &__item:has(hr) + &__item {
    margin-inline-start: $divider-gap;
  }

  &__item-group
    &__item#{&}__item--layout-button
    + &__item#{&}__item--layout-button {
    margin-inline-start: var(--wds-table-toolbar-button-gap, 6px);
  }

  &__item-group
    &__item#{&}__item--layout-icon-button
    + &__item#{&}__item--layout-icon-button {
    margin-inline-start: var(--wds-table-toolbar-icon-button-gap, 6px);
  }

  &__item-group:first-child
    &__item
    + &__divider {
    margin-inline-start: var(--wds-table-toolbar-divider-gap-group-start, 24px);
  }
}