@unifiedsoftware/styles 1.0.4 → 1.0.6

package/css/styles.css

@@ -1,4 +1,66 @@
 @charset "UTF-8";
+.us-toolbar {
+  position: relative;
+  width: 100%;
+  padding: var(--us-toolbar-padding-y) var(--us-toolbar-padding-x);
+  border-bottom: var(--us-toolbar-border);
+  background: var(--us-toolbar-background);
+  display: flex;
+  align-items: center;
+}
+.us-toolbar > .us-overlay {
+  position: absolute;
+  inset: 0px;
+  border-radius: inherit;
+  overflow: hidden;
+  color: var(--us-overlay-color);
+  opacity: var(--us-overlay-opacity);
+  background-color: currentColor;
+  transition: opacity 15ms linear, background-color 15ms linear;
+}
+.us-toolbar:hover > .us-overlay {
+  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
+  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
+  transition: opacity 30ms linear;
+}
+.us-toolbar:active > .us-overlay {
+  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
+  opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
+}
+.us-toolbar > .us-outline-b {
+  position: absolute;
+  inset: 0px;
+  border-radius: inherit;
+  overflow: hidden;
+  border-bottom: var(--us-outline-border-width) solid var(--us-outline-border-color);
+}
+.us-toolbar__container {
+  width: 100%;
+  min-height: var(--us-toolbar-min-height);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  z-index: 1;
+}
+.us-toolbar__start-action, .us-toolbar__end-action {
+  flex-shrink: 0;
+}
+.us-toolbar__content {
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+}
+.us-toolbar__title {
+  font-size: var(--us-toolbar-title-font-size);
+  font-weight: var(--us-toolbar-title-font-weight);
+  text-decoration: none;
+  color: inherit;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .us-badge {
   position: absolute;
   padding: var(--us-badge-padding-y) var(--us-badge-padding-x);
@@ -127,6 +189,9 @@
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+.us-button:hover {
+  text-decoration: none;
+}
 .us-button > .us-overlay {
   position: absolute;
   inset: 0px;
@@ -153,6 +218,10 @@
   overflow: hidden;
   border: var(--us-outline-border-width) solid var(--us-outline-border-color);
 }
+.us-button--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
 .us-button--icon-only {
   width: var(--us-button-height);
   padding: 0;
@@ -173,9 +242,148 @@
   align-items: center;
 }
 
+.us-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.us-backdrop-enter {
+  opacity: 0;
+}
+.us-backdrop-enter-active {
+  opacity: 1;
+  transition: opacity 100ms;
+}
+.us-backdrop-exit {
+  opacity: 1;
+}
+.us-backdrop-exit-active {
+  opacity: 0;
+  transition: opacity 200ms;
+  transition-delay: 300ms;
+}
+.us-backdrop__overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -10;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.us-drawer {
+  position: absolute;
+  max-width: var(--us-drawer-width);
+  width: 100%;
+  height: 100%;
+  background-color: var(--us-drawer-background);
+}
+.us-drawer-appear, .us-drawer-enter {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.us-drawer-appear-active, .us-drawer-enter-active {
+  opacity: 1;
+  transform: translateX(0%);
+  transition: opacity 100ms, transform 200ms;
+  transition-delay: 300ms;
+}
+.us-drawer-exit {
+  opacity: 1;
+  transform: translateX(0%);
+}
+.us-drawer-exit-active {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: opacity 300ms, transform 300ms;
+}
+.us-drawer--left, .us-drawer--right {
+  max-width: calc(100% - 2rem);
+  max-height: 100%;
+}
+.us-drawer--left {
+  left: 0;
+}
+.us-drawer--left.us-drawer-appear, .us-drawer--left.us-drawer-enter {
+  transform: translateX(-100%);
+}
+.us-drawer--left.us-drawer-appear-active, .us-drawer--left.us-drawer-enter-active {
+  transform: translateX(0%);
+}
+.us-drawer--left.us-drawer-exit {
+  transform: translateX(0%);
+}
+.us-drawer--left.us-drawer-exit-active {
+  transform: translateX(-100%);
+}
+.us-drawer--right.us-drawer-appear, .us-drawer--right.us-drawer-enter {
+  transform: translateX(100%);
+}
+.us-drawer--right {
+  right: 0;
+}
+.us-drawer--right.us-drawer-appear-active, .us-drawer--right.us-drawer-enter-active {
+  transform: translateX(0%);
+}
+.us-drawer--right.us-drawer-exit {
+  transform: translateX(0%);
+}
+.us-drawer--right.us-drawer-exit-active {
+  transform: translateX(100%);
+}
+.us-drawer--top, .us-drawer--bottom {
+  max-width: 100%;
+  max-height: calc(100% - 2rem);
+}
+.us-drawer--top {
+  top: 0;
+}
+.us-drawer--top.us-drawer-appear, .us-drawer--top.us-drawer-enter {
+  transform: translateY(-100%);
+}
+.us-drawer--top.us-drawer-appear-active, .us-drawer--top.us-drawer-enter-active {
+  transform: translateY(0%);
+}
+.us-drawer--top.us-drawer-exit {
+  transform: translateY(0%);
+}
+.us-drawer--top.us-drawer-exit-active {
+  transform: translateY(-100%);
+}
+.us-drawer--bottom {
+  bottom: 0;
+}
+.us-drawer--bottom.us-drawer-appear, .us-drawer--bottom.us-drawer-enter {
+  transform: translateY(100%);
+}
+.us-drawer--bottom.us-drawer-appear-active, .us-drawer--bottom.us-drawer-enter-active {
+  transform: translateY(0%);
+}
+.us-drawer--bottom.us-drawer-exit {
+  transform: translateY(0%);
+}
+.us-drawer--bottom.us-drawer-exit-active {
+  transform: translateY(100%);
+}
+@media screen and (min-width: 768px) {
+  .us-drawer--left, .us-drawer--right {
+    max-width: var(--us-drawer-width);
+    max-height: 100%;
+  }
+  .us-drawer--top, .us-drawer--bottom {
+    max-width: 100%;
+    max-height: var(--us-drawer-width);
+  }
+}
+
 .us-menu {
   margin: 0;
-  padding: 0;
+  padding: var(--us-menu-padding-y) var(--us-menu-padding-x);
   color: var(--us-menu-color);
   background-color: var(--us-menu-background);
 }
@@ -185,6 +393,7 @@
   padding: var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);
   font-size: var(--us-menu-item-font-size);
   font-weight: var(--us-menu-item-font-weight);
+  border-radius: var(--us-menu-item-border-radius);
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -255,6 +464,7 @@
   font-weight: var(--us-menu-group-font-weight);
   text-decoration: none;
   border-bottom: var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);
+  border-radius: var(--us-menu-group-border-radius);
   display: flex;
   align-items: center;
   color: var(--us-menu-group-color);
@@ -290,13 +500,6 @@
   justify-content: center;
   align-items: center;
 }
-.us-menu-group--selected .us-menu-group__icon {
-  --us-menu-group-icon-color: var(--us-_active-menu-item-icon-color);
-}
-.us-menu-group__icon .us-icon {
-  --us-icon-font-size: var(--us-menu-group-icon-font-size);
-  --us-icon-color: var(--us-menu-group-icon-color);
-}
 .us-menu-group__content {
   flex-grow: 1;
   z-index: 1;
@@ -349,6 +552,7 @@
   padding: 0px 16px;
   font-size: var(--us-tab-font-size);
   font-weight: var(--us-tab-font-weight);
+  text-decoration: none;
   vertical-align: middle;
   z-index: 1;
   color: var(--us-tab-color);
@@ -358,6 +562,9 @@
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+.us-tab:hover {
+  text-decoration: none;
+}
 .us-tab > .us-overlay {
   position: absolute;
   inset: 0px;
@@ -443,6 +650,852 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+.us-d-block {
+  display: block;
+}
+
+.us-d-inline {
+  display: inline;
+}
+
+.us-d-flex {
+  display: flex;
+}
+
+.us-d-grid {
+  display: grid;
+}
+
+.us-d-contents {
+  display: contents;
+}
+
+.us-d-none {
+  display: none;
+}
+
+.us-flex-row {
+  flex-direction: row;
+}
+
+.us-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.us-flex-col {
+  flex-direction: column;
+}
+
+.us-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.us-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.us-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.us-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.us-flex-grow-0 {
+  flex-grow: 0;
+}
+
+.us-flex-grow-1 {
+  flex-grow: 1;
+}
+
+.us-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.us-flex-shrink-1 {
+  flex-shrink: 1;
+}
+
+.us-gap-0 {
+  gap: 0;
+}
+
+.us-gap-1 {
+  gap: 0.25rem;
+}
+
+.us-gap-2 {
+  gap: 0.5rem;
+}
+
+.us-gap-3 {
+  gap: 0.75rem;
+}
+
+.us-gap-4 {
+  gap: 1rem;
+}
+
+.us-gap-5 {
+  gap: 1.25rem;
+}
+
+.us-gap-6 {
+  gap: 1.5rem;
+}
+
+.us-gap-7 {
+  gap: 1.75rem;
+}
+
+.us-gap-8 {
+  gap: 2rem;
+}
+
+.us-gap-x-0 {
+  column-gap: 0;
+}
+
+.us-gap-x-1 {
+  column-gap: 0.25rem;
+}
+
+.us-gap-x-2 {
+  column-gap: 0.5rem;
+}
+
+.us-gap-x-3 {
+  column-gap: 0.75rem;
+}
+
+.us-gap-x-4 {
+  column-gap: 1rem;
+}
+
+.us-gap-x-5 {
+  column-gap: 1.25rem;
+}
+
+.us-gap-x-6 {
+  column-gap: 1.5rem;
+}
+
+.us-gap-x-7 {
+  column-gap: 1.75rem;
+}
+
+.us-gap-x-8 {
+  column-gap: 2rem;
+}
+
+.us-gap-y-0 {
+  row-gap: 0;
+}
+
+.us-gap-y-1 {
+  row-gap: 0.25rem;
+}
+
+.us-gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.us-gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.us-gap-y-4 {
+  row-gap: 1rem;
+}
+
+.us-gap-y-5 {
+  row-gap: 1.25rem;
+}
+
+.us-gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+.us-gap-y-7 {
+  row-gap: 1.75rem;
+}
+
+.us-gap-y-8 {
+  row-gap: 2rem;
+}
+
+@media screen and (min-width: 0px) {
+  .xs\:us-d-block {
+    display: block;
+  }
+  .xs\:us-d-inline {
+    display: inline;
+  }
+  .xs\:us-d-flex {
+    display: flex;
+  }
+  .xs\:us-d-grid {
+    display: grid;
+  }
+  .xs\:us-d-contents {
+    display: contents;
+  }
+  .xs\:us-d-none {
+    display: none;
+  }
+  .xs\:us-flex-row {
+    flex-direction: row;
+  }
+  .xs\:us-flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .xs\:us-flex-col {
+    flex-direction: column;
+  }
+  .xs\:us-flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .xs\:us-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .xs\:us-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .xs\:us-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .xs\:us-flex-grow-0 {
+    flex-grow: 0;
+  }
+  .xs\:us-flex-grow-1 {
+    flex-grow: 1;
+  }
+  .xs\:us-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .xs\:us-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .xs\:us-gap-0 {
+    gap: 0;
+  }
+  .xs\:us-gap-1 {
+    gap: 0.25rem;
+  }
+  .xs\:us-gap-2 {
+    gap: 0.5rem;
+  }
+  .xs\:us-gap-3 {
+    gap: 0.75rem;
+  }
+  .xs\:us-gap-4 {
+    gap: 1rem;
+  }
+  .xs\:us-gap-5 {
+    gap: 1.25rem;
+  }
+  .xs\:us-gap-6 {
+    gap: 1.5rem;
+  }
+  .xs\:us-gap-7 {
+    gap: 1.75rem;
+  }
+  .xs\:us-gap-8 {
+    gap: 2rem;
+  }
+  .xs\:us-gap-x-0 {
+    column-gap: 0;
+  }
+  .xs\:us-gap-x-1 {
+    column-gap: 0.25rem;
+  }
+  .xs\:us-gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  .xs\:us-gap-x-3 {
+    column-gap: 0.75rem;
+  }
+  .xs\:us-gap-x-4 {
+    column-gap: 1rem;
+  }
+  .xs\:us-gap-x-5 {
+    column-gap: 1.25rem;
+  }
+  .xs\:us-gap-x-6 {
+    column-gap: 1.5rem;
+  }
+  .xs\:us-gap-x-7 {
+    column-gap: 1.75rem;
+  }
+  .xs\:us-gap-x-8 {
+    column-gap: 2rem;
+  }
+  .xs\:us-gap-y-0 {
+    row-gap: 0;
+  }
+  .xs\:us-gap-y-1 {
+    row-gap: 0.25rem;
+  }
+  .xs\:us-gap-y-2 {
+    row-gap: 0.5rem;
+  }
+  .xs\:us-gap-y-3 {
+    row-gap: 0.75rem;
+  }
+  .xs\:us-gap-y-4 {
+    row-gap: 1rem;
+  }
+  .xs\:us-gap-y-5 {
+    row-gap: 1.25rem;
+  }
+  .xs\:us-gap-y-6 {
+    row-gap: 1.5rem;
+  }
+  .xs\:us-gap-y-7 {
+    row-gap: 1.75rem;
+  }
+  .xs\:us-gap-y-8 {
+    row-gap: 2rem;
+  }
+}
+@media screen and (min-width: 600px) {
+  .sm\:us-d-block {
+    display: block;
+  }
+  .sm\:us-d-inline {
+    display: inline;
+  }
+  .sm\:us-d-flex {
+    display: flex;
+  }
+  .sm\:us-d-grid {
+    display: grid;
+  }
+  .sm\:us-d-contents {
+    display: contents;
+  }
+  .sm\:us-d-none {
+    display: none;
+  }
+  .sm\:us-flex-row {
+    flex-direction: row;
+  }
+  .sm\:us-flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .sm\:us-flex-col {
+    flex-direction: column;
+  }
+  .sm\:us-flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .sm\:us-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .sm\:us-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .sm\:us-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .sm\:us-flex-grow-0 {
+    flex-grow: 0;
+  }
+  .sm\:us-flex-grow-1 {
+    flex-grow: 1;
+  }
+  .sm\:us-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .sm\:us-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .sm\:us-gap-0 {
+    gap: 0;
+  }
+  .sm\:us-gap-1 {
+    gap: 0.25rem;
+  }
+  .sm\:us-gap-2 {
+    gap: 0.5rem;
+  }
+  .sm\:us-gap-3 {
+    gap: 0.75rem;
+  }
+  .sm\:us-gap-4 {
+    gap: 1rem;
+  }
+  .sm\:us-gap-5 {
+    gap: 1.25rem;
+  }
+  .sm\:us-gap-6 {
+    gap: 1.5rem;
+  }
+  .sm\:us-gap-7 {
+    gap: 1.75rem;
+  }
+  .sm\:us-gap-8 {
+    gap: 2rem;
+  }
+  .sm\:us-gap-x-0 {
+    column-gap: 0;
+  }
+  .sm\:us-gap-x-1 {
+    column-gap: 0.25rem;
+  }
+  .sm\:us-gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  .sm\:us-gap-x-3 {
+    column-gap: 0.75rem;
+  }
+  .sm\:us-gap-x-4 {
+    column-gap: 1rem;
+  }
+  .sm\:us-gap-x-5 {
+    column-gap: 1.25rem;
+  }
+  .sm\:us-gap-x-6 {
+    column-gap: 1.5rem;
+  }
+  .sm\:us-gap-x-7 {
+    column-gap: 1.75rem;
+  }
+  .sm\:us-gap-x-8 {
+    column-gap: 2rem;
+  }
+  .sm\:us-gap-y-0 {
+    row-gap: 0;
+  }
+  .sm\:us-gap-y-1 {
+    row-gap: 0.25rem;
+  }
+  .sm\:us-gap-y-2 {
+    row-gap: 0.5rem;
+  }
+  .sm\:us-gap-y-3 {
+    row-gap: 0.75rem;
+  }
+  .sm\:us-gap-y-4 {
+    row-gap: 1rem;
+  }
+  .sm\:us-gap-y-5 {
+    row-gap: 1.25rem;
+  }
+  .sm\:us-gap-y-6 {
+    row-gap: 1.5rem;
+  }
+  .sm\:us-gap-y-7 {
+    row-gap: 1.75rem;
+  }
+  .sm\:us-gap-y-8 {
+    row-gap: 2rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .md\:us-d-block {
+    display: block;
+  }
+  .md\:us-d-inline {
+    display: inline;
+  }
+  .md\:us-d-flex {
+    display: flex;
+  }
+  .md\:us-d-grid {
+    display: grid;
+  }
+  .md\:us-d-contents {
+    display: contents;
+  }
+  .md\:us-d-none {
+    display: none;
+  }
+  .md\:us-flex-row {
+    flex-direction: row;
+  }
+  .md\:us-flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .md\:us-flex-col {
+    flex-direction: column;
+  }
+  .md\:us-flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .md\:us-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .md\:us-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .md\:us-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .md\:us-flex-grow-0 {
+    flex-grow: 0;
+  }
+  .md\:us-flex-grow-1 {
+    flex-grow: 1;
+  }
+  .md\:us-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .md\:us-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .md\:us-gap-0 {
+    gap: 0;
+  }
+  .md\:us-gap-1 {
+    gap: 0.25rem;
+  }
+  .md\:us-gap-2 {
+    gap: 0.5rem;
+  }
+  .md\:us-gap-3 {
+    gap: 0.75rem;
+  }
+  .md\:us-gap-4 {
+    gap: 1rem;
+  }
+  .md\:us-gap-5 {
+    gap: 1.25rem;
+  }
+  .md\:us-gap-6 {
+    gap: 1.5rem;
+  }
+  .md\:us-gap-7 {
+    gap: 1.75rem;
+  }
+  .md\:us-gap-8 {
+    gap: 2rem;
+  }
+  .md\:us-gap-x-0 {
+    column-gap: 0;
+  }
+  .md\:us-gap-x-1 {
+    column-gap: 0.25rem;
+  }
+  .md\:us-gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  .md\:us-gap-x-3 {
+    column-gap: 0.75rem;
+  }
+  .md\:us-gap-x-4 {
+    column-gap: 1rem;
+  }
+  .md\:us-gap-x-5 {
+    column-gap: 1.25rem;
+  }
+  .md\:us-gap-x-6 {
+    column-gap: 1.5rem;
+  }
+  .md\:us-gap-x-7 {
+    column-gap: 1.75rem;
+  }
+  .md\:us-gap-x-8 {
+    column-gap: 2rem;
+  }
+  .md\:us-gap-y-0 {
+    row-gap: 0;
+  }
+  .md\:us-gap-y-1 {
+    row-gap: 0.25rem;
+  }
+  .md\:us-gap-y-2 {
+    row-gap: 0.5rem;
+  }
+  .md\:us-gap-y-3 {
+    row-gap: 0.75rem;
+  }
+  .md\:us-gap-y-4 {
+    row-gap: 1rem;
+  }
+  .md\:us-gap-y-5 {
+    row-gap: 1.25rem;
+  }
+  .md\:us-gap-y-6 {
+    row-gap: 1.5rem;
+  }
+  .md\:us-gap-y-7 {
+    row-gap: 1.75rem;
+  }
+  .md\:us-gap-y-8 {
+    row-gap: 2rem;
+  }
+}
+@media screen and (min-width: 1264px) {
+  .lg\:us-d-block {
+    display: block;
+  }
+  .lg\:us-d-inline {
+    display: inline;
+  }
+  .lg\:us-d-flex {
+    display: flex;
+  }
+  .lg\:us-d-grid {
+    display: grid;
+  }
+  .lg\:us-d-contents {
+    display: contents;
+  }
+  .lg\:us-d-none {
+    display: none;
+  }
+  .lg\:us-flex-row {
+    flex-direction: row;
+  }
+  .lg\:us-flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .lg\:us-flex-col {
+    flex-direction: column;
+  }
+  .lg\:us-flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .lg\:us-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .lg\:us-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .lg\:us-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .lg\:us-flex-grow-0 {
+    flex-grow: 0;
+  }
+  .lg\:us-flex-grow-1 {
+    flex-grow: 1;
+  }
+  .lg\:us-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .lg\:us-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .lg\:us-gap-0 {
+    gap: 0;
+  }
+  .lg\:us-gap-1 {
+    gap: 0.25rem;
+  }
+  .lg\:us-gap-2 {
+    gap: 0.5rem;
+  }
+  .lg\:us-gap-3 {
+    gap: 0.75rem;
+  }
+  .lg\:us-gap-4 {
+    gap: 1rem;
+  }
+  .lg\:us-gap-5 {
+    gap: 1.25rem;
+  }
+  .lg\:us-gap-6 {
+    gap: 1.5rem;
+  }
+  .lg\:us-gap-7 {
+    gap: 1.75rem;
+  }
+  .lg\:us-gap-8 {
+    gap: 2rem;
+  }
+  .lg\:us-gap-x-0 {
+    column-gap: 0;
+  }
+  .lg\:us-gap-x-1 {
+    column-gap: 0.25rem;
+  }
+  .lg\:us-gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  .lg\:us-gap-x-3 {
+    column-gap: 0.75rem;
+  }
+  .lg\:us-gap-x-4 {
+    column-gap: 1rem;
+  }
+  .lg\:us-gap-x-5 {
+    column-gap: 1.25rem;
+  }
+  .lg\:us-gap-x-6 {
+    column-gap: 1.5rem;
+  }
+  .lg\:us-gap-x-7 {
+    column-gap: 1.75rem;
+  }
+  .lg\:us-gap-x-8 {
+    column-gap: 2rem;
+  }
+  .lg\:us-gap-y-0 {
+    row-gap: 0;
+  }
+  .lg\:us-gap-y-1 {
+    row-gap: 0.25rem;
+  }
+  .lg\:us-gap-y-2 {
+    row-gap: 0.5rem;
+  }
+  .lg\:us-gap-y-3 {
+    row-gap: 0.75rem;
+  }
+  .lg\:us-gap-y-4 {
+    row-gap: 1rem;
+  }
+  .lg\:us-gap-y-5 {
+    row-gap: 1.25rem;
+  }
+  .lg\:us-gap-y-6 {
+    row-gap: 1.5rem;
+  }
+  .lg\:us-gap-y-7 {
+    row-gap: 1.75rem;
+  }
+  .lg\:us-gap-y-8 {
+    row-gap: 2rem;
+  }
+}
+@media screen and (min-width: 1904px) {
+  .xl\:us-d-block {
+    display: block;
+  }
+  .xl\:us-d-inline {
+    display: inline;
+  }
+  .xl\:us-d-flex {
+    display: flex;
+  }
+  .xl\:us-d-grid {
+    display: grid;
+  }
+  .xl\:us-d-contents {
+    display: contents;
+  }
+  .xl\:us-d-none {
+    display: none;
+  }
+  .xl\:us-flex-row {
+    flex-direction: row;
+  }
+  .xl\:us-flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .xl\:us-flex-col {
+    flex-direction: column;
+  }
+  .xl\:us-flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .xl\:us-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .xl\:us-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .xl\:us-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .xl\:us-flex-grow-0 {
+    flex-grow: 0;
+  }
+  .xl\:us-flex-grow-1 {
+    flex-grow: 1;
+  }
+  .xl\:us-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .xl\:us-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .xl\:us-gap-0 {
+    gap: 0;
+  }
+  .xl\:us-gap-1 {
+    gap: 0.25rem;
+  }
+  .xl\:us-gap-2 {
+    gap: 0.5rem;
+  }
+  .xl\:us-gap-3 {
+    gap: 0.75rem;
+  }
+  .xl\:us-gap-4 {
+    gap: 1rem;
+  }
+  .xl\:us-gap-5 {
+    gap: 1.25rem;
+  }
+  .xl\:us-gap-6 {
+    gap: 1.5rem;
+  }
+  .xl\:us-gap-7 {
+    gap: 1.75rem;
+  }
+  .xl\:us-gap-8 {
+    gap: 2rem;
+  }
+  .xl\:us-gap-x-0 {
+    column-gap: 0;
+  }
+  .xl\:us-gap-x-1 {
+    column-gap: 0.25rem;
+  }
+  .xl\:us-gap-x-2 {
+    column-gap: 0.5rem;
+  }
+  .xl\:us-gap-x-3 {
+    column-gap: 0.75rem;
+  }
+  .xl\:us-gap-x-4 {
+    column-gap: 1rem;
+  }
+  .xl\:us-gap-x-5 {
+    column-gap: 1.25rem;
+  }
+  .xl\:us-gap-x-6 {
+    column-gap: 1.5rem;
+  }
+  .xl\:us-gap-x-7 {
+    column-gap: 1.75rem;
+  }
+  .xl\:us-gap-x-8 {
+    column-gap: 2rem;
+  }
+  .xl\:us-gap-y-0 {
+    row-gap: 0;
+  }
+  .xl\:us-gap-y-1 {
+    row-gap: 0.25rem;
+  }
+  .xl\:us-gap-y-2 {
+    row-gap: 0.5rem;
+  }
+  .xl\:us-gap-y-3 {
+    row-gap: 0.75rem;
+  }
+  .xl\:us-gap-y-4 {
+    row-gap: 1rem;
+  }
+  .xl\:us-gap-y-5 {
+    row-gap: 1.25rem;
+  }
+  .xl\:us-gap-y-6 {
+    row-gap: 1.5rem;
+  }
+  .xl\:us-gap-y-7 {
+    row-gap: 1.75rem;
+  }
+  .xl\:us-gap-y-8 {
+    row-gap: 2rem;
+  }
+}
 /* Estilos CSS aquí */
 .slider-container {
   width: 300px;