@ebay/skin 17.5.0 → 18.0.0-next.0

package/dist/menu-button/menu-button.css

@@ -1,234 +1,313 @@
 :root {
-  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
         0 5px 17px rgba(0, 0, 0, 0.2);
 }
-.menu-button,
-.fake-menu-button {
-  line-height: normal;
-  position: relative;
-}
-.menu-button__menu,
-.fake-menu-button__menu {
-  background-color: var(--menu-button-menu-background-color, var(--color-background-elevated));
-  border-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-shadow);
-  box-sizing: border-box;
-  display: none;
-  left: 0;
-  max-height: 400px;
-  min-width: 100%;
-  overflow-y: auto;
-  position: absolute;
-  top: calc(100% + 4px);
-  width: auto;
-  z-index: 2;
-  outline: 0;
-}
-[dir="rtl"] .menu-button__menu,
-[dir="rtl"] .fake-menu-button__menu {
-  left: unset;
-  right: 0;
-}
-span.menu-button__button,
-span.fake-menu-button__button {
-  display: inline-block;
-  vertical-align: bottom;
-}
+.fake-menu-button,
+.menu-button {
+    line-height: normal;
+    position: relative;
+}
+
+.fake-menu-button__menu,
+.menu-button__menu {
+    background-color: var(
+        --menu-button-menu-background-color,
+        var(--color-background-elevated)
+    );
+    border-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+    box-shadow: var(--bubble-shadow);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    max-height: 400px;
+    min-width: 100%;
+    outline: 0;
+    overflow-y: auto;
+    position: absolute;
+    top: calc(100% + 4px);
+    width: auto;
+    z-index: 2;
+}
+[dir="rtl"] .fake-menu-button__menu,
+[dir="rtl"] .menu-button__menu {
+    left: unset;
+    right: 0;
+}
+
+span.fake-menu-button__button,
+span.menu-button__button {
+    display: inline-block;
+    vertical-align: bottom;
+}
+
 .fake-menu-button__menu {
-  list-style-type: none;
-  margin: 0;
-  max-height: calc(50vh - 40px);
-  overflow-y: auto;
-  padding: 0;
+    list-style-type: none;
+    margin: 0;
+    max-height: calc(50vh - 40px);
+    overflow-y: auto;
+    padding: 0;
 }
+
 div.menu-button__item[role^="menuitem"] {
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: border-box;
-  display: inline-grid;
-  font-family: inherit;
-  grid-template-columns: auto auto;
-  justify-content: space-between;
-  padding: 8px 15px;
-  width: 100%;
-  border-color: var(--menu-button-menuitem-border-color, var(--color-background-primary));
-  color: var(--menu-button-menuitem-foreground-color, var(--color-foreground-primary));
-  cursor: default;
+    background-color: initial;
+    border-color: var(
+        --menu-button-menuitem-border-color,
+        var(--color-background-primary)
+    );
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(
+        --menu-button-menuitem-foreground-color,
+        var(--color-foreground-primary)
+    );
+    cursor: default;
+    display: inline-grid;
+    font-family: inherit;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    padding: 8px 15px;
+    width: 100%;
 }
 div.menu-button__item[role^="menuitem"]:not(:last-child) {
-  margin-bottom: 1px;
+    margin-bottom: 1px;
 }
 div.menu-button__item[role^="menuitem"]:focus {
-  outline-offset: -4px;
+    outline-offset: -4px;
 }
 div.menu-button__item[role^="menuitem"]:hover {
-  background-color: var(--color-state-primary-hover);
-  color: var(--menu-button-menuitem-hover-foreground-color, var(--color-foreground-primary));
+    background-color: var(--color-state-primary-hover);
+    color: var(
+        --menu-button-menuitem-hover-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
 div.menu-button__item[role^="menuitem"]:active {
-  font-weight: bold;
+    font-weight: 700;
 }
 div.menu-button__item[role^="menuitem"]:first-child {
-  border-top-left-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-  border-top-right-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
+    border-top-left-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+    border-top-right-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
 }
 div.menu-button__item[role^="menuitem"]:last-child {
-  border-bottom-left-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-  border-bottom-right-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-}
-.menu-button__item svg.icon--tick-16,
-.fake-menu-button__item svg.icon--tick-16 {
-  align-self: center;
-  fill: currentColor;
-  margin: 0 auto;
-  opacity: 0;
-  stroke: currentColor;
-  stroke-width: 0;
-}
-.menu-button__item svg.icon--tick-16:last-child,
-.fake-menu-button__item svg.icon--tick-16:last-child {
-  margin-left: var(--spacing-100);
+    border-bottom-left-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+    border-bottom-right-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+}
+
+.fake-menu-button__item svg.icon--tick-16,
+.menu-button__item svg.icon--tick-16 {
+    align-self: center;
+    fill: currentColor;
+    margin: 0 auto;
+    opacity: 0;
+    stroke: currentColor;
+    stroke-width: 0;
+}
+
+.fake-menu-button__item svg.icon--tick-16:last-child,
+.menu-button__item svg.icon--tick-16:last-child {
+    margin-left: var(--spacing-100);
 }
 a.fake-menu-button__item {
-  color: var(--menu-button-anchor-color, var(--color-foreground-primary));
-  text-decoration: none;
+    color: var(--menu-button-anchor-color, var(--color-foreground-primary));
+    text-decoration: none;
 }
 a.fake-menu-button__item:focus {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 a.fake-menu-button__item:hover,
 a.fake-menu-button__item:visited {
-  color: var(--menu-button-anchor-color, var(--color-background-primary));
+    color: var(--menu-button-anchor-color, var(--color-background-primary));
 }
 button.fake-menu-button__item {
-  background-color: var(--menu-button-background-color, var(--color-background-primary));
-  color: var(--menu-button-foreground-color, var(--color-foreground-primary));
-  font-family: inherit;
-  font-size: 1em;
-  text-align: left;
-}
+    background-color: var(
+        --menu-button-background-color,
+        var(--color-background-primary)
+    );
+    color: var(--menu-button-foreground-color, var(--color-foreground-primary));
+    font-family: inherit;
+    font-size: 1em;
+    text-align: left;
+}
+
 a.fake-menu-button__item[aria-current="page"] svg.icon--tick-16,
-button.fake-menu-button__item[aria-current="page"] svg.icon--tick-16 {
-  opacity: 1;
-}
+button.fake-menu-button__item[aria-current="page"] svg.icon--tick-16,
 div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
-  opacity: 1;
+    opacity: 1;
 }
+
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: border-box;
-  display: inline-grid;
-  font-family: inherit;
-  grid-template-columns: auto auto;
-  justify-content: space-between;
-  padding: 8px 15px;
-  width: 100%;
-  border-color: var(--menu-button-menuitem-border-color, var(--color-background-primary));
-  color: var(--menu-button-menuitem-foreground-color, var(--color-foreground-primary));
+    background-color: initial;
+    border-color: var(
+        --menu-button-menuitem-border-color,
+        var(--color-background-primary)
+    );
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: var(
+        --menu-button-menuitem-foreground-color,
+        var(--color-foreground-primary)
+    );
+    display: inline-grid;
+    font-family: inherit;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    padding: 8px 15px;
+    width: 100%;
 }
 .fake-menu-button__menu a.fake-menu-button__item:not(:last-child),
 .fake-menu-button__menu button.fake-menu-button__item:not(:last-child) {
-  margin-bottom: 1px;
+    margin-bottom: 1px;
 }
 .fake-menu-button__menu a.fake-menu-button__item:focus,
 .fake-menu-button__menu button.fake-menu-button__item:focus {
-  outline-offset: -4px;
+    outline-offset: -4px;
 }
 .fake-menu-button__menu a.fake-menu-button__item:hover,
 .fake-menu-button__menu button.fake-menu-button__item:hover {
-  background-color: var(--color-state-primary-hover);
-  color: var(--menu-button-menuitem-hover-foreground-color, var(--color-foreground-primary));
+    background-color: var(--color-state-primary-hover);
+    color: var(
+        --menu-button-menuitem-hover-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
 .fake-menu-button__menu a.fake-menu-button__item:active,
 .fake-menu-button__menu button.fake-menu-button__item:active {
-  font-weight: bold;
+    font-weight: 700;
 }
+
 .fake-menu-button__menu a.fake-menu-button__item:not([href]),
 .fake-menu-button__menu button.fake-menu-button__item[disabled],
-.menu-button__menu div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
-  color: var(--menu-button-menuitem-disabled-foreground-color, var(--color-foreground-disabled));
-}
+.menu-button__menu
+    div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
+    color: var(
+        --menu-button-menuitem-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
 .fake-menu-button__menu > li:first-child a.fake-menu-button__item {
-  border-top-left-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-  border-top-right-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-}
+    border-top-left-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+    border-top-right-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+}
+
 .fake-menu-button__menu > li:last-child a.fake-menu-button__item {
-  border-bottom-left-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-  border-bottom-right-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
-}
-.menu-button__menu--fix-width,
-.fake-menu-button__menu--fix-width {
-  width: 100%;
-}
-.menu-button__menu--fix-width span,
-.fake-menu-button__menu--fix-width span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
+    border-bottom-left-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+    border-bottom-right-radius: var(
+        --menu-button-menu-border-radius,
+        var(--border-radius-50)
+    );
+}
+
+.fake-menu-button__menu--fix-width,
+.menu-button__menu--fix-width {
+    width: 100%;
+}
+.fake-menu-button__menu--fix-width span,
+.menu-button__menu--fix-width span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
 a.fake-menu-button__item > span,
 button.fake-menu-button__item > span,
 div.menu-button__item[role^="menuitem"] > span {
-  flex: 1 0 auto;
-  white-space: nowrap;
+    flex: 1 0 auto;
+    white-space: nowrap;
 }
+
 a.fake-menu-button__item--badged,
 button.fake-menu-button__item--badged,
 div.menu-button__item--badged[role^="menuitem"] {
-  padding-right: 36px;
-  position: relative;
+    padding-right: 36px;
+    position: relative;
 }
+
 a.fake-menu-button__item--badged .badge,
 button.fake-menu-button__item--badged .badge,
 div.menu-button__item--badged[role^="menuitem"] .badge {
-  margin-left: var(--spacing-50);
-  position: absolute;
-  top: 6px;
-  z-index: 1;
+    margin-left: var(--spacing-50);
+    position: absolute;
+    top: 6px;
+    z-index: 1;
 }
+
 .menu-button__menu--scroll {
-  overflow-y: scroll;
+    overflow-y: scroll;
 }
-.menu-button__menu--reverse,
-.fake-menu-button__menu--reverse {
-  left: unset;
-  right: 0;
+
+.fake-menu-button__menu--reverse,
+.menu-button__menu--reverse {
+    left: unset;
+    right: 0;
 }
-[dir="rtl"] .menu-button__menu--reverse,
-[dir="rtl"] .fake-menu-button__menu--reverse {
-  left: 0;
-  right: unset;
+[dir="rtl"] .fake-menu-button__menu--reverse,
+[dir="rtl"] .menu-button__menu--reverse {
+    left: 0;
+    right: unset;
 }
-.menu-button__button[aria-expanded="true"] ~ .menu-button__menu,
-.fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
-.menu-button .expand-btn[aria-expanded="true"] ~ .menu-button__menu,
+
+.fake-menu-button .btn[aria-expanded="true"] ~ .fake-menu-button__menu,
 .fake-menu-button .expand-btn[aria-expanded="true"] ~ .fake-menu-button__menu,
+.fake-menu-button__button[aria-expanded="true"] ~ .fake-menu-button__menu,
 .menu-button .btn[aria-expanded="true"] ~ .menu-button__menu,
-.fake-menu-button .btn[aria-expanded="true"] ~ .fake-menu-button__menu {
-  display: block;
+.menu-button .expand-btn[aria-expanded="true"] ~ .menu-button__menu,
+.menu-button__button[aria-expanded="true"] ~ .menu-button__menu {
+    display: block;
 }
-.menu-button__button ~ .menu-button__menu--static,
-.fake-menu-button__button ~ .fake-menu-button__menu--static,
+
+.btn ~ .fake-menu-button__menu--static,
+.btn ~ .menu-button__menu--static,
 .expand-btn ~ .menu-button__menu--static,
 .expand_btn ~ .fake-menu-button__menu--static,
-.btn ~ .menu-button__menu--static,
-.btn ~ .fake-menu-button__menu--static {
-  position: static;
+.fake-menu-button__button ~ .fake-menu-button__menu--static,
+.menu-button__button ~ .menu-button__menu--static {
+    position: static;
 }
+
 div.menu-button__option--active[role="option"] {
-  font-weight: bold;
+    font-weight: 700;
 }
+
 hr.menu-button__separator {
-  border-color: var(--menu-button-separator-color, var(--color-stroke-subtle));
-  border-style: solid;
-  border-width: 1px;
-  margin: 0;
+    border-color: var(
+        --menu-button-separator-color,
+        var(--color-stroke-subtle)
+    );
+    border-style: solid;
+    border-width: 1px;
+    margin: 0;
 }
 div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
+
+/*# sourceMappingURL=menu-button.css.map */

package/dist/menu-button/menu-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_bubble-mixins.scss","menu-button.css","../../src/sass/menu-button/menu-button.scss","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/private/_dropdown-mixins.scss","../../src/sass/mixins/private/_selection-list-mixins.scss","../../src/sass/mixins/private/_menu-mixins.scss","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"AAEA;EAKI,4EAAA;ACQJ;ACTA;EAEI,kBAAA;EACA,iBAAA;ADcJ;;ACXA;ECVQ,2FAAA;EAAA,4EAAA;ECOJ,+BAAA;EACA,qBAAA;EACA,YAAA;EACA,MAAA;EACA,gBAAA;EACA,cAAA;EFMA,SAAA;EELA,eAAA;EACA,iBAAA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;AH0BJ;AGxBI;EACI,UAAA;EACA,OAAA;AH2BR;;AC3BA;EAEI,oBAAA;EACA,qBAAA;AD8BJ;;AC3BA;EACI,oBAAA;EACA,QAAA;EACA,4BAAA;EACA,eAAA;EACA,SAAA;AD8BJ;;AC3BA;EGpCI,wBAAA;EFCI,sFAAA;EEAJ,kBAAA;EACA,gBAAA;EACA,qBAAA;EFFI,mFAAA;EDuCJ,cAAA;EGpCA,mBAAA;EACA,mBAAA;EACA,+BAAA;EACA,6BAAA;EACA,gBAAA;EACA,UAAA;AJsEJ;AIpEI;EACI,iBAAA;AJsER;AInEI;EACI,mBAAA;AJqER;AKxEI;EACI,iDAAA;EHbA,yFAAA;AFwFR;AKpEI;EACI,eAAA;ALsER;AGvDI;EDpCI,qFAAA;EAAA,sFAAA;AF+FR;AGhDI;ED/CI,wFAAA;EAAA,yFAAA;AFmGR;;ACzDA;EGtBI,iBAAA;EACA,iBAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;EACA,cAAA;AJoFJ;;AC9DA;EAEI,8BAAA;ADiEJ;AC7DA;ECrDQ,sEAAA;EDwDJ,oBAAA;ADgEJ;AC9DI;EACI,yBAAA;ADgER;AC7DI;EC9DI,sEAAA;AF8HR;ACtDA;ECxEQ,qFAAA;EAAA,0EAAA;EDkFJ,mBAAA;EACA,aAAA;EACA,eAAA;ADmDJ;;AC3CA;EACI,SAAA;ADmDJ;;AChDA;EGjGI,wBAAA;EFCI,sFAAA;EEAJ,kBAAA;EACA,gBAAA;EACA,qBAAA;EFFI,mFAAA;EEGJ,mBAAA;EACA,mBAAA;EACA,+BAAA;EACA,6BAAA;EACA,gBAAA;EACA,UAAA;AJwJJ;AItJI;EACI,iBAAA;AJyJR;AItJI;EACI,mBAAA;AJyJR;AK5JI;EACI,iDAAA;EHbA,yFAAA;AF6KR;AKzJI;EACI,eAAA;AL4JR;;AC5EA;ECrGQ,6FAAA;AFuLR;;ACxEA;EC/GQ,qFAAA;EAAA,sFAAA;AF4LR;;AClEA;EC1HQ,wFAAA;EAAA,yFAAA;AFiMR;;AC5DA;EAEI,UAAA;AD+DJ;AC7DI;EKvHA,eAAA;EACA,sBAAA;EACA,kBAAA;ELwHI,UAAA;ADiER;;AC7DA;EAGI,aAAA;EACA,kBAAA;ADgEJ;;AC7DA;EAGI,kBAAA;EACA,iBAAA;ADgEJ;;AC7DA;EAGI,6BAAA;EACA,iBAAA;EACA,OAAA;EACA,SAAA;ADgEJ;;AC7DA;EACI,iBAAA;ADgEJ;;AC7DA;EEjJI,UAAA;EACA,OAAA;AHmNJ;AGjNI;EACI,MAAA;EACA,WAAA;AHoNR;;ACnEA;EAMI,aAAA;ADsEJ;;ACnEA;EAMI,eAAA;ADsEJ;;ACnEA;EACI,eAAA;ADsEJ;;ACnEA;ECtMQ,2EAAA;ED4MJ,kBAAA;EACA,gBAAA;EACA,QAAA;ADkEJ;AC9DA;EACI,YAAA;ADkEJ","file":"menu-button.css"}

package/dist/mixins/_typography-mixins.scss

@@ -0,0 +1,136 @@
+@mixin typography-giant-3() {
+    font-size: var(--font-size-giant-3);
+    font-weight: var(--font-weight-bold);
+    line-height: 52px;
+}
+
+@mixin typography-giant-2() {
+    font-size: var(--font-size-giant-2);
+    font-weight: var(--font-weight-bold);
+    line-height: 46px;
+}
+
+@mixin typography-giant-1() {
+    font-size: var(--font-size-giant-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 40px;
+}
+
+@mixin typography-large-2() {
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
+    line-height: 32px;
+}
+
+@mixin typography-large-2-secondary() {
+    @include typography-large-2();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-large-1() {
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-bold);
+    line-height: 28px;
+}
+
+@mixin typography-large-1-secondary() {
+    @include typography-large-1();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-medium() {
+    font-size: var(--font-size-medium);
+    line-height: 24px;
+}
+
+@mixin typography-medium-bold() {
+    @include typography-medium();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-medium-secondary() {
+    @include typography-medium();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-regular() {
+    font-size: var(--font-size-default);
+    line-height: 20px;
+}
+
+@mixin typography-regular-bold() {
+    @include typography-regular();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-regular-secondary() {
+    @include typography-regular();
+
+    color: var(--color-foreground-secondary);
+}
+
+@mixin typography-small() {
+    font-size: var(--font-size-small);
+    line-height: 16px;
+}
+
+@mixin typography-small-bold() {
+    @include typography-small();
+
+    font-weight: var(--font-weight-bold);
+}
+
+@mixin typography-small-secondary() {
+    @include typography-small();
+
+    color: var(--color-foreground-secondary);
+}
+
+/* large screen titles */
+
+@mixin title-giant-screen-large() {
+    font-size: var(--font-size-giant-1);
+    line-height: 36px;
+}
+
+@mixin title-large-screen-large() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin title-medium-screen-large() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin title-small-screen-large() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+/* small screen titles */
+
+@mixin title-giant-screen-small() {
+    font-size: var(--font-size-large-2);
+    line-height: 30px;
+}
+
+@mixin title-large-screen-small() {
+    font-size: var(--font-size-large-1);
+    line-height: 24px;
+}
+
+@mixin title-medium-screen-small() {
+    font-size: var(--font-size-medium);
+    line-height: 20px;
+}
+
+@mixin title-small-screen-small() {
+    font-size: var(--font-size-default);
+    line-height: 16px;
+}

package/dist/mixins/_utility-mixins.scss

@@ -0,0 +1,62 @@
+@mixin clipped() {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+@mixin unclipped() {
+    clip: auto;
+    height: auto;
+    overflow: visible;
+    white-space: normal;
+    width: auto;
+}
+
+@mixin truncate() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin image-treatment($border-radius: 8px) {
+    align-items: center;
+    border-radius: $border-radius;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+        background: rgba(0, 0, 0, 0.05);
+        bottom: 0;
+        content: "";
+        display: block;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    > img {
+        display: inline-block;
+        max-height: 100%;
+        max-width: 100%;
+        object-fit: contain;
+    }
+}
+
+@mixin flex-items-centered($display: flex) {
+    align-items: center;
+    display: $display;
+    justify-content: center;
+}
+
+@mixin inline-flex-items-centered() {
+    @include flex-items-centered(inline-flex);
+}