.bulk-actions__sticky-container {
  position: sticky;
  position: -webkit-sticky;
  top: calc(9.5rem + env(safe-area-inset-top));
  z-index: 9;

  .search__results & {
    margin-left: -1rem;
  }
}

.bulk-actions__selected-count {
  &[data-count="1"]::before {
    content: attr(data-count) " " attr(data-singular);
  }

  &::before {
    content: attr(data-count) " " attr(data-plural);
  }
}

.bulk-actions__menu {
  position: absolute;
  width: 21rem;
  top: -9rem;
  right: -1rem;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  font-size: 1.4rem;

  @media (min-width: 40em) {
    width: 22rem;
    right: 0;
  }

  @media (min-width: 60em) {
    width: calc(100% + 1rem);
    left: -0.5rem;
    padding: 0.5rem;

    .search__results & {
      padding: 0.5rem 0;
    }
  }

  [open] > & {
    animation: slide-in-from-bottom 0.2s ease both;
  }

  .bulk-actions--filings & { display: none; }

  .sheet & {
    @media (min-width: 60em) {
      width: calc(100% + (var(--sheet-padding) * 2));
      left: calc(var(--sheet-padding) * -1);
      top: -10rem;
    }
  }

  .search__results & {
    width: 22rem;
    right: auto;
    left: 1rem;
  }
}

.bulk-actions__content {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
  color: var(--color-txt--reversed);
  border-radius: 2rem;
  padding: 1rem;
  position: sticky;
  top: 0;
  overflow-y: auto;

  @media (min-width: 60em) {
    &:not(.search__results) & {
      display: flex;
    }
  }

  .search__results & {
    max-height: 59vh;
  }
}

.bulk-actions__buttons {
  max-height: calc(100vh - 10rem);

  @media (max-width: 39.95em) { max-height: calc(100vh - 16rem); }

  @media (min-width: 60em) {
    display: flex;
    padding-right: 2em;

    .search__results & {
      display: block;
      padding-right: 0;
    }
  }
}

.bulk-actions__close-btn {
  position: absolute !important;
  top: 1rem;
  left: 1rem;

  @media (min-width: 60em) {
    &:not(.search__results) & {
      left: auto;
      right: 1.5rem;
      top: 1.5rem;
    }
  }
}

.bulk-actions {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  height: 2.25em;
  width: 2.25em;
  border-radius: 1.125em;
  z-index: 2;

  @media (min-width: 40em) { top: 0;}

  .bulk-actions__trigger--bundled & {
    margin-top: -0.1em;
    border-radius: 0.35rem;
    border: 2px solid transparent;
  }
}

.bulk-actions__trigger {
  box-shadow: none !important;
  .bulk-selection--active & .avatar { visibility: hidden; }
}

.bulk-actions--submit {
  &:focus,
  &:hover {
    background-color: var(--color-bg--popup);
  }
}

.bulk-actions__checkbox {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: transparent;
  cursor: pointer;

  &:focus,
  &:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }

  /* Don't show outlines for mouse interactions */
  &:focus:not(:focus-visible) {
    outline: none;
  }

  .bulk-selection--active & { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%); }

  .bulk-actions__container:focus-within & {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }

  .disable-bulk-actions & {
    visibility: hidden;
    display: none;
    cursor: default;
  }

  .bulk-actions__trigger--bundled & {
    width: calc(2.25em - 4px);
    height: calc(2.25em - 4px);
    border-radius: 0.35rem;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: 100%;
    top: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
  }

  .bulk-actions__trigger--bundled & {
    &::before { border-radius: 0.15rem; }
  }

  .bulk-selection--active & {
    &::before { background-color: var(--color-bg--main); }
  }

  &:checked {
    &::before { background-color: transparent !important; }

    &::after {
      background: url("/assets/icons/selected-c8490dfc.svg") no-repeat center;
      background-size: auto 1.3em;
      border-color: var(--color-txt);
    }
  }
}