@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.$focus-size) {
    @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-map-key: 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-map-key);
    } @else if ($style == 'strong') {
        @include state-strong-default($color-map-key);
    } @else { // regular.
        @include state-regular-default($regularBorder, $color-map-key);
    }
}
@mixin pep-state-disable($style: weak, $color-map-key: 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-map-key);
    } @else if ($style == 'strong') {
        @include state-strong-disable($color-map-key);
    } @else { // regular.
        @include state-regular-disable($regularBorder, $color-map-key);
    }
}
@mixin pep-state-hover($style: weak, $color-map-key: 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-map-key);
    } @else if ($style == 'strong') {
        @include state-strong-hover($color-map-key);
    } @else { // regular.
        @include state-regular-hover($regularBorder, $color-map-key);
    }
}
@mixin pep-state-active($style: weak, $color-map-key: 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-map-key);
    } @else if ($style == 'strong') {
        @include state-strong-active($color-map-key);
    } @else { // regular.
        @include state-regular-active($regularBorder, $color-map-key);
    }
}
@mixin pep-state-focus($style: weak, $color-map-key: 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-map-key);
    } @else if ($style == 'strong') {
        @include state-strong-focus($color-map-key);
    } @else { // regular.
        @include state-regular-focus($regularBorder, $color-map-key);
    }
}

// ******************************************************************************
//                       State weak declerations
// ******************************************************************************
//  Weak - default
// -----------------------------------------------------------------------------
@mixin state-weak-default($color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-weak;
    }
    background: functions.get-pep-color($color-map-key, color-tran-30);
}
@mixin state-weak-disable($color-map-key: null) {
    @include state-disabled();

    @if ($color-map-key == null) {
        $color-map-key: color-weak;
    }
    color:functions.get-pep-color(color-text, color-disabled) !important;
    background: functions.get-pep-color($color-map-key, color-tran-10) !important;
}
@mixin state-weak-hover($color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-weak;
    }
    background: functions.get-pep-color($color-map-key, color-tran-40);
}
@mixin state-weak-active($color-map-key: null, $add-inline: true, $regularBorder: false) {
    @if ($color-map-key == null) {
        $color-map-key: color-weak;
    }

    &:not(.keep-background-on-focus) {
        // background: functions.get-pep-color($color-map-key, 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-key, color-base), 1px, solid, $regularBorder);
    }
}
@mixin state-weak-focus($color-map-key: null, $add-inline: true, $regularBorder: false) {
    // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
    @include state-weak-active($color-map-key, $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-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-regular;
    }
    background: functions.get-pep-color($color-map-key, color-flat-r-40);
    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
    @include inline(functions.get-pep-color($color-map-key, color-flat-r-20), 1px, solid, $regularBorder);
}
@mixin state-regular-hover($regularBorder: false, $color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-regular;
    }
    background: functions.get-pep-color($color-map-key, color-flat-r-40);
    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
    @include inline(functions.get-pep-color($color-map-key, color-flat-r-10), 1px, solid, $regularBorder);
}
@mixin state-regular-active($regularBorder: false, $color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-regular;
    }
    background: functions.get-pep-color($color-map-key, color-flat-r-30);
    box-shadow: functions.get-pep-shadow(shadow-xs, hard);
    @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);

    // @if $regularBorder {
    // } @else {
    //     @include focus();
    // }
}
@mixin state-regular-focus($regularBorder: false, $color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-regular;
    }
    background: functions.get-pep-color($color-map-key, color-flat-r-30);
    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
    @include inline(functions.get-pep-color($color-map-key, color-base), 1px, solid, $regularBorder);
    @include focus();
}
@mixin state-regular-disable($regularBorder: false, $color-map-key: null) {
    @include state-disabled();
    
    @if ($color-map-key == null) {
        $color-map-key: color-regular;
    }
    color:functions.get-pep-color(color-text, color-disabled) !important;
    background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
    box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
    @include inline(functions.get-pep-color($color-map-key, color-tran-20), 1px, solid, $regularBorder);
}

// ******************************************************************************
//                       State strong declerations
// ******************************************************************************
//  Strong - default
// -----------------------------------------------------------------------------
@mixin state-strong-default($color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-strong;
    }

    font-weight: variables.$font-weight-bold;
    background: functions.get-pep-color($color-map-key, 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-key: null) {
    @include state-disabled();
    
    @if ($color-map-key == null) {
        $color-map-key: color-strong;
    }
    background: functions.get-pep-color($color-map-key, 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-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-strong;
    }
    background: functions.get-pep-color($color-map-key, color-flat-l-10);
    box-shadow: functions.get-pep-shadow(shadow-sm, regular);
}
@mixin state-strong-active($color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-strong;
    }
    background: functions.get-pep-color($color-map-key, color-flat-l-20);
    box-shadow: functions.get-pep-shadow(shadow-sm, hard);
}
@mixin state-strong-focus($color-map-key: null) {
    @if ($color-map-key == null) {
        $color-map-key: color-strong;
    }
    background: functions.get-pep-color($color-map-key, 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-map-key: null) {
    @include pep-state-default($style, $color-map-key, true);
    &:hover {
        @include pep-state-hover($style, $color-map-key, true);
    }
    &:focus {
        @include pep-state-focus($style, $color-map-key, true);
    }
    &:active {
        @include pep-state-active($style, $color-map-key, true);
    }
    &:disabled {
        &:not(.ignore-disabled) {
            @include pep-state-disable($style, $color-map-key, true);
        }
    }
}

// ******************************************************************************
//                       Form field states declerations
// ******************************************************************************
@mixin pep-form-field-states($style: weak, $color-map-key: null) {
    // Default
    .mat-form-field-flex {
        @include pep-state-default($style, $color-map-key);
    }

    // Hover
    &:hover {
        .ignore-disabled,
        &:not(.mat-form-field-disabled) {
            .mat-form-field-flex {
                @include pep-state-hover($style, $color-map-key);
            }
        }
    }

    // Focused
    &.mat-focused {
        .ignore-disabled,
        &:not(.mat-form-field-disabled) {
            .mat-form-field-flex {
                @include pep-state-focus($style, $color-map-key);
            }
        }
    }

    // Active
    &.active,
    &:active {
        .ignore-disabled,
        &:not(.mat-form-field-disabled) {
            .mat-form-field-flex {
                @include pep-state-active($style, $color-map-key);
            }
        }
    }

    // Disabled
    &.mat-form-field-disabled {
        &:not(.ignore-disabled) {
            .mat-form-field-flex {
                @include pep-state-disable($style, $color-map-key);
            }
        }
    }
}

// ******************************************************************************
//                       Table states declerations
// ******************************************************************************
@mixin state-table-row-default() {

}
@mixin state-table-row-even() {
    background: functions.get-pep-color(color-weak, color-tran-10);
}
@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}));
//     }
// }