@import './variables';

$item-wrapper-loading-height: rem(64px);

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

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

.FiltersWrapper {
  padding: resource-list(header-padding-small)
    resource-list(header-padding-small) spacing();

  @include breakpoint-after(resource-list(breakpoint-small)) {
    padding: spacing();
  }

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

.HeaderOuterWrapper {
  position: relative;
  background-color: color('white');
  z-index: resource-list(header-outer-wrapper-stacking-order);

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

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

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

.FiltersWrapper + .HeaderOuterWrapper {
  margin-top: -1 * spacing();
}

.HeaderWrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: resource-list(header-min-height);
  padding: resource-list(header-vertical-padding)
    resource-list(header-padding-small);
  background-color: color('white');

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

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

.HeaderContentWrapper {
  position: absolute;
  z-index: resource-list(content-wrapper-stacking-order);
  right: resource-list(header-padding-small);
  left: resource-list(header-padding-small);
  display: flex;
  min-height: resource-list(header-content-min-height);
  opacity: 1;
  transition: opacity easing() duration();

  .HeaderWrapper-inSelectMode & {
    opacity: 0;
  }

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

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

  .HeaderWrapper-hasSelect & {
    padding-right: spacing(tight);
  }

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

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

.SortLabel {
  margin-right: spacing(tight);
  display: none;

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

.HeaderTitleWrapper {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  padding-left: spacing(extra-tight);
  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: 60px;
  padding-bottom: 60px;

  @media screen and (max-height: 600px) {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.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: border();
  }
}

.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: resource-list(overlay-background);
}

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