@fundamental-styles/theming-preview 0.21.0-rc.21 → 0.21.0-rc.25

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.21.0-rc.21
+ * Fundamental Library Styles v0.21.0-rc.25
  * Copyright (c) 2021 SAP SE or an SAP affiliate company.
  * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
  */
@@ -23809,9 +23809,9 @@
 .fd-menu__sublist[aria-hidden=true] {
   display: none
 }
-.fd-menu__list > li {
-  position: relative;
-  width: 100%
+.fd-menu__list > .fd-menu__item {
+  width: 100%;
+  position: relative
 }
 .fd-menu__separator {
   font-size: .875rem;
@@ -31740,8 +31740,18 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem)
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 1rem;
+  height: 2.75rem;
+  width: 100%
 }
 .fd-pagination::after,
 .fd-pagination::before {
@@ -31749,7 +31759,7 @@ places the element far left of the screen. so it is not visible.
   box-sizing: inherit;
   font-size: inherit
 }
-.fd-pagination__total {
+.fd-pagination__per-page {
   font-size: .875rem;
   font-size: var(--sapFontSize,.875rem);
   line-height: 1.4;
@@ -31764,23 +31774,22 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
-  color: #6a6d70;
-  color: var(--sapContent_LabelColor,#6a6d70);
-  margin-right: .5rem
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center
 }
-.fd-pagination__total::after,
-.fd-pagination__total::before {
+.fd-pagination__per-page::after,
+.fd-pagination__per-page::before {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
   font-size: inherit
 }
-.fd-pagination__total[dir=rtl],
-[dir=rtl] .fd-pagination__total {
-  margin-right: 0;
-  margin-left: .5rem
-}
 .fd-pagination__nav {
   font-size: .875rem;
   font-size: var(--sapFontSize,.875rem);
@@ -31796,11 +31805,17 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  display: inline-block;
-  padding-left: 0;
-  margin-left: 0;
-  list-style: none;
-  margin-bottom: 0
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto
 }
 .fd-pagination__nav::after,
 .fd-pagination__nav::before {
@@ -31832,310 +31847,82 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-pagination__more::before {
   content: "...";
-  color: #0a6ed1;
-  color: var(--sapLinkColor,#0a6ed1);
-  font-weight: 700
-}
-.fd-pagination__link {
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
-  line-height: 1.4;
-  line-height: var(--sapContent_LineHeight,1.4);
-  color: #32363a;
-  color: var(--sapTextColor,#32363a);
-  font-family: "72","72full",Arial,Helvetica,sans-serif;
-  font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
-  font-weight: 400;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: #0a6ed1;
-  color: var(--sapLinkColor,#0a6ed1);
-  -webkit-text-decoration: none;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration,none);
-  text-decoration: none;
-  text-decoration: var(--fdLink_Text_Decoration,none);
-  text-shadow: 0 0 .125rem #fff;
-  text-shadow: var(--sapContent_TextShadow,0 0 .125rem #fff);
-  display: inline-block;
-  -webkit-transition: all 125ms ease-in;
-  transition: all 125ms ease-in;
-  line-height: inherit;
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
-  background-color: transparent;
-  padding-left: .25rem;
-  padding-right: .25rem;
-  position: relative;
-  text-decoration: none
-}
-.fd-pagination__link::after,
-.fd-pagination__link::before {
-  -webkit-box-sizing: inherit;
-  box-sizing: inherit;
-  font-size: inherit
-}
-.fd-pagination__link--emphasized {
-  font-weight: 700
-}
-.fd-pagination__link:visited {
-  color: #0a6ed1;
-  color: var(--sapLink_Visited_Color,#0a6ed1)
-}
-.fd-pagination__link.is-hover,
-.fd-pagination__link:hover {
-  color: #0854a0;
-  color: var(--sapLink_Hover_Color,#0854a0);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link.is-focus,
-.fd-pagination__link:focus {
-  z-index: 5;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  outline-offset: -.0625rem;
-  outline-width: .0625rem;
-  outline-width: var(--sapContent_FocusWidth,.0625rem);
-  outline-color: #000;
-  outline-color: var(--sapContent_FocusColor,#000);
-  outline-style: dotted;
-  outline-style: var(--sapContent_FocusStyle,dotted);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link.is-active,
-.fd-pagination__link:active {
-  color: #0a6ed1;
-  color: var(--sapLink_Active_Color,#0a6ed1);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link--inverted {
-  color: #d3e8fd;
-  color: var(--sapLink_InvertedColor,#d3e8fd);
-  text-shadow: none
-}
-.fd-pagination__link--inverted.is-hover,
-.fd-pagination__link--inverted:hover {
-  color: #d3e8fd;
-  color: var(--sapLink_InvertedColor,#d3e8fd)
-}
-.fd-pagination__link--inverted.is-focus,
-.fd-pagination__link--inverted:focus {
-  z-index: 5;
-  outline-color: #fff;
-  outline-color: var(--sapContent_ContrastFocusColor,#fff)
-}
-.fd-pagination__link--subtle {
-  color: #074888;
-  color: var(--sapLink_SubtleColor,#074888)
-}
-.fd-pagination__link.is-disabled,
-.fd-pagination__link:disabled,
-.fd-pagination__link[aria-disabled=true] {
-  opacity: .4;
-  opacity: var(--sapContent_DisabledOpacity,.4);
-  color: #0a6ed1;
-  color: var(--sapLinkColor,#0a6ed1);
-  pointer-events: none
-}
-.fd-pagination__link.is-selected,
-.fd-pagination__link[aria-selected=true] {
-  color: #6a6d70;
-  color: var(--sapContent_LabelColor,#6a6d70);
-  text-decoration: none;
-  cursor: default;
-  font-weight: 700
-}
-.fd-pagination__link--next,
-.fd-pagination__link--previous {
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
-  line-height: 1.4;
-  line-height: var(--sapContent_LineHeight,1.4);
-  color: #32363a;
-  color: var(--sapTextColor,#32363a);
-  font-family: "72","72full",Arial,Helvetica,sans-serif;
-  font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
-  font-weight: 400;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  color: #0a6ed1;
-  color: var(--sapLinkColor,#0a6ed1);
-  -webkit-text-decoration: none;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration,none);
-  text-decoration: none;
-  text-decoration: var(--fdLink_Text_Decoration,none);
-  text-shadow: 0 0 .125rem #fff;
-  text-shadow: var(--sapContent_TextShadow,0 0 .125rem #fff);
-  display: inline-block;
-  -webkit-transition: all 125ms ease-in;
-  transition: all 125ms ease-in;
-  line-height: inherit;
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
-  padding-left: .5rem;
-  padding-right: .5rem
-}
-.fd-pagination__link--next::after,
-.fd-pagination__link--next::before,
-.fd-pagination__link--previous::after,
-.fd-pagination__link--previous::before {
-  -webkit-box-sizing: inherit;
-  box-sizing: inherit;
-  font-size: inherit
-}
-.fd-pagination__link--next--emphasized,
-.fd-pagination__link--previous--emphasized {
-  font-weight: 700
-}
-.fd-pagination__link--next:visited,
-.fd-pagination__link--previous:visited {
-  color: #0a6ed1;
-  color: var(--sapLink_Visited_Color,#0a6ed1)
-}
-.fd-pagination__link--next.is-hover,
-.fd-pagination__link--next:hover,
-.fd-pagination__link--previous.is-hover,
-.fd-pagination__link--previous:hover {
-  color: #0854a0;
-  color: var(--sapLink_Hover_Color,#0854a0);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link--next.is-focus,
-.fd-pagination__link--next:focus,
-.fd-pagination__link--previous.is-focus,
-.fd-pagination__link--previous:focus {
-  z-index: 5;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  outline-offset: -.0625rem;
-  outline-width: .0625rem;
-  outline-width: var(--sapContent_FocusWidth,.0625rem);
-  outline-color: #000;
-  outline-color: var(--sapContent_FocusColor,#000);
-  outline-style: dotted;
-  outline-style: var(--sapContent_FocusStyle,dotted);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link--next.is-active,
-.fd-pagination__link--next:active,
-.fd-pagination__link--previous.is-active,
-.fd-pagination__link--previous:active {
-  color: #0a6ed1;
-  color: var(--sapLink_Active_Color,#0a6ed1);
-  -webkit-text-decoration: underline;
-  -webkit-text-decoration: var(--fdLink_Text_Decoration_Opposite,underline);
-  text-decoration: underline;
-  text-decoration: var(--fdLink_Text_Decoration_Opposite,underline)
-}
-.fd-pagination__link--next--inverted,
-.fd-pagination__link--previous--inverted {
-  color: #d3e8fd;
-  color: var(--sapLink_InvertedColor,#d3e8fd);
-  text-shadow: none
-}
-.fd-pagination__link--next--inverted.is-hover,
-.fd-pagination__link--next--inverted:hover,
-.fd-pagination__link--previous--inverted.is-hover,
-.fd-pagination__link--previous--inverted:hover {
-  color: #d3e8fd;
-  color: var(--sapLink_InvertedColor,#d3e8fd)
-}
-.fd-pagination__link--next--inverted.is-focus,
-.fd-pagination__link--next--inverted:focus,
-.fd-pagination__link--previous--inverted.is-focus,
-.fd-pagination__link--previous--inverted:focus {
-  z-index: 5;
-  outline-color: #fff;
-  outline-color: var(--sapContent_ContrastFocusColor,#fff)
-}
-.fd-pagination__link--next--subtle,
-.fd-pagination__link--previous--subtle {
-  color: #074888;
-  color: var(--sapLink_SubtleColor,#074888)
+  display: block;
+  width: 1.5rem;
+  text-align: center
 }
-.fd-pagination__link--next.is-disabled,
-.fd-pagination__link--next:disabled,
-.fd-pagination__link--next[aria-disabled=true],
-.fd-pagination__link--previous.is-disabled,
-.fd-pagination__link--previous:disabled,
-.fd-pagination__link--previous[aria-disabled=true] {
-  opacity: .4;
-  opacity: var(--sapContent_DisabledOpacity,.4);
-  color: #0a6ed1;
-  color: var(--sapLinkColor,#0a6ed1);
-  pointer-events: none
+.fd-pagination .fd-pagination__input {
+  width: auto;
+  min-width: 2.5rem;
+  text-align: center;
+  -moz-appearance: textfield
 }
-.fd-pagination__link--previous {
-  font-size: .75rem;
-  font-size: var(--sapFontSmallSize,.75rem)
+.fd-pagination .fd-pagination__input::-webkit-inner-spin-button,
+.fd-pagination .fd-pagination__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0
 }
-.fd-pagination__link--previous::before {
-  font-family: SAP-icons;
-  text-align: center;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility
+.fd-pagination .fd-pagination__label,
+.fd-pagination .fd-pagination__per-page-label {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -ms-flex-item-align: center;
+  align-self: center
 }
-.fd-pagination__link--previous::before {
-  content: ""
+.fd-pagination .fd-pagination__label {
+  display: none
 }
-.fd-pagination__link--previous[dir=rtl]::before,
-[dir=rtl] .fd-pagination__link--previous::before {
-  font-family: SAP-icons;
-  text-align: center;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility
+.fd-pagination .fd-pagination__button [class*=sap-icon][dir=rtl],
+[dir=rtl] .fd-pagination .fd-pagination__button [class*=sap-icon] {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg)
 }
-.fd-pagination__link--previous[dir=rtl]::before,
-[dir=rtl] .fd-pagination__link--previous::before {
-  content: ""
+.fd-pagination .fd-pagination__button--mobile {
+  display: none
 }
-.fd-pagination__link--next {
-  font-size: .75rem;
-  font-size: var(--sapFontSmallSize,.75rem)
+.fd-pagination--mobile .fd-pagination__per-page + .fd-pagination__nav {
+  margin-left: auto;
+  margin-right: 0
 }
-.fd-pagination__link--next::before {
-  font-family: SAP-icons;
-  text-align: center;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility
+.fd-pagination--mobile .fd-pagination__per-page + .fd-pagination__nav[dir=rtl],
+[dir=rtl] .fd-pagination--mobile .fd-pagination__per-page + .fd-pagination__nav {
+  margin-right: auto;
+  margin-left: 0
 }
-.fd-pagination__link--next::before {
-  content: ""
+.fd-pagination--mobile .fd-pagination__link,
+.fd-pagination--mobile .fd-pagination__more,
+.fd-pagination--mobile .fd-pagination__per-page-label,
+.fd-pagination--mobile .fd-pagination__total {
+  display: none
 }
-.fd-pagination__link--next[dir=rtl]::before,
-[dir=rtl] .fd-pagination__link--next::before {
-  font-family: SAP-icons;
-  text-align: center;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility
+.fd-pagination--mobile .fd-pagination__button--mobile,
+.fd-pagination--mobile .fd-pagination__label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex
 }
-.fd-pagination__link--next[dir=rtl]::before,
-[dir=rtl] .fd-pagination__link--next::before {
-  content: ""
+@media (max-width:599px) {
+  .fd-pagination .fd-pagination__per-page + .fd-pagination__nav {
+    margin-left: auto;
+    margin-right: 0
+  }
+  .fd-pagination .fd-pagination__per-page + .fd-pagination__nav[dir=rtl],
+  [dir=rtl] .fd-pagination .fd-pagination__per-page + .fd-pagination__nav {
+    margin-right: auto;
+    margin-left: 0
+  }
+  .fd-pagination .fd-pagination__link,
+  .fd-pagination .fd-pagination__more,
+  .fd-pagination .fd-pagination__per-page-label,
+  .fd-pagination .fd-pagination__total {
+    display: none
+  }
+  .fd-pagination .fd-pagination__button--mobile,
+  .fd-pagination .fd-pagination__label {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex
+  }
 }
 .fd-panel,
 .fd-panel__content,
@@ -35449,8 +35236,6 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  display: block;
-  padding-right: 0;
   text-shadow: none;
   text-shadow: var(--fdSelect_Text_Shadow,none)
 }
@@ -35506,19 +35291,21 @@ places the element far left of the screen. so it is not visible.
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  height: 2.25rem;
-  width: 100%;
-  text-align: left;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  padding-right: 0
+  width: 100%;
+  height: 2.25rem;
+  text-align: left
 }
 .fd-select__control::after,
 .fd-select__control::before {
@@ -35755,26 +35542,6 @@ places the element far left of the screen. so it is not visible.
 .fd-select__control[readonly]::placeholder {
   color: transparent
 }
-.fd-select__control .fd-select__button {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 0;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin-left: .5rem;
-  color: #0854a0;
-  color: var(--sapContent_IconColor,#0854a0);
-  border: none
-}
-.fd-select__control .fd-select__button.is-hover,
-.fd-select__control .fd-select__button:hover {
-  border: none
-}
 .fd-select__control.is-hover,
 .fd-select__control:hover {
   background-color: #fff;
@@ -35961,50 +35728,28 @@ places the element far left of the screen. so it is not visible.
 .fd-select__control[readonly]::placeholder {
   color: transparent
 }
-.fd-select__control.is-focus,
-.fd-select__control:focus {
-  z-index: 5;
-  outline: 0
-}
-.fd-select__control.is-focus::before,
-.fd-select__control:focus::before {
-  content: '';
-  top: .1875rem;
-  left: .1875rem;
+.fd-select__control.is-focus::after,
+.fd-select__control:focus::after {
   border-width: .0625rem;
   border-width: var(--sapContent_FocusWidth,.0625rem);
   border-color: #000;
   border-color: var(--sapContent_FocusColor,#000);
   border-style: dotted;
   border-style: var(--sapContent_FocusStyle,dotted);
-  height: calc(100% - (2 * .1875rem));
-  width: calc(100% - (2 * .1875rem));
-  z-index: 1;
-  position: absolute
-}
-.fd-select__control[dir=rtl],
-[dir=rtl] .fd-select__control {
-  text-align: right;
-  padding-left: 0
-}
-.fd-select__control[dir=rtl].is-focus,
-.fd-select__control[dir=rtl]:focus,
-[dir=rtl] .fd-select__control.is-focus,
-[dir=rtl] .fd-select__control:focus {
-  z-index: 5
-}
-.fd-select__control[dir=rtl].is-focus::before,
-.fd-select__control[dir=rtl]:focus::before,
-[dir=rtl] .fd-select__control.is-focus::before,
-[dir=rtl] .fd-select__control:focus::before {
-  right: -.0234375rem
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: .1875rem;
+  bottom: .1875rem;
+  left: .1875rem;
+  right: .1875rem
 }
 .fd-select__control.is-hover .fd-select__button,
 .fd-select__control:hover .fd-select__button {
-  background-color: #ebf5fe;
-  background-color: var(--sapButton_Lite_Hover_Background,#ebf5fe);
   border-left: none;
-  border-left: var(--fdSelect_Button_Interractive_SideBorder,none)
+  border-left: var(--fdSelect_Button_Interractive_SideBorder,none);
+  background-color: #ebf5fe;
+  background-color: var(--sapButton_Lite_Hover_Background,#ebf5fe)
 }
 .fd-select__control.is-hover .fd-select__button[dir=rtl],
 .fd-select__control:hover .fd-select__button[dir=rtl],
@@ -36014,6 +35759,11 @@ places the element far left of the screen. so it is not visible.
   border-right: none;
   border-right: var(--fdSelect_Button_Interractive_SideBorder,none)
 }
+.fd-select__control.is-focus,
+.fd-select__control:focus {
+  z-index: 5;
+  outline: 0
+}
 .fd-select__control.is-expanded .fd-select__button,
 .fd-select__control[aria-expanded=true] .fd-select__button {
   background-color: #0854a0;
@@ -36076,12 +35826,37 @@ places the element far left of the screen. so it is not visible.
   border-right: none;
   border-right: var(--fdSelect_Button_Interractive_SideBorder,none)
 }
+.fd-select__control[dir=rtl],
+[dir=rtl] .fd-select__control {
+  text-align: right
+}
+.fd-select__control .fd-select__button {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-left: .25rem;
+  border: none;
+  border-radius: 0;
+  color: #0854a0;
+  color: var(--sapContent_IconColor,#0854a0)
+}
+.fd-select__control .fd-select__button[dir=rtl],
+[dir=rtl] .fd-select__control .fd-select__button {
+  margin-right: .25rem;
+  margin-left: 0
+}
 .fd-select__control.is-readonly {
   cursor: text
 }
 .fd-select__control.is-readonly .fd-select__text-content {
-  padding-right: .625rem;
-  padding-left: .625rem
+  padding-left: .625rem;
+  padding-right: .625rem
 }
 .fd-select__text-content {
   font-size: .875rem;
@@ -36098,10 +35873,8 @@ places the element far left of the screen. so it is not visible.
   padding: 0;
   margin: 0;
   border: 0;
-  font-size: .875rem;
-  font-size: var(--sapFontSize,.875rem);
   padding-left: .625rem;
-  min-width: 5.625rem
+  min-width: 2.75rem
 }
 .fd-select__text-content::after,
 .fd-select__text-content::before {
@@ -36111,33 +35884,24 @@ places the element far left of the screen. so it is not visible.
 }
 .fd-select__text-content[dir=rtl],
 [dir=rtl] .fd-select__text-content {
-  padding-left: 0;
-  padding-right: .625rem
+  padding-right: .625rem;
+  padding-left: 0
 }
 .fd-select--compact .fd-select__control {
   height: 1.625rem
 }
 .fd-select--compact .fd-select__control .fd-select__text-content {
-  padding-left: .5rem
-}
-.fd-select--compact .fd-select__control[dir=rtl],
-[dir=rtl] .fd-select--compact .fd-select__control {
-  text-align: right;
-  padding-left: 0
+  padding-left: .5rem;
+  min-width: 2rem
 }
-.fd-select--compact .fd-select__control[dir=rtl] .fd-select__text-content,
+.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],
 [dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content {
-  padding-left: 0;
-  padding-right: .5rem
-}
-.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content {
   padding-right: .5rem;
-  padding-left: .5rem
+  padding-left: 0
 }
-.fd-select[dir=rtl] .fd-select__control .fd-select__button,
-[dir=rtl] .fd-select .fd-select__control .fd-select__button {
-  margin-left: 0;
-  margin-right: .5rem
+.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content {
+  padding-left: .5rem;
+  padding-right: .5rem
 }
 .fd-shellbar {
   font-size: .875rem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.21.0-rc.21",
+    "version": "0.21.0-rc.25",
     "license": "Apache-2.0",
     "homepage": "https://sap.github.io/fundamental-styles/",
     "description": "Fundamental Library Styles - Theming Package Preview",
@@ -9,7 +9,7 @@
       "url": "https://github.com/SAP/fundamental-styles"
     },
     "dependencies": {
-        "fundamental-styles": "0.21.0-rc.21"
+        "fundamental-styles": "0.21.0-rc.25"
     }
   }