public/app/assets/stylesheets/archivesspace/helpers.scss
/**
 * Atomic/functional/utility classes, add as needed
 */
:root {
  --bootstrap-horizontal-white-space-unit: 15px;
  --bootstrap-rounded-border-radius: 0.25rem;
  --bootstrap-sans: 'Helvetica Neue', helvetica, arial, sans-serif;
  --bootstrap-default-white-hover: #eee;
  --bootstrap-default-card-heading-bg-color: #f5f5f5;
  --bootstrap-4-col-horizontal-padding: 15px;
  --default-border-color: #ccc;
  --default-border: 1px solid var(--default-border-color);
}

.min-h-screen {
  min-height: 100dvh;
}

.h-max {
  height: max-content;
}

.bottom-0 {
  bottom: 0;
}

.flex {
  display: flex;
}

.items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.mt15px {
  margin-top: var(--bootstrap-horizontal-white-space-unit);
}

.mr15px {
  margin-right: var(--bootstrap-horizontal-white-space-unit);
}

.mb0 {
  margin-bottom: 0;
}

.pb1 {
  padding-bottom: 0.5rem;
}

.px-bs {
  padding-right: var(--bootstrap-4-col-horizontal-padding);
  padding-left: var(--bootstrap-horizontal-white-space-unit);
}

.gap-2 {
  gap: 0.5rem;
}

.gap-x-3 {
  column-gap: 1rem;
}

.gap-x-8 {
  column-gap: 2rem;
}

.gap-y-3 {
  row-gap: 1rem;
}

.rounded-bottom {
  border-bottom-left-radius: var(--bootstrap-rounded-border-radius);
  border-bottom-right-radius: var(--bootstrap-rounded-border-radius);
}

.bg-lightgray {
  background-color: var(--bootstrap-default-card-heading-bg-color);
}

.bg-secondary {
  background-color: $secondary-color !important;
}

.border-top-default {
  border-top: 1px solid var(--default-border-color);
}

.wrap-anywhere {
  overflow-wrap: anywhere;
}

.clear-both {
  clear: both;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hover-pointer:hover {
  cursor: pointer;
}

.outline {
  outline: 0.25rem solid $primary-color;
}
