/* Colors */
.color\:error        { color: var(--color-error) }
.color\:info         { color: var(--color-info) }
.color\:link         { color: var(--link-color) }
.color\:bright       { color: var(--color-bright) }
.color\:light-grey   { color: var(--color-light-grey) }
.color\:dark         { color: var(--color-dark) }
.color\:muted        { color: var(--color-muted) }
.color\:success      { color: var(--color-success) }
.color\:warning      { color: var(--color-warning) }
.color\:warning-dark { color: var(--color-warning-dark) }
.color\:transparent  { color: transparent }
.color\:orange       { color: var(--color-orange) }
.color\:purple       { color: var(--color-purple) }
.color\:font-color   { color: var(--font-color) }
.color\:inherit      { color: inherit }

/* Backgrounds - Utility */
.bg\:black {
  background-color: var(--color-black);
  --font-color: var(--color-light);
  color: var(--font-color);
}
.bg\:dark        {
  background-color: var(--color-dark);
  --font-color: var(--color-light);
  color: var(--font-color);
}
.bg\:light       { background-color: var(--color-light) }
.bg\:muted       { background-color: var(--color-muted) }
.bg\:bright      { background-color: var(--color-bright) }
.bg\:success     { background-color: var(--color-success) }
.bg\:success-light { background-color: var(--color-success-light) }
.bg\:error       { background-color: var(--color-error-light) }
.bg\:warning     { background-color: var(--color-warning-light) }
.bg\:primary     { background-color: var(--color-primary) }
.bg\:white       { background-color: white }
.bg\:transparent { background-color: transparent }
.bg\:white-alpha { background-color: var(--color-white-alpha) }
.bg\:error       {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
}
.bg\:info-mid { background-color: var(--color-info-mid) }

.hover-color\:success,
.hover-color\:info,
.hover-color\:info-light,
.hover-color\:light,
.hover-color\:danger {
  cursor: pointer
}

.hover-color\:info-light:hover { color: #a7e3ffa8 }
.hover-color\:success:hover { color: var(--color-success) }
.hover-color\:light:hover { color: var(--color-light) }
.hover-color\:info:hover { color: var(--color-info) }
.hover-color\:bright:hover { color: var(--color-bright) }
.hover-color\:danger:hover { color: var(--color-error) }

/* Backgrounds - Brand */
.bg\:light-brand { background-color: var(--color-brand-light); }
.bg\:brand-light { background-color: var(--color-brand-light) }

/* Box Shadow */
.box-shadow { box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%); }
.box-shadow\:none { box-shadow: none }
.box-shadow\:none:hover { box-shadow: none }

/* Cursors */
.cursor\:pointer { cursor: pointer }

/* Type */
.decoration\:none    { text-decoration: none }
.white-space\:nowrap { white-space: nowrap !important }
.text-wrap\:nowrap { text-wrap: nowrap }
.font-weight\:500    { font-weight: 500 }
.text\:underline     { text-decoration: underline !important }
.smallcaps           {
  font-variant: small-caps;
  letter-spacing: 0.15ch;
}

/* Columns and Flex */
.grid-column\:span-1 { grid-column: span 1 }
.grid-column\:span-2 { grid-column: span 2 }
.grid-column\:span-3 { grid-column: span 3 }
.flex { display: flex; }
.flex-direction\:column { flex-direction: column }
/* .flex > * { flex: 1 } */
.flex\:0 { flex: 0 }
.flex\:1 { flex: 1 }
.flex\:2 { flex: 2 }
.flex\:3 { flex: 3 }
.flex\:4 { flex: 4 }
.flex\:5 { flex: 5 }
.flex\:6 { flex: 6 }
.flex\:auto { flex: auto }
.flex\:none { flex: none }
.flex-grow\:0 { flex-grow: 0 !important }
.gap\:s0 { gap: var(--s0) }

/* Hovering states */
.hover-parent:hover .hover-target { opacity: 1; }
.hover-target { opacity: 0;  transition: opacity 0.2s; }

/* Padding */
.padding\:0   { padding: 0 }
.padding\:s-1 { padding: var(--s-1) }
.padding\:s-5 { padding: var(--s-5) }
.padding\:s0  { padding: var(--s0) }
.padding\:s1  { padding: var(--s1) }
.padding-top\:0 { padding-top: 0 !important } /* shouldn't have to do a ! here - fix this */
.padding-left\:s-1 { padding-left: var(--s-1)}
.padding-left\:s0 { padding-left: var(--s0)}
.padding-left\:0  { padding-left: 0}
.padding-right\:0 { padding-right: 0 !important} /* shouldn't have to do a ! here - fix this */

/* Margin */
.margin\:auto           { margin: auto }
.margin\:0           { margin: 0 }
.margin-bottom\:0    { margin-bottom: 0 }
.margin-bottom\:s0    { margin-bottom: var(--s0) }
.margin-bottom\:auto { margin-bottom: auto }
.margin-bottom\:6    { margin-bottom: var(--s6) }
.margin-left\:0      { margin-left: 0 }
.margin-left\:s-4    { margin-left: var(--s-4) }
.margin-left\:s-3    { margin-left: var(--s-3) }
.margin-left\:s3     { margin-left: var(--s3) }
.margin-left\:s4     { margin-left: var(--s4) }
.margin-top\:0       { margin-top: 0 }
.margin-top\:auto    { margin-top: auto }
.margin-top\:s0      { margin-top: var(--s0) }
.margin-top\:s1      { margin-top: var(--s1) }
.margin-top\:s2      { margin-top: var(--s2) }
.margin-top\:s-1     { margin-top: var(--s-1) }
.margin-right\:s-1   { margin-right: var(--s-1) }
.margin-right\:s-2   { margin-right: var(--s-2) }
.margin-right\:s-4   { margin-right: var(--s-4) }

/* Alignment */
.text-align\:center { text-align: center }
.text-align\:left   { text-align: left }
.text-align\:right  { text-align: right }

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

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

/* Width */
.width\:auto { width: auto }
.width\:33pct { width: 33% }
.width\:50pct { width: 50% }
.width\:80pct { width: 80% }
.width\:100pct { width: 100% }
.width\:s1 { width: var(--s1) }
.width\:s2 { width: var(--s2) }
.width\:s3 { width: var(--s3) }
.width\:s4 { width: var(--s4) }
.width\:s5 { width: var(--s5) }
.width\:fit-content { width: fit-content !important }
.width\:min-content { width: min-content }
.width\:max-content { width: max-content }
.width\:measure   { width: var(--measure) }
.width\:measure-2   { width: calc(var(--measure)/2) }
.width\:50pct-1 { width: calc(50% - calc(var(--cluster-space) / 2)) }

.min-width\:max-content { min-width: max-content }
.min-width\:measure { min-width: var(--measure) }
.max-width\:100pct { max-width: 100% }
.max-width\:85pct { max-width: 85% }
.max-width\:s3 { max-width: var(--s3) }
.max-width\:s4 { max-width: var(--s4) }
.max-width\:s5 { max-width: var(--s5) }
.max-width\:measure     { max-width: var(--measure) }
.max-width\:measure-0\.5   { max-width: calc(0.5 * var(--measure)) }
.max-width\:measure-1\.2   { max-width: calc(1.2 * var(--measure)) }
.max-width\:measure-2   { max-width: calc(2 * var(--measure)) }
.max-width\:min-content { max-width: min-content }
.max-width\:fit-content { max-width: fit-content }
.max-width\:large       { max-width: 50rem }

/* Height */
.height\:100vh { height: 100vh; }
.height\:100pct { height: 100%; }
.min-height\:100vh { min-height: 100vh }
.max-height\:100vh { max-height: 100vh }
.height\:fill-available { height: -webkit-fill-available }

/* Display */
.display\:none { display: none !important }
.display\:unset { display: unset }
.display\:block { display: block }
.display\:inline-block { display: inline-block }
.display\:inline-flex { display: inline-flex }
.visibility\:hidden { visibility: hidden }

/* Position */
.position\:absolute { position: absolute }
.position\:relative { position: relative }
.position\:fixed-full {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  overflow: scroll;
}
.position\:sticky {  position: sticky }
.top\:0 { top: 0 }

/* Borders */
.border\:all {
  border: var(--border-thin) solid var(--color-lightish);
}
.border\:none { border: none }
.border\:top {
  border-top: var(--border-thick) solid var(--color-lightish);
}
.border\:right {
  border-right: var(--border-thick) solid var(--color-lightish);
}
.border\:bottom {
  border-bottom: var(--border-thick) solid var(--color-lightish);
}
.border-radius\:0 { border-radius: 0 }

/* Disabled State */
.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Overflow */
.overflow-x\:scroll {
  overflow-x: scroll;
}
.overflow\:scroll {
  overflow: scroll;
}

/* Animations */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.shake-animation {
  animation: shake 0.45s ease-in-out;
}