@enact/limestone 1.10.0 → 1.10.1

package/ActionGuide/ActionGuide.module.css

@@ -22,6 +22,10 @@
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
 }
+.actionGuide:global(.largeText) .label {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
 .actionGuide:global(.neutral) .icon .icon {
   color: var(--semantic-color-on-background-actionguide);
 }

package/BodyText/BodyText.module.css

@@ -93,3 +93,24 @@
 :global(.enact-locale-ja) .bodyText {
   line-break: strict;
 }
+.bodyText:global(.largeText) {
+  font-size: var(--primitive-font-size-72);
+}
+.bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-66);
+}
+:global(.enact-locale-km) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-si) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-th) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-vi) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-non-latin) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}

package/Button/Button.module.css

@@ -107,11 +107,26 @@ Motion Mixins
   font-weight: var(--primitive-font-weight-bold);
 }
 .button:global(.largeText) {
-  font-size: var(--primitive-font-size-96);
-  height: 4rem;
-  min-width: 4rem;
-  line-height: 3.75rem;
-  --button-height: 4rem;
+  font-size: var(--primitive-font-size-72);
+  height: 2.75rem;
+  min-width: 2.75rem;
+  line-height: 2.5rem;
+  --button-height: 2.75rem;
+}
+.button:global(.largeText).red .client::before,
+.button:global(.largeText).green .client::before,
+.button:global(.largeText).yellow .client::before,
+.button:global(.largeText).blue .client::before {
+  bottom: var(--primitive-spacing-12);
+  width: 1.5rem;
+  height: 0.625rem;
+}
+.button:global(.largeText).red:not(.minWidth) .client::before,
+.button:global(.largeText).green:not(.minWidth) .client::before,
+.button:global(.largeText).yellow:not(.minWidth) .client::before,
+.button:global(.largeText).blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
 }
 .button.focusStatic {
   /* Defined to prevent global export */
@@ -169,10 +184,24 @@ Motion Mixins
   bottom: var(--primitive-spacing-12);
   left: 50%;
   width: 1.25rem;
-  height: 0.25rem;
+  height: 0.5rem;
   border-radius: var(--semantic-radius-full);
   transform: translate(-50%, 50%);
 }
+.button.red:not(.minWidth) .client::before,
+.button.green:not(.minWidth) .client::before,
+.button.yellow:not(.minWidth) .client::before,
+.button.blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
+.button.red:not(.minWidth):global(.largeText) .client::before,
+.button.green:not(.minWidth):global(.largeText) .client::before,
+.button.yellow:not(.minWidth):global(.largeText) .client::before,
+.button.blue:not(.minWidth):global(.largeText) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
 .button.red.minWidth .icon,
 .button.green.minWidth .icon,
 .button.yellow.minWidth .icon,
@@ -280,7 +309,21 @@ Motion Mixins
 .button.small.blue .client::before {
   bottom: var(--primitive-spacing-12);
   width: 1.0625rem;
-  height: 0.1875rem;
+  height: 0.4375rem;
+}
+.button.small.red:not(.minWidth) .client::before,
+.button.small.green:not(.minWidth) .client::before,
+.button.small.yellow:not(.minWidth) .client::before,
+.button.small.blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
+.button.small.red:not(.minWidth):global(.largeText) .client::before,
+.button.small.green:not(.minWidth):global(.largeText) .client::before,
+.button.small.yellow:not(.minWidth):global(.largeText) .client::before,
+.button.small.blue:not(.minWidth):global(.largeText) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
 }
 .button.small.red.minWidth .client,
 .button.small.green.minWidth .client,
@@ -316,20 +359,34 @@ Motion Mixins
   margin-inline-start: var(--primitive-spacing-24);
 }
 .button.small:global(.largeText) {
-  font-size: var(--primitive-font-size-72);
-  height: 3rem;
-  min-width: 3rem;
-  line-height: 2.75rem;
-  --button-height: 3rem;
+  font-size: var(--primitive-font-size-66);
+  height: 2.25rem;
+  min-width: 2.25rem;
+  line-height: 2rem;
+  --button-height: 2.25rem;
 }
 .button.small:global(.largeText).minWidth {
   min-width: 15rem;
 }
+.button.small:global(.largeText).red .client::before,
+.button.small:global(.largeText).green .client::before,
+.button.small:global(.largeText).yellow .client::before,
+.button.small:global(.largeText).blue .client::before {
+  width: 1.25rem;
+  height: 0.5rem;
+}
+.button.small:global(.largeText).red:not(.minWidth) .client::before,
+.button.small:global(.largeText).green:not(.minWidth) .client::before,
+.button.small:global(.largeText).yellow:not(.minWidth) .client::before,
+.button.small:global(.largeText).blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
 .button.iconOnly {
   min-width: 2.75rem;
 }
 .button.iconOnly:global(.largeText) {
-  min-width: 4rem;
+  min-width: 2.75rem;
 }
 .button.iconOnly .client {
   padding: 0;
@@ -357,7 +414,7 @@ Motion Mixins
   padding-right: 0.375rem;
 }
 .button.iconOnly.small:global(.largeText) {
-  min-width: 3rem;
+  min-width: 2.25rem;
 }
 .button.iconOnly.iconAfter .icon,
 .button.iconOnly.iconBefore .icon,
@@ -369,34 +426,9 @@ Motion Mixins
 .button.iconOnly.iconBefore .icon:global(.largeText),
 .button.iconOnly.large .icon:global(.largeText),
 .button.iconOnly.small .icon:global(.largeText) {
+  overflow: visible;
   width: 100%;
 }
-.button.iconOnly.iconAfter.red .client::before,
-.button.iconOnly.iconBefore.red .client::before,
-.button.iconOnly.large.red .client::before,
-.button.iconOnly.small.red .client::before,
-.button.iconOnly.iconAfter.green .client::before,
-.button.iconOnly.iconBefore.green .client::before,
-.button.iconOnly.large.green .client::before,
-.button.iconOnly.small.green .client::before,
-.button.iconOnly.iconAfter.yellow .client::before,
-.button.iconOnly.iconBefore.yellow .client::before,
-.button.iconOnly.large.yellow .client::before,
-.button.iconOnly.small.yellow .client::before,
-.button.iconOnly.iconAfter.blue .client::before,
-.button.iconOnly.iconBefore.blue .client::before,
-.button.iconOnly.large.blue .client::before,
-.button.iconOnly.small.blue .client::before {
-  width: 1.375rem;
-  height: 0.1875rem;
-}
-.button.iconOnly.red .client::before,
-.button.iconOnly.green .client::before,
-.button.iconOnly.yellow .client::before,
-.button.iconOnly.blue .client::before {
-  width: 1.375rem;
-  height: 0.1875rem;
-}
 .button.collapsable.hasIcon:not(.iconOnly) {
   padding-left: 0;
   padding-right: 0;

package/CHANGELOG.md

@@ -2,6 +2,45 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
+## [1.10.1] - 2026-06-01 
+
+### Changed
+
+- `limestone/ActionGuide` styling to match the latest GUI
+- `limestone/BodyText` styling to match the latest GUI
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Card` styling to match the latest GUI
+- `limestone/Checkbox` styling to match the latest GUI
+- `limestone/Chips.Chip` styling to match the latest GUI
+- `limestone/DatePicker` styling to match the latest GUI
+- `limestone/Heading` styling to match the latest GUI
+- `limestone/Icon` styling to match the latest GUI
+- `limestone/IconItem` styling to match the latest GUI
+- `limestone/ImageItem` styling to match the latest GUI
+- `limestone/Input` styling to match the latest GUI
+- `limestone/InputField` styling to match the latest GUI
+- `limestone/Item` styling to match the latest GUI
+- `limestone/KeyGuide` styling to match the latest GUI
+- `limestone/MediaOverlay` styling to match the latest GUI
+- `limestone/PageViews` styling to match the latest GUI
+- `limestone/Panels.Header` styling to match the latest GUI
+- `limestone/Picker` styling to match the latest GUI
+- `limestone/PopupTabLayout` styling to match the latest GUI
+- `limestone/RadioItem` styling to match the latest GUI
+- `limestone/Scroller` focus area to be separated from the vertical and horizontal scrollbars when `focusableScrollbar` is `"byEnter"`
+- `limestone/Slider` styling to match the latest GUI
+- `limestone/Steps` styling to match the latest GUI
+- `limestone/Switch` styling to match the latest GUI
+- `limestone/TabLayout` styling to match the latest GUI
+- `limestone/TimePicker` styling to match the latest GUI
+- `limestone/TooltipDecorator` styling to match the latest GUI
+- `limestone/VideoPlayer` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Scroller` to set initial focus on the scrollbar thumb when navigating between panels with `focusableScrollbar`
+
+
 ## [1.10.0] - 2026-05-08
 
 ### Added
@@ -33,6 +72,7 @@ The following is a curated list of changes in the Enact limestone module, newest
 - `limestone/MediaOverlay` press motion to work with key press
 - `limestone/Popup` to not flicker on transition
 - `limestone/Popup` to not delay when closed with pointer
+- `limestone/Scroller.EditableWrapper` to not stop the `Marquee` when editing is complete
 - `limestone/Slider` press motion to work with key press
 - `limestone/useScroll` to not scroll on hover right after scroll by wheel
 

package/Card/Card.js

@@ -418,10 +418,12 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       var captionOverlay = _ref4.captionOverlay,
         captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
         icon = _ref4.icon,
+        label = _ref4.label,
         pressed = _ref4.pressed,
         roundedImage = _ref4.roundedImage,
         hasContainer = _ref4.hasContainer,
         orientation = _ref4.orientation,
+        secondaryLabel = _ref4.secondaryLabel,
         styler = _ref4.styler;
       return styler.append({
         captionOverlay: captionOverlay && orientation === 'vertical',
@@ -429,6 +431,7 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
         pressed: pressed,
         roundedImage: roundedImage,
         hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay,
+        hasLabel: orientation === 'vertical' && label && secondaryLabel,
         isCheckIcon: icon === 'check'
       });
     },

package/Card/Card.module.css

@@ -103,18 +103,19 @@ Motion Mixins
   border-style: solid;
 }
 .card .selectionContainer .selectionIcon {
-  width: 1.875rem;
-  height: 1.875rem;
+  --icon-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 50%;
   margin: 0;
-  line-height: 1.875rem;
+  line-height: 1.25rem;
   z-index: 3;
 }
 .card:not(.isCheckIcon) .selectionContainer .selectionIcon {
-  --icon-size: 2.5rem;
-  width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
+  --icon-size: 3rem;
+  width: 3.75rem;
+  height: 3.75rem;
+  line-height: 3.75rem;
 }
 .card .primaryBadge,
 .card .secondaryBadge {
@@ -342,6 +343,29 @@ Motion Mixins
   transform: scale(1.1);
   transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
+.card:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.card:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.card:global(.largeText).captionOverlay.splitCaption .label {
+  font-size: var(--primitive-font-size-72);
+}
+.card:global(.largeText) .selectionContainer .selectionIcon {
+  --icon-size: 3.6rem;
+}
+.card:global(.largeText):is(.isCheckIcon) .selectionContainer .selectionIcon {
+  --icon-size: 1.20833rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.45833rem;
+}
+.card:global(.largeText).vertical:not(.captionOverlay):not(.captionOverlayOnFocus):is(.hasLabel) .image {
+  height: calc(var(--card-image-height) - 36px);
+}
 .card:global(.neutral) .selectionContainer {
   border-color: transparent;
 }

package/Checkbox/Checkbox.module.css

@@ -91,6 +91,10 @@ Motion Mixins
   border-radius: var(--semantic-radius-full);
   position: relative;
   text-align: center;
+  --icon-size: 1.25rem;
+}
+.checkbox .icon:global(.largeText) {
+  --icon-size: 1.5rem;
 }
 .checkbox.selected.checkmark .icon::after {
   content: '';

package/Chips/Chip.module.css

@@ -25,6 +25,9 @@
   left: 50%;
   transform: translateX(-50%);
 }
+:global(.largeText) .chip .button.small {
+  min-width: 2.25rem;
+}
 .chip .focused {
   display: block;
 }

package/Heading/Heading.module.css

@@ -93,6 +93,10 @@
 :global(.enact-locale-vi) .heading.subtitle {
   font-size: 1rem;
 }
+.heading.subtitle:global(.largeText) {
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+}
 .heading.large {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-semibold);
@@ -136,6 +140,18 @@
   margin-bottom: 0;
   min-height: 0;
 }
+.heading:global(.largeText).large {
+  font-size: var(--primitive-font-size-86);
+}
+.heading:global(.largeText).medium {
+  font-size: var(--primitive-font-size-80);
+}
+.heading:global(.largeText).small {
+  font-size: var(--primitive-font-size-66);
+}
+.heading:global(.largeText).tiny {
+  font-size: var(--primitive-font-size-58);
+}
 .heading:global(.neutral) {
   color: var(--semantic-color-on-background-main);
 }

package/Icon/Icon.module.css

@@ -24,6 +24,18 @@
 .icon.tiny {
   --icon-size: 1.25rem;
 }
+.icon:global(.largeText).large {
+  --icon-size: 2.1rem;
+}
+.icon:global(.largeText).medium {
+  --icon-size: 1.95rem;
+}
+.icon:global(.largeText).small {
+  --icon-size: 1.8rem;
+}
+.icon:global(.largeText).tiny {
+  --icon-size: 1.5rem;
+}
 .icon.dingbat {
   font-family: "LG Icons";
 }

package/IconItem/IconItem.module.css

@@ -187,6 +187,22 @@ Motion Mixins
 :global(.noAnimation) .iconItem {
   transition: none;
 }
+.iconItem:global(.largeText).hasTitle {
+  height: calc( 5.33333rem + 1.45833rem + 24px);
+}
+.iconItem:global(.largeText) .icon {
+  height: 3.04167rem;
+  width: 3.04167rem;
+  line-height: 3.04167rem;
+}
+.iconItem:global(.largeText) .label {
+  font-size: var(--primitive-font-size-50);
+  line-height: 1.33333rem;
+}
+.iconItem:global(.largeText) .title {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .iconItem:global(.neutral).bordered .content {
   border-color: var(--semantic-color-stroke-white);
 }

package/ImageItem/ImageItem.module.css

@@ -48,6 +48,23 @@
 :global(.enact-locale-vi) .imageItem .label {
   font-size: var(--primitive-font-size-36);
 }
+.imageItem:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.imageItem:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.imageItem:global(.largeText).vertical .selectionContainer .selectionIcon {
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
+.imageItem:global(.largeText).vertical .imageIcon {
+  width: 3.3rem;
+  height: 3.3rem;
+}
 .imageItem.vertical.fullImage {
   border-radius: 0;
   padding: var(--primitive-spacing-60);

package/Input/Input.module.css

@@ -80,6 +80,10 @@
 .inputPopup .inputArea .contentArea {
   /* Available for customization */
 }
+.inputPopup:global(.largeText) .tooltip .tooltipLabel {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 :global(.enact-locale-right-to-left) .inputPopup .keypad {
   direction: ltr;
 }
@@ -92,6 +96,9 @@
 .inputPopup .keypad .key .icon {
   font-size: var(--primitive-font-size-90);
 }
+.inputPopup .keypad .key .icon:global(.largeText) {
+  font-size: var(--primitive-font-size-108);
+}
 .inputPopup.fullscreen .back {
   top: var(--primitive-spacing-108);
   left: var(--primitive-spacing-132);
@@ -152,9 +159,6 @@
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .keypad {
   margin: var(--primitive-spacing-132) auto 0 auto;
 }
-:global(.enact-text-large) .inputPopup.fullscreen .keypad .key {
-  height: 4rem;
-}
 .inputPopup.fullscreen .buttonArea {
   margin: 0;
   display: flex;
@@ -241,12 +245,6 @@
   justify-content: flex-end;
   column-gap: var(--primitive-spacing-60);
 }
-:global(.enact-text-large) .inputPopup.overlay .keypad {
-  width: 14.5rem;
-}
-:global(.enact-text-large) .inputPopup.overlay .keypad .key {
-  height: 4rem;
-}
 .inputPopup.overlay .buttonArea {
   align-items: center;
   display: flex;
@@ -257,6 +255,24 @@
 .inputPopup.overlay .tooltip .tooltipLabel {
   max-width: 15.375rem;
 }
+.inputPopup:global(.largeText).fullscreen .numberCell.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).fullscreen .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).fullscreen .joined.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).overlay .numberCell.password {
+  font-size: var(--primitive-font-size-48);
+}
+.inputPopup:global(.largeText).overlay .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).overlay .joined.password {
+  font-size: var(--primitive-font-size-48);
+}
 .inputPopup:global(.neutral) {
   background-color: var(--semantic-color-background-full-default);
 }

package/Input/InputField.module.css

@@ -232,6 +232,24 @@
 .inputField .tooltip .tooltipLabel {
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.25rem;
+}
+.inputField:global(.largeText) .input,
+.inputField:global(.largeText) .inputHighlight,
+.inputField:global(.largeText) .marqueeText {
+  font-size: var(--primitive-font-size-94);
+}
+.inputField:global(.largeText).small .input,
+.inputField:global(.largeText).small .marqueeText {
+  font-size: var(--primitive-font-size-72);
+  line-height: 3.25rem;
+}
+.inputField:global(.largeText).small .inputHighlight {
+  line-height: 3.25rem;
+}
+.inputField:global(.largeText) .tooltip .tooltipLabel {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
 }
 .inputField:global(.neutral) {
   caret-color: var(--semantic-color-on-surface-accent);

package/Item/Item.module.css

@@ -120,7 +120,8 @@
   line-height: 1.5em;
 }
 .item:global(.largeText) .label {
-  font-size: var(--primitive-font-size-54);
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.2em;
 }
 .item.large {
   /* Needed to prevent global class being added in the DOM */

package/KeyGuide/KeyGuide.module.css

@@ -62,6 +62,16 @@
 .keyGuide .imageItem .text .bodyText {
   margin: 0;
 }
+.keyGuide:global(.largeText) .item {
+  font-size: var(--primitive-font-size-72);
+}
+.keyGuide:global(.largeText) .item .slotBefore .red,
+.keyGuide:global(.largeText) .item .slotBefore .green,
+.keyGuide:global(.largeText) .item .slotBefore .yellow,
+.keyGuide:global(.largeText) .item .slotBefore .blue {
+  width: calc(1.25rem * 1.2);
+  height: calc(0.25rem * 1.2);
+}
 .keyGuide:global(.neutral) {
   background: var(--semantic-color-surface-overlay-default);
   outline-color: transparent;

package/MediaOverlay/MediaOverlay.module.css

@@ -157,13 +157,13 @@ Motion Mixins
 .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
   margin-bottom: var(--primitive-spacing-36);
 }
 :global(.enact-locale-non-latin) .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 .mediaOverlay .progressBar {
   position: absolute;
@@ -195,12 +195,24 @@ Motion Mixins
 .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 :global(.enact-locale-non-latin) .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
+}
+.mediaOverlay:global(.largeText) .text {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
+.mediaOverlay:global(.largeText) .caption,
+.mediaOverlay:global(.largeText) .title {
+  font-size: var(--primitive-font-size-72);
+}
+.mediaOverlay:global(.largeText) .subtitle {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
 }
 .mediaOverlay:global(.neutral) .bg {
   opacity: 0;

package/MediaPlayer/MediaControls.module.css

@@ -24,6 +24,9 @@
 .controlsFrame .mediaControls .button .icon {
   --icon-size: 2.25rem;
 }
+.controlsFrame .mediaControls .button:global(.largeText) .icon {
+  --icon-size: 2.70833rem;
+}
 .controlsFrame .actionGuide {
   height: 3.5rem;
   padding-bottom: 0;

package/MediaPlayer/Times.module.css

@@ -23,6 +23,10 @@
 :global(.enact-locale-vi) .times {
   line-height: 1.7em;
 }
+:global(.largeText) .times {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .times > * {
   display: inline-block;
 }

package/PageViews/PageViews.module.css

@@ -50,6 +50,10 @@
   justify-content: space-evenly;
   padding: 0 var(--primitive-spacing-36);
   width: 3.5rem;
+  font-size: var(--primitive-font-size-60);
+}
+:global(.largeText) .pageViews.number .stepsRow .pageNumber {
+  font-size: var(--primitive-font-size-72);
 }
 .pageViews.number .stepsRow .pageNumber .separator {
   width: 0.6875rem;