/* || UTILITY CLASSES */
.display-1-light-font {
  font: var(--display-1-light-font);
}

.display-1-regular-font {
  font: var(--display-1-regular-font);
}

.display-1-bold-font {
  font: var(--display-1-bold-font);
}

.display-2-light-font {
  font: var(--display-2-light-font);
}

.display-2-bold-font {
  font: var(--display-2-bold-font);
}

.heading-1-light-font {
  font: var(--heading-1-light-font);
}

.heading-1-medium-font {
  font: var(--heading-1-medium-font);
}

.heading-1-bold-font {
  font: var(--heading-1-bold-font);
}

.heading-2-light-font {
  font: var(--heading-2-light-font);
  letter-spacing: -1px;
}

.heading-2-medium-font {
  font: var(--heading-2-medium-font);
}

.heading-2-bold-font {
  font: var(--heading-2-bold-font);
}

.heading-3-light-font {
  font: var(--heading-3-light-font);
}

.heading-3-medium-font {
  font: var(--heading-3-medium-font);
}

.heading-3-bold-font {
  font: var(--heading-3-bold-font);
}

.heading-4-light-font {
  font: var(--heading-4-light-font);
}

.heading-4-medium-font {
  font: var(--heading-4-medium-font);
}

.heading-4-bold-font {
  font: var(--heading-4-bold-font);
}

.body-extra-large-regular-font {
  font: var(--body-extra-large-regular-font);
}

.body-large-regular-font {
  font: var(--body-large-regular-font);
}

.body-large-semibold-font {
  font: var(--body-large-semibold-font);
}

.body-large-bold-font {
  font: var(--body-large-bold-font);
}

.body-medium-regular-font {
  font: var(--body-medium-regular-font);
}

.body-medium-semibold-font {
  font: var(--body-medium-semibold-font);
}

.body-medium-bold-font {
  font: var(--body-medium-bold-font);
}

.body-small-regular-font {
  font: var(--body-small-regular-font);
}

.body-small-semibold-font {
  font: var(--body-small-semibold-font);
}

.body-small-bold-font {
  font: var(--body-small-bold-font);
}

.text-white {
  color: var(--white);
}

.text-blue {
  color: var(--blue);
}

.text-ultramarine {
  color: var(--ultramarine);
}

.text-green {
  color: var(--green);
}

.text-gray-5 {
  color: var(--gray-5);
}

.text-gray-10 {
  color: var(--gray-10);
}

.text-gray-20 {
  color: var(--gray-20);
}

.text-gray-30 {
  color: var(--gray-30);
}

.text-gray-40 {
  color: var(--gray-40);
}

.text-gray-50 {
  color: var(--gray-50);
}

.text-gray-60 {
  color: var(--gray-60);
}

.text-gray-70 {
  color: var(--gray-70);
}

.text-gray-80 {
  color: var(--gray-80);
}

.text-gray-90 {
  color: var(--gray-90);
}

.text-gray-100 {
  color: var(--gray-100);
}

.bg-white {
  background-color: var(--white);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-ultramarine {
  background-color: var(--ultramarine);
}

.bg-green {
  background-color: var(--green);
}

.bg-gray-5 {
  background-color: var(--gray-5);
}

.bg-gray-10 {
  background-color: var(--gray-10);
}

.bg-bg-gray-90 {
  background-color: var(--bg-gray-90);
}

.bg-bg-gray-100 {
  background-color: var(--bg-gray-100);
}

.bg-blue-radial-gradient {
  background: var(--blue-radial-gradient);
}

.border-white {
  border-color: var(--white);
}

.border-blue {
  border-color: var(--blue);
}

.border-ultramarine {
  border-color: var(--ultramarine);
}

.border-green {
  border-color: var(--green);
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-80 {
  opacity: 0.8;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

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

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

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

.underline-on-hover {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--transition-normal-duration)
    ease-in-out;

  &:hover {
    text-decoration-color: color-mix(
      in srgb,
      var(--text-decoration-color, inherit) 70%,
      transparent
    );
  }
}

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

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

.border-bottom-on-hover {
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-normal-duration) ease-in-out;

  &:hover {
    border-color: inherit;
  }

  /* Disable transitions to optimize performance or if animations are disabled on device */
  @media (hover: none), (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.relative {
  position: relative;
}

.absolute-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.cursor-pointer {
  cursor: pointer;
}

.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
  contain: layout style paint;
}

/* END - UTILITY CLASSES */