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

$item-wrapper-loading-height: 64px;

@mixin disabled-pointer-events {
  pointer-events: none;
}

@mixin resource-list-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.FiltersWrapper {
  padding: var(--p-space-3) var(--p-space-3) var(--p-space-4);

  @include breakpoint-after(resource-list(breakpoint-small)) {
    padding: var(--p-space-4);
  }

  + .ResourceList {
    border-top: var(--p-border-divider);
  }
}

.HeaderOuterWrapper {
  position: relative;
  background-color: var(--p-surface);
  z-index: resource-list(header-outer-wrapper-stacking-order);
  overflow: hidden;
  border-top-left-radius: var(--p-border-radius-2);
  border-top-right-radius: var(--p-border-radius-2);

  + .ResourceList {
    border-top: var(--p-border-divider);
  }
}

.HeaderWrapper-disabled {
  @include disabled-pointer-events;
}

.HeaderWrapper-overlay {
  @include resource-list-overlay;
  z-index: resource-list(header-overlay-stacking-order);
  background-color: var(--p-overlay);
}

.FiltersWrapper + .HeaderOuterWrapper {
  margin-top: calc(-1 * var(--p-space-4));
}

.HeaderWrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: resource-list(header-min-height);
  padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-4);
  background-color: var(--p-surface);

  @include breakpoint-after(resource-list(breakpoint-small)) {
    flex-direction: row;
  }
}

.HeaderWrapper-isSticky {
  box-shadow: var(--p-shadow-base);
}

.HeaderContentWrapper {
  position: absolute;
  z-index: resource-list(content-wrapper-stacking-order);
  right: var(--p-space-3);
  left: var(--p-space-3);
  display: flex;
  min-height: resource-list(header-content-min-height);
  opacity: 1;
  transition: opacity var(--p-ease) var(--p-duration-200);

  .HeaderWrapper-inSelectMode & {
    opacity: 0;
  }

  @include breakpoint-after(resource-list(breakpoint-small)) {
    right: var(--p-space-4);
    left: var(--p-space-4);
    align-self: flex-start;
  }
}

.SortWrapper,
.AlternateToolWrapper {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;

  .HeaderWrapper-hasSelect & {
    padding-right: var(--p-space-2);
  }

  @include breakpoint-after(resource-list(breakpoint-small)) {
    position: relative;
    left: auto;
    flex: 0 1 auto;
    margin-left: var(--p-space-4);

    // stylelint-disable-next-line selector-max-class
    .HeaderWrapper-hasAlternateTool.HeaderWrapper-hasSelect &,
    .HeaderWrapper-hasSort.HeaderWrapper-hasSelect & {
      padding-right: 0;
    }
  }
}

.SortWrapper {
  @include layout-flex-fix;

  > * {
    max-width: 100%;
  }
}

.HeaderTitleWrapper {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  padding-left: var(--p-space-1);
  align-self: center;

  .HeaderWrapper-hasAlternateTool &,
  .HeaderWrapper-hasSort & {
    display: none;
  }

  @include breakpoint-after(resource-list(breakpoint-small)) {
    // stylelint-disable-next-line selector-max-class
    .HeaderWrapper-hasSelect &,
    .HeaderWrapper-hasAlternateTool.HeaderWrapper-hasSelect &,
    .HeaderWrapper-hasSort.HeaderWrapper-hasSelect & {
      display: none;
    }

    .HeaderWrapper-hasAlternateTool &,
    .HeaderWrapper-hasSort & {
      display: block;
    }
  }
}

.BulkActionsWrapper {
  position: relative;
  z-index: resource-list(bulk-actions-wrapper-stacking-order);
  width: 100%;

  @include breakpoint-after(resource-list(breakpoint-small)) {
    flex: 0 1 auto;
    align-self: flex-start;
  }
}

.CheckableButtonWrapper {
  display: none;

  @include breakpoint-after(resource-list(breakpoint-small)) {
    flex: 1;
    display: block;
  }
}

.SelectButtonWrapper {
  position: relative;
  flex: none;

  @include breakpoint-after(resource-list(breakpoint-small)) {
    display: none;
  }
}

.EmptySearchResultWrapper {
  padding-top: var(--p-space-8);
  padding-bottom: var(--p-space-8);

  @media (min-height: breakpoint(600px)) {
    padding-top: var(--p-space-16);
    padding-bottom: var(--p-space-16);
  }
}

.ResourceListWrapper {
  position: relative;
}

.ResourceList {
  position: relative;
  z-index: resource-list(list-stacking-order);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ItemWrapper {
  position: relative;
  z-index: resource-list(list-stacking-order);
  overflow: hidden;
  max-width: 100%;

  + .ItemWrapper {
    border-top: var(--p-border-divider);
  }
}

.ItemWrapper-isLoading {
  min-height: $item-wrapper-loading-height;
}

.SpinnerContainer {
  @include resource-list-overlay;
  z-index: resource-list(spinner-stacking-order);
  display: flex;
  justify-content: center;
}

.LoadingOverlay {
  @include resource-list-overlay;
  z-index: resource-list(overlay-stacking-order);
  display: flex;
  justify-content: center;
  background-color: var(--p-overlay);
}

.DisabledPointerEvents {
  @include disabled-pointer-events;
}

.disableTextSelection {
  user-select: none;
}