@phantompixeldev/retrocss 2.8.1 → 3.0.1

package/dist/retro.css

@@ -339,13 +339,13 @@
   --retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
   --retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
   --retro-font-mono: Courier New, Courier, monospace;
-  --retro-font-size: 0.875rem;
-  --retro-font-size-xs: 0.6875rem;
-  --retro-font-size-sm: 0.75rem;
-  --retro-font-size-lg: 1rem;
-  --retro-font-size-xl: 1.125rem;
-  --retro-font-size-2xl: 1.375rem;
-  --retro-font-size-3xl: 1.75rem;
+  --retro-font-size: 1rem;
+  --retro-font-size-xs: 0.75rem;
+  --retro-font-size-sm: 0.875rem;
+  --retro-font-size-lg: 1.125rem;
+  --retro-font-size-xl: 1.25rem;
+  --retro-font-size-2xl: 1.5rem;
+  --retro-font-size-3xl: 1.875rem;
   --retro-line-height: 1.5;
   --retro-line-height-tight: 1.25;
   --retro-font-weight-normal: 400;
@@ -628,7 +628,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border-radius: 0 !important;
+  border-radius: 0;
   box-shadow: none;
   transition: none;
 }
@@ -977,7 +977,6 @@ h5, h6 {
   font-size: var(--retro-font-size-2xl);
   font-weight: var(--retro-font-weight-bold);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
   padding: 0.5rem 1.2rem;
   margin-bottom: 0.5rem;
   color: var(--retro-text);
@@ -1040,6 +1039,7 @@ h5, h6 {
 .retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
   padding: var(--retro-spacing-sm) var(--retro-spacing-md);
   margin-bottom: var(--retro-spacing-md);
+  min-width: 0;
   border: 2px solid;
   position: relative;
   font-family: var(--retro-font-heading);
@@ -1440,6 +1440,16 @@ h5, h6 {
 .retro-code .retro-code-copy:active {
   box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
 }
+.retro-code .retro-code-copy.retro-code-copy-ok {
+  background: var(--retro-success);
+  color: var(--retro-success-fg);
+  border-color: var(--retro-success-active);
+}
+.retro-code .retro-code-copy.retro-code-copy-fail {
+  background: var(--retro-danger);
+  color: var(--retro-danger-fg);
+  border-color: var(--retro-danger-active);
+}
 .retro-code code {
   display: block;
   padding: 1.2rem;
@@ -1779,7 +1789,7 @@ h5, h6 {
   text-shadow: none;
   padding: 8px 16px;
   font-weight: bold;
-  font-size: 0.875rem;
+  font-size: 1rem;
   user-select: none;
   display: block;
   text-align: left;
@@ -1789,7 +1799,7 @@ h5, h6 {
   padding: 16px 16px;
   background: var(--retro-card-content-bg);
   border-top: 2px solid var(--retro-card-content-bg);
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--retro-card-content-text);
   min-height: 2em;
   text-align: left;
@@ -1800,7 +1810,7 @@ h5, h6 {
   border-top: 2px solid var(--retro-card-footer-bg);
   color: var(--retro-card-footer-text);
   padding: 8px 16px;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   text-align: left;
 }
 
@@ -1814,7 +1824,7 @@ h5, h6 {
 
 .retro-card-compact .retro-card-content {
   padding: 4px 8px;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -1961,7 +1971,7 @@ input[type=color].retro-input {
   width: 48px;
   height: 36px;
   padding: 2px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   border: 2px solid var(--retro-border-dark);
   background: var(--retro-input-bg);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -1973,7 +1983,7 @@ input[type=range].retro-input {
   background: transparent;
   appearance: none;
   height: 6px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   outline: none;
   border: 2px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -1983,7 +1993,7 @@ input[type=range].retro-input::-webkit-slider-thumb {
   appearance: none;
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-primary);
   border: 2px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -1993,7 +2003,7 @@ input[type=range].retro-input::-webkit-slider-thumb {
 input[type=range].retro-input::-moz-range-thumb {
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-primary);
   border: 2px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -2003,7 +2013,7 @@ input[type=range].retro-input::-moz-range-thumb {
 input[type=range].retro-input::-ms-thumb {
   width: 18px;
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-primary);
   border: 2px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
@@ -2013,7 +2023,7 @@ input[type=range].retro-input::-ms-thumb {
 input[type=range].retro-input::-webkit-slider-runnable-track {
   height: 6px;
   background: var(--retro-input-bg);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
 }
 
 input[type=range].retro-input::-ms-fill-lower,
@@ -2576,7 +2586,7 @@ input[type=radio].retro-input:focus-visible {
   min-width: 0;
 }
 
-.retro-toast-close {
+.retro-alert-close, .retro-toast-close {
   background: none;
   border: none;
   color: inherit;
@@ -2584,12 +2594,15 @@ input[type=radio].retro-input:focus-visible {
   font-weight: bold;
   margin-left: auto;
   cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s;
+  opacity: 1;
+  line-height: 1;
+  padding: 0 0.25em;
+  transition: background-color 0.2s;
 }
 
-.retro-toast-close:hover {
-  opacity: 1;
+.retro-alert-close:hover, .retro-toast-close:hover,
+.retro-alert-close:focus-visible, .retro-toast-close:focus-visible {
+  background-color: rgba(var(--retro-shadow-rgb), 0.18);
 }
 
 .retro-alert-primary {
@@ -2735,7 +2748,7 @@ input[type=radio].retro-input:focus-visible {
   background-color: var(--retro-table-bg);
   color: var(--retro-table-header-text);
   font-family: var(--retro-font);
-  font-size: 0.875rem;
+  font-size: 1rem;
   box-shadow: var(--retro-box-shadow-outset-button);
   overflow-x: auto;
   margin-bottom: var(--retro-spacing-md);
@@ -2765,12 +2778,43 @@ input[type=radio].retro-input:focus-visible {
 .retro-table tbody tr:hover {
   background-color: var(--retro-table-striped-bg);
 }
+.retro-table thead th.retro-th-sortable {
+  cursor: pointer;
+  user-select: none;
+  padding-right: calc(var(--retro-spacing-md) + 14px);
+  position: relative;
+}
+.retro-table thead th.retro-th-sortable:hover {
+  background-color: var(--retro-primary);
+  color: var(--retro-primary-fg);
+}
+.retro-table thead th.retro-th-sortable:focus-visible {
+  outline: 2px solid var(--retro-border-light);
+  outline-offset: -3px;
+}
+.retro-table thead th.retro-th-sortable::after {
+  content: "\11 95";
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--retro-font-size-xs);
+  opacity: 0.45;
+}
+.retro-table thead th.retro-th-sortable.asc::after {
+  content: "\15 B2";
+  opacity: 1;
+}
+.retro-table thead th.retro-th-sortable.desc::after {
+  content: "\15 BC";
+  opacity: 1;
+}
 .retro-table.retro-table-striped tbody tr:nth-child(odd) {
   background-color: var(--retro-table-striped-bg);
 }
 .retro-table.retro-table-striped tbody tr:nth-child(odd):hover {
   background-color: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-table.retro-table-bordered {
   border: 2px solid var(--retro-border-dark);
@@ -2808,6 +2852,27 @@ input[type=radio].retro-input:focus-visible {
   width: 16px;
 }
 
+/**
+ * @name Responsive Table Wrapper
+ * @group components
+ * @description
+ * Horizontal scroll container for a wide table. `table-responsive.js` wraps
+ * every `.retro-table` in this class — but the styles had been commented out,
+ * so the wrapper was inert and wide tables simply overflowed the page on
+ * narrow viewports.
+ */
+.retro-table-responsive {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.retro-table-responsive > .retro-table {
+  margin-bottom: 0;
+}
+
 /* RetroCSS - A Retro-Inspired CSS Framework */
 /* Main SCSS file that imports all components */
 /* Core */
@@ -3050,7 +3115,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-item.active, .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   text-shadow: 0 1px 2px var(--retro-border-dark), 0 0 2px var(--retro-border-light);
   outline: 2px solid var(--retro-border-light);
   outline-offset: -2px;
@@ -3071,7 +3136,7 @@ input[type=radio].retro-input:focus-visible {
 }
 
 .retro-tab {
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
   margin-right: -1px;
   margin-bottom: 0;
   background: var(--retro-light);
@@ -3125,6 +3190,7 @@ input[type=radio].retro-input:focus-visible {
   display: flex;
   flex-direction: column;
   width: max-content;
+  max-width: 100%;
   border: 2px solid var(--retro-border-dark);
   background: var(--retro-light);
   padding: 0;
@@ -3165,11 +3231,11 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-pills .retro-nav-item:hover, .retro-nav-pills .retro-tab:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-nav-pills .retro-nav-item.active, .retro-nav-pills .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   box-shadow: 0 1px 4px rgba(var(--retro-primary-rgb), 0.35) inset;
 }
@@ -3251,6 +3317,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-tabbed {
   display: flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0 0 -1px 0;
   background: transparent;
@@ -3284,6 +3351,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-underlined {
   display: flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0;
   background: transparent;
@@ -3326,6 +3394,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-nav-buttons {
   display: inline-flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0;
   background: transparent;
@@ -3345,13 +3414,13 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-buttons .retro-nav-item:first-child, .retro-nav-buttons .retro-tab:first-child {
   border-left: 2px solid var(--retro-border-dark);
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-top-left-radius: var(--retro-border-radius);
+  border-bottom-left-radius: var(--retro-border-radius);
 }
 .retro-nav-buttons .retro-nav-item:last-child, .retro-nav-buttons .retro-tab:last-child {
   border-right: 2px solid var(--retro-border-dark);
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: var(--retro-border-radius);
+  border-bottom-right-radius: var(--retro-border-radius);
 }
 .retro-nav-buttons .retro-nav-item:hover, .retro-nav-buttons .retro-tab:hover {
   background: var(--retro-white);
@@ -3360,7 +3429,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-buttons .retro-nav-item.active, .retro-nav-buttons .active.retro-tab {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   z-index: 2;
 }
 
@@ -3785,7 +3854,7 @@ input[type=radio].retro-input:focus-visible {
   min-width: 36px;
   padding: 4px 12px;
   font-size: var(--retro-font-size-lg);
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
   border: 2px solid var(--retro-border-dark);
   background: var(--retro-light);
   color: var(--retro-black);
@@ -3796,7 +3865,7 @@ input[type=radio].retro-input:focus-visible {
 .retro-pagination .retro-btn.active,
 .retro-pagination .retro-btn:active {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   border-color: var(--retro-primary);
 }
@@ -3807,11 +3876,12 @@ input[type=radio].retro-input:focus-visible {
 .retro-breadcrumbs {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   font-family: var(--retro-font);
   font-size: var(--retro-font-size-lg);
   background: var(--retro-card-bg);
   padding: 6px 12px;
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
   border: 1px solid var(--retro-border-dark);
   box-shadow: 1px 1px 0 var(--retro-border-light);
   gap: 4px;
@@ -3824,7 +3894,7 @@ input[type=radio].retro-input:focus-visible {
   align-items: center;
   gap: 2px;
   padding: 4px 10px;
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
   transition: background 0.2s;
 }
 .retro-breadcrumb.active {
@@ -3857,7 +3927,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-dropdown.open .retro-dropdown-toggle {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   border-color: var(--retro-primary-dark);
 }
 
@@ -3868,7 +3938,7 @@ input[type=radio].retro-input:focus-visible {
   justify-content: space-between;
   background: var(--retro-dropdown-bg);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
   padding: 6px 16px;
   font-family: var(--retro-font);
   font-size: var(--retro-font-size-lg);
@@ -3900,7 +3970,7 @@ input[type=radio].retro-input:focus-visible {
   min-width: 100%;
   background: var(--retro-dropdown-bg);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
   box-shadow: 2px 2px 0 var(--retro-border-light);
   z-index: 1000;
   margin-top: 2px;
@@ -3933,7 +4003,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-dropdown-item:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-dropdown-item:active {
   background: var(--retro-primary-dark);
@@ -3949,7 +4019,7 @@ input[type=radio].retro-input:focus-visible {
   align-items: flex-start;
   background: var(--retro-input-bg);
   border: 2px dashed var(--retro-border-dark);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   padding: 16px;
   box-shadow: 1px 1px 0 var(--retro-border-light);
   min-width: 260px;
@@ -3972,7 +4042,7 @@ input[type=radio].retro-input:focus-visible {
   text-align: center;
   background: var(--retro-input-bg);
   border: 1px solid var(--retro-border-medium);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   color: var(--retro-text-muted);
   font-size: var(--retro-font-size-lg);
   margin-top: 8px;
@@ -3995,7 +4065,7 @@ input[type=radio].retro-input:focus-visible {
   gap: 6px;
   background: var(--retro-input-bg);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   padding: 8px 12px;
   min-width: 220px;
 }
@@ -4051,7 +4121,7 @@ input[type=radio].retro-input:focus-visible {
   position: relative;
   background: var(--retro-input-bg);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   padding: 4px 12px;
   min-width: 220px;
 }
@@ -4080,7 +4150,7 @@ input[type=radio].retro-input:focus-visible {
   width: 100%;
   background: var(--retro-input-bg);
   border: 2px solid var(--retro-border-dark);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
   box-shadow: 2px 2px 0 var(--retro-border-light);
   z-index: 10;
 }
@@ -4102,7 +4172,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-search-suggestion:hover {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -4116,13 +4186,13 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-rating-star {
   font-size: var(--retro-font-size-3xl);
-  color: var(--retro-border-dark);
+  color: var(--retro-text-muted);
   cursor: pointer;
   transition: color 0.2s, text-shadow 0.2s, border 0.2s;
   text-shadow: 1px 1px 0 var(--retro-border-light);
   user-select: none;
   border: 2px solid var(--retro-border-dark);
-  border-radius: 6px;
+  border-radius: var(--retro-border-radius);
   background: var(--retro-bg);
   padding: 2px 2px 0 2px;
   margin-right: 2px;
@@ -4170,7 +4240,7 @@ input[type=radio].retro-input:focus-visible {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: var(--retro-border-radius);
 }
 
 .retro-divider-dashed {
@@ -4246,14 +4316,12 @@ input[type=radio].retro-input:focus-visible {
   background: var(--retro-black);
   color: var(--retro-white);
   font-size: var(--retro-font-size-sm);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   white-space: nowrap;
   box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
   z-index: 1050;
   pointer-events: none;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.2s, visibility 0.2s;
+  display: none;
   font-family: var(--retro-font);
   max-width: 200px;
   line-height: 1.4;
@@ -4268,8 +4336,7 @@ input[type=radio].retro-input:focus-visible {
   /* Active state */
 }
 .retro-tooltip.show {
-  opacity: 1;
-  visibility: visible;
+  display: block;
 }
 .retro-tooltip {
   /* Positions */
@@ -4345,7 +4412,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-primary {
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
 }
 .retro-tooltip.retro-tooltip-primary.retro-tooltip-top::after {
   border-top-color: var(--retro-primary);
@@ -4361,7 +4428,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-success {
   background: var(--retro-success);
-  color: var(--retro-white);
+  color: var(--retro-success-fg);
 }
 .retro-tooltip.retro-tooltip-success.retro-tooltip-top::after {
   border-top-color: var(--retro-success);
@@ -4393,7 +4460,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-tooltip.retro-tooltip-danger {
   background: var(--retro-danger);
-  color: var(--retro-white);
+  color: var(--retro-danger-fg);
 }
 .retro-tooltip.retro-tooltip-danger.retro-tooltip-top::after {
   border-top-color: var(--retro-danger);
@@ -4418,13 +4485,13 @@ input[type=radio].retro-input:focus-visible {
   font-size: var(--retro-font-size);
   background: var(--retro-list-bg);
   color: var(--retro-list-text);
-  border-radius: 6px;
+  border-radius: var(--retro-border-radius);
   box-shadow: 0 1px 4px rgba(var(--retro-shadow-rgb), 0.04);
 }
 .retro-list li {
   padding: var(--retro-spacing-sm) var(--retro-spacing-md);
   transition: background 0.2s, box-shadow 0.2s;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   position: relative;
   margin-bottom: 2px;
 }
@@ -4474,7 +4541,7 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-list-hover li:hover, .retro-list-hover li:focus-visible {
   background-color: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.06);
   outline: none;
 }
@@ -4504,11 +4571,11 @@ ol.retro-list li::before {
   width: 2em;
   height: 2em;
   background: var(--retro-primary);
-  color: var(--retro-white);
+  color: var(--retro-primary-fg);
   font-weight: bold;
   font-family: inherit;
   font-size: 1.1em;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4532,8 +4599,8 @@ ol.retro-list li ol.retro-list li::before {
   height: 1.5em;
   font-size: 0.95em;
   background: var(--retro-success);
-  color: var(--retro-white);
-  border-radius: 4px;
+  color: var(--retro-success-fg);
+  border-radius: var(--retro-border-radius);
   border: 2px solid var(--retro-border-medium);
   top: 0.1em;
 }
@@ -4830,7 +4897,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
   border: 2px solid var(--retro-border-dark);
   box-shadow: 2px 2px 8px rgba(var(--retro-shadow-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
   padding: 4px 16px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   filter: blur(0.2px);
   font-weight: bold;
 }
@@ -4863,7 +4930,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
 .retro-sidebar {
   background: var(--retro-sidebar-bg);
   border: 1px solid var(--retro-border-medium);
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   padding: var(--retro-spacing-md, 16px);
   width: 100%;
   height: auto;
@@ -4925,7 +4992,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
   background: var(--retro-bg);
   border: 1px solid var(--retro-border-medium);
   padding: 6px 10px;
-  border-radius: 4px;
+  border-radius: var(--retro-border-radius);
   cursor: pointer;
   margin-bottom: var(--retro-spacing-sm, 8px);
 }
@@ -7633,17 +7700,6 @@ input[type=datetime-local].retro-input.retro-input-sm {
   container-name: retro-container;
 }
 
-@container retro-container (min-width: 20rem) {}
-@container retro-container (min-width: 30rem) {}
-@container retro-container (min-width: 40rem) {}
-@container retro-container (min-width: 50rem) {}
-@container retro-container (min-aspect-ratio: 16/9) {}
-@container retro-container (max-aspect-ratio: 4/3) {}
-@container retro-container (orientation: landscape) {}
-@container retro-container (orientation: portrait) {}
-@container retro-container (min-width: 20rem) and (max-width: 30rem) {}
-@container retro-container (min-width: 30rem) and (max-width: 40rem) {}
-@container retro-container (min-width: 40rem) and (max-width: 50rem) {}
 @container retro-container (max-width: 20rem) {
   .retro-cq-hide {
     display: none;