@fundamental-styles/common-css 0.25.0-rc.8 → 0.25.0

package/dist/sass/common-css-mixins.scss

@@ -0,0 +1,1064 @@
+@mixin sap-reset {
+  font-family: "72", "72full", Arial, Helvetica, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  color: $fn-color-grey-10;
+  font-weight: normal;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+
+  &::before,
+  &::after {
+    box-sizing: inherit;
+    font-size: inherit;
+  }
+}
+
+@mixin sap-rtl {
+  @at-root {
+    [dir="rtl"] &,
+    &[dir="rtl"] {
+      @content;
+    }
+  }
+}
+
+@mixin sap-transition($property: all, $duration: 150ms, $animation: ease-in) {
+  $fn-transition: $property $duration $animation;
+
+  -webkit-transition: $fn-transition;
+  -moz-transition: $fn-transition;
+  -ms-transition: $fn-transition;
+  -o-transition: $fn-transition;
+  transition: $fn-transition;
+}
+
+// States
+@mixin sap-hover {
+  &:hover,
+  &.is-hover {
+    @content;
+  }
+}
+
+@mixin sap-empty {
+  &:empty,
+  &.is-empty {
+    @content;
+  }
+}
+
+@mixin sap-pressed {
+  &[aria-pressed="true"],
+  &.is-pressed {
+    @content;
+  }
+}
+
+@mixin sap-readonly {
+  &[aria-readonly="true"],
+  &[readonly],
+  &.is-readonly {
+    @content;
+  }
+}
+
+@mixin sap-selected {
+  &[aria-selected="true"],
+  &.is-selected {
+    @content;
+  }
+}
+
+@mixin sap-expanded {
+  &[aria-expanded="true"] {
+    @content;
+  }
+}
+
+@mixin sap-active {
+  &:active,
+  &.is-active {
+    @content;
+  }
+}
+
+@mixin sap-focus-active {
+  &:focus:active,
+  &.is-focus.is-active {
+    @content;
+  }
+}
+
+@mixin sap-disabled {
+  &[aria-disabled="true"],
+  &:disabled,
+  &.is-disabled {
+    @content;
+  }
+}
+
+@mixin sap-focus() {
+  &:focus,
+  &.is-focus {
+    @content;
+  }
+}
+
+@mixin sap-is-focus() {
+  &.is-focus {
+    @content;
+  }
+}
+
+@mixin sap-not-focus-visible() {
+  &:focus:not(.focus-visible) {
+    @content;
+  }
+}
+
+@mixin sap-focus-visible() {
+  &.focus-visible,
+  &.is-focus {
+    @content;
+  }
+}
+
+@mixin sap-focus-within() {
+  &:focus-within,
+  &.is-focus-within {
+    @content;
+  }
+}
+
+@mixin sap-display() {
+  &.is-display {
+    @content;
+  }
+}
+
+// Flex Helpers
+@mixin sap-flex($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  @content;
+}
+
+@mixin sap-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin sap-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @content;
+}
+
+@mixin sap-flex-vertical-center {
+  display: flex;
+  align-items: center;
+  @content;
+}
+
+// Set Paddings
+@mixin sap-set-padding-left($left: 0) {
+  padding-left: $left;
+
+  @include sap-rtl() {
+    padding-right: $left;
+    padding-left: 0;
+  }
+}
+
+@mixin sap-set-padding-right($right: 0) {
+  padding-right: $right;
+
+  @include sap-rtl() {
+    padding-right: 0;
+    padding-left: $right;
+  }
+}
+
+@mixin sap-set-paddings-x($left: 0, $right: 0) {
+  padding-left: $left;
+  padding-right: $right;
+
+  @include sap-rtl() {
+    padding-right: $left;
+    padding-left: $right;
+  }
+}
+
+@mixin sap-set-paddings-x-equal($value: 0) {
+  padding-left: $value;
+  padding-right: $value;
+}
+
+@mixin sap-set-paddings-y($top: 0, $bottom: 0) {
+  padding-top: $top;
+  padding-bottom: $bottom;
+}
+
+@mixin sap-set-paddings-y-equal($value: 0) {
+  padding-top: $value;
+  padding-bottom: $value;
+}
+
+// Set position absolute
+@mixin sap-set-position-right($right) {
+  right: $right;
+
+  @include sap-rtl() {
+    right: auto;
+    left: $right;
+  }
+}
+
+@mixin sap-set-position-left($left) {
+  left: $left;
+
+  @include sap-rtl() {
+    left: auto;
+    right: $left;
+  }
+}
+
+@mixin sap-user-select() {
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+@mixin sap-set-top-right-bottom-left($top:0, $right:0, $bottom:0, $left:0) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+
+  @include sap-rtl() {
+    left: $right;
+    right: $left;
+  }
+}
+
+@mixin sap-set-square($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin sap-set-square-min-width($size) {
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+}
+
+@mixin sap-set-rectangle($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+// display mixins
+$sap-display-types: inline block contents flex grid inline-block inline-flex inline-grid inline-table list-item run-in table table-caption table-column-group table-header-group table-footer-group table-row-group table-cell table-column table-row none initial inherit !default;
+
+@mixin sap-display($type: inline) {
+  display: $type !important;
+
+  @content;
+}
+
+// border-radius
+$sap-corner-border-radius: (
+  "element": var(--sapElement_BorderCornerRadius),
+  "button": var(--sapButton_BorderCornerRadius),
+  "field": var(--sapField_BorderCornerRadius),
+  "group": var(--sapGroup_BorderCornerRadius),
+  "popover": var(--sapPopover_BorderCornerRadius),
+  "tile": var(--sapTile_BorderCornerRadius)
+);
+
+@mixin sap-set-border-radius($value...) {
+  $_value: $value;
+
+  @if (map-has-key($sap-corner-border-radius, #{$value})) {
+    $_value: map-get($sap-corner-border-radius, #{$value});
+  }
+
+  border-radius: $_value;
+
+  @content;
+}
+
+// content paddings
+
+$sap-content-paddings-home: (
+  "sm": 0.5rem,
+  "md": 2rem,
+  "lg": 2rem,
+  "xl": 3rem,
+);
+
+$sap-content-paddings-container: (
+  "sm": 1rem,
+  "md": 2rem,
+  "lg": 2rem,
+  "xl": 3rem,
+);
+
+$sap-content-paddings-nav: (
+  "sm": 1rem,
+  "md": 2rem,
+  "lg": 2rem,
+  "xl": 3rem,
+);
+
+@mixin sap-set-content-paddings($type, $value) {
+  @if ($type == 'home') {
+    padding-left: map-get($sap-content-paddings-home, $value) !important;
+    padding-right: map-get($sap-content-paddings-home, $value) !important;
+  } @else if ($type == 'container') {
+    padding-left: map-get($sap-content-paddings-container, $value) !important;
+    padding-right: map-get($sap-content-paddings-container, $value) !important;
+  } @else {
+    padding-left: map-get($sap-content-paddings-nav, $value) !important;
+    padding-right: map-get($sap-content-paddings-nav, $value) !important;
+  }
+}
+
+@mixin sap-set-dynamic-content-paddings($type) {
+  @include sap-media-sm() {
+    @include sap-set-content-paddings($type, 'sm');
+  }
+
+  @include sap-media-md() {
+    @include sap-set-content-paddings($type, 'md');
+  }
+
+  @include sap-media-lg() {
+    @include sap-set-content-paddings($type, 'lg');
+  }
+
+  @include sap-media-xl() {
+    @include sap-set-content-paddings($type, 'xl');
+  }
+}
+
+@mixin sap-content-paddings($type: home, $size: default) {
+  @if ($size == default) {
+    @include sap-set-dynamic-content-paddings($type);
+  } @else {
+    @include sap-set-content-paddings($type, $size);
+  }
+}
+
+// flex
+$sap-flex-spacings: (
+  "tiny": 0.5rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem
+);
+
+// ----------- FLEX DIRECTION -----------
+@mixin sap-flex($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+
+  @content;
+}
+
+// ----------- FLEX ALIGN CONTENT -----------
+@mixin sap-flex-align-content($type: normal, $direction: row) {
+  @include sap-flex($direction) {
+    flex-wrap: wrap;
+    align-content: $type;
+  }
+
+  @content;
+}
+
+// ----------- FLEX ALIGN ITEMS -----------
+@mixin sap-flex-align-items($type: stretch, $direction: row) {
+  @include sap-flex($direction) {
+    align-items: $type;
+  }
+
+  @content;
+}
+
+// ----------- FLEX GAP -----------
+@mixin sap-flex-gap($value, $type: "", $direction: row) {
+  @include sap-flex($direction);
+
+  $_value: "";
+
+  @if $value == "tiny" {
+    $_value: map_get($sap-flex-spacings, "tiny");
+  } @else if $value == "small" {
+    $_value: map_get($sap-flex-spacings, "small");
+  } @else if $value == "medium" {
+    $_value: map_get($sap-flex-spacings, "medium");
+  } @else if $value == large {
+    $_value: map_get($sap-flex-spacings, "large");
+  } @else {
+    $_value: $value;
+  }
+
+  @if $type == "" {
+    gap: $_value;
+  } @else {
+    #{$type}-gap: $_value;
+  }
+
+  @content;
+}
+
+// ----------- FLEX JUSTIFY CONTENT -----------
+@mixin sap-flex-justify($type: flex-start, $direction: row) {
+  @include sap-flex($direction) {
+    justify-content: $type;
+  }
+
+  @content;
+}
+
+// ----------- FLEX WRAP -----------
+@mixin sap-flex-wrap($type: nowrap, $direction: row) {
+  @include sap-flex($direction) {
+    flex-wrap: $type;
+  }
+
+  @content;
+}
+
+// ----------- FLEX CENTER -----------
+@mixin sap-flex-center($direction: row) {
+  @include sap-flex() {
+    align-items: center;
+    justify-content: center;
+    flex-direction: $direction;
+  }
+
+  @content;
+}
+
+// ----------- FLEX ORDER -----------
+@mixin sap-flex-order($value: 0) {
+  order: $value;
+
+  @content;
+}
+
+// ----------- FLEX GROW -----------
+@mixin sap-flex-grow($value) {
+  flex-grow: $value;
+
+  @content;
+}
+
+// ----------- FLEX SHRINK -----------
+@mixin sap-flex-shrink($value) {
+  flex-shrink: $value;
+
+  @content;
+}
+
+// ----------- FLEX ALIGN SELF -----------
+@mixin sap-flex-align-self($value) {
+  align-self: $value;
+
+  @content;
+}
+
+// ----------- FLEX CHILD -----------
+@mixin sap-flex-child($value) {
+  flex: $value;
+
+  @content;
+}
+
+// MARGINS
+
+$sap-margins: (
+  "tiny": 0.5rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem
+);
+
+$sap-container-sides: (
+  "top": top,
+  "bottom": bottom,
+  "begin": left,
+  "end": right,
+  "x": horizontal,
+  "y": vertical
+);
+
+@mixin sap-set-margin-all($value: 0) {
+  margin: $value;
+}
+
+@mixin sap-set-margin-top($value: 0) {
+  margin-top: $value;
+}
+
+@mixin sap-set-margin-bottom($value: 0) {
+  margin-bottom: $value;
+}
+
+@mixin sap-set-margin-begin($value: 0) {
+  margin-left: $value;
+
+  @include sap-rtl() {
+    margin-left: 0;
+    margin-right: $value;
+  }
+}
+
+@mixin sap-set-margin-end($value: 0) {
+  margin-right: $value;
+
+  @include sap-rtl() {
+    margin-right: 0;
+    margin-left: $value;
+  }
+}
+
+@mixin sap-set-margin-x-equal($value: 0) {
+  margin-right: $value;
+  margin-left: $value;
+}
+
+@mixin sap-set-margin-y-equal($value: 0) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
+@mixin sap-set-margin-x($valueLeft: 0, $valueRight: 0) {
+  margin-left: $valueLeft;
+  margin-right: $valueRight;
+
+  @include sap-rtl() {
+    margin-left: $valueRight;
+    margin-right: $valueLeft;
+  }
+}
+
+@mixin sap-set-margin-y($valueTop: 0, $valueBottom: 0) {
+  margin-top: $valueTop;
+  margin-bottom: $valueBottom;
+}
+
+@mixin sap-margin($value, $side: '') {
+  $_value: $value !important;
+
+  @if (map-has-key($sap-margins, #{$value})) {
+    $_value: map-get($sap-margins, #{$value}) !important;
+  }
+
+  @if ($side != '') {
+    @if ($side == top) {
+      @include sap-set-margin-top($_value);
+    } @else if($side == bottom) {
+      @include sap-set-margin-bottom($_value);
+    } @else if($side == begin) {
+      @include sap-set-margin-begin($_value);
+    } @else if($side == end) {
+      @include sap-set-margin-end($_value);
+    } @else if($side == x) {
+      @include sap-set-margin-x-equal($_value);
+    } @else if($side == y) {
+      @include sap-set-margin-y-equal($_value);
+    }
+  } @else {
+    @include sap-set-margin-all($_value);
+  }
+}
+
+@mixin sap-margin-responsive() {
+  @include sap-media-sm() {
+    margin: 0 0 1rem 0 !important;
+  }
+
+  @include sap-media-md() {
+    margin: 1rem !important;
+  }
+
+  @include sap-media-lg() {
+    margin: 1rem 2rem !important;
+  }
+
+  @include sap-media-xl() {
+    margin: 1rem 3rem !important;
+  }
+}
+
+// MEDIA QUERIES
+$small: 600px;
+$medium: 1024px;
+$large: 1440px;
+$offset: 1px;
+
+@mixin sap-media-sm() {
+  @media (max-width: #{$small - $offset}) {
+    @content;
+  }
+}
+
+@mixin sap-media-md() {
+  @media (min-width: #{$small}) and (max-width: #{$medium - $offset}) {
+    @content;
+  }
+}
+
+@mixin sap-media-lg() {
+  @media (min-width: #{$medium}) and (max-width: #{$large - $offset}) {
+    @content;
+  }
+}
+
+@mixin sap-media-xl() {
+  @media (min-width: #{$large}) {
+    @content;
+  }
+}
+
+@mixin sap-media-min-width($width) {
+  @media (min-width: $width) {
+    @content;
+  }
+}
+
+@mixin sap-media-max-width($width) {
+  @media (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin sap-media-range-width($minWidth, $maxWidth) {
+  @media (min-width: $minWidth) and (max-width: $maxWidth) {
+    @content;
+  }
+}
+
+@mixin sap-media-print() {
+  @media print {
+    @content;
+  }
+}
+
+@mixin sap-media-orientation($orientation) {
+  @media (orientation: $orientation) {
+    @content;
+  }
+}
+
+// PADDINGS
+$sap-paddings: (
+  "tiny": 0.5rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem
+);
+
+$sap-container-sides: (
+  "top": top,
+  "bottom": bottom,
+  "begin": left,
+  "end": right,
+  "x": horizontal,
+  "y": vertical
+);
+
+@mixin sap-set-padding-all($value: 0) {
+  padding: $value;
+}
+
+@mixin sap-set-padding-top($value: 0) {
+  padding-top: $value;
+}
+
+@mixin sap-set-padding-bottom($value: 0) {
+  padding-bottom: $value;
+}
+
+@mixin sap-set-padding-begin($value: 0) {
+  padding-left: $value;
+
+  @include sap-rtl() {
+    padding-left: 0;
+    padding-right: $value;
+  }
+}
+
+@mixin sap-set-padding-end($value: 0) {
+  padding-right: $value;
+
+  @include sap-rtl() {
+    padding-right: 0;
+    padding-left: $value;
+  }
+}
+
+@mixin sap-set-padding-x-equal($value: 0) {
+  padding-right: $value;
+  padding-left: $value;
+}
+
+@mixin sap-set-padding-y-equal($value: 0) {
+  padding-top: $value;
+  padding-bottom: $value;
+}
+
+@mixin sap-set-padding-x($valueLeft: 0, $valueRight: 0) {
+  padding-left: $valueLeft;
+  padding-right: $valueRight;
+
+  @include sap-rtl() {
+    padding-left: $valueRight;
+    padding-right: $valueLeft;
+  }
+}
+
+@mixin sap-set-padding-y($valueTop: 0, $valueBottom: 0) {
+  padding-top: $valueTop;
+  padding-bottom: $valueBottom;
+}
+
+@mixin sap-padding($value: 1rem, $side: '') {
+  $_value: $value !important;
+
+  @if (map-has-key($sap-paddings, #{$value})) {
+    $_value: map-get($sap-paddings, #{$value}) !important;
+  }
+
+  @if ($side != '') {
+    @if ($side == top) {
+      @include sap-set-padding-top($_value);
+    } @else if($side == bottom) {
+      @include sap-set-padding-bottom($_value);
+    } @else if($side == begin) {
+      @include sap-set-padding-begin($_value);
+    } @else if($side == end) {
+      @include sap-set-padding-end($_value);
+    } @else if($side == x) {
+      @include sap-set-padding-x-equal($_value);
+    } @else if($side == y) {
+      @include sap-set-padding-y-equal($_value);
+    }
+  } @else {
+    @include sap-set-padding-all($_value);
+  }
+}
+
+@mixin sap-padding-responsive() {
+  @include sap-media-sm() {
+    @include sap-padding(small, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-media-md() {
+    @include sap-padding(medium, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-media-lg() {
+    @include sap-padding(medium, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-media-xl() {
+    @include sap-padding(large, x);
+    @include sap-padding(0, y);
+  }
+}
+
+// SHADOWS
+$sap-box-shadow-types: (
+  "level-0": var(--sapContent_Shadow0),
+  "level-1": var(--sapContent_Shadow1),
+  "level-2": var(--sapContent_Shadow2),
+  "level-3": var(--sapContent_Shadow3),
+  "header": var(--sapContent_HeaderShadow),
+  "shell": var(--sapShell_Shadow),
+  "none": none,
+);
+
+$sap-text-shadow-types: (
+  "text": var(--sapContent_TextShadow),
+  "contrast-text": var(--sapContent_ContrastTextShadow),
+  "group-title-text": var(--sapShell_GroupTitleTextShadow),
+  "emphasized-text": var(--sapButton_Emphasized_TextShadow),
+);
+
+@mixin sap-set-box-shadow($value) {
+  box-shadow: $value;
+}
+
+@mixin sap-set-text-shadow($value) {
+  text-shadow: $value;
+}
+
+@mixin sap-shadow($type) {
+  @if (map-has-key($sap-box-shadow-types , #{$type} )) {
+    @include sap-set-box-shadow(map-get($sap-box-shadow-types, #{$type}));
+  } @else if (map-has-key($sap-text-shadow-types , #{$type} )) {
+    @include sap-set-text-shadow(map-get($sap-text-shadow-types, #{$type}));
+  } @else {
+    @warn "Unknown type of shadow";
+  }
+}
+
+@mixin sap-sr-only() {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  width: 1px;
+  border: 0;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+
+  @content;
+}
+
+// TYPOGRAPHY
+$sap-font-types: (
+  "regular": var(--sapFontFamily),
+  "light": var(--sapFontLightFamily),
+  "bold": var(--sapFontBoldFamily),
+  "semibold": var(--sapFontSemiboldFamily),
+  "semibold-duplex": var(--sapFontSemiboldDuplexFamily),
+  "monospaced-regular": var(--sapContent_MonospaceFontFamily),
+  "monospaced-bold": var(--sapContent_MonospaceBoldFontFamily),
+  "black": var(--sapFontBlackFamily),
+  "header": var(--sapFontHeaderFamily),
+);
+
+// FONT FAMILY
+@mixin sap-font-family($type) {
+  @if ($type == "regular") {
+    font-family: map-get($sap-font-types, "regular");
+  } @else if ($type == "light") {
+    font-family: map-get($sap-font-types, "light");
+  } @else if ($type == "bold") {
+    font-family: map-get($sap-font-types, "bold");
+  } @else if ($type == "semibold") {
+    font-family: map-get($sap-font-types, "semibold");
+  } @else if ($type == "semibold-duplex") {
+    font-family: map-get($sap-font-types, "semibold-duplex");
+  } @else if ($type == "monospaced-regular") {
+    font-family: map-get($sap-font-types, "monospaced-regular");
+  } @else if ($type == "monospaced-bold") {
+    font-family: map-get($sap-font-types, "monospaced-bold");
+  } @else if ($type == "black") {
+    font-family: map-get($sap-font-types, "black");
+  } @else if ($type == "header") {
+    font-family: map-get($sap-font-types, "header");
+  } @else {
+    font-family: $type;
+  }
+}
+
+// FONT SIZE
+$sap-font-sizes: (
+  "header-6": var(--sapFontHeader6Size),
+  "header-5": var(--sapFontHeader5Size),
+  "header-4": var(--sapFontHeader4Size),
+  "header-3": var(--sapFontHeader3Size),
+  "header-2": var(--sapFontHeader2Size),
+  "header-1": var(--sapFontHeader1Size),
+  "small": var(--sapFontSmallSize),
+  "medium": var(--sapFontSize),
+  "large": var(--sapFontLargeSize),
+);
+
+@mixin sap-font-size($size) {
+  @if ($size == "header-6") {
+    font-size: map-get($sap-font-sizes, "header-6");
+  } @else if ($size == "header-5") {
+    font-size: map-get($sap-font-sizes, "header-5");
+  } @else if ($size == "header-4") {
+    font-size: map-get($sap-font-sizes, "header-4");
+  } @else if ($size == "header-3") {
+    font-size: map-get($sap-font-sizes, "header-3");
+  } @else if ($size == "header-2") {
+    font-size: map-get($sap-font-sizes, "header-2");
+  } @else if ($size == "header-1") {
+    font-size: map-get($sap-font-sizes, "header-1");
+  } @else if ($size == "small") {
+    font-size: map-get($sap-font-sizes, "small");
+  } @else if ($size == "medium") {
+    font-size: map-get($sap-font-sizes, "medium");
+  } @else if ($size == "large") {
+    font-size: map-get($sap-font-sizes, "large");
+  } @else {
+    font-size: $size;
+  }
+}
+
+// LINE HEIGHT
+@mixin sap-font-line-height($value: normal) {
+  line-height: $value;
+}
+
+// COMMON CASES
+@mixin sap-font($type) {
+  @if ($type == header-3) {
+    font-family: var(--sapFontHeaderFamily);
+    font-size: var(--sapFontHeader3Size);
+    color: var(--sapGroup_TitleTextColor);
+  } @else {
+    font-family: var(--sapFontFamily);
+
+    @if ($type == standard-text) {
+      font-size: var(--sapFontSize);
+      color: var(--sapTextColor);
+    } @else if($type == small-detail-text) {
+      font-size: var(--sapFontSmallSize);
+      color: var(--sapContent_LabelColor);
+    } @else if($type == standard-field-text) {
+      font-size: var(--sapFontSize);
+      color: var(--sapField_TextColor);
+    } @else {
+      font-size: var(--sapFontSize);
+      color: var(--sapContent_LabelColor);
+    }
+  }
+  @content;
+}
+
+// BORDER
+@mixin sap-border($width, $style, $color, $pos: all) {
+  $_border: $width $style $color;
+
+  @if ($pos == "top") {
+    border-top: $_border;
+  } @else if ($pos == "bottom") {
+    border-bottom: $_border;
+  } @else if ($pos == "left") {
+    border-left: $_border;
+
+    @include sap-rtl() {
+      border-left: none;
+      border-right: $_border;
+    }
+  } @else if ($pos == "right") {
+    border-right: $_border;
+
+    @include sap-rtl() {
+      border-left: $_border;
+      border-right: none;
+    }
+  } @else if ($pos == "x") {
+    border-left: $_border;
+    border-right: $_border;
+  } @else if ($pos == "y") {
+    border-top: $_border;
+    border-bottom: $_border;
+  } @else if ($pos == "all") {
+    border: $_border;
+  } @else {
+    border: $_border;
+  }
+}
+
+// FOCUS
+@mixin sap-fiori-focus($offset: -0.1875rem, $alternative: false) {
+  &:focus,
+  &.is-focus {
+    outline-offset: $offset;
+    outline-width: var(--sapContent_FocusWidth);
+    outline-style: var(--sapContent_FocusStyle);
+
+    @if $alternative == true {
+      outline-color: var(--sapContent_ContrastFocusColor);
+    } @else {
+      outline-color: var(--sapContent_FocusColor);
+    }
+
+    @content;
+  }
+}
+
+@mixin sap-fiori-focus-within($offset: -0.1875rem, $alternative: false) {
+  &:focus-within,
+  &.is-focus-within {
+    outline-offset: $offset;
+    outline-width: var(--sapContent_FocusWidth);
+    outline-style: var(--sapContent_FocusStyle);
+
+    @if $alternative == true {
+      outline-color: var(--sapContent_ContrastFocusColor);
+    } @else {
+      outline-color: var(--sapContent_FocusColor);
+    }
+
+    @content;
+  }
+}
+
+@mixin sap-fake-fiori-focus($offset: 0, $radius: 0, $alternative: false) {
+  &:focus,
+  &.is-focus {
+    outline: none;
+    position: relative;
+
+    &::after {
+      @if $alternative == true {
+        border-color: var(--sapContent_ContrastFocusColor);
+      } @else {
+        border-color: var(--sapContent_FocusColor);
+      }
+
+      border-width: var(--sapContent_FocusWidth);
+      border-style: var(--sapContent_FocusStyle);
+      border-radius: $radius;
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      top: $offset;
+      bottom: $offset;
+      left: $offset;
+      right: $offset;
+      @content;
+    }
+  }
+}
+
+@mixin sap-fake-fiori-focus-within($offset: 0, $radius: 0, $alternative: false) {
+  &:focus-within,
+  &.is-focus-within {
+    outline: none;
+    position: relative;
+
+    &::after {
+      @if $alternative == true {
+        border-color: var(--sapContent_ContrastFocusColor);
+      } @else {
+        border-color: var(--sapContent_FocusColor);
+      }
+
+      border-width: var(--sapContent_FocusWidth);
+      border-style: var(--sapContent_FocusStyle);
+      border-radius: $radius;
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      top: $offset;
+      bottom: $offset;
+      left: $offset;
+      right: $offset;
+      @content;
+    }
+  }
+}