@import '../../styles/common';
@import '../ResourceList/variables';

$bulk-actions-button-stacking-order: (
  focused: 20,
);

.Group {
  @include text-style-input;
  width: 100%;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;

  &.Group-measuring {
    transition: none;
    display: flex;
    opacity: 0;
  }
}

.Group-entering,
.Group-exiting {
  opacity: 0;
  display: flex;
}

.Group-entered {
  opacity: 1;
  display: flex;
}

.Group-exited {
  opacity: 0;
  display: none;
}

.Group-smallScreen {
  @include page-after-resource-list-small {
    display: none;
  }
}

.Group-largeScreen {
  display: none;

  @include page-after-resource-list-small {
    display: flex;

    &.Group-exiting {
      transition: none;
    }

    &.Group-exited {
      opacity: 0;
      display: none;
    }
  }
}

.ButtonGroupWrapper {
  width: 100%;
  max-width: 100%;

  // We need the first item of button group on small screen to fill the space
  @include page-before-resource-list-small {
    // stylelint-disable-next-line, selector-max-combinators, selector-max-type
    > div > div:first-child {
      flex: 1 1 auto;
    }
  }

  @include page-after-resource-list-small {
    width: auto;
    justify-content: flex-start;
    margin-right: var(--p-space-2);
  }

  .Group-measuring & {
    position: absolute;
    width: auto;
  }
}

.BulkActionButton {
  white-space: nowrap;
}

.CheckableContainer {
  flex: 1 1 0;
}

.disabled {
  @include base-button-disabled;
  cursor: default;
  pointer-events: none;
}

.PaginatedSelectAll {
  padding: var(--p-space-1) var(--p-space-0);
}

.Slide {
  will-change: transform;
  transform: translateY(0);
  transition: transform var(--p-ease) var(--p-duration-200);
}

.Slide-appear,
.Slide-enter,
.Slide-exit {
  transform: translateX(calc(-1 * var(--p-space-10)));
}

.Slide-appearing,
.Slide-entering {
  transform: translateY(0);
}