// -----------------------------------------------------------------------------
// 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;
    }
}

// Function for calc a property for an element.
@mixin calc($property, $expression) {
    #{$property}: -moz-calc(#{$expression});
    #{$property}: -webkit-calc(#{$expression});
    #{$property}: calc(#{$expression});
}

@mixin flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@mixin spacing-element-negative($spacing-size: $spacing-xs) {
    .spacing-element-negative {
        margin-right: calc(#{$spacing-size} * -1) !important;
        margin-left: calc(#{$spacing-size} * -1) !important;
    }
}

@mixin spacing-element($spacing-size: $spacing-xs) {
    .spacing-element {
        margin-right: $spacing-size !important;
        margin-left: $spacing-size !important;
    }
}

@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 box-sizing($box-model) {
    -webkit-box-sizing: $box-model; // Safari <= 5
    -moz-box-sizing: $box-model; // Firefox <= 19
    box-sizing: $box-model;
  }

@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 rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -moz-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
}

@mixin multi-line-ellipsis($alignment: 1, $line-height: 1.5rem, $lines-count: 2, $text-background: #fff) {
    @include calc(max-width, "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) {
    #{$property}: $width $style $color;
}

@mixin pepperi-border($property, $pepperi-theme) {
    @include border($property, 1px, solid, get-pepperi-color($pepperi-theme, color-system-primary, color-tran-50));
}

// 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: -1;
            content: "";
            transition: all 0.25s; // same as 'pepperi-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 -1 z-index in the inline &:after.
    z-index: 1;
}

@mixin mat-badge-content() {
    z-index: $z-index-medium - 1;
    min-width: 1.5rem;
    width: fit-content !important;
    border-radius: 0.625rem;
    padding: 0 0.5rem;
    // top: -0.5rem !important;
    // right: -0.5rem !important;
    @include ellipsis();
    max-width: inherit;

}

@mixin pepperi-top-bar-button() {
    // margin-top: $spacing-xs;
    height: $top-bar-field-height;
    line-height: $top-bar-field-height;
    
    .svg-icon:not(.select-icon) {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

// ******************************************************************************
//                        General state declerations
// ******************************************************************************
@mixin focus($pepperi-theme, $add-important: false, $focus-color: null) {
    @if ($focus-color == null) {
        $focus-color: get-pepperi-color($pepperi-theme, color-text, color-link-focus);
    }
  
    @if ($add-important) {
        box-shadow: 0 0 0 $spacing-xs $focus-color !important;
    } @else {
        box-shadow: 0 0 0 $spacing-xs $focus-color;
    }
}

@mixin state-error-wrapper($pepperi-theme) {
    border-radius: $border-radius-md;
    background: get-pepperi-color($pepperi-theme, color-system-caution, color-base);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, regular);
}

@mixin state-error($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
    border: 1px solid get-pepperi-color($pepperi-theme, color-system-caution, color-base);
}
 
//  State icon
// ----------------------------------------------------------------------------------
@mixin state-icon($pepperi-theme) {
    fill: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-80);

    &:hover {
        fill: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-90);
    }

    &:active {
        fill: get-pepperi-color($pepperi-theme, color-system-primary, color-base);
    }

    &:disabled {
        @include state-icon-disabled($pepperi-theme);
    }
}

@mixin state-icon-disabled($pepperi-theme) {
    fill: get-pepperi-color($pepperi-theme, color-text, color-disabled);
}

//  State badge
// -----------------------------------------------------------------------------
@mixin pepperi-badge($pepperi-theme) {
    .mat-badge-content {
        @include state-strong-default($pepperi-theme);
        background-color: get-pepperi-color($pepperi-theme, color-system-primary, color-base) !important;
        box-shadow: get-pepperi-shadow($pepperi-theme, shadow-sm, hard);
    }
}

// ******************************************************************************
//                       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-pepperi-color($pepperi-theme, $color-map-name, color-tran-30);
}
@mixin state-weak-disable($pepperi-theme, $color-map-name: null) {
    @if ($color-map-name == null) {
        $color-map-name: color-weak;
    }
    color:get-pepperi-color($pepperi-theme, color-text, color-disabled);
    background: get-pepperi-color($pepperi-theme, $color-map-name, color-tran-10);

    .svg-icon {
        @include state-icon-disabled($pepperi-theme);
    }
}
@mixin state-weak-hover($pepperi-theme, $color-map-name: null) {
    @if ($color-map-name == null) {
        $color-map-name: color-weak;
    }
    background: get-pepperi-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;
    // }
    // background: get-pepperi-color($pepperi-theme, $color-map-name, color-tran-50);

    @if ($color-map-name == null) {
        $color-map-name: color-weak;
    }

    &:not(.keep-background-on-focus) {
        background: get-pepperi-color($pepperi-theme, $color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
        // background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
    }

    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, soft);
    
    @if ($add-inline) {
        @include inline(get-pepperi-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) {
    // @if ($color-map-name == null) {
    //     $color-map-name: color-weak;
    // }

    // &:not(.keep-background-on-focus) {
    //     background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
    // }

    // box-shadow: get-pepperi-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-pepperi-color($pepperi-theme, color-system-primary-invert, color-tran-70);

    // $color: get-pepperi-color($pepperi-theme, color-text, color-main);
    // color: $color;

    // .svg-icon {
    //     fill: $color !important;
    // }
}
@mixin state-weak-invert-disable($pepperi-theme) {
    color:get-pepperi-color($pepperi-theme, color-text, color-disabled);
    background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-tran-20);

    .svg-icon {
        @include state-icon-disabled($pepperi-theme);
    }
}
@mixin state-weak-invert-hover($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-tran-70);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, soft);
    cursor: pointer;
}
@mixin state-weak-invert-active($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, regular);
}
@mixin state-weak-invert-focus($pepperi-theme) {
    background: get-pepperi-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-pepperi-color($pepperi-theme, $color-map-name, color-flat-r-40);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, soft);
    @include inline(get-pepperi-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-pepperi-color($pepperi-theme, $color-map-name, color-flat-r-40);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, regular);
    @include inline(get-pepperi-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-pepperi-color($pepperi-theme, $color-map-name, color-flat-r-30);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, hard);
    @include inline(get-pepperi-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-pepperi-color($pepperi-theme, $color-map-name, color-flat-r-30);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, regular);
    @include inline(get-pepperi-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) {
    @if ($color-map-name == null) {
        $color-map-name: color-regular;
    }
    color:get-pepperi-color($pepperi-theme, color-text, color-disabled);
    background: get-pepperi-color($pepperi-theme, $color-map-name, color-flat-r-30);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, xsoft);
    @include inline(get-pepperi-color($pepperi-theme, $color-map-name, color-tran-20), 1px, solid, $regularBorder);

    .svg-icon {
        @include state-icon-disabled($pepperi-theme);
    }
}

// ******************************************************************************
//                       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-pepperi-color($pepperi-theme, $color-map-name, color-base);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-sm, soft);

    $color: get-pepperi-color($pepperi-theme, color-text, color-invert);

    color: $color;
    .svg-icon {
        fill: $color;
    }
}
@mixin state-strong-disable($pepperi-theme, $color-map-name: null) {
    @if ($color-map-name == null) {
        $color-map-name: color-strong;
    }
    opacity: 0.5;
    color: get-pepperi-color($pepperi-theme, color-text, color-invert);

    .svg-icon {
        @include state-icon-disabled($pepperi-theme);
    }
}
@mixin state-strong-hover($pepperi-theme, $color-map-name: null) {
    @if ($color-map-name == null) {
        $color-map-name: color-strong;
    }
    background: get-pepperi-color($pepperi-theme, $color-map-name, color-flat-l-10);
    box-shadow: get-pepperi-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-pepperi-color($pepperi-theme, $color-map-name, color-flat-l-20);
    box-shadow: get-pepperi-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;
    }
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-sm, soft);
    @include focus($pepperi-theme);
}

// ******************************************************************************
//                       State none declerations
// ******************************************************************************
//  None - default
// -----------------------------------------------------------------------------
@mixin state-none-default($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-0);
}
@mixin state-none-disable($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-0);
    
    .svg-icon {
        @include state-icon-disabled($pepperi-theme);
    }
}
@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);
}

// ******************************************************************************
//                       General List declerations
// ******************************************************************************
@mixin state-list-body-default($pepperi-theme) {
   background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
}

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

}
@mixin state-table-row-hover($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-weak, color-tran-30);
}
@mixin state-table-row-active($pepperi-theme) {
    
}
@mixin state-table-row-selected($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-success, color-tran-20);
}

// ******************************************************************************
//                       Card states declerations
// ******************************************************************************
@mixin state-card-default($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-card, soft);

    transition: box-shadow 0.25s;
}
@mixin state-card-hover($pepperi-theme) {
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-card, regular);
}
@mixin state-card-active($pepperi-theme) {
    box-shadow: get-pepperi-shadow($pepperi-theme, shadow-card, hard);
    // @include focus($pepperi-theme);
}
@mixin state-card-selected($pepperi-theme) {
    background: get-pepperi-color($pepperi-theme, color-system-success, color-tran-20);;
    box-shadow: none;
}