utilities.scss

.color-unset {
  color: unset;
}

.line-break-anywhere {
  line-break: anywhere;
}

.transition-200 {
  transition: 200ms;
}

.rotate-180 {
  transform: rotateX(180deg);
}

.outline-none {
  outline: none;
}

/* Print utilities
------------------------------------------------------------------------------*/
@media print {
  .no-print {
    display: none;
  }
}

/* Opacity utilities
------------------------------------------------------------------------------*/
.opacity-0 {
  opacity: 0;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-100 {
  opacity: 1;
}

/* List utilities
------------------------------------------------------------------------------*/
.list-style-inside {
  list-style: inside;
}

/* Hover utilities
------------------------------------------------------------------------------*/
.hover\:color-bg-info:hover {
  background: var(--color-bg-info);
}

/* Z-Index utilities
------------------------------------------------------------------------------*/
.-z-1 {
  z-index: -1;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}

/* Blue primary button
------------------------------------------------------------------------------*/
.btn-primary-matte {
  color: var(--color-text-inverse);
  background-color: var(--color-auto-blue-5);
  border-color: var(--color-btn-primary-border);
  box-shadow: var(--color-btn-primary-shadow),
    var(--color-btn-primary-inset-shadow);
}

.btn-primary-matte:hover {
  background-color: var(--color-auto-blue-6);
}

/* Border colors
------------------------------------------------------------------------------*/
.color-border-transparent {
  border-color: transparent !important;
}

/* Widths / Heights
------------------------------------------------------------------------------*/
.max-w-xs {
  max-width: 20rem;
}

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