@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

package/src/core/style/abstracts/mixins.scss

@@ -1,798 +1,801 @@
-// -----------------------------------------------------------------------------
-// This file contains all application-wide Sass mixins.
-// -----------------------------------------------------------------------------
-
-/// Event wrapper
-/// @author Harry Roberts
-/// @param {Bool} $self [false] - Whether or not to include current selector
-/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
-@mixin on-event($self: false) {
-    @if $self {
-        &,
-        &:hover,
-        &:active,
-        &:focus {
-            @content;
-        }
-    } @else {
-        &:hover,
-        &:active,
-        &:focus {
-            @content;
-        }
-    }
-}
-
-/// Make a context based selector a little more friendly
-/// @author Hugo Giraudel
-/// @param {String} $context
-@mixin when-inside($context) {
-    #{$context} & {
-        @content;
-    }
-}
-
-@mixin font($size: false, $weight: 400, $lh: false, $family: $font-family-body) {
-    font-family: $family;
-
-    @if $size {
-        font-size: $size;
-    }
-
-    @if $weight {
-        font-weight: $weight;
-    }
-
-    @if $lh {
-        line-height: $lh;
-    }
-}
-
-@mixin pep-spacing-element-negative($add-important: true, $spacing-size: $spacing-xs) {
-    @if ($add-important) {
-        margin-right: calc(#{$spacing-size} * -1) !important;
-        margin-left: calc(#{$spacing-size} * -1) !important;
-    } @else {
-        margin-right: calc(#{$spacing-size} * -1);
-        margin-left: calc(#{$spacing-size} * -1);
-    }
-}
-
-@mixin pep-spacing-element($add-important: true, $spacing-size: $spacing-xs) {
-    @if ($add-important) {
-        margin-right: $spacing-size !important;
-        margin-left: $spacing-size !important;
-    } @else {
-        margin-right: $spacing-size;
-        margin-left: $spacing-size;
-    }
-}
-
-@mixin align-center($vertical-alignment: true, $horizontal-alignment: true) {
-    display: inline-flex !important;
-
-    @if ($vertical-alignment) {
-        align-items: center;
-    }
-
-    @if ($horizontal-alignment) {
-        justify-content: center;
-    }
-}
-
-@mixin flex-grow($int: 1) {
-    -webkit-box-flex: $int;
-    -moz-box-flex: $int;
-    -webkit-flex-grow: $int;
-    -ms-flex: $int;
-    flex-grow: $int;
-}
-
-@mixin ellipsis() {
-    // -ms-text-overflow: ellipsis;
-    // -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-@mixin hide-spin-buttons() {
-    /*Hide numbers arrows in the qs input -  Chrome, Safari, Edge, Opera */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-    /*Hide numbers arrows in the qs input - Firefox */
-    input[type=number] {
-        -moz-appearance:textfield;
-    }
-}
-
-@mixin select-arrow() {
-    content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==");
-}
-
-@mixin multi-line-ellipsis($alignment: 1, $line-height: 1.5rem, $lines-count: 2, $text-background: #fff) {
-    // @include calc(max-width, "100%");
-    max-width: calc(100%);
-
-    /* hide text if it more than N lines  */
-    overflow: hidden;
-    /* for set '...' in absolute position */
-    position: relative;
-    /* use this value to count block height */
-    line-height: $line-height;
-    /* max-height = line-height (1.5) * lines max number (2) */
-    max-height: $line-height * $lines-count + 0.05rem;
-
-    /* create the ... */
-    &:before {
-        /* points in the end */
-        content: "...";
-        /* absolute position */
-        position: absolute;
-        /* set position to right bottom corner of block */
-        bottom: 0;
-    }
-
-    /* hide ... if we have text, which is less than or equal to max lines */
-    &:after {
-        /* points in the end */
-        content: "...";
-        /* absolute position */
-        position: absolute;
-        /* set height & margin top*/
-        height: $line-height;
-        margin-top: 0.2rem;
-        /* bg color = bg color under block */
-        background: $text-background;
-        color: $text-background;
-    }
-
-    @if $alignment == 2 {
-        // right alignment
-        direction: rtl;
-        text-align: right;
-
-        /* place for '...' */
-        //margin-left: -1em;
-        padding-left: 1em;
-
-        &:before {
-            left: 3px;
-        }
-        &:after {
-            /* set position to left bottom corner of text */
-            left: 3px;
-        }
-    } @else {
-        // left alignment + center alignment
-        direction: ltr;
-
-        @if $alignment == 3 {
-            text-align: center;
-        } @else {
-            text-align: left;
-        }
-
-        /* place for '...' */
-        margin-right: -1em;
-        padding-right: 1em;
-
-        &:before {
-            right: 3px;
-        }
-        &:after {
-            /* set position to right bottom corner of text */
-            right: 3px;
-        }
-    }
-}
-
-@mixin font-title($fs: $fs-md, $lh: $lh-md) {
-    font-family: $font-family-title;
-    font-weight: $font-weight-bold;
-
-    @include font-size($fs);
-    @include line-height($lh);
-}
-
-@mixin font-body($fs: $fs-sm, $lh: $lh-sm) {
-    @include font-size($fs);
-    @include line-height($lh);
-}
-
-// Mixin fall back px declaration and calculated rem value - more in _functions.scss
-@mixin font-size($size) {
-    font-size: $size !important;
-    // font-size: calculateRem($size) !important;
-}
-
-@mixin line-height($lineHeight) {
-    line-height: $lineHeight !important ;
-    // line-height: calculateRem($lineHeight) !important;
-}
-
-@mixin border($property, $width: 0, $style: solid, $color: transparent, $important: false) {
-    @if $important { 
-        #{$property}: $width $style $color !important;
-    } @else {
-        #{$property}: $width $style $color;
-    }
-}
-
-@mixin pep-border($property, $pepperi-theme, $style: solid, $important: false) {
-    @include border($property, 1px, $style, get-pep-color($pepperi-theme, color-system-primary, color-tran-50), $important);
-}
-
-// Inline  - this line face inward // This works only for buttons (and other objects that contains children).
-@mixin inline($color: transparent, $width: 1px, $style: solid, $regularBorder: false) {
-    @if $regularBorder { 
-        @include border(border, $width, $style, $color);
-    } @else {
-        position: relative;
-
-        // 👆 Requires parent element to be 'position: relative;'
-        &:after {
-            z-index: $z-index-lowest - 1;
-            content: "";
-            transition: all 0.25s; // same as 'pep-btn' @mixin
-            display: block;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            border-radius: inherit;
-            border: $width $style $color;
-        }
-    }
-}
-
-@mixin fix-inline-z-index() {
-    // to fix the z-index in the inline &:after.
-    z-index: $z-index-lowest;
-}
-
-@mixin mat-badge-content() {
-    z-index: $z-index-medium - 3;
-    min-width: 1.5rem;
-    width: fit-content !important;
-    border-radius: 0.625rem;
-    padding: 0 0.5rem;
-    top: calc(#{$spacing-sm} * -1) !important;
-    @include ellipsis();
-    max-width: inherit;
-}
-
-@mixin pep-top-bar-button() {
-    // margin-top: $spacing-xs;
-    height: $top-bar-field-height;
-    line-height: $top-bar-field-height;
-}
-
-@mixin pep-cross-hatch($pepperi-theme, $hex-color: null) {
-    $color-low-opacity: null;
-    $color-high-opacity: null;
-
-    @if ($hex-color == null) {
-        $color-low-opacity: get-pep-color($pepperi-theme, color-system-caution, color-tran-0);
-        $color-high-opacity: get-pep-color($pepperi-theme, color-system-caution, color-tran-60);
-    } @else {
-        $color-low-opacity: rgba($hex-color, 0);
-        $color-high-opacity: rgba($hex-color, 0.32)
-    }
-
-    background: repeating-linear-gradient(
-        45deg,
-        $color-low-opacity,
-        $color-low-opacity .65rem,
-        $color-high-opacity .65rem,
-        $color-high-opacity 0.8rem,    
-    ),
-    repeating-linear-gradient(
-        -45deg,
-        $color-low-opacity,
-        $color-low-opacity .65rem,
-        $color-high-opacity 0.65rem,
-        $color-high-opacity 0.8rem,    
-    );
-}
-
-// ******************************************************************************
-//                        General state declerations
-// ******************************************************************************
-@mixin focus($pepperi-theme, $add-important: false, $focus-color: null, $focus-size: $spacing-xs) {
-    @if ($focus-color == null) {
-        $focus-color: get-pep-color($pepperi-theme, color-text, color-link-focus);
-    }
-  
-    @if ($add-important) {
-        box-shadow: 0 0 0 $focus-size $focus-color !important;
-    } @else {
-        box-shadow: 0 0 0 $focus-size $focus-color;
-    }
-}
-
-@mixin state-error-wrapper($pepperi-theme) {
-    border-radius: $border-radius-md;
-    background: get-pep-color($pepperi-theme, color-system-caution, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-}
-
-@mixin state-error($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    border: 1px solid get-pep-color($pepperi-theme, color-system-caution, color-base);
-}
- 
-@mixin state-disabled($pepperi-theme) {
-    // For remove all other states
-    box-shadow: unset;
-    border: unset;
-
-    &:after {
-        border: unset;
-    }
-
-    .svg-icon {
-        @include state-icon-disabled($pepperi-theme);
-    }
-}
-
-//  State icon
-// ----------------------------------------------------------------------------------
-@mixin state-icon($pepperi-theme) {
-    @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-tran-80));
-    
-    &:hover {
-        @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-tran-90));
-    }
-
-    &:active {
-        @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-base));
-    }
-
-    &:disabled {
-        @include state-icon-disabled($pepperi-theme);
-    }
-}
-
-@mixin state-icon-disabled($pepperi-theme) {
-    @include svg-icon-color(get-pep-color($pepperi-theme, color-text, color-disabled));
-}
-
-@mixin svg-icon-color($color) {
-    fill: $color;
-    
-    &.stroke {
-        fill: unset;
-        stroke: $color;
-    }
-}
-
-//  State badge
-// -----------------------------------------------------------------------------
-@mixin pep-badge($pepperi-theme) {
-    .mat-badge-content {
-        @include state-strong-default($pepperi-theme);
-        background-color: get-pep-color($pepperi-theme, color-system-primary, color-base) !important;
-        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-    }
-}
-
-// ******************************************************************************
-//                       State weak declerations
-// ******************************************************************************
-@mixin pep-state-default($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
-    @if ($style == 'none') {
-        @include state-none-default($pepperi-theme);
-    } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-default($pepperi-theme);
-    } @else if ($style == 'weak') {
-        @include state-weak-default($pepperi-theme, $color-name);
-    } @else if ($style == 'strong') {
-        @include state-strong-default($pepperi-theme, $color-name);
-    } @else { // regular.
-        @include state-regular-default($pepperi-theme, $regularBorder, $color-name);
-    }
-}
-@mixin pep-state-disable($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
-    @if ($style == 'none') {
-        @include state-none-disable($pepperi-theme);
-    } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-disable($pepperi-theme);
-    } @else if ($style == 'weak') {
-        @include state-weak-disable($pepperi-theme, $color-name);
-    } @else if ($style == 'strong') {
-        @include state-strong-disable($pepperi-theme, $color-name);
-    } @else { // regular.
-        @include state-regular-disable($pepperi-theme, $regularBorder, $color-name);
-    }
-}
-@mixin pep-state-hover($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
-    @if ($style == 'none') {
-        @include state-none-hover($pepperi-theme);
-    } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-hover($pepperi-theme);
-    } @else if ($style == 'weak') {
-        @include state-weak-hover($pepperi-theme, $color-name);
-    } @else if ($style == 'strong') {
-        @include state-strong-hover($pepperi-theme, $color-name);
-    } @else { // regular.
-        @include state-regular-hover($pepperi-theme, $regularBorder, $color-name);
-    }
-}
-@mixin pep-state-active($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
-    @if ($style == 'none') {
-        @include state-none-active($pepperi-theme);
-    } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-active($pepperi-theme);
-    } @else if ($style == 'weak') {
-        @include state-weak-active($pepperi-theme, $color-name);
-    } @else if ($style == 'strong') {
-        @include state-strong-active($pepperi-theme, $color-name);
-    } @else { // regular.
-        @include state-regular-active($pepperi-theme, $regularBorder, $color-name);
-    }
-}
-@mixin pep-state-focus($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
-    @if ($style == 'none') {
-        @include state-none-focus($pepperi-theme);
-    } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-focus($pepperi-theme);
-    } @else if ($style == 'weak') {
-        @include state-weak-focus($pepperi-theme, $color-name);
-    } @else if ($style == 'strong') {
-        @include state-strong-focus($pepperi-theme, $color-name);
-    } @else { // regular.
-        @include state-regular-focus($pepperi-theme, $regularBorder, $color-name);
-    }
-}
-
-// ******************************************************************************
-//                       State weak declerations
-// ******************************************************************************
-//  Weak - default
-// -----------------------------------------------------------------------------
-@mixin state-weak-default($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-30);
-}
-@mixin state-weak-disable($pepperi-theme, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
-
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
-    }
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-10) !important;
-}
-@mixin state-weak-hover($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-40);
-}
-@mixin state-weak-active($pepperi-theme, $color-map-name: null, $add-inline: true, $regularBorder: false) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-weak;
-    }
-
-    &:not(.keep-background-on-focus) {
-        // background: get-pep-color($pepperi-theme, $color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
-        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    }
-
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    
-    @if ($add-inline) {
-        @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
-    }
-}
-@mixin state-weak-focus($pepperi-theme, $color-map-name: null, $add-inline: true, $regularBorder: false) {
-    // box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    @include state-weak-active($pepperi-theme, $color-map-name, $add-inline, $regularBorder);
-    @include focus($pepperi-theme);
-}
-
-//  Weak - invert
-// -----------------------------------------------------------------------------
-@mixin state-weak-invert-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-70);
-
-    // $color: get-pep-color($pepperi-theme, color-text, color-main);
-    // color: $color;
-
-    // .svg-icon {
-    //     fill: $color !important;
-    // }
-}
-@mixin state-weak-invert-disable($pepperi-theme) {
-    @include state-disabled($pepperi-theme);
-    
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-20) !important;
-}
-@mixin state-weak-invert-hover($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-70);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    cursor: pointer;
-}
-@mixin state-weak-invert-active($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-}
-@mixin state-weak-invert-focus($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    @include focus($pepperi-theme);
-}
-
-// ******************************************************************************
-//                       State regular declerations
-// ******************************************************************************
-//  Regular - default
-// -----------------------------------------------------------------------------
-@mixin state-regular-default($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-40);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-flat-r-20), 1px, solid, $regularBorder);
-}
-@mixin state-regular-hover($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-40);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-flat-r-10), 1px, solid, $regularBorder);
-}
-@mixin state-regular-active($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, hard);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
-
-    // @if $regularBorder {
-    // } @else {
-    //     @include focus($pepperi-theme);
-    // }
-}
-@mixin state-regular-focus($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
-    @include focus($pepperi-theme);
-}
-@mixin state-regular-disable($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
-    
-    @if ($color-map-name == null) {
-        $color-map-name: color-regular;
-    }
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30) !important;
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, xsoft) !important;
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-tran-20), 1px, solid, $regularBorder);
-}
-
-// ******************************************************************************
-//                       State strong declerations
-// ******************************************************************************
-//  Strong - default
-// -----------------------------------------------------------------------------
-@mixin state-strong-default($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
-    }
-
-    font-weight: $font-weight-bold;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, soft);
-
-    $color: get-pep-color($pepperi-theme, color-text, color-invert);
-
-    color: $color;
-    .svg-icon {
-        @include svg-icon-color($color);
-    }
-}
-@mixin state-strong-disable($pepperi-theme, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
-    
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-base) !important;
-    opacity: 0.5 !important;
-    
-    $color: get-pep-color($pepperi-theme, color-text, color-invert);
-
-    color: $color;
-    .svg-icon {
-        @include svg-icon-color($color);
-    }
-}
-@mixin state-strong-hover($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-10);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, regular);
-}
-@mixin state-strong-active($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-20);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
-}
-@mixin state-strong-focus($pepperi-theme, $color-map-name: null) {
-    @if ($color-map-name == null) {
-        $color-map-name: color-strong;
-    }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-20);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, soft);
-    @include focus($pepperi-theme);
-}
-
-// ******************************************************************************
-//                       State none declerations
-// ******************************************************************************
-//  None - default
-// -----------------------------------------------------------------------------
-@mixin state-none-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary, color-tran-0);
-}
-@mixin state-none-disable($pepperi-theme) {
-    @include state-disabled($pepperi-theme);
-    background: get-pep-color($pepperi-theme, color-system-primary, color-tran-0) !important;
-}
-@mixin state-none-hover($pepperi-theme) {
-    @include state-weak-hover($pepperi-theme);
-}
-@mixin state-none-active($pepperi-theme) {
-    @include state-weak-active($pepperi-theme);
-}
-@mixin state-none-focus($pepperi-theme) {
-    @include state-weak-focus($pepperi-theme);
-}
-
-// ******************************************************************************
-//                       Buttons states declerations
-// ******************************************************************************
-@mixin pep-button-states($pepperi-theme, $style: weak, $color-name: null) {
-    @include pep-state-default($pepperi-theme, $style, $color-name, true);
-    &:hover {
-        @include pep-state-hover($pepperi-theme, $style, $color-name, true);
-    }
-    &:focus {
-        @include pep-state-focus($pepperi-theme, $style, $color-name, true);
-    }
-    &:active {
-        @include pep-state-active($pepperi-theme, $style, $color-name, true);
-    }
-    &:disabled {
-        &:not(.ignore-disabled) {
-            @include pep-state-disable($pepperi-theme, $style, $color-name, true);
-        }
-    }
-}
-
-// ******************************************************************************
-//                       Form field states declerations
-// ******************************************************************************
-@mixin pep-form-field-states($pepperi-theme, $style: weak, $color-name: null) {
-    // Default
-    .mat-form-field-flex {
-        @include pep-state-default($pepperi-theme, $style, $color-name);
-    }
-
-    // Hover
-    &:hover {
-        .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
-                @include pep-state-hover($pepperi-theme, $style, $color-name);
-            }
-        }
-    }
-
-    // Focused
-    &.mat-focused {
-        .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
-                @include pep-state-focus($pepperi-theme, $style, $color-name);
-            }
-        }
-    }
-
-    // Active
-    &.active,
-    &:active {
-        .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
-                @include pep-state-active($pepperi-theme, $style, $color-name);
-            }
-        }
-    }
-
-    // Disabled
-    &.mat-form-field-disabled {
-        &:not(.ignore-disabled) {
-            .mat-form-field-flex {
-                @include pep-state-disable($pepperi-theme, $style, $color-name);
-            }
-        }
-    }
-}
-
-// ******************************************************************************
-//                       Table states declerations
-// ******************************************************************************
-@mixin state-table-row-default($pepperi-theme) {
-
-}
-@mixin state-table-row-hover($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-weak, color-tran-30);
-}
-@mixin state-table-row-active($pepperi-theme) {
-    
-}
-@mixin state-table-row-selected($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-success, color-tran-20);
-}
-
-// ******************************************************************************
-//                       Card states declerations
-// ******************************************************************************
-@mixin state-card-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, soft);
-
-    transition: box-shadow 0.25s;
-}
-@mixin state-card-hover($pepperi-theme) {
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, regular);
-}
-@mixin state-card-active($pepperi-theme) {
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, hard);
-    // @include focus($pepperi-theme);
-}
-@mixin state-card-selected($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-success, color-tran-20);;
-    box-shadow: none;
-}
-
-// ******************************************************************************
-//                       General List declerations
-// ******************************************************************************
-@mixin state-list-body-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-}
-
-// ******************************************************************************
-//                       Tabs declerations
-// ******************************************************************************
-// @mixin mat-tabs-fixed-header-width($side-width) {
-//     width: calc(100% - (#{$side-width} + #{$double-content-padding} + #{$double-content-margin}));
-    
-//     @media (max-width: $screen-max-size-md) {
-//         width: calc(100% - (#{$double-content-padding} + #{$double-content-margin}));
-//     }
-
-//     @media (max-width: $screen-max-size-xs) {
-//         width: calc(100% - (#{$content-padding} + #{$content-margin}));
-//     }
+@use 'variables.scss';
+@use 'functions.scss';
+
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass mixins.
+// -----------------------------------------------------------------------------
+
+/// Event wrapper
+/// @author Harry Roberts
+/// @param {Bool} $self [false] - Whether or not to include current selector
+/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
+@mixin on-event($self: false) {
+    @if $self {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+            @content;
+        }
+    } @else {
+        &:hover,
+        &:active,
+        &:focus {
+            @content;
+        }
+    }
+}
+
+/// Make a context based selector a little more friendly
+/// @author Hugo Giraudel
+/// @param {String} $context
+@mixin when-inside($context) {
+    #{$context} & {
+        @content;
+    }
+}
+
+@mixin font($size: false, $weight: 400, $lh: false, $family: variables.$font-family-body) {
+    font-family: $family;
+
+    @if $size {
+        font-size: $size;
+    }
+
+    @if $weight {
+        font-weight: $weight;
+    }
+
+    @if $lh {
+        line-height: $lh;
+    }
+}
+
+@mixin pep-spacing-element-negative($add-important: true, $spacing-size: variables.$spacing-xs) {
+    @if ($add-important) {
+        margin-right: calc(#{$spacing-size} * -1) !important;
+        margin-left: calc(#{$spacing-size} * -1) !important;
+    } @else {
+        margin-right: calc(#{$spacing-size} * -1);
+        margin-left: calc(#{$spacing-size} * -1);
+    }
+}
+
+@mixin pep-spacing-element($add-important: true, $spacing-size: variables.$spacing-xs) {
+    @if ($add-important) {
+        margin-right: $spacing-size !important;
+        margin-left: $spacing-size !important;
+    } @else {
+        margin-right: $spacing-size;
+        margin-left: $spacing-size;
+    }
+}
+
+@mixin align-center($vertical-alignment: true, $horizontal-alignment: true) {
+    display: inline-flex !important;
+
+    @if ($vertical-alignment) {
+        align-items: center;
+    }
+
+    @if ($horizontal-alignment) {
+        justify-content: center;
+    }
+}
+
+@mixin flex-grow($int: 1) {
+    -webkit-box-flex: $int;
+    -moz-box-flex: $int;
+    -webkit-flex-grow: $int;
+    -ms-flex: $int;
+    flex-grow: $int;
+}
+
+@mixin ellipsis() {
+    // -ms-text-overflow: ellipsis;
+    // -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+@mixin hide-spin-buttons() {
+    /*Hide numbers arrows in the qs input -  Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    /*Hide numbers arrows in the qs input - Firefox */
+    input[type=number] {
+        -moz-appearance:textfield;
+    }
+}
+
+@mixin select-arrow() {
+    content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==");
+}
+
+@mixin multi-line-ellipsis($alignment: 1, $line-height: 1.5rem, $lines-count: 2, $text-background: #fff) {
+    // @include calc(max-width, "100%");
+    max-width: calc(100%);
+
+    /* hide text if it more than N lines  */
+    overflow: hidden;
+    /* for set '...' in absolute position */
+    position: relative;
+    /* use this value to count block height */
+    line-height: $line-height;
+    /* max-height = line-height (1.5) * lines max number (2) */
+    max-height: $line-height * $lines-count + 0.05rem;
+
+    /* create the ... */
+    &:before {
+        /* points in the end */
+        content: "...";
+        /* absolute position */
+        position: absolute;
+        /* set position to right bottom corner of block */
+        bottom: 0;
+    }
+
+    /* hide ... if we have text, which is less than or equal to max lines */
+    &:after {
+        /* points in the end */
+        content: "...";
+        /* absolute position */
+        position: absolute;
+        /* set height & margin top*/
+        height: $line-height;
+        margin-top: 0.2rem;
+        /* bg color = bg color under block */
+        background: $text-background;
+        color: $text-background;
+    }
+
+    @if $alignment == 2 {
+        // right alignment
+        direction: rtl;
+        text-align: right;
+
+        /* place for '...' */
+        //margin-left: -1em;
+        padding-left: 1em;
+
+        &:before {
+            left: 3px;
+        }
+        &:after {
+            /* set position to left bottom corner of text */
+            left: 3px;
+        }
+    } @else {
+        // left alignment + center alignment
+        direction: ltr;
+
+        @if $alignment == 3 {
+            text-align: center;
+        } @else {
+            text-align: left;
+        }
+
+        /* place for '...' */
+        margin-right: -1em;
+        padding-right: 1em;
+
+        &:before {
+            right: 3px;
+        }
+        &:after {
+            /* set position to right bottom corner of text */
+            right: 3px;
+        }
+    }
+}
+
+@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
+    font-family: variables.$font-family-title;
+    font-weight: variables.$font-weight-bold;
+
+    @include font-size($fs);
+    @include line-height($lh);
+}
+
+@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
+    @include font-size($fs);
+    @include line-height($lh);
+}
+
+// Mixin fall back px declaration and calculated rem value - more in _functions.scss
+@mixin font-size($size) {
+    font-size: $size !important;
+    // font-size: calculateRem($size) !important;
+}
+
+@mixin line-height($lineHeight) {
+    line-height: $lineHeight !important ;
+    // line-height: calculateRem($lineHeight) !important;
+}
+
+@mixin border($property, $width: 0, $style: solid, $color: transparent, $important: false) {
+    @if $important { 
+        #{$property}: $width $style $color !important;
+    } @else {
+        #{$property}: $width $style $color;
+    }
+}
+
+@mixin pep-border($property, $style: solid, $important: false) {
+    @include border($property, 1px, $style, functions.get-pep-color(color-system-primary, color-tran-50), $important);
+}
+
+// Inline  - this line face inward // This works only for buttons (and other objects that contains children).
+@mixin inline($color: transparent, $width: 1px, $style: solid, $regularBorder: false) {
+    @if $regularBorder { 
+        @include border(border, $width, $style, $color);
+    } @else {
+        position: relative;
+
+        // 👆 Requires parent element to be 'position: relative;'
+        &:after {
+            z-index: variables.$z-index-lowest - 1;
+            content: "";
+            transition: all 0.25s; // same as 'pep-btn' @mixin
+            display: block;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: inherit;
+            border: $width $style $color;
+        }
+    }
+}
+
+@mixin fix-inline-z-index() {
+    // to fix the z-index in the inline &:after.
+    z-index: variables.$z-index-lowest;
+}
+
+@mixin mat-badge-content() {
+    z-index: variables.$z-index-medium - 3;
+    min-width: 1.5rem;
+    width: fit-content !important;
+    border-radius: 0.625rem;
+    padding: 0 0.5rem;
+    top: calc(#{variables.$spacing-sm} * -1) !important;
+    @include ellipsis();
+    max-width: inherit;
+}
+
+@mixin pep-top-bar-button() {
+    // margin-top: variables.$spacing-xs;
+    height: variables.$top-bar-field-height;
+    line-height: variables.$top-bar-field-height;
+}
+
+@mixin pep-cross-hatch($hex-color: null) {
+    $color-low-opacity: null;
+    $color-high-opacity: null;
+
+    @if ($hex-color == null) {
+        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-0);
+        $color-high-opacity: functions.get-pep-color(color-system-caution, color-tran-60);
+    } @else {
+        $color-low-opacity: rgba($hex-color, 0);
+        $color-high-opacity: rgba($hex-color, 0.32)
+    }
+
+    background: repeating-linear-gradient(
+        45deg,
+        $color-low-opacity,
+        $color-low-opacity .65rem,
+        $color-high-opacity .65rem,
+        $color-high-opacity 0.8rem,    
+    ),
+    repeating-linear-gradient(
+        -45deg,
+        $color-low-opacity,
+        $color-low-opacity .65rem,
+        $color-high-opacity 0.65rem,
+        $color-high-opacity 0.8rem,    
+    );
+}
+
+// ******************************************************************************
+//                        General state declerations
+// ******************************************************************************
+@mixin focus($add-important: false, $focus-color: null, $focus-size: variables.$spacing-xs) {
+    @if ($focus-color == null) {
+        $focus-color: functions.get-pep-color(color-text, color-link-focus);
+    }
+  
+    @if ($add-important) {
+        box-shadow: 0 0 0 $focus-size $focus-color !important;
+    } @else {
+        box-shadow: 0 0 0 $focus-size $focus-color;
+    }
+}
+
+@mixin state-error-wrapper() {
+    border-radius: variables.$border-radius-md;
+    background: functions.get-pep-color(color-system-caution, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+}
+
+@mixin state-error() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    border: 1px solid functions.get-pep-color(color-system-caution, color-base);
+}
+ 
+@mixin state-disabled() {
+    // For remove all other states
+    box-shadow: unset;
+    border: unset;
+
+    &:after {
+        border: unset;
+    }
+
+    .svg-icon {
+        @include state-icon-disabled();
+    }
+}
+
+//  State icon
+// ----------------------------------------------------------------------------------
+@mixin state-icon() {
+    @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-80));
+    
+    &:hover {
+        @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-90));
+    }
+
+    &:active {
+        @include svg-icon-color(functions.get-pep-color(color-system-primary, color-base));
+    }
+
+    &:disabled {
+        @include state-icon-disabled();
+    }
+}
+
+@mixin state-icon-disabled() {
+    @include svg-icon-color(functions.get-pep-color(color-text, color-disabled));
+}
+
+@mixin svg-icon-color($color) {
+    fill: $color;
+    
+    &.stroke {
+        fill: unset;
+        stroke: $color;
+    }
+}
+
+//  State badge
+// -----------------------------------------------------------------------------
+@mixin pep-badge() {
+    .mat-badge-content {
+        @include state-strong-default();
+        background-color: functions.get-pep-color(color-system-primary, color-base) !important;
+        box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+    }
+}
+
+// ******************************************************************************
+//                       State weak declerations
+// ******************************************************************************
+@mixin pep-state-default($style: weak, $color-name: null, $regularBorder: false) {
+    @if ($style == 'none') {
+        @include state-none-default();
+    } @else if ($style == 'weak-invert') {
+        @include state-weak-invert-default();
+    } @else if ($style == 'weak') {
+        @include state-weak-default($color-name);
+    } @else if ($style == 'strong') {
+        @include state-strong-default($color-name);
+    } @else { // regular.
+        @include state-regular-default($regularBorder, $color-name);
+    }
+}
+@mixin pep-state-disable($style: weak, $color-name: null, $regularBorder: false) {
+    @if ($style == 'none') {
+        @include state-none-disable();
+    } @else if ($style == 'weak-invert') {
+        @include state-weak-invert-disable();
+    } @else if ($style == 'weak') {
+        @include state-weak-disable($color-name);
+    } @else if ($style == 'strong') {
+        @include state-strong-disable($color-name);
+    } @else { // regular.
+        @include state-regular-disable($regularBorder, $color-name);
+    }
+}
+@mixin pep-state-hover($style: weak, $color-name: null, $regularBorder: false) {
+    @if ($style == 'none') {
+        @include state-none-hover();
+    } @else if ($style == 'weak-invert') {
+        @include state-weak-invert-hover();
+    } @else if ($style == 'weak') {
+        @include state-weak-hover($color-name);
+    } @else if ($style == 'strong') {
+        @include state-strong-hover($color-name);
+    } @else { // regular.
+        @include state-regular-hover($regularBorder, $color-name);
+    }
+}
+@mixin pep-state-active($style: weak, $color-name: null, $regularBorder: false) {
+    @if ($style == 'none') {
+        @include state-none-active();
+    } @else if ($style == 'weak-invert') {
+        @include state-weak-invert-active();
+    } @else if ($style == 'weak') {
+        @include state-weak-active($color-name);
+    } @else if ($style == 'strong') {
+        @include state-strong-active($color-name);
+    } @else { // regular.
+        @include state-regular-active($regularBorder, $color-name);
+    }
+}
+@mixin pep-state-focus($style: weak, $color-name: null, $regularBorder: false) {
+    @if ($style == 'none') {
+        @include state-none-focus();
+    } @else if ($style == 'weak-invert') {
+        @include state-weak-invert-focus();
+    } @else if ($style == 'weak') {
+        @include state-weak-focus($color-name);
+    } @else if ($style == 'strong') {
+        @include state-strong-focus($color-name);
+    } @else { // regular.
+        @include state-regular-focus($regularBorder, $color-name);
+    }
+}
+
+// ******************************************************************************
+//                       State weak declerations
+// ******************************************************************************
+//  Weak - default
+// -----------------------------------------------------------------------------
+@mixin state-weak-default($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-weak;
+    }
+    background: functions.get-pep-color($color-map-name, color-tran-30);
+}
+@mixin state-weak-disable($color-map-name: null) {
+    @include state-disabled();
+
+    @if ($color-map-name == null) {
+        $color-map-name: color-weak;
+    }
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color($color-map-name, color-tran-10) !important;
+}
+@mixin state-weak-hover($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-weak;
+    }
+    background: functions.get-pep-color($color-map-name, color-tran-40);
+}
+@mixin state-weak-active($color-map-name: null, $add-inline: true, $regularBorder: false) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-weak;
+    }
+
+    &:not(.keep-background-on-focus) {
+        // background: functions.get-pep-color($color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
+    }
+
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    
+    @if ($add-inline) {
+        @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+    }
+}
+@mixin state-weak-focus($color-map-name: null, $add-inline: true, $regularBorder: false) {
+    // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    @include state-weak-active($color-map-name, $add-inline, $regularBorder);
+    @include focus();
+}
+
+//  Weak - invert
+// -----------------------------------------------------------------------------
+@mixin state-weak-invert-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
+}
+@mixin state-weak-invert-disable() {
+    @include state-disabled();
+    
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+}
+@mixin state-weak-invert-hover() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    cursor: pointer;
+}
+@mixin state-weak-invert-active() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+}
+@mixin state-weak-invert-focus() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    @include focus();
+}
+
+// ******************************************************************************
+//                       State regular declerations
+// ******************************************************************************
+//  Regular - default
+// -----------------------------------------------------------------------------
+@mixin state-regular-default($regularBorder: false, $color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-regular;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    @include inline(functions.get-pep-color($color-map-name, color-flat-r-20), 1px, solid, $regularBorder);
+}
+@mixin state-regular-hover($regularBorder: false, $color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-regular;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    @include inline(functions.get-pep-color($color-map-name, color-flat-r-10), 1px, solid, $regularBorder);
+}
+@mixin state-regular-active($regularBorder: false, $color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-regular;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    box-shadow: functions.get-pep-shadow(shadow-xs, hard);
+    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+
+    // @if $regularBorder {
+    // } @else {
+    //     @include focus();
+    // }
+}
+@mixin state-regular-focus($regularBorder: false, $color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-regular;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+    @include focus();
+}
+@mixin state-regular-disable($regularBorder: false, $color-map-name: null) {
+    @include state-disabled();
+    
+    @if ($color-map-name == null) {
+        $color-map-name: color-regular;
+    }
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color($color-map-name, color-flat-r-30) !important;
+    box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
+    @include inline(functions.get-pep-color($color-map-name, color-tran-20), 1px, solid, $regularBorder);
+}
+
+// ******************************************************************************
+//                       State strong declerations
+// ******************************************************************************
+//  Strong - default
+// -----------------------------------------------------------------------------
+@mixin state-strong-default($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-strong;
+    }
+
+    font-weight: variables.$font-weight-bold;
+    background: functions.get-pep-color($color-map-name, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-sm, soft);
+
+    $color: functions.get-pep-color(color-text, color-invert);
+
+    color: $color;
+    .svg-icon {
+        @include svg-icon-color($color);
+    }
+}
+@mixin state-strong-disable($color-map-name: null) {
+    @include state-disabled();
+    
+    @if ($color-map-name == null) {
+        $color-map-name: color-strong;
+    }
+    background: functions.get-pep-color($color-map-name, color-base) !important;
+    opacity: 0.5 !important;
+    
+    $color: functions.get-pep-color(color-text, color-invert);
+
+    color: $color;
+    .svg-icon {
+        @include svg-icon-color($color);
+    }
+}
+@mixin state-strong-hover($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-strong;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-l-10);
+    box-shadow: functions.get-pep-shadow(shadow-sm, regular);
+}
+@mixin state-strong-active($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-strong;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+}
+@mixin state-strong-focus($color-map-name: null) {
+    @if ($color-map-name == null) {
+        $color-map-name: color-strong;
+    }
+    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    box-shadow: functions.get-pep-shadow(shadow-sm, soft);
+    @include focus();
+}
+
+// ******************************************************************************
+//                       State none declerations
+// ******************************************************************************
+//  None - default
+// -----------------------------------------------------------------------------
+@mixin state-none-default() {
+    background: functions.get-pep-color(color-system-primary, color-tran-0);
+}
+@mixin state-none-disable() {
+    @include state-disabled();
+    background: functions.get-pep-color(color-system-primary, color-tran-0) !important;
+}
+@mixin state-none-hover() {
+    @include state-weak-hover();
+}
+@mixin state-none-active() {
+    @include state-weak-active();
+}
+@mixin state-none-focus() {
+    @include state-weak-focus();
+}
+
+// ******************************************************************************
+//                       Buttons states declerations
+// ******************************************************************************
+@mixin pep-button-states($style: weak, $color-name: null) {
+    @include pep-state-default($style, $color-name, true);
+    &:hover {
+        @include pep-state-hover($style, $color-name, true);
+    }
+    &:focus {
+        @include pep-state-focus($style, $color-name, true);
+    }
+    &:active {
+        @include pep-state-active($style, $color-name, true);
+    }
+    &:disabled {
+        &:not(.ignore-disabled) {
+            @include pep-state-disable($style, $color-name, true);
+        }
+    }
+}
+
+// ******************************************************************************
+//                       Form field states declerations
+// ******************************************************************************
+@mixin pep-form-field-states($style: weak, $color-name: null) {
+    // Default
+    .mat-form-field-flex {
+        @include pep-state-default($style, $color-name);
+    }
+
+    // Hover
+    &:hover {
+        .ignore-disabled,
+        &:not(.mat-form-field-disabled) {
+            .mat-form-field-flex {
+                @include pep-state-hover($style, $color-name);
+            }
+        }
+    }
+
+    // Focused
+    &.mat-focused {
+        .ignore-disabled,
+        &:not(.mat-form-field-disabled) {
+            .mat-form-field-flex {
+                @include pep-state-focus($style, $color-name);
+            }
+        }
+    }
+
+    // Active
+    &.active,
+    &:active {
+        .ignore-disabled,
+        &:not(.mat-form-field-disabled) {
+            .mat-form-field-flex {
+                @include pep-state-active($style, $color-name);
+            }
+        }
+    }
+
+    // Disabled
+    &.mat-form-field-disabled {
+        &:not(.ignore-disabled) {
+            .mat-form-field-flex {
+                @include pep-state-disable($style, $color-name);
+            }
+        }
+    }
+}
+
+// ******************************************************************************
+//                       Table states declerations
+// ******************************************************************************
+@mixin state-table-row-default() {
+
+}
+@mixin state-table-row-hover() {
+    background: functions.get-pep-color(color-weak, color-tran-30);
+}
+@mixin state-table-row-active() {
+    
+}
+@mixin state-table-row-selected() {
+    background: functions.get-pep-color(color-system-success, color-tran-20);
+}
+
+// ******************************************************************************
+//                       Card states declerations
+// ******************************************************************************
+@mixin state-card-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-card, soft);
+
+    transition: box-shadow 0.25s;
+}
+@mixin state-card-hover() {
+    box-shadow: functions.get-pep-shadow(shadow-card, regular);
+}
+@mixin state-card-active() {
+    box-shadow: functions.get-pep-shadow(shadow-card, hard);
+    // @include focus();
+}
+@mixin state-card-selected() {
+    background: functions.get-pep-color(color-system-success, color-tran-20);;
+    box-shadow: none;
+}
+
+// ******************************************************************************
+//                       General List declerations
+// ******************************************************************************
+@mixin state-list-body-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+}
+
+// ******************************************************************************
+//                       Tabs declerations
+// ******************************************************************************
+// @mixin mat-tabs-fixed-header-width($side-width) {
+//     width: calc(100% - (#{$side-width} + #{$double-content-padding} + #{$double-content-margin}));
+    
+//     @media (max-width: $screen-max-size-md) {
+//         width: calc(100% - (#{$double-content-padding} + #{$double-content-margin}));
+//     }
+
+//     @media (max-width: $screen-max-size-xs) {
+//         width: calc(100% - (#{$content-padding} + #{$content-margin}));
+//     }
 // }