.crm-container td {
  border-left: var(--crm-table-row-border);
}

.nook-table-col.bubble {
  display: inline-block;
  border-radius: 1rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--crm-primary-color);
  white-space: nowrap;

  i {
    margin-right: 0.75rem;
  }
}

.nook-table-col.bubble:not(:last-child) {
  margin-right: 0.25rem;
}

.nook-table-col.none-selected {
  background-color: var(--nook-grey-dark);
  border: none;
}

.nook-table-col.nook-urgency {
  border: none;
}

.crm-search-display {
  --crm-search-display-margin: 1rem 0;
}

.crm-search-display th.crm-sortable-col {
  --crm-table-padding: 0.5rem 1rem 0.5rem 1.25rem;
}

.crm-search-display .crm-search-display-table-selected-row {
  --crm-striped-bg-color: #EFF6FF !important;
}

.crm-search-display .crm-search-display-table-wrapper {
  /* allow table to scroll horizontally */
  overflow-x: auto;
  width: 100%
}

/* style the 'select all/none' buttons, making the column as narrow as possible, but prevent buttons wrapping */
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select {
  width: 1%;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .btn {
  --crm-font-size: 1.25rem;
  --crm-btn-margin: 0;
  --crm-btn-height: 2rem;
  padding: 0 0.5rem !important;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .dropdown-toggle {
  --crm-font-size: 1rem;
  padding: 0 0.325rem !important;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .dropdown-menu {
  margin-top: 0.5rem;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .dropdown-menu::before {
  left: 2.5rem;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .btn-group {
  display: inline-flex !important;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .fa-square-o {
  --crm-text-color: #767676;
}
.crm-search-display .crm-search-display-table-wrapper .crm-search-result-select .fa-check-square-o {
  --crm-text-color: #083F72;
  font-weight: 600;
}

/* contains the batch action buttons */
.crm-search-display > .form-inline {
  --crm-btn-margin: 0;
  --crm-text-color: white;
  --crm-input-label-color: white;
  --crm-accordion-gap: 0;
  --crm-accordion-header-padding: 0 1.6rem;
  --crm-accordion-body-padding: 0.2rem 1.6rem 0;
  background: var(--nook-blue-darkest);
  border-radius: 6px;
  margin: var(--crm-search-display-margin);
  padding: 0.8rem 1.25rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* hide when no batch actions available */
.crm-search-display > .form-inline:not(:has(.btn)) {
  display: none;
}

.crm-search-display > .form-inline .btn-group {
  display: flex !important;
  gap: 0.5rem 1rem;
  flex-flow: row wrap;
}

.crm-search-display > .form-inline .btn-group .btn {
  border-radius: var(--crm-btn-radius) !important;
}

.crm-search-display > .form-inline .crm-search-display-selection-count {
  color: var(--crm-text-color);
  padding-right: 1.5rem;
  border-right: 1px solid rgb(255 255 255 / 0.3);
  flex: 0 0 auto;
}

/*
TODO: match colors configured in the option group

this will require EITHER generating these class styles dynamically OR
adding the actual color property with an inline style (custom column component)
*/
.nook-urgency {
  --nook-icon-color: var(--nook-c-urgency-none);
}

.nook-urgency.urgency__Low {
  --nook-icon-color: var(--nook-c-urgency-low);
}

.nook-urgency.urgency__Medium {
  --nook-icon-color: var(--nook-c-urgency-medium);
}

.nook-urgency.urgency__High {
  --nook-icon-color: var(--nook-c-urgency-high);
}