/* Flex */
.grow {
  flex-grow: 1;
}
.flex-group {
  --_gap: var(--gap, 1rem);
  --_wrap: var(--wrap, wrap);
  --_width: var(--width, fit-content);
  --_align-items: var(--align-items, center);

  display: flex;
  flex-direction: row;
  align-items: var(--_align-items);
  flex-wrap: var(--_wrap);
  gap: calc(var(--_gap) / 2) var(--_gap);
  width: var(--_width);

  &.no-wrap {
    --wrap: nowrap;
    --align-items: start;
  }

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

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

.align-items-bottom {
  --align-items: flex-end;
}

.flex-group.compact {
  --gap: 0.5rem;
}

.flex-group.large {
  --gap: 1.5rem;
}

.flex-between {
  --_gap: var(--gap, 1rem);
  --_align-items: var(--align-items, center);

  display: flex;
  justify-content: space-between;
  align-items: var(--_align-items);
  flex-wrap: wrap;
  gap: var(--_gap);

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

.wrap {
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.flex-column {
  --_gap: var(--gap, 0.25rem);

  display: flex;
  flex-direction: column;
  gap: var(--_gap);
}

/* Grid */

.rows,
.large-rows,
.compact-rows {
  --_spacing: var(--spacing, 0.5em);
  display: grid;
  gap: var(--_spacing);
  height: fit-content;

  > *:not(:first-child) {
    border-top: 1px solid var(--clr-separators);
    padding-top: var(--_spacing);
  }
}

.rows {
  --spacing: 0.5em;
}
.large-rows {
  --spacing: 1em;
}
.compact-rows {
  --spacing: 0.25em;
}

.even-columns {
  --gap: 1rem;
  display: grid;
  gap: var(--gap);

  @media screen and (min-width: 768px) {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  &--divided {
    @media screen and (min-width: 768px) {
      > *:not(:last-child) {
        border-right: 1px solid var(--clr-neutral-300);
        padding-right: var(--gap);
      }
    }
  }
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

/* Positioning */

.relative {
  position: relative;
}

/* Display */

.hidden {
  display: none;
}

.hidden-on-mobile {
  @media screen and (max-width: 1000px) {
    display: none;
  }
}

.hidden-on-desktop {
  @media screen and (min-width: 1000px) {
    display: none;
  }
}

.block {
  display: block;
}

/* Margins */

.margin-block {
  margin-block: var(--block-space);
}

.m-auto {
  margin: auto;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-8 {
  margin-left: 2rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.my-1 {
  margin-block: 0.25em;
}

.my-2 {
  margin-block: 0.5em;
}

.compact-paragraphs p {
  margin-block: 0.5em;
}

.flow > *:not(:first-child) {
  margin-top: var(--block-space);
}

.compact-flow > *:not(:first-child) {
  margin-top: calc(var(--block-space) / 2);
}

.large-flow > *:not(:first-child) {
  margin-top: calc(var(--block-space) * 2);
}

/* Padding */

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.py-1 {
  padding-block: 0.25em;
}

.py-4 {
  padding-block: 1rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

/* Typography */

.left-align {
  text-align: left;
}

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

.right-align {
  text-align: right;
}

.text-decoration-none {
  text-decoration: none;
}

.fw-normal {
  font-weight: var(--fw-normal);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.fs-small {
  font-size: 0.75rem;
}

.fs-normal {
  font-size: 1rem;
}

.fs-large {
  font-size: 1.25rem;
}

/* Borders */

.border {
  --_border-color: var(--border-color, var(--clr-separators));
  border: 1px solid var(--_border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--clr-separators);
}

.border-left {
  border-left: 1px solid var(--clr-separators);
}

/* Size */

.w-4 {
  width: 1rem;
}

.w-6 {
  width: 2rem;
}

.w-12 {
  width: 4rem;
}

.w-16 {
  width: 5rem;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* Accessibility */

.screen-reader-only {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Sorting */

.handle {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
}

.dragged-item .hidden-when-dragged {
  display: none;
}

/* Misc */

.highlight-on-hover {
  transition: background 200ms ease-in-out;
}

.highlight-on-hover:hover {
  background: var(--clr-subtle);
}

.scroll-y {
  overflow-y: scroll;
}

.truncate {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot {
  --_background: var(--background, red);
  --_size: var(--size, 0.5rem);

  display: inline-block;
  width: var(--_size);
  height: var(--_size);
  border-radius: 50%;
  background: var(--_background);
}

.fa-solid,
.fa-regular {
  --_color: var(--color, var(--clr-ink));

  color: var(--_color) !important;
}