@sapudex/web-components 2.9.0 → 2.11.0

package/src/themes/Footer.css

@@ -8,6 +8,10 @@
   --udex-footer-expandable-link-underline-border: var(--sapNeutralBorderColor, #A9B4BE);
   --udex-footer-link-color-heading: var(--sapShell_GroupTitleTextColor, #354A5F);
   --udex-footer-link-color: var(--sapShell_InteractiveTextColor, #354A5F);
+  --udex-footer-tagline-max-width: 235px;
+  --udex-footer-tagline-chinese-max-width: 93px;
+  --udex-footer-logo-max-width: 66px;
+  --udex-footer-logo-chinese-max-width: 139px;
 
   display: block;
   container-type: inline-size;
@@ -60,12 +64,22 @@
 }
 
 .udex-footer__logo {
+  display: flex;
+  align-items: start;
   margin-bottom: var(--udexSpacer48);
 }
 
+.udex-footer__logo a {
+  display: inline-flex;
+}
+
 .udex-footer__logo-image {
   height: 32px;
-  width: 65.6px;
+  max-width: var(--udex-footer-logo-max-width);
+}
+
+.udex-footer__logo-image-chinese {
+  width: var(--udex-footer-logo-chinese-max-width);
 }
 
 .udex-footer__contact-social,
@@ -145,22 +159,6 @@
   column-gap: var(--udexSpacer12);
 }
 
-a.udex-footer__social-icon {
-  display: flex;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--udexRadiusXS);
-  background-color: var(--udexColorNeutralWhite);
-  color: var(--udex-footer-icon-color);
-}
-
-.udex-footer__social-icon > img {
-  margin: auto;
-  align-items: center;
-  max-width: 100%;
-  max-height: 100%;
-}
-
 .udex-footer__links {
   display: flex;
   gap: var(--udexSpacer48);
@@ -195,7 +193,6 @@ h3 {
   line-height: var(--udexTypographyBodyLineHeight, 1.5);
   display: inline-block;
   box-sizing: border-box;
-  min-height: 38px;
 }
 
 :host([desktop]) .udex-footer a:focus,
@@ -221,6 +218,20 @@ h3 {
   color: var(--udex-footer-text-color)
 }
 
+.udex-footer__tagline-image,
+.udex-footer__tagline-image-chinese {
+  margin-inline-start: var(--udexSpacer4);
+  width: 100%;
+}
+
+.udex-footer__tagline-image-chinese {
+  max-width: var(--udex-footer-tagline-chinese-max-width);
+}
+
+.udex-footer__tagline-image {
+  max-width: var(--udex-footer-tagline-max-width);
+}
+
 @media (max-width: 1599px) {
   .udex-footer {
     padding: var(--udexSpacer72);
@@ -232,6 +243,15 @@ h3 {
 }
 
 @media (max-width: 1279px) {
+  .udex-footer__action-item {
+    --udex-accordion-item-header-padding: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
+    --udex-accordion-item-content-margin: var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer8);
+  }
+
+  .udex-footer__links-list li:not(:last-child) {
+    margin-bottom: var(--udexSpacer8);
+  }
+
   .udex-footer__back-to-top-button {
     top: var(--udexSpacer40);
   }
@@ -241,7 +261,7 @@ h3 {
   }
 
   .udex-footer__copyright {
-    padding-top: 0;
+    padding: var(--udexSpacer20) 0;
   }
 
   .udex-footer__content {
@@ -292,10 +312,6 @@ h3 {
 }
 
 @media (max-width: 979px) {
-  .udex-footer__copyright {
-    padding-bottom: var(--udexSpacer4);
-  }
-
   .udex-footer {
     padding: var(--udexSpacer40) var(--udexSpacer48) var(--udexSpacer120) var(--udexSpacer48);
   }
@@ -315,7 +331,7 @@ h3 {
   }
 
   .udex-footer__content {
-    gap: var(--udexSpacer16);
+    gap: var(--udexSpacer32);
   }
 
   .udex-footer__contact {
@@ -327,7 +343,6 @@ h3 {
     --udex-accordion-border-width: 1px;
     --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightRegular);
     --udex-accordion-item-headline-font-size: var(--udexTypographyHeadingRegularXXXXSFontSize);
-    --udex-accordion-item-header-padding: var(--udexSpacer4) var(--udexSpacer12) var(--udexSpacer4) var(--udexSpacer8);
     --udex-accordion-item-headline-color: var(--udex-footer-expandable-link-text-color);
     --udex-accordion-item-border-color: var(--udex-footer-expandable-link-underline-border);
     display: block;
@@ -338,6 +353,10 @@ h3 {
   .udex-footer__divider {
     display: none;
   }
+
+  .udex-footer__copyright {
+    padding: var(--udexSpacer32) 0 var(--udexSpacer20);
+  }
 }
 
 @media (max-width: 639px) {

package/src/themes/HeroBanner.css

@@ -1,12 +1,11 @@
 :host {
   --udexHeroBannerMinHeight: 200px;
-
+  --udexHeroBannerHeight: auto;
   --udexHeroBannerBackgroundImageObjectFit: contain;
   --udexHeroBannerVerticalLayoutBackgroundImageAlignment: bottom right;
   --udexHeroBannerHorizontalLayoutBackgroundImageAlignment: top right;
   --udexHeroBannerBackroundImageZIndex: 1;
   --udexHeroBannerBackroundVideoZIndex: 1;
-
   --udexHeroBannerContentZIndex: 2;
   --udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);
   --udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);
@@ -15,25 +14,26 @@
   --udexHeroBannerPaddingHorizontalS: var(--udexSpacer48);
   --udexHeroBannerPaddingHorizontalXS: var(--udexSpacer24);
   --udexHeroBannerBackgroundVideoColor: trasparent;
-
-  --udexHeroBannerSlotMaxHeight: calc(
-    100% - (2 * var(--udexHeroBannerContentPaddingHorizontal))
-  );
+  --udexHeroBannerContainerPosition: relative;
+  --udexHeroBannerSlotMaxHeight: calc(100% - (2 * var(--udexHeroBannerContentPaddingHorizontal)));
   --udex-hero-banner-container-xl-max-width: 1432px;
   --udex-hero-banner-container-l-max-width: 1456px;
 }
 
 .udex-hero-banner {
+  position: relative;
   container-type: inline-size;
   min-height: var(--udexHeroBannerMinHeight, 200px);
+  height: var(--udexHeroBannerHeight, auto);
 }
 
 .udex-hero-banner__container {
-  position: relative;
+  position: var(--udexHeroBannerContainerPosition);
   max-width: var(--udex-hero-banner-container-xl-max-width);
   padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
   margin: 0 auto;
   height: 100%;
+  box-sizing: border-box;
 }
 
 .udex-hero-banner--video {
@@ -46,10 +46,7 @@
   width: 100%;
   height: 100%;
   object-fit: var(--udexHeroBannerBackgroundImageObjectFit, contain);
-  object-position: var(
-    --udexHeroBannerVerticalLayoutBackgroundImageAlignment,
-    bottom right
-  );
+  object-position: var(--udexHeroBannerVerticalLayoutBackgroundImageAlignment, bottom right);
   z-index: var(--udexHeroBannerBackroundImageZIndex, 1);
   top: 0;
   left: 0;
@@ -61,10 +58,10 @@
   padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
   height: 100%;
   box-sizing: border-box;
+}
 
-  .udex-hero-banner__background-image {
-    display: none;
-  }
+.udex-hero-banner__background-video-wrapper .udex-hero-banner__background-image {
+  display: none;
 }
 
 .udex-hero-banner__media-button:dir(rtl) {
@@ -113,6 +110,11 @@
   padding: 0;
 }
 
+#udex-hero-banner__content,
+#udex-hero-banner__additionalContent {
+  height: var(--udexHeroBannerHeight, auto);
+}
+
 @media (max-width: 1599px) {
   .udex-hero-banner__container {
     padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
@@ -129,19 +131,26 @@
     padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
     max-width: 100%;
   }
+
   .udex-hero-banner__content-container {
     display: flex;
     flex-direction: column;
     gap: var(--udexSpacer32, 32px);
   }
 
-  .udex-hero-banner__background-video-wrapper{
+  .udex-hero-banner__background-video-wrapper {
     padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
     background-color: var(--udexHeroBannerBackgroundVideoColor);
+  }
+
+  .udex-hero-banner__background-video-wrapper .udex-hero-banner__background-image {
+    display: block;
+  }
 
-    .udex-hero-banner__background-image {
-      display: block;
-    }
+  .udex-hero-banner,
+  #udex-hero-banner__content,
+  #udex-hero-banner__additionalContent {
+    height: auto;
   }
 }
 
@@ -153,10 +162,10 @@
 
   .udex-hero-banner__background-video-wrapper {
     padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);
-    
-    .udex-hero-banner__background-image {
-      display: none;
-    }
+  }
+
+  .udex-hero-banner__background-video-wrapper .udex-hero-banner__background-image {
+    display: none;
   }
 }
 
@@ -199,19 +208,12 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-      90deg,
-      rgba(18, 23, 28, 0.765) 0%,
-      rgba(18, 23, 28, 0.09) 100%
-    );
+    background: linear-gradient(90deg, rgba(18, 23, 28, 0.765) 0%, rgba(18, 23, 28, 0.09) 100%);
     top: 0;
     left: 0;
   }
 
   .udex-hero-banner__background-image {
-    object-position: var(
-      --udexHeroBannerHorizontalLayoutBackgroundImageAlignment,
-      top right
-    );
+    object-position: var(--udexHeroBannerHorizontalLayoutBackgroundImageAlignment, top right);
   }
-}
+}

package/src/themes/Link.css

@@ -3,6 +3,8 @@
   --udex-link-hover-text-decoration: underline;
   --udex-link-focused-hover-text-decoration: underline;
   --udex-link-focus-text-decoration: underline;
+  --udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);
+  --udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);
   --udex-link-emphasized-text-decoration: none;
   --udex-link-icon-height: 24px;
   --udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
@@ -113,7 +115,7 @@
 }
 
 :host .ui5-link-root {
-  outline-offset: 0;
+  outline-offset: var(--udex-link-focus-outline-offset);
 }
 
 :host([design="Subtle"][desktop]) .ui5-link-root:focus-within,
@@ -123,6 +125,7 @@
     var(--sapContent_FocusColor, #002A86)
     var(--sapContent_FocusStyle, 'solid')
     var(--sapContent_FocusWidth, 0.125rem);
+    border-radius: var(--udex-link-focus-border-radius);
 }
 
 .ui5-link-root:focus-visible,

package/src/themes/MastheadItem.css

@@ -29,6 +29,7 @@
   --udex-masthead-item-dropdown-zindex: 100;
   --udex-masthead-item-button-icon-size: 32px;
   --udex-masthead-item-arrow-icon-size: 16px;
+  --udex-masthead-item-arrow-margin-inline-start: var(--udexSpacer4);
 
   display: var(--udex-masthead-item-display);
   align-items: var(--udex-masthead-item-align-content);
@@ -154,7 +155,7 @@
 .udex-masthead-item__dropdown-icon {
   width: var(--udex-masthead-item-arrow-icon-size);
   height: var(--udex-masthead-item-arrow-icon-size);
-  margin-inline-start: var(--udexSpacer4);
+  margin-inline-start: var(--udex-masthead-item-arrow-margin-inline-start);
 }
 
 :host(:hover) .udex-masthead-item,

package/src/themes/MastheadMenu.css

@@ -124,8 +124,8 @@
   text-align: center;
 }
 
-:host([_is-mobile-mode])::part(menu-item-link-badge),
-:host([_is-mobile-mode])::part(menu-item-link) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link-badge),
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link) {
   border-bottom: 1px solid var(--udex-masthead-menu-item-mobile-border-color);
   padding: var(--udex-masthead-menu-item-header-padding-mobile);
   display: flex;
@@ -134,13 +134,13 @@
   width: 100%;
 }
 
-:host([_is-mobile-mode])::part(menu-item-link-badge) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link-badge) {
   padding-block-start: var(--udex-masthead-menu-item-padding-mobile-with-badge-vertical);
   padding-inline-end: var(--udex-masthead-menu-item-padding-mobile-end-with-badge);
   padding-inline-start: var(--udex-masthead-menu-item-padding-mobile-start-with-badge);
 }
 
-:host([_is-mobile-mode])::part(menu-item) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item) {
   padding: var(--udex-masthead-menu-item-header-padding-mobile);
   justify-content: center;
 }

package/src/themes/PromoTile.css

@@ -0,0 +1,152 @@
+:host {
+  width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  --udex-promo-tile-background: var(--udexColorBlue1, #EBF8FF);
+  --udex-promo-tile-border-radius: var(--udexRadiusXL, 16px);
+  --udex-promo-tile-border-width: var(--sapElement_BorderWidth, 1px);
+  --udex-promo-tile-border-color: var(--udex-promo-tile-background);
+  --udex-promo-tile-pictogram-width: var(--udexSpacer120, 120px);
+  --udex-promo-tile-pictogram-height: var(--udexSpacer120, 120px);
+  --udex-promo-tile-logo-width: 200px;
+  --udex-promo-tile-logo-height: 100px;
+  --udex-promo-tile-icon-width: 100%;
+  --udex-promo-tile-icon-height: 100%;
+  --udex-promo-tile-icon-fill-color: inherit;
+  --udex-promo-tile-eyebrow-color: var(--udexColorBlue8, #0057D2);
+  --udex-promo-tile-header-color-light: var(--udexCoreHeadingLight, #FFFFFF);
+  --udex-promo-tile-header-color-dark: var(--udexCoreHeadingDark, #000000);
+  --udex-promo-tile-text-color-light: var(--udexCoreTextLight, #FFFFFF);
+  --udex-promo-tile-text-color-dark: var(--udexCoreTextDark, #223548);
+}
+
+.udex-promo-tile__container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  border-radius: var(--udex-promo-tile-border-radius);
+  background: var(--udex-promo-tile-background);
+  padding: var(--udexSpacer32, 32px);
+  gap: var(--udexSpacer16, 16px);
+  border: var(--udex-promo-tile-border-width) solid var(--udex-promo-tile-border-color);
+}
+
+.udex-promo-tile--horizontal {
+  flex-direction: row;
+  padding: var(--udexSpacer32, 32px);
+  gap: var(--udexSpacer32, 32px);
+}
+
+.udex-promo-tile__pictogram {
+  width: var(--udex-promo-tile-pictogram-width);
+  height: var(--udex-promo-tile-pictogram-height);
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.udex-promo-tile__pictogram.udex-promo-tile__pictogram--logo {
+  width: var(--udex-promo-tile-logo-width);
+  height: var(--udex-promo-tile-logo-height);
+}
+
+.udex-promo-tile__pictogram img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.udex-promo-tile--horizontal .udex-promo-tile__pictogram,
+.udex-promo-tile--horizontal .udex-promo-tile__footer {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.udex-promo-tile__pictogram ui5-icon {
+  width: var(--udex-promo-tile-icon-width);
+  height: var(--udex-promo-tile-icon-height);
+  fill: var(--udex-promo-tile-icon-fill-color);
+}
+
+.udex-promo-tile__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--udexSpacer32, 32px);
+  font-family: var(--sapFontFamily);
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  color: var(--udex-promo-tile-text-color-dark);
+}
+
+.udex-promo-tile--horizontal .udex-promo-tile__content {
+  flex-grow: 1;
+  flex-direction: row;
+}
+
+.udex-promo-tile--dark .udex-promo-tile__content {
+  color: var(--udex-promo-tile-text-color-light);
+}
+
+.udex-promo-tile__eyebrow {
+  font-size: var(--udexTypographyEyebrowLFontSize, 16px);
+  line-height: var(--udexTypographyEyebrowLineHeight, 1.1);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--udex-promo-tile-eyebrow-color);
+  margin-block-end: var(--udexSpacer8, 8px);
+}
+
+.udex-promo-tile__header {
+  font-size: var(--udexTypographyHeadingMediumSFontSize, 28px);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  margin-block-end: var(--udexSpacer16, 16px);
+  color: var(--udex-promo-tile-header-color-dark);
+}
+
+.udex-promo-tile--dark .udex-promo-tile__header {
+  color: var(--udex-promo-tile-header-color-light);
+}
+
+.udex-promo-tile--horizontal .udex-promo-tile__header {
+  margin-block-end: var(--udexSpacer8, 8px);
+}
+
+.udex-promo-tile__footer {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1279px) {
+  .udex-promo-tile--horizontal {
+    padding: var(--udexSpacer24, 24px);
+    gap: var(--udexSpacer24, 24px);
+  }
+
+  .udex-promo-tile--horizontal .udex-promo-tile__content {
+    flex-direction: column;
+    gap: var(--udexSpacer24, 24px);
+  }
+
+  .udex-promo-tile__header {
+    font-size: var(--udexTypographyHeadingMediumXSFontSize, 24px);
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-promo-tile--horizontal {
+    flex-direction: column;
+  }
+}

package/src/themes/Quote.css

@@ -1,4 +1,3 @@
-/* Direction and size styles */
 :host {
   display: block;
   width: 100%;
@@ -10,18 +9,26 @@
   flex-direction: row;
   width: 100%;
   text-align: left;
-  gap: 24px;
+  gap: var(--udexSpacer24);
+}
+
+.udex-quote__container:dir(rtl) {
+  text-align: right;
+}
+
+:host([image-placement='right']) .udex-quote__container {
+  flex-direction: row-reverse;
 }
 
 :host([image-size='small']) .udex-quote__container,
 :host([text-size='small']) .udex-quote__container {
-  gap: 16px;
+  gap: var(--udexSpacer16);
 }
 
 .content-container__text,
 ::slotted([slot='author']),
 ::slotted([slot='link']) {
-  padding: 0 40px;
+  padding: 0 var(--udexSpacer40);
 }
 
 /* Image styles */
@@ -56,13 +63,13 @@
 
 .content-container__text {
   margin: 0;
-  margin-bottom: 16px;
+  margin-bottom: var(--udexSpacer16);
 
   font-family: var(--sapFontFamily);
   font-weight: var(--udexTypographyFontWeightRegular, 400);
   font-size: var(--udexTypographyBodyXLFontSize, 24px);
   line-height: var(--udexTypographyBodyLineHeight, 1.5);
-  color: var(--udexQuoteColorText, #354A5F);
+  color: var(--udexColorGrey8, #354A5F);
 }
 
 .content-container__text ::slotted(*) {
@@ -78,7 +85,7 @@
   line-height: 84px;
   height: 58px;
   width: 34px;
-  color: var(--udexQuoteColorText, #354A5F);
+  color: var(--udexColorGrey8, #354A5F);
   margin-top: -9px;
 }
 
@@ -110,16 +117,7 @@
   font-weight: var(--udexTypographyFontWeightRegular, 400);
   font-size: var(--udexTypographyHeadingRegularXXSFontSize, 20px);
   line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-  color: var(--udexQuoteColorText, #354A5F);
-}
-
-::slotted([slot='link']) {
-  text-decoration: none;
-  font-family: var(--sapFontFamily);
-  font-weight: var(--udexTypographyFontWeightRegular, 400);
-  font-size: var(--udexTypographyBodySFontSize, 16px);
-  line-height: var(--udexTypographyBodyLineHeight, 1.5);
-  color: var(--udexLinksColorDefault, #0070F2);
+  color: var(--udexColorGrey8, #354A5F);
 }
 
 :host([text-size='small']) .content-container__text {
@@ -137,10 +135,8 @@
 }
 
 @media screen and (max-width: 1279px) {
-
-  .udex-quote__container,
   .udex-quote__container {
-    gap: 16px;
+    gap: var(--udexSpacer16);
   }
 
   ::slotted([slot='author']) {
@@ -178,13 +174,14 @@
   }
 }
 
-@container (max-width: 545px) {
-  .udex-quote__container {
+@media (max-width: 639px) {
+  .udex-quote__container,
+  :host([image-placement='right']) .udex-quote__container {
     flex-direction: column;
-    gap: 16px;
+    gap: var(--udexSpacer16);
   }
 
   ::slotted([slot='image']) {
     margin: 0 auto;
   }
-}
+}

package/src/themes/SelectBox.css

@@ -215,7 +215,7 @@
   font-size: var(--udexTypographyBodyXSFontSize, 14px);
   line-height: var(--udexTypographyBodyLineHeight, 1.5);
   color: var(--sapContent_TitleColor, #000000);
-  padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
+  padding: 0 var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
 }
 
 

package/src/themes/SocialMediaButton.css

@@ -0,0 +1,50 @@
+:host {
+  --udex-social-media-button-width: var(--udexSpacer32, 32px);
+  --udex-social-media-button-height: var(--udexSpacer32, 32px);
+  --udex-social-media-button-border-width: var(--udexCoreSizeBorderXS, 1px);
+  --udex-social-media-button-border-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);
+  --udex-social-media-button-border-radius: var(--udexRadiusXS, 4px);
+  --udex-social-media-button-background-color: var(--sapButton_Neutral_Background, #FFFFFF);
+  --udex-social-media-button-hover-border-color: var(--sapButton_Neutral_Hover_BorderColor, #A9B4BE);
+  --udex-social-media-button-hover-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);
+  --udex-social-media-button-hover-icon-color: var(--sapButton_Hover_TextColor, #0040B0);
+  --udex-social-media-button-selected-border-color: var(--sapButton_Neutral_Selected_BorderColor, #0040B0);
+  --udex-social-media-button-selected-background-color: var(--sapButton_Neutral_Selected_Background, #FFFFFF);
+
+  --udexLinkOutlineOffset: calc(-1 * var(--udexRadiusXS, 4px));
+  --udexLinkOutlineRadius: calc(var(--udexRadiusXS, 4px) + 2px);
+}
+
+.udex-social-media-button {
+  width: calc(var(--udex-social-media-button-width) - 2 * var(--udex-social-media-button-border-width));
+  height: calc(var(--udex-social-media-button-height) - 2 * var(--udex-social-media-button-border-width));
+  text-align: center;
+  border-radius: var(--udex-social-media-button-border-radius);
+  background: var(--udex-social-media-button-background-color);
+  border: var(--udex-social-media-button-border-width) solid var(--udex-social-media-button-border-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.udex-social-media-button svg {
+  max-height: 16px;
+}
+
+.udex-social-media-button:hover {
+  background-color: var(--udex-social-media-button-hover-background-color);
+  border-color: var(--udex-social-media-button-hover-border-color);
+}
+
+.udex-social-media-button:hover:not(:active) svg path {
+  fill: var(--udex-social-media-button-hover-icon-color);
+}
+
+.udex-social-media-button:active {
+  background-color: var(--udex-social-media-button-selected-background-color);
+  border-color: var(--udex-social-media-button-selected-border-color);
+}
+
+.hidden {
+  display: none;
+}