@layer utilities {
  .txt-small { font-size: 0.875rem; }
  .txt-x-small { font-size: 0.75rem; }
  .txt-large { font-size: 1.25rem; }
  .txt-negative { color: var(--color-error); }
  .txt-positive { color: var(--color-success); }
  .txt-warning { color: color-mix(in oklch, var(--color-warning), var(--text) 25%); }
  .txt-break-all { word-break: break-all; }

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

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

  .gap { gap: 1rem; }
  .gap-half { gap: 0.5rem; }

  .margin-none { margin: 0; }
  .margin-block-start { margin-block-start: 1rem; }
  .margin-block-end { margin-block-end: 1rem; }

  .borderless { border: 0; }
  .fill-transparent { background-color: transparent; }

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

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

  .display-contents { display: contents; }
}