.BackgroundTasks {
  @apply relative mx-4 my-6 overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-lg;

  .TaskDisplay {
    @apply flex justify-between px-6 py-3 ![grid-column:fullbleed-start/fullbleed-end];
  }

  .TaskDisplay h2 {
    @apply btu-heading-5 content-center;
  }

  .TaskDisplay form {
    @apply flex gap-2;
  }

  .TaskDisplay button {
    @apply btu-button btu-button-outline btu-button-gray btu-button-sm bg-white before:btu-icon;

    &:where([value='PauseAll']) {
      @apply before:btu-icon-circle-pause;
    }
    &:where([value='ResumeAll']) {
      @apply before:btu-icon-circle-play;
    }
    &:where([value='StopAll']) {
      @apply before:btu-icon-circle-stop;
    }
  }
}
