.primary {
  --pico-color: var(--pico-primary);
}

.secondary {
  /* using color: would override .secondary buttons' text color */
  --pico-color: var(--pico-secondary);
}

.contrast {
  --pico-color: var(--pico-contrast-background);
}

.success {
  /* some light hijacking to get dark/light theme variants for free */
  --pico-color: var(--pico-form-element-valid-focus-color);
}
.error {
  --pico-color: var(--pico-form-element-invalid-focus-color);
}

.blue {
  --pico-color: #01aaff;
}

.primary,
.secondary,
.contrast,
.success,
.error,
.blue {
  color: var(--pico-color);
}

.reset-color {
  --pico-color: inherit;
}

.striped-alert {
  background: repeating-linear-gradient(
    -45deg,
    var(--pico-primary),
    var(--pico-primary) 20px,
    var(--pico-primary-hover) 20px,
    var(--pico-primary-hover) 40px
  );
  --pico-color: var(--pico-contrast-inverse);
  font-weight: bold;
  text-align: center;
  padding: 0.5em;
  border-radius: 10px;
}

.btn-danger {
  --pico-background-color: var(--pico-form-element-invalid-focus-color);
  --pico-border-color: var(--pico-form-element-invalid-border-color);
  --pico-color: var(--pico-secondary-inverse);
}
.btn-danger:is(:hover, :active, :focus) {
  --pico-background-color: var(--pico-form-element-invalid-border-color);
  --pico-border-color: var(--pico-form-element-invalid-border-color);
  --pico-color: var(--pico-secondary-inverse);
}
.btn-danger:focus {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
    0 0 0 var(--pico-outline-width)
      var(--pico-form-element-invalid-border-color);
}

[data-tooltip]::before,
[data-tooltip]::after {
  /* reset monospace from pre, samp, etc. */
  font-family: var(--pico-font-family-sans-serif);
  /* reset bold from strong, h1, etc. */
  font-weight: normal;
}

[data-require-validity] {
  /* disabled transition */
  transition: opacity ease-in 100ms;
}

.material-icons {
  vertical-align: middle;
  color: var(--pico-color);
  font-size: var(--pico-font-size) !important;
  cursor: default;
}

a.material-icons:hover {
  --pico-text-decoration: none !important;
  --pico-font-weight: 700;
  font-weight: var(--pico-font-weight);
}

.material-icons[data-tooltip] {
  border-bottom: none;
}

a > [data-tooltip] {
  border-bottom: none;
  cursor: inherit;
}

[role="button"]:has(> .material-icons),
[type="button"]:has(> .material-icons),
[type="reset"]:has(> .material-icons),
[type="submit"]:has(> .material-icons),
button:has(> .material-icons) {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

[role="button"] .material-icons,
[type="button"] .material-icons,
[type="reset"] .material-icons,
[type="submit"] .material-icons,
button .material-icons,
a .material-icons,
a.material-icons {
  cursor: pointer;
}

[role="button"],
[type="button"],
[type="file"]::file-selector-button,
[type="reset"],
[type="submit"],
button {
  /* a little less padding */
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}

[role="button"].chip,
button.chip {
  /* even less padding */
  --pico-form-element-spacing-vertical: 0.25rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
}
.chip:not(:first-of-type) {
  margin-inline-start: 0.25rem;
}

article header,
article footer,
.mb-0 {
  --pico-typography-spacing-vertical: 0;
}

section:last-of-type {
  --pico-block-spacing-vertical: 0;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* ^ baseline might be more correct, but center looks best with short text far apart */
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: end; /* somehow this aligns text + btns better than center/baseline */
  column-gap: var(--pico-grid-column-gap);
}

.center {
  text-align: center;
}

/* empty text that automatically goes away if a new row is appended */
table tbody > .if-table-empty:not(:only-child) {
  display: none;
}
table tbody > .if-table-empty td {
  text-align: center;
  font-style: italic;
  color: var(--pico-secondary);
}
table tbody > .if-table-empty td .material-icons {
  vertical-align: text-bottom;
}

tr:has(> td input.row-selection:checked) {
  background-color: var(--pico-table-border-color);
  --pico-background-color: var(--pico-table-border-color);
}

table:not(:has(> tbody > tr > td input.row-selection:checked))
  > thead
  > tr
  > th.requires-row-selection {
  pointer-events: none;
  --pico-color: var(--pico-secondary);
}

.multiline {
  white-space: pre-line;
}

ul.less-padding {
  /* can't be an inline style or it'd have highest priority; no overriding */
  padding-inline-start: 25px; /* browser default is 50px */
}

ul.collapse-if-single > li:only-child {
  list-style-type: none;
}
ul.collapse-if-single:has(> li:only-child) {
  display: inline-block;
  margin-bottom: 0;
  padding-inline-start: 0;
}
ul.collapse-if-single:has(> li:only-child) ul.collapse-if-single {
  margin-bottom: 0;
}

/* opposite of .htmx-indicator; hidden if a request is being sent */
.htmx-anti-indicator {
  visibility: visible;
}
.htmx-request.htmx-anti-indicator,
.htmx-request .htmx-anti-indicator {
  visibility: hidden;
  text-align: center;
}

/* Pico loading spinner in a div with no children */
div[aria-busy="true"]:not(:has(*))::before {
  visibility: visible; /* counter-act .htmx-anti-indicator, if applicable */
  font-size: 3rem;
}
div[aria-busy="true"]:not(:has(*)) {
  text-align: center;
}