.btn.btn-xs {
  padding: 1px 5px;
  font-size: 0.7rem;
}

.card > table, .card > .table-responsive > table {
  margin-bottom: 0;
}

.btn.btn-inline-edit:hover {
    background-color: rgb(0,0,0,0.1);
}

.popover {
    max-width: min(800px, 90vw);
}

/* Don't word wrap on the space before the icon. */
.pl-inline-icon::before {
    display: inline;
}

/* Add the `table-nowrap` class to a <table> to make the cells not wrap. If we
do this we should also wrap the <table> in a <div class="table-responsive"> to
allow horizontal scrolling of the table. */
.table-nowrap th {
  white-space: nowrap;
}
.table-nowrap td {
  white-space: nowrap;
}

/**
 * Remove the bottom border from the final row of the last table in a card.
 */
.card > table.table:last-of-type > tbody > tr:last-child > th,
.card > table.table:last-of-type > tbody > tr:last-child > td,
.card > .table-responsive > table.table:last-of-type tbody tr:last-child th,
.card > .table-responsive > table.table:last-of-type tbody tr:last-child td {
  border-bottom: 0;
}

/* Link icons on headers on the docs pages are only shown on hover. */
.show-heading-link-on-hover {
  display: none;
}

h1:hover .show-heading-link-on-hover,
h2:hover .show-heading-link-on-hover,
h3:hover .show-heading-link-on-hover,
h4:hover .show-heading-link-on-hover,
h5:hover .show-heading-link-on-hover,
h6:hover .show-heading-link-on-hover {
  display: inline;
}

/* Ensure that headings in card headers are styled the same as standard card headers. */
.card-header > :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.5rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
}

/******************************************************************************
* htmx loading classes
*
* There are three key elements that participate in htmx loading::after
* 1. The parent element. This needs to have the .pt-htmx-loading-parent class.
* 2. The loading indicator. This needs to have the .pt-htmx-loading-indicator
*    class and it must be an indirect child of the parent element.
* 3. The results element. This needs to have the .pt-htmx-loading-results class
*    and it must be an indirect child of the parent element.
*
* Example:
* <div class="pt-htmx-loading-parent">
*   <div class="pt-htmx-loading-indicator">Loading...</div>
*   <div class="pt-htmx-loading-results"></div>
* </div>
******************************************************************************/

/*
 * Elements with the .pt-htmx-hide-block-while-loading class are hidden if they
 * are inside an element with the .pt-htmx-loading-parent class while the parent
 * is loading, as indicated by the presence of the .htmx-request class on the
 * parent. When the parent is not loading, the child is shown with
 * `display:block`.
 */
.pt-htmx-loading-parent .pt-htmx-hide-block-while-loading {
  display: block;
}
.pt-htmx-loading-parent.htmx-request .pt-htmx-hide-block-while-loading {
  display: none;
}

/*
* Elements with the .pt-htmx-show-block-while-loading class are shown with
* `display:block` if they are inside an element with the .pt-htmx-loading-parent
* class while the parent is loading, as indicated by the presence of the
* .htmx-request class on the parent. When the parent is not loading, the child
* is hidden.
*/
.pt-htmx-loading-parent .pt-htmx-show-block-while-loading {
  display: none;
}
.pt-htmx-loading-parent.htmx-request .pt-htmx-show-block-while-loading {
  display: block;
}

/*
 * The .pt-rotation class adds a perpetual spinning animation. This is effective
 * as a loading indicator with the `<i class="bi bi-arrow-repeat
 * pt-rotation"></i>` icon.
 */
.pt-rotation {
  animation: pt-rotation 1s infinite linear;
  display: inline-block;
}
@keyframes pt-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}