@shohojdhara/atomix 0.2.7 → 0.2.9

package/dist/themes/boomdevs.css

@@ -2763,12 +2763,76 @@ a, a:hover {
 .c-btn--icon {
   --atomix-btn-padding-x: var(--atomix-btn-padding-y);
 }
+.c-btn--full-width {
+  width: 100%;
+}
+.c-btn--block {
+  display: block;
+  width: 100%;
+}
+.c-btn--loading {
+  position: relative;
+  pointer-events: none;
+  cursor: wait;
+}
+.c-btn--loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: var(--atomix-btn-border-radius);
+  z-index: 0;
+}
+.c-btn--active {
+  --atomix-btn-bg: var(--atomix-btn-active-bg, var(--atomix-btn-hover-bg));
+  --atomix-btn-color: var(--atomix-btn-active-color, var(--atomix-btn-hover-color));
+  --atomix-btn-border-color: var(--atomix-btn-active-border-color, var(--atomix-btn-hover-border-color));
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.c-btn--selected {
+  --atomix-btn-border-width: 2px;
+  --atomix-btn-border-color: var(--atomix-brand-border-subtle, var(--atomix-primary));
+  box-shadow: 0 0 0 2px rgba(var(--atomix-primary-rgb, 124, 58, 237), 0.2);
+}
+.c-btn__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.c-btn__icon--start {
+  order: -1;
+}
+.c-btn__icon--end {
+  order: 1;
+}
+.c-btn__label {
+  display: inline-block;
+}
+.c-btn__spinner {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+.c-btn__spinner:last-child {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.c-btn:focus-visible {
+  outline: 2px solid var(--atomix-brand-border-subtle, var(--atomix-primary));
+  outline-offset: 2px;
+  box-shadow: var(--atomix-btn-focus-box-shadow);
+}
 .c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
   color: var(--atomix-btn-disabled-color);
   pointer-events: none;
   background-color: var(--atomix-btn-disabled-bg);
   border-color: var(--atomix-btn-disabled-border-color);
   opacity: var(--atomix-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+.c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
+  outline: none;
 }
 .c-btn--glass {
   background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
@@ -2776,6 +2840,22 @@ a, a:hover {
 .c-btn--glass:hover {
   background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  .c-btn {
+    transition: none;
+  }
+  .c-btn__spinner {
+    animation-duration: 2s;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-btn {
+    border-width: 2px;
+  }
+  .c-btn:focus-visible {
+    outline-width: 3px;
+  }
+}
 .c-datepicker {
   --atomix-datepicker-width: 19rem;
   --atomix-datepicker-padding-x: 0.5rem;
@@ -3238,6 +3318,19 @@ a, a:hover {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   background-color: var(--atomix-card-bg);
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+.c-card[href] {
+  display: block;
+  text-decoration: none !important;
+  color: inherit !important;
+  cursor: pointer;
+}
+.c-card[href]:hover, .c-card[href]:focus, .c-card[href]:visited, .c-card[href]:active {
+  text-decoration: none !important;
+  color: inherit !important;
 }
 .c-card__header {
   margin-bottom: var(--atomix-card-header-spacer-y);
@@ -3315,15 +3408,220 @@ a, a:hover {
   padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
   padding-top: 0;
 }
+.c-card--sm {
+  --atomix-card-spacer-y: 0.5rem;
+  --atomix-card-spacer-x: 0.5rem;
+  --atomix-card-title-font-size: var(--atomix-font-size-sm);
+  --atomix-card-text-font-size: var(--atomix-font-size-xs);
+}
+.c-card--lg {
+  --atomix-card-spacer-y: 1.5rem;
+  --atomix-card-spacer-x: 1.5rem;
+  --atomix-card-title-font-size: var(--atomix-font-size-lg);
+  --atomix-card-text-font-size: var(--atomix-font-size-base);
+}
+.c-card--filled {
+  background-color: var(--atomix-card-bg);
+}
 .c-card--glass {
   max-width: none;
   background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
 }
+.c-card--outlined {
+  background-color: transparent;
+  border-width: var(--atomix-card-border-width);
+}
+.c-card--ghost {
+  background-color: transparent;
+  border: none;
+}
+.c-card--elevated {
+  box-shadow: var(--atomix-box-shadow-md);
+}
+.c-card--elevation-none {
+  box-shadow: none;
+}
+.c-card--elevation-sm {
+  box-shadow: var(--atomix-box-shadow-sm);
+}
+.c-card--elevation-md {
+  box-shadow: var(--atomix-box-shadow-md);
+}
+.c-card--elevation-lg {
+  box-shadow: var(--atomix-box-shadow-lg);
+}
+.c-card--elevation-xl {
+  box-shadow: var(--atomix-box-shadow-xl);
+}
+.c-card--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.c-card--loading {
+  position: relative;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+}
+.c-card--loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--atomix-card-bg-hover);
+  -webkit-backdrop-filter: blur(1px);
+          backdrop-filter: blur(1px);
+  z-index: 1;
+  border-radius: var(--atomix-card-border-radius);
+}
+[data-theme=dark] .c-card--loading::before, .c-card--loading.dark::before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.c-card--selected {
+  --atomix-card-border-color: var(--atomix-brand-border-subtle);
+  --atomix-card-border-width: 2px;
+  box-shadow: var(--atomix-box-shadow-md);
+}
+.c-card--interactive {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.c-card--interactive:hover:not(.c-card--interactive--disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--atomix-box-shadow-lg);
+}
+.c-card--interactive:active:not(.c-card--interactive--disabled) {
+  transform: translateY(0);
+}
+.c-card--primary {
+  --atomix-card-bg: var(--atomix-brand-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-brand-bg-subtle);
+  --atomix-card-border-color: var(--atomix-brand-border-subtle);
+  --atomix-card-title-color: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-brand-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-brand-bg-subtle);
+}
+.c-card--secondary {
+  --atomix-card-bg: var(--atomix-secondary-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-secondary-bg-subtle);
+  --atomix-card-border-color: var(--atomix-secondary-border-subtle);
+  --atomix-card-title-color: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-secondary-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-secondary-bg-subtle);
+}
+.c-card--success {
+  --atomix-card-bg: var(--atomix-success-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-success-bg-subtle);
+  --atomix-card-border-color: var(--atomix-success-border-subtle);
+  --atomix-card-title-color: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-success-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-success-bg-subtle);
+}
+.c-card--info {
+  --atomix-card-bg: var(--atomix-info-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-info-bg-subtle);
+  --atomix-card-border-color: var(--atomix-info-border-subtle);
+  --atomix-card-title-color: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-info-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-info-bg-subtle);
+}
+.c-card--warning {
+  --atomix-card-bg: var(--atomix-warning-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-warning-bg-subtle);
+  --atomix-card-border-color: var(--atomix-warning-border-subtle);
+  --atomix-card-title-color: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-warning-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-warning-bg-subtle);
+}
+.c-card--error {
+  --atomix-card-bg: var(--atomix-error-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-error-bg-subtle);
+  --atomix-card-border-color: var(--atomix-error-border-subtle);
+  --atomix-card-title-color: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-bg: var(--atomix-error-text-emphasis);
+  --atomix-card-icon-color: var(--atomix-error-bg-subtle);
+}
+.c-card--light {
+  --atomix-card-bg: var(--atomix-light);
+  --atomix-card-bg-hover: var(--atomix-light-hover);
+  --atomix-card-border-color: var(--atomix-light);
+  --atomix-card-title-color: var(--atomix-dark);
+  --atomix-card-text-color: var(--atomix-dark);
+  --atomix-card-icon-bg: var(--atomix-dark);
+  --atomix-card-icon-color: var(--atomix-light);
+}
+.c-card--dark {
+  --atomix-card-bg: var(--atomix-dark);
+  --atomix-card-bg-hover: var(--atomix-dark-hover);
+  --atomix-card-border-color: var(--atomix-dark);
+  --atomix-card-title-color: var(--atomix-light);
+  --atomix-card-text-color: var(--atomix-light);
+  --atomix-card-icon-bg: var(--atomix-light);
+  --atomix-card-icon-color: var(--atomix-dark);
+}
+.c-card__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border-radius: var(--atomix-card-border-radius);
+  pointer-events: none;
+}
+.c-card__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid;
+  border-color: var(--atomix-border-primary, rgba(0, 0, 0, 0.15));
+  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
+  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary));
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  background-color: transparent;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: block;
+}
+.c-card:focus-visible {
+  outline: 2px solid var(--atomix-brand-border-subtle);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-card {
+    transition: none;
+  }
+  .c-card--interactive:hover:not(.c-card--disabled) {
+    transform: none;
+  }
+  .c-card__spinner {
+    animation: none;
+    border-top-color: transparent;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-card {
+    border-width: 2px;
+  }
+  .c-card--selected {
+    border-width: 3px;
+  }
+}
 .is-elevated .c-card {
   box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
   z-index: 1;
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .c-chart {
   --atomix-chart-primary-color: var(--atomix-primary);
   --atomix-chart-secondary-color: var(--atomix-secondary);
@@ -9512,30 +9810,30 @@ a, a:hover {
     padding: 1rem 1rem;
   }
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__wrapper {
-    height: 0px;
-    overflow: hidden;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: var(--atomix-side-menu-wrapper-transition);
-  }
+.c-side-menu__wrapper {
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
 }
-@media (max-width: 991.98px) {
-  .c-side-menu__inner {
-    padding-top: var(--atomix-side-menu-inner-padding-top);
-  }
+.c-side-menu__inner {
+  padding-top: var(--atomix-side-menu-inner-padding-top);
 }
 .c-side-menu__title {
   color: var(--atomix-side-menu-title-color);
   font-size: var(--atomix-side-menu-title-font-size);
   font-weight: var(--atomix-side-menu-title-font-weight);
+  margin: 0;
   margin-bottom: var(--atomix-side-menu-title-spacer-y);
-  margin: 0 0 var(--atomix-side-menu-title-spacer-y) 0;
+}
+.c-side-menu__toggler .c-side-menu__title {
+  margin-bottom: 0;
+  flex: 1 1;
 }
 .c-side-menu__toggler {
-  display: none;
+  display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -9549,19 +9847,18 @@ a, a:hover {
           user-select: none;
   transition: var(--atomix-side-menu-toggler-transition);
   text-align: left;
-}
-@media (max-width: 991.98px) {
-  .c-side-menu__toggler {
-    display: flex;
-  }
+  margin: 0;
 }
 .c-side-menu__toggler:hover {
   background-color: var(--atomix-side-menu-toggler-hover-bg);
 }
-.c-side-menu__toggler:focus {
+.c-side-menu__toggler:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__toggler:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__toggler:active {
   transform: scale(0.98);
 }
@@ -9573,6 +9870,23 @@ a, a:hover {
 .c-side-menu__toggler-icon {
   transition: var(--atomix-side-menu-toggler-transition);
   font-size: 0.875em;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+}
+.c-side-menu__toggler--nested {
+  margin-bottom: var(--atomix-side-menu-item-gap);
+}
+.c-side-menu__nested-wrapper {
+  overflow: hidden;
+  transition: var(--atomix-side-menu-wrapper-transition);
+  height: 0px;
+  margin: 0;
+}
+.c-side-menu__nested-inner {
+  display: block;
 }
 .c-side-menu__list {
   list-style: none;
@@ -9585,6 +9899,9 @@ a, a:hover {
 .c-side-menu__list:last-child {
   margin-bottom: 0;
 }
+.c-side-menu__item {
+  display: block;
+}
 .c-side-menu__link {
   display: flex;
   align-items: center;
@@ -9600,16 +9917,20 @@ a, a:hover {
   text-decoration: none;
   cursor: pointer;
   transition: var(--atomix-side-menu-item-transition);
+  position: relative;
 }
 .c-side-menu__link:hover {
   color: var(--atomix-side-menu-item-hover-color);
   background-color: var(--atomix-side-menu-item-hover-bg);
   text-decoration: none;
 }
-.c-side-menu__link:focus {
+.c-side-menu__link:focus-visible {
   outline: 2px solid var(--atomix-focus-ring-color);
   outline-offset: 2px;
 }
+.c-side-menu__link:focus:not(:focus-visible) {
+  outline: none;
+}
 .c-side-menu__link:active {
   transform: scale(0.98);
 }
@@ -9636,9 +9957,15 @@ a, a:hover {
   background-color: transparent;
   border-bottom: none;
 }
-.c-side-menu.is-open .c-side-menu__toggler-icon {
+.c-side-menu.is-open .c-side-menu__toggler .c-side-menu__toggler-icon {
   transform: rotate(90deg);
 }
+.c-side-menu__toggler--nested.is-open .c-side-menu__toggler-icon {
+  transform: rotate(90deg);
+}
+.c-side-menu__toggler--nested.is-open + .c-side-menu__nested-wrapper {
+  height: auto;
+}
 .dark-mode .c-side-menu {
   --atomix-side-menu-bg: var(--atomix-gray-9);
   --atomix-side-menu-border-color: var(--atomix-gray-7);
@@ -9656,6 +9983,18 @@ a, a:hover {
   .c-side-menu .c-side-menu__toggler-icon {
     transition: none;
   }
+  .c-side-menu .c-side-menu__toggler:active {
+    transform: none;
+  }
+  .c-side-menu .c-side-menu__link:active {
+    transform: none;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-side-menu .c-side-menu__toggler:focus-visible,
+  .c-side-menu .c-side-menu__link:focus-visible {
+    outline-width: 3px;
+  }
 }
 .c-skeleton {
   --atomix-skeleton-width: 100%;
@@ -10432,18 +10771,46 @@ a, a:hover {
   --atomix-tooltip-border-color: ;
   --atomix-tooltip-box-shadow: ;
   --atomix-tooltip-arrow-size: 0.75rem;
+  --atomix-tooltip-offset: 0.75rem;
   position: absolute;
-  bottom: calc(100% + var(--atomix-tooltip-arrow-size));
-  left: 50%;
   width: -moz-max-content;
   width: max-content;
   height: -moz-max-content;
   height: max-content;
   max-width: var(--atomix-tooltip-max-width);
-  transform: translateX(-50%);
   pointer-events: none;
   z-index: 1000;
 }
+.c-tooltip--top, .c-tooltip--top-left, .c-tooltip--top-right {
+  bottom: calc(100% + var(--atomix-tooltip-offset));
+  transform-origin: bottom center;
+}
+.c-tooltip--bottom, .c-tooltip--bottom-left, .c-tooltip--bottom-right {
+  top: calc(100% + var(--atomix-tooltip-offset));
+  transform-origin: top center;
+}
+.c-tooltip--left {
+  right: calc(100% + var(--atomix-tooltip-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: right center;
+}
+.c-tooltip--right {
+  left: calc(100% + var(--atomix-tooltip-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: left center;
+}
+.c-tooltip--top, .c-tooltip--bottom {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.c-tooltip--top-left, .c-tooltip--bottom-left {
+  left: 0;
+}
+.c-tooltip--top-right, .c-tooltip--bottom-right {
+  right: 0;
+}
 .c-tooltip__content {
   position: relative;
   color: var(--atomix-tooltip-color);
@@ -10452,10 +10819,12 @@ a, a:hover {
   padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
   background-color: var(--atomix-tooltip-bg);
   border-radius: var(--atomix-tooltip-border-radius);
+  box-shadow: var(--atomix-tooltip-box-shadow);
   z-index: 2;
   opacity: 0;
+  pointer-events: auto;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95);
-  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
 }
 .c-tooltip__content.is-active {
   opacity: 1;
@@ -10463,71 +10832,37 @@ a, a:hover {
 }
 .c-tooltip__arrow {
   position: absolute;
-  bottom: calc(var(--atomix-tooltip-arrow-size) / -2);
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
   width: var(--atomix-tooltip-arrow-size);
   height: var(--atomix-tooltip-arrow-size);
   background-color: var(--atomix-tooltip-bg);
   z-index: 1;
-}
-.c-tooltip--top-left {
-  left: auto;
-  right: calc(100% - var(--atomix-tooltip-arrow-size) * 2);
-  transform: translateX(0);
-}
-.c-tooltip--top-left .c-tooltip__arrow {
-  left: auto;
-  right: var(--atomix-tooltip-arrow-size);
   transform: rotate(45deg);
 }
-.c-tooltip--top-right {
-  left: calc(100% - var(--atomix-tooltip-arrow-size) * 2);
-  transform: translateX(0);
+.c-tooltip--top .c-tooltip__arrow, .c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--top-right .c-tooltip__arrow {
+  bottom: calc(var(--atomix-tooltip-arrow-size) / -2);
 }
-.c-tooltip--top-right .c-tooltip__arrow {
-  left: var(--atomix-tooltip-arrow-size);
-  transform: rotate(45deg);
+.c-tooltip--bottom .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
+  top: calc(var(--atomix-tooltip-arrow-size) / -2);
 }
-.c-tooltip--right {
-  left: calc(100% + var(--atomix-tooltip-arrow-size));
+.c-tooltip--left .c-tooltip__arrow {
+  right: calc(var(--atomix-tooltip-arrow-size) / -2);
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%) rotate(45deg);
 }
 .c-tooltip--right .c-tooltip__arrow {
   left: calc(var(--atomix-tooltip-arrow-size) / -2);
   top: 50%;
-  bottom: auto;
-  transform: rotate(45deg) translateY(-50%);
-  transform-origin: top;
-}
-.c-tooltip--left {
-  left: auto;
-  right: calc(100% + var(--atomix-tooltip-arrow-size));
-  top: 50%;
-  transform: translateY(-50%);
-}
-.c-tooltip--left .c-tooltip__arrow {
-  left: auto;
-  top: 50%;
-  bottom: auto;
-  right: calc(var(--atomix-tooltip-arrow-size) / -5);
-  transform: rotate(45deg) translateY(-50%);
-}
-.c-tooltip--bottom {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
+  transform: translateY(-50%) rotate(45deg);
 }
-.c-tooltip--bottom .c-tooltip__arrow {
-  top: calc(var(--atomix-tooltip-arrow-size) / -2);
-  bottom: auto;
+.c-tooltip--top .c-tooltip__arrow, .c-tooltip--bottom .c-tooltip__arrow {
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
 }
-.c-tooltip--bottom-left {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
-  left: 0;
+.c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow {
+  left: var(--atomix-tooltip-arrow-size);
 }
-.c-tooltip--bottom-right {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
-  right: 0;
+.c-tooltip--top-right .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
+  right: var(--atomix-tooltip-arrow-size);
 }
 .c-upload {
   --atomix-upload-width: 31.25rem;