@layer utilities {

  /****************************************************************
 * Grid
 *****************************************************************/
  .grid {
    display: grid;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-2\@sm {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-3\@sm {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .grid-cols-2\@sm {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-3\@sm {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .col-span-auto\@sm {
    @media (width >= 40rem) {
      grid-column: auto;
    }
  }

  /****************************************************************
 * Flex
 *****************************************************************/
  .flex {
    display: flex;
  }

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

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

  .inline-flex {
    display: inline-flex;
  }

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

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

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

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

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

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

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

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

  .flex-1 {
    flex: 1;
  }

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

  .flex-item-no-shrink {
    flex-shrink: 0;
  }

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

  .self-end {
    align-self: end;
  }

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

  .gap {
    column-gap: var(--column-gap, 0.5rem);
    row-gap: var(--row-gap, 1rem);
  }

  .gap-half {
    column-gap: var(--column-gap, 0.25rem);
    row-gap: var(--row-gap, 0.5rem);
  }

  .gap-none {
    --column-gap: 0;
    --row-gap: 0;
    gap: 0;
  }

  /****************************************************************
* Text
*****************************************************************/
  .font-normal {
    font-weight: var(--font-normal);
  }

  .font-medium {
    font-weight: var(--font-medium);
  }

  .font-semibold {
    font-weight: var(--font-semibold);
  }

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

  .uppercase {
    text-transform: uppercase;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .wrap-break-word {
    overflow-wrap: break-word;
  }

  .wrap-anywhere {
    overflow-wrap: anywhere;
  }

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

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

  .opacity-75 {
    opacity: var(--opacity-75);
  }

  .opacity-50 {
    opacity: var(--opacity-50);
  }

  .leading-none {
    line-height: var(--leading-none);
  }

  .leading-tight {
    line-height: var(--leading-tight);
  }

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

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

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

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

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

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

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

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

  .text-link {
    color: var(--color-link);
    text-decoration: underline;
  }

  .text-xs {
    font-size: var(--text-xs);
  }

  .text-sm {
    font-size: var(--text-sm);
  }

  .text-base {
    font-size: var(--text-base);
  }

  .text-lg {
    font-size: var(--text-lg);
  }

  .text-xl {
    font-size: var(--text-xl);
  }

  .text-2xl {
    font-size: var(--text-2xl);
  }

  .text-3xl {
    font-size: var(--text-3xl);
  }

  .text-4xl {
    font-size: var(--text-4xl);
  }

  .text-5xl {
    font-size: var(--text-5xl);
  }

  .text-fluid-xs {
    font-size: var(--text-fluid-xs);
  }

  .text-fluid-sm {
    font-size: var(--text-fluid-sm);
  }

  .text-fluid-base {
    font-size: var(--text-fluid-base);
  }

  .text-fluid-lg {
    font-size: var(--text-fluid-lg);
  }

  .text-fluid-xl {
    font-size: var(--text-fluid-xl);
  }

  .text-fluid-2xl {
    font-size: var(--text-fluid-2xl);
  }

  .text-fluid-3xl {
    font-size: var(--text-fluid-3xl);
  }

  /****************************************************************
* Background
*****************************************************************/
  .bg-main {
    background-color: var(--color-bg);
  }

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

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

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

  .bg-shade {
    background-color: var(--color-border-light);
  }

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

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

  .bg-transparent {
    background-color: transparent;
  }

  /****************************************************************
* Border
*****************************************************************/
  .border-0 {
    border-width: 0;
  }

  .border {
    border-width: var(--border-size, 1px);
  }

  .border-b {
    border-block-width: var(--border-size, 1px);
  }

  .border-bs {
    border-block-start-width: var(--border-size, 1px);
  }

  .border-be {
    border-block-end-width: var(--border-size, 1px);
  }

  .border-i {
    border-inline-width: var(--border-size, 1px);
  }

  .border-is {
    border-inline-start-width: var(--border-size, 1px);
  }

  .border-ie {
    border-inline-end-width: var(--border-size, 1px);
  }

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

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

  .rounded-none {
    border-radius: 0;
  }

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

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

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

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

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

  /****************************************************************
* Shadow
*****************************************************************/
  .shadow-none {
    box-shadow: none;
  }

  .shadow-xs {
    box-shadow: var(--shadow-xs);
  }

  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }

  /****************************************************************
* Mouse pointer
*****************************************************************/
  .cursor-pointer {
    cursor: pointer;
  }

  .pointer-events-none {
    cursor: default;
    pointer-events: none;
  }

  /****************************************************************
* Layout
*****************************************************************/
  .block {
    display: block;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
  }

  .min-i-0 {
    min-inline-size: 0;
  }

  .min-i-200 {
    min-inline-size: 200px;
  }

  .min-i-280 {
    min-inline-size: 280px;
  }

  .max-i-none {
    max-inline-size: none;
  }

  .max-i-full {
    max-inline-size: 100%;
  }

  .b-full {
    block-size: 100%;
  }

  .i-full {
    inline-size: 100%;
  }

  .i-min {
    inline-size: min-content;
  }

  .i-fit {
    inline-size: fit-content;
  }

  .overflow-x-auto {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .overflow-y-auto {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-widescreen {
    aspect-ratio: 16 / 9;
  }

  /****************************************************************
* Margin
*****************************************************************/
  .m-0 {
    margin: 0;
  }

  .m-1 {
    margin: var(--size-1);
  }

  .m-2 {
    margin: var(--size-2);
  }

  .m-3 {
    margin: var(--size-3);
  }

  .m-4 {
    margin: var(--size-4);
  }

  .m-5 {
    margin: var(--size-5);
  }

  .m-6 {
    margin: var(--size-6);
  }

  .m-8 {
    margin: var(--size-8);
  }

  .m-10 {
    margin: var(--size-10);
  }

  .m-auto {
    margin: auto;
  }

  .mb-0 {
    margin-block: 0;
  }

  .mb-1 {
    margin-block: var(--size-1);
  }

  .mb-2 {
    margin-block: var(--size-2);
  }

  .mb-3 {
    margin-block: var(--size-3);
  }

  .mb-4 {
    margin-block: var(--size-4);
  }

  .mb-5 {
    margin-block: var(--size-5);
  }

  .mb-6 {
    margin-block: var(--size-6);
  }

  .mb-8 {
    margin-block: var(--size-8);
  }

  .mb-10 {
    margin-block: var(--size-10);
  }

  .mb-auto {
    margin-block: auto;
  }

  .mbs-0 {
    margin-block-start: 0;
  }

  .mbs-1 {
    margin-block-start: var(--size-1);
  }

  .mbs-2 {
    margin-block-start: var(--size-2);
  }

  .mbs-3 {
    margin-block-start: var(--size-3);
  }

  .mbs-4 {
    margin-block-start: var(--size-4);
  }

  .mbs-5 {
    margin-block-start: var(--size-5);
  }

  .mbs-6 {
    margin-block-start: var(--size-6);
  }

  .mbs-8 {
    margin-block-start: var(--size-8);
  }

  .mbs-10 {
    margin-block-start: var(--size-10);
  }

  .mbs-auto {
    margin-block-start: auto;
  }

  .mbe-0 {
    margin-block-end: 0;
  }

  .mbe-1 {
    margin-block-end: var(--size-1);
  }

  .mbe-2 {
    margin-block-end: var(--size-2);
  }

  .mbe-3 {
    margin-block-end: var(--size-3);
  }

  .mbe-4 {
    margin-block-end: var(--size-4);
  }

  .mbe-5 {
    margin-block-end: var(--size-5);
  }

  .mbe-6 {
    margin-block-end: var(--size-6);
  }

  .mbe-8 {
    margin-block-end: var(--size-8);
  }

  .mbe-10 {
    margin-block-end: var(--size-10);
  }

  .mbe-auto {
    margin-block-end: auto;
  }

  .mi-0 {
    margin-inline: 0;
  }

  .mi-1 {
    margin-inline: var(--size-1);
  }

  .mi-2 {
    margin-inline: var(--size-2);
  }

  .mi-3 {
    margin-inline: var(--size-3);
  }

  .mi-4 {
    margin-inline: var(--size-4);
  }

  .mi-5 {
    margin-inline: var(--size-5);
  }

  .mi-6 {
    margin-inline: var(--size-6);
  }

  .mi-8 {
    margin-inline: var(--size-8);
  }

  .mi-10 {
    margin-inline: var(--size-10);
  }

  .mi-auto {
    margin-inline: auto;
  }

  .mis-0 {
    margin-inline-start: 0;
  }

  .mis-1 {
    margin-inline-start: var(--size-1);
  }

  .mis-2 {
    margin-inline-start: var(--size-2);
  }

  .mis-3 {
    margin-inline-start: var(--size-3);
  }

  .mis-4 {
    margin-inline-start: var(--size-4);
  }

  .mis-5 {
    margin-inline-start: var(--size-5);
  }

  .mis-6 {
    margin-inline-start: var(--size-6);
  }

  .mis-8 {
    margin-inline-start: var(--size-8);
  }

  .mis-10 {
    margin-inline-start: var(--size-10);
  }

  .mis-auto {
    margin-inline-start: auto;
  }

  .mie-0 {
    margin-inline-end: 0;
  }

  .mie-1 {
    margin-inline-end: var(--size-1);
  }

  .mie-2 {
    margin-inline-end: var(--size-2);
  }

  .mie-3 {
    margin-inline-end: var(--size-3);
  }

  .mie-4 {
    margin-inline-end: var(--size-4);
  }

  .mie-5 {
    margin-inline-end: var(--size-5);
  }

  .mie-6 {
    margin-inline-end: var(--size-6);
  }

  .mie-8 {
    margin-inline-end: var(--size-8);
  }

  .mie-10 {
    margin-inline-end: var(--size-10);
  }

  .mie-auto {
    margin-inline-end: auto;
  }

  /****************************************************************
* Padding
*****************************************************************/
  .p-0 {
    padding: 0;
  }

  .p-1 {
    padding: var(--size-1);
  }

  .p-2 {
    padding: var(--size-2);
  }

  .p-3 {
    padding: var(--size-3);
  }

  .p-4 {
    padding: var(--size-4);
  }

  .p-5 {
    padding: var(--size-5);
  }

  .p-6 {
    padding: var(--size-6);
  }

  .p-8 {
    padding: var(--size-8);
  }

  .p-10 {
    padding: var(--size-10);
  }

  .pb-0 {
    padding-block: 0;
  }

  .pb-1 {
    padding-block: var(--size-1);
  }

  .pb-2 {
    padding-block: var(--size-2);
  }

  .pb-3 {
    padding-block: var(--size-3);
  }

  .pb-4 {
    padding-block: var(--size-4);
  }

  .pb-5 {
    padding-block: var(--size-5);
  }

  .pb-6 {
    padding-block: var(--size-6);
  }

  .pb-8 {
    padding-block: var(--size-8);
  }

  .pb-10 {
    padding-block: var(--size-10);
  }

  .pbs-0 {
    padding-block-start: 0;
  }

  .pbs-1 {
    padding-block-start: var(--size-1);
  }

  .pbs-2 {
    padding-block-start: var(--size-2);
  }

  .pbs-3 {
    padding-block-start: var(--size-3);
  }

  .pbs-4 {
    padding-block-start: var(--size-4);
  }

  .pbs-5 {
    padding-block-start: var(--size-5);
  }

  .pbs-6 {
    padding-block-start: var(--size-6);
  }

  .pbs-8 {
    padding-block-start: var(--size-8);
  }

  .pbs-10 {
    padding-block-start: var(--size-10);
  }

  .pbe-0 {
    padding-block-end: 0;
  }

  .pbe-1 {
    padding-block-end: var(--size-1);
  }

  .pbe-2 {
    padding-block-end: var(--size-2);
  }

  .pbe-3 {
    padding-block-end: var(--size-3);
  }

  .pbe-4 {
    padding-block-end: var(--size-4);
  }

  .pbe-5 {
    padding-block-end: var(--size-5);
  }

  .pbe-6 {
    padding-block-end: var(--size-6);
  }

  .pbe-8 {
    padding-block-end: var(--size-8);
  }

  .pbe-10 {
    padding-block-end: var(--size-10);
  }

  .pi-0 {
    padding-inline: 0;
  }

  .pi-1 {
    padding-inline: var(--size-1);
  }

  .pi-2 {
    padding-inline: var(--size-2);
  }

  .pi-3 {
    padding-inline: var(--size-3);
  }

  .pi-4 {
    padding-inline: var(--size-4);
  }

  .pi-5 {
    padding-inline: var(--size-5);
  }

  .pi-6 {
    padding-inline: var(--size-6);
  }

  .pi-8 {
    padding-inline: var(--size-8);
  }

  .pi-10 {
    padding-inline: var(--size-10);
  }

  .pis-0 {
    padding-inline-start: 0;
  }

  .pis-1 {
    padding-inline-start: var(--size-1);
  }

  .pis-2 {
    padding-inline-start: var(--size-2);
  }

  .pis-3 {
    padding-inline-start: var(--size-3);
  }

  .pis-4 {
    padding-inline-start: var(--size-4);
  }

  .pis-5 {
    padding-inline-start: var(--size-5);
  }

  .pis-6 {
    padding-inline-start: var(--size-6);
  }

  .pis-8 {
    padding-inline-start: var(--size-8);
  }

  .pis-10 {
    padding-inline-start: var(--size-10);
  }

  .pie-0 {
    padding-inline-end: 0;
  }

  .pie-1 {
    padding-inline-end: var(--size-1);
  }

  .pie-2 {
    padding-inline-end: var(--size-2);
  }

  .pie-3 {
    padding-inline-end: var(--size-3);
  }

  .pie-4 {
    padding-inline-end: var(--size-4);
  }

  .pie-5 {
    padding-inline-end: var(--size-5);
  }

  .pie-6 {
    padding-inline-end: var(--size-6);
  }

  .pie-8 {
    padding-inline-end: var(--size-8);
  }

  .pie-10 {
    padding-inline-end: var(--size-10);
  }

  /****************************************************************
* Hiding/Showing
*****************************************************************/
  .show\@sm,
  .show\@md,
  .show\@lg,
  .show\@xl {
    display: none;
  }

  .show\@sm {
    @media (width >=40rem) {
      display: flex;
    }
  }

  .show\@md {
    @media (width >=48rem) {
      display: flex;
    }
  }

  .show\@lg {
    @media (width >=64rem) {
      display: flex;
    }
  }

  .show\@xl {
    @media (width >=80rem) {
      display: flex;
    }
  }

  .hide\@sm {
    @media (width >=40rem) {
      display: none;
    }
  }

  .hide\@md {
    @media (width >=48rem) {
      display: none;
    }
  }

  .hide\@lg {
    @media (width >=64rem) {
      display: none;
    }
  }

  .hide\@xl {
    @media (width >=80rem) {
      display: none;
    }
  }

  .hide\@pwa {
    @media (display-mode: standalone) {
      display: none;
    }
  }

  .hide\@browser {
    @media (display-mode: browser) {
      display: none;
    }
  }

  .hide\@print {
    @media print {
      display: none;
    }
  }

  .hide\@touch {
    @media (any-hover: none) {
      display: none;
    }
  }

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

}