.invisible {
  visibility: hidden !important;
}

.noselect {
  user-select: none;
}

.bold {
  font-weight: 700;
}

.small {
  font-size: 0.8rem;
}

.xsmall {
  font-size: 0.6rem;
}

.cover {
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--border-radius);
}

.icon {
  display: inline;
  font-size: 125%;
  vertical-align: text-bottom;
  pointer-events: none;
}

.p0 {
  padding: 0 !important;
}

.badge {
  margin: 0 .4rem;
  padding: .15rem .3rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--contrast-color);
  background: var(--muted-color);
  border-radius: 50rem;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-nowrap {
  white-space: nowrap !important;
}

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

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

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

.accent-color {
  color: var(--accent-hex);
}

.color-muted {
  color: var(--muted-color) !important;
}

.margin-auto {
  margin: auto;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
}

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

.flex-wrap {
  flex-wrap: wrap !important;
}

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

.justify-content-start {
  justify-content: start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-space-between {
  justify-content: space-between;
}

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

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

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

.w-fit-content {
  min-width: fit-content;
  max-width: fit-content;
}

.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 {  width: 100%; }

.rounded {
  border-radius: var(--border-radius);
}

.float-left {
  float: left;
}

.empty {
  margin: 5rem;
  text-align: center;

  svg {
  	font-size: 8em;
  	color: #222;
  }
}

[aria-busy="true"]:not(input, select, textarea, html, form) {
  white-space: nowrap;

  &::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
    background-size: 1em auto;
    background-repeat: no-repeat;
    content: "";
    vertical-align: -0.125em;
  }

  &:not(:empty) {
    &::before {
      margin-inline-end: .5rem;
    }
  }

  &:empty {
    text-align: center;
  }
}

button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"],
a {
  &[aria-busy="true"] {
    pointer-events: none;
  }
}

@media (max-width: 850px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 850px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1450px) {
  .hide-tablet {
    display: none !important;
  }
}