avo 3.30.4 → 4.0.0.beta.2

data/app/assets/stylesheets/css/fields/tiptap.css

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-none min-h-44;
+  @apply m-0 p-4 outline-hidden min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -9,7 +9,7 @@
 
   ul,
   ol {
-    @apply pl-6 list-outside;
+    @apply ps-6 list-outside;
   }
 
   ul {
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded;
+  @apply w-full mb-4 rounded-lg border border-tertiary;
 }
 
 .tiptap__editor {
@@ -30,11 +30,12 @@
 }
 
 .tiptap__toolbar {
-  @apply flex items-center justify-between px-3 py-2 border-b bg-gray-50;
+  @apply flex items-center justify-between px-3 py-2 rounded-t-lg border border-tertiary bg-secondary;
 }
 
 .tiptap__toolbar-area {
-  @apply flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse;
+  @apply flex flex-wrap items-center sm:divide-x sm:rtl:divide-x-reverse divide-tertiary;
+  --tw-divide-opacity: 1;
 }
 
 .tiptap__button-group {
@@ -54,27 +55,28 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded cursor-pointer;
+  @apply p-1 rounded-sm cursor-pointer;
 
   &:hover:enabled {
-    @apply bg-gray-100;
+    background-color: var(--color-tertiary);
   }
 
   &:active:enabled {
-    @apply bg-gray-200;
+    @apply bg-tertiary;
   }
 
   &:disabled {
-    @apply text-gray-200 cursor-default;
+    @apply cursor-default text-content-secondary;
   }
 
   svg {
     @apply block h-6;
+    stroke: var(--color-content);
   }
 }
 
 .tiptap__button--selected {
-  @apply bg-gray-900/10;
+  @apply bg-tertiary;
 }
 
 /* LINK STYLES */
@@ -84,8 +86,8 @@
 }
 
 .tiptap__link-field {
-  &:placeholder {
-    @apply italic text-gray-400;
+  &::placeholder {
+    @apply italic text-content-secondary;
   }
 
   &:focus::placeholder {
@@ -94,13 +96,13 @@
 }
 
 .tiptap__link-field {
-  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
+  @apply text-sm me-2 py-1 rounded-lg border border-tertiary bg-primary text-content;
 }
 
 /* SHOW STYLES */
 
 .tiptap__content {
-  @apply py-2 max-w-4xl;
+  @apply py-2 max-w-4xl text-content;
 
   >*+* {
     @apply mt-4;
@@ -108,7 +110,7 @@
 
   ul,
   ol {
-    @apply pl-6 list-outside;
+    @apply ps-6 list-outside;
   }
 
   ul {

data/app/assets/stylesheets/css/fields/trix.css

@@ -26,19 +26,79 @@
   @apply list-decimal;
 }
 
+trix-editor {
+  @apply border border-tertiary rounded-lg bg-primary text-content;
+
+  &:empty::before {
+    @apply !text-content-secondary;
+  }
+}
+
 trix-toolbar {
   .trix-button-row {
     @apply flex-wrap gap-x-5;
   }
 
+  .trix-button-group {
+    @apply border border-tertiary;
+  }
+
   .trix-button-group:not(:first-child) {
-    @apply ml-0;
+    @apply ms-0;
   }
 }
 
 /* Hack to remove border from trix when rendered from ActionText */
 .trix-content {
   & .trix-content {
-    border: none;
+    @apply border-none;
+  }
+}
+
+/* Theme-token based Trix styling */
+.trix-content pre {
+  @apply bg-tertiary text-content;
+}
+
+trix-toolbar {
+  .trix-button-group {
+    @apply bg-secondary border-tertiary;
   }
+
+  .trix-button {
+    @apply text-content border-tertiary;
+
+    &:not(:disabled):hover {
+      @apply bg-tertiary;
+    }
+
+    &.trix-active {
+      @apply bg-tertiary;
+    }
+  }
+
+  .trix-dialog {
+    @apply bg-secondary border-tertiary shadow-none;
+  }
+
+  .trix-input--dialog {
+    @apply bg-primary text-content border-tertiary;
+
+    &::placeholder {
+      @apply text-content-secondary;
+    }
+  }
+
+  .trix-button--dialog {
+    @apply text-content border-tertiary;
+
+    &:hover {
+      @apply bg-tertiary;
+    }
+  }
+}
+
+/* Trix toolbar icons are image-based and need inversion only in dark mode. */
+.dark trix-toolbar .trix-button--icon::before {
+  filter: invert(1);
 }

data/app/assets/stylesheets/css/fonts.css

@@ -3,50 +3,50 @@
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: url('/avo-assets/fonts/inter-v7-latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('fonts/inter-v7-latin-regular.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('/avo-assets/fonts/inter-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/avo-assets/fonts/inter-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/avo-assets/fonts/inter-v7-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+       url('fonts/inter-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('fonts/inter-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('fonts/inter-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('fonts/inter-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('fonts/inter-v7-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
 }
 /* inter-500 - latin */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: url('/avo-assets/fonts/inter-v7-latin-500.eot'); /* IE9 Compat Modes */
+  src: url('fonts/inter-v7-latin-500.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('/avo-assets/fonts/inter-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/avo-assets/fonts/inter-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-500.woff') format('woff'), /* Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/avo-assets/fonts/inter-v7-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
+       url('fonts/inter-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('fonts/inter-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+       url('fonts/inter-v7-latin-500.woff') format('woff'), /* Modern Browsers */
+       url('fonts/inter-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('fonts/inter-v7-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
 }
 /* inter-600 - latin */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url('/avo-assets/fonts/inter-v7-latin-600.eot'); /* IE9 Compat Modes */
+  src: url('fonts/inter-v7-latin-600.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('/avo-assets/fonts/inter-v7-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/avo-assets/fonts/inter-v7-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-600.woff') format('woff'), /* Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/avo-assets/fonts/inter-v7-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
+       url('fonts/inter-v7-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('fonts/inter-v7-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+       url('fonts/inter-v7-latin-600.woff') format('woff'), /* Modern Browsers */
+       url('fonts/inter-v7-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('fonts/inter-v7-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
 }
 /* inter-700 - latin */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
-  src: url('/avo-assets/fonts/inter-v7-latin-700.eot'); /* IE9 Compat Modes */
+  src: url('fonts/inter-v7-latin-700.eot'); /* IE9 Compat Modes */
   src: local(''),
-       url('/avo-assets/fonts/inter-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/avo-assets/fonts/inter-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('/avo-assets/fonts/inter-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/avo-assets/fonts/inter-v7-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
+       url('fonts/inter-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('fonts/inter-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+       url('fonts/inter-v7-latin-700.woff') format('woff'), /* Modern Browsers */
+       url('fonts/inter-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('fonts/inter-v7-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
 }

data/app/assets/stylesheets/css/layout.css

@@ -0,0 +1,135 @@
+:root {
+  --top-navbar-height: 4rem;
+}
+
+.skip-to-content {
+  @apply absolute overflow-hidden whitespace-nowrap border-0 p-0;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+
+  &:focus {
+    @apply z-[9999] fixed top-2 start-2 w-auto h-auto overflow-visible px-4 py-2 rounded-lg text-sm font-medium;
+
+    clip: auto;
+    margin: 0;
+    background-color: var(--color-foreground);
+    color: var(--color-background);
+  }
+}
+
+.top-navbar {
+  height: var(--top-navbar-height);
+}
+
+/* The sidebar width stays the same regardless of the sidebar open state. */
+/* The content width and margin offset changes based on the sidebar open state and the :lg breakpoint. */
+.main {
+  --sidebar-width: --spacing(64);
+  --sidebar-offset-size: 0rem;
+  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing) * 2);
+
+  @media (min-width: theme(--breakpoint-lg)) {
+    &.sidebar-open {
+      --sidebar-offset-size: var(--sidebar-width);
+    }
+  }
+
+  @apply mt-(--top-navbar-height);
+
+  .main-content-area {
+    @apply w-(--content-width) ms-1 flex flex-1 flex-col z-50 fixed rounded-2xl bg-primary shadow-content p-4 h-full;
+
+    transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
+
+    height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
+
+    .scrollable-wrapper {
+      @apply overflow-y-auto h-full flex-1 flex flex-col px-2;
+    }
+    .avo-container {
+      @apply  flex flex-1 flex-col justify-between;
+    }
+  }
+
+  &.sidebar-open {
+    /* Add padding to the main area to allow for the sidebar to expand. */
+    .main-content-area {
+      @media (min-width: theme(--breakpoint-lg)) {
+        margin-inline-start: calc(var(--sidebar-width) + var(--spacing));
+        width: var(--content-width);
+
+      }
+    }
+  }
+}
+
+.container-large {
+  @apply 2xl:container 2xl:mx-auto;
+}
+
+.container-small {
+  @apply xl:px-0 xl:w-240 xl:mx-auto;
+}
+
+.container-full-width {
+  @apply w-full;
+}
+
+.top-navbar {
+  @apply z-100 fixed w-full flex shrink-0 items-center px-4 lg:px-2 space-x-4 rtl:space-x-reverse lg:space-x-0;
+}
+
+/* Sidebar toggle: choose icon via navbar variables; visibility driven by data attribute */
+.sidebar-toggle-icon {
+  @apply inline-flex;
+}
+
+.sidebar-toggle-icon--closed {
+  @apply hidden;
+}
+
+button[data-sidebar-state='closed'] .sidebar-toggle-icon--open {
+  @apply hidden;
+}
+
+button[data-sidebar-state='closed'] .sidebar-toggle-icon--closed {
+  @apply inline-flex;
+}
+
+/* Default hidden state - LTR: sidebar slides in from left */
+.avo-sidebar {
+  @apply fixed z-60 top-0 flex-1 border-e border-tertiary lg:border-none mt-(--top-navbar-height) h-[calc(100dvh-var(--top-navbar-height))] bg-background lg:bg-transparent w-(--sidebar-width);
+
+  transform: translateX(-100%);
+  transition: transform 0.1s ease;
+}
+
+/* RTL: sidebar slides in from right when hidden */
+html[dir="rtl"] .avo-sidebar {
+  transform: translateX(100%);
+}
+
+/* Desktop: show sidebar when sidebar-open class is present (lg+ only) */
+@media (min-width: theme(--breakpoint-lg)) {
+  .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  html[dir="rtl"] .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+}
+
+/* Mobile: show sidebar only when explicitly toggled open */
+@media (width < theme(--breakpoint-lg)) {
+  .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
+  }
+}

data/app/assets/stylesheets/css/pagination.css

@@ -1,103 +1,139 @@
-.pagy-gem-version-7 {
-  .pagy-nav,
-  .pagy-nav-js,
-  .pagy-combo-nav-js {
-    @apply relative z-0 flex;
-  }
+/* Pagination Component
+   BEM: .pagination (block)
+        .pagination__per-page (elements)
+        .pagination__controls, .pagination__info, .pagination__nav (elements) */
 
-  .pagy-nav.pagination,
-  .pagy-nav-js.pagination,
-  .pagy-combo-nav-js.pagination {
-    @apply space-x-2;
-  }
+.pagination {
+  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-end sm:gap-0;
+}
 
-  .pagy-nav .page a{
-    @apply block;
-  }
+/* === Per-page selector (left) === */
 
-  .pagy-nav .page a,
-  .pagy-nav .page.active a,
-  .pagy-nav .page.prev.disabled a,
-  .pagy-nav .page.next.disabled a,
-  .pagy-nav-js .page a,
-  .pagy-combo-nav-js .page a,
-  .pagy-combo-nav-js .pagy-combo-input a {
-    @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
-
-    &:hover{
-      @apply bg-gray-150;
-    }
+.pagination__per-page {
+  --pagination-per-page-width: 10rem; /* w-48 equivalent; use 165px for exact Figma match */
+  @apply flex items-center;
+}
 
-    &:active{
-      @apply bg-gray-200;
-    }
-  }
+.pagination__per-page-input {
+  width: var(--pagination-per-page-width);
+  min-width: var(--pagination-per-page-width);
+  @apply py-1 px-2 bg-primary border border-tertiary rounded-lg overflow-hidden text-ellipsis whitespace-nowrap text-content cursor-pointer text-sm leading-5 font-normal inline-flex items-center gap-1;
+}
 
-  .pagy-nav .page.prev.disabled a,
-  .pagy-nav-js .page.prev.disabled a,
-  .pagy-combo-nav-js .page.prev.disabled a,
-  .pagy-nav .page.next.disabled a,
-  .pagy-nav-js .page.next.disabled a,
-  .pagy-combo-nav-js .page.next.disabled a {
-    @apply text-gray-300 cursor-default;
+/* Dropdown menu matches trigger width */
+.pagination__per-page .dropdown-popover {
+  width: var(--pagination-per-page-width);
+  min-width: var(--pagination-per-page-width);
+}
 
-    &:hover {
-      @apply text-gray-300 bg-white;
-    }
+.pagination__per-page-value {
+  @apply flex-1 text-start font-normal;
+}
 
-    &:active {
-      @apply text-gray-300 bg-white;
-    }
+.pagination__per-page-icon {
+  @apply shrink-0 inline-flex items-center justify-center size-4 text-content-secondary;
+
+  & svg {
+    @apply size-4;
   }
+}
+
+/* Per-page option: number bold (700), "per page" normal (400) */
+.pagination__per-page-option-num {
+  @apply font-bold;
+}
 
-  .pagy-nav .page.active a,
-  .pagy-nav-js .page.active a {
-    @apply text-white cursor-default bg-gray-500 border-gray-500;
+.pagination__per-page .dropdown-menu__item {
+  @apply font-normal;
+}
 
-    &:hover {
-      @apply text-white bg-gray-500;
-    }
+/* === Controls pill (right) === */
 
-    &:active {
-      @apply bg-gray-500 text-white;
-    }
+.pagination__controls {
+  @apply flex w-fit shrink-0 items-center gap-3 rounded-lg border border-tertiary bg-primary overflow-hidden ps-3 pe-2 overflow-visible;
+}
+
+/* Info text with right-border divider */
+.pagination__info {
+  @apply flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap overflow-hidden text-ellipsis text-sm text-content leading-5 font-normal;
+
+  &:last-child {
+    @apply border-e-0 pe-1;
   }
 }
 
-.pagy-gem-version-8-or-more {
-  .pagy.nav {
-    @apply relative z-0 flex space-x-2 max-sm:flex-wrap max-sm:gap-2 max-sm:justify-center;
+.pagination__info-number {
+  @apply font-bold;
+}
 
-    a.gap {
-      @apply text-gray-500;
-    }
+/* Nav buttons wrapper */
+.pagination__nav {
+  @apply flex items-center;
+}
 
-    & a:not(.gap) {
-      @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+/* === Pagy nav === */
+.pagy.series-nav {
+  @apply flex items-center gap-0.5;
 
-      &:hover{
-        @apply bg-gray-150;
-      }
+  a[role="separator"] {
+    @apply px-2 text-sm text-content-secondary;
+  }
 
-      &:active{
-        @apply bg-gray-200;
-      }
+  & a:not([role="separator"]) {
+    @apply inline-flex items-center justify-center min-w-8 px-3 py-0.5 rounded-lg border border-transparent
+      text-sm font-medium leading-tight text-content no-underline transition-colors;
 
-      &.current {
-        @apply text-white cursor-default bg-gray-500 border-gray-500;
+    &:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
+      @apply bg-secondary;
+    }
 
-        &:hover {
-          @apply text-white bg-gray-500;
-        }
+    &:active:not([aria-current="page"]):not([aria-disabled="true"]) {
+      @apply bg-tertiary;
+    }
 
-        &:active {
-          @apply bg-gray-500 text-white;
-        }
-      }
+    &[aria-disabled="true"]:not([aria-current="page"]) {
+      @apply opacity-40 cursor-not-allowed pointer-events-none;
+    }
 
-      &[aria-disabled="true"]:not(.current) {
-        @apply bg-gray-100 text-gray-300 cursor-default;
-      }
+    &[aria-current="page"] {
+      @apply bg-secondary text-content cursor-default font-medium;
     }
   }
+
+  /* Compact previous/next controls */
+  & a:not([role="separator"]):first-child,
+  & a:not([role="separator"]):last-child {
+    @apply min-w-0 px-2 py-1;
+  }
+}
+
+/* Avo paginator only: hide prev/next text and paint data-uri icons */
+.pagination__nav .pagy.series-nav {
+  & a:not([role="separator"]):first-child,
+  & a:not([role="separator"]):last-child {
+    font-size: 0;
+    line-height: 0;
+  }
+
+  & a:not([role="separator"]):first-child::before,
+  & a:not([role="separator"]):last-child::before {
+    content: "";
+    @apply block size-3.5 bg-current;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+  }
+
+  & a:not([role="separator"]):first-child::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M5 12l6 6'/%3E%3Cpath d='M5 12l6 -6'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M5 12l6 6'/%3E%3Cpath d='M5 12l6 -6'/%3E%3C/svg%3E");
+  }
+
+  & a:not([role="separator"]):last-child::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
+  }
 }

data/app/assets/stylesheets/css/resource-controls.css

@@ -0,0 +1,13 @@
+@layer base {
+  .resource-controls {
+    .resource-control,
+    button,
+    a {
+      @apply text-content-secondary;
+
+      &:hover {
+        @apply text-content;
+      }
+    }
+  }
+}