@use "sass:math" as math;

/*
 * App custom mixins for SCSS
 * ----------------------------------------------------------------------------
 * Place here our custom mixins.
 */

 @mixin core-focus() {
    outline: none;
    position: relative;
    &::after {
        @include position(0, 0, 0, 0);
        position: absolute;
        content: "";
        opacity: 1;
        z-index: 1;
        @include core-focus-style();
    }
 }

 @mixin core-focus-style() {
    box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
    // Thicker option:
    // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
}

@mixin core-transition($property: all, $duration: 500ms, $timing-function: ease-in-out) {
    -webkit-transition: $property $duration $timing-function;
    -moz-transition: $property $duration $timing-function;
    -ms-transition: $property $duration $timing-function;
    -o-transition: $property $duration $timing-function;
    transition: $property $duration $timing-function;
}

@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
    $svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
    @if $flip-rtl != true {
        @include multi-dir() {
            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
        }
    } @else {
        $flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";

        @include ltr () {
            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
        }
        @include rtl() {
            background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
        }
    }
}

@mixin border-start($px, $type: null, $color: null) {
    border-left: $px $type $color;

    @include rtl() {
        border-left: unset;
        border-right: $px $type $color;
    }
}


@mixin border-end($px, $type: null, $color: null) {
    border-right: $px $type $color;

    @include rtl() {
        border-right: unset;
        border-left: $px $type $color;
    }
}

@mixin safe-area-border-start($px, $type, $color) {
    $safe-area-position: calc(var(--ion-safe-area-left) + #{$px});

    @include border-start($safe-area-position, $type, $color);
}

@mixin safe-area-border-end($px, $type, $color) {
    $safe-area-position: calc(var(--ion-safe-area-right) + #{$px});

    @include border-end($safe-area-position, $type, $color);
}

@mixin safe-area-margin-horizontal($start, $end: $start) {
    $safe-area-end: null;
    $safe-area-start: null;

    @if ($end) {
        $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
    }
    @if ($start) {
        $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    }

    @include margin-horizontal($safe-area-start, $safe-area-end);
}

@mixin safe-area-margin-start($start, $end) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});

    @include margin-horizontal($safe-area-start, $end);
}

@mixin safe-area-margin-end($start, $end) {
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include margin-horizontal($start, $safe-area-end);
}

@mixin safe-area-padding-horizontal($start, $end: $start) {
    $safe-area-end: null;
    $safe-area-start: null;

    @if ($end) {
        $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
    }
    @if ($start) {
        $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    }

    @include padding-horizontal($safe-area-start, $safe-area-end);
}

@mixin safe-area-padding-start($start, $end) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});

    @include padding-horizontal($safe-area-start, $end);
}

@mixin safe-area-padding-end($start, $end) {
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include padding-horizontal($start, $safe-area-end);
}

@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
    $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
    $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});

    @include position($top, $safe-area-end, $bottom, $safe-area-start);
}

@mixin core-headings() {
    h1 {
        font-size: 26px;
    }
    h2, .item-heading {
        font-size: 24px;
    }
    h3 {
        font-size: 22px;
    }
    h4 {
        font-size: 20px;
    }
    h5 {
        font-size: 18px;
    }
    h6 {
        font-size: 16px;
    }
}

@mixin core-as-items() {
    .item-md.item-block > .item-inner {
        border-bottom: 1px solid $list-md-border-color;
    }

    .item-ios.item-block > .item-inner {
        border-bottom: $hairlines-width solid $list-ios-border-color;
    }

    &:last-child .item > .item-inner {
        border-bottom: 0;
    }
}

@mixin core-items() {
    &.item-md.item-block > .item-inner {
        border-bottom: 1px solid $list-md-border-color;
    }

    &.item-ios.item-block > .item-inner {
        border-bottom: $hairlines-width solid $list-ios-border-color;
    }

    &.item-block:last-child > .item-inner {
        border-bottom: 0;
    }
}

@mixin darkmode() {
    $root: #{&};

    @at-root body.dark {
        #{$root} {
            @content;
        }
    }
}

@mixin horizontal_scroll_item($width, $min-width, $max-width) {
    flex: 0 0 $width;
    min-width: $min-width;
    max-width: $max-width;
    align-self: stretch;
    display: block;

    ion-card {
        --vertical-margin: 10px;
        --horizontal-margin: 10px;

        width: calc(100% - var(--horizontal-margin) - var(--horizontal-margin));
        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
        margin: var(--vertical-margin) var(--horizontal-margin);

        @media (max-width: 360px) {
            --horizontal-margin: 6px;
        }
    }
}

@mixin collapsible-item() {
    --display-toggle: none;
    .collapsible-toggle {
        display: var(--display-toggle);
    }

    @include media-breakpoint-down(sm) {
        &.collapsible-enabled {
            position:relative;
            --display-toggle: block;

            .collapsible-toggle {
                position: absolute;
                @include position (null, 0, 0, null);
                text-align: center;
                z-index: 7;
                text-transform: none;
                font-size: 14px;
                font-weight: normal;
                background-color: var(--collapsible-toggle-background);
                color: var(--collapsible-toggle-text);
                min-height: var(--a11y-min-target-size);
                min-width: var(--a11y-min-target-size);
                --border-radius: var(--huge-radius);
                border-radius: var(--border-radius);
                --padding-start: 0px;
                --padding-end: 0px;
                margin: 0px;

                .collapsible-toggle-arrow {
                    width: var(--a11y-min-target-size);
                    height: var(--a11y-min-target-size);

                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 14px 14px;
                    @include core-transition(transform, 500ms);

                    @include push-arrow-color(626262, true);

                    @include darkmode() {
                        @include push-arrow-color(ffffff, true);
                    }
                }
            }

            &.collapsible-collapsed {
                overflow: hidden;
                min-height: calc(var(--collapsible-min-button-height) + 12px);

                .collapsible-toggle-arrow {
                    transform: rotate(90deg);
                }

                &:before {
                    content: '';
                    height: 100%;
                    position: absolute;
                    @include position(null, 0, 0, 0);
                    background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));
                    background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));
                    z-index: 6;
                }
            }

            &.collapsible-expanded {
                max-height: none !important;
                padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.

                .collapsible-toggle-arrow {
                    transform: rotate(-90deg);
                }
            }
        }
    }
}

// Color mixins.
@function get_brightness($color) {
    @return (red($color) + green($color) + blue($color)) / 3;
}

// Get the better color contrast using WCAG algorythm.
@function get_contrast_color($color) {
    $lumiance: luminance($color);

    // White lumiance is 1.
    $whiteContrast: ($lumiance + 0.05) / (1 + 0.05);
    // White lumiance is 0.
    $blackContrast: (0.05) / ($lumiance + 0.05);

    @return if($whiteContrast < $blackContrast, white, black);
}

// Color contrast using yiq aproximation with 150 threshold.
@function get_contrast_color_yiq($color, $dark: black, $light: white) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);

    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

    @return if($yiq >= 128, $dark, $light);
}

// WCAG contrast algorythm
@function check-contrast($foreground, $background) {
    $foregroundLumiance: luminance($foreground);
    $backgroundLuminance: luminance($background);

    @if ($backgroundLuminance < $foregroundLumiance) {
        @return ($backgroundLuminance + 0.05) / ($foregroundLumiance + 0.05);
    } @else {
        @return ($foregroundLumiance + 0.05) / ($backgroundLuminance + 0.05);
    }
}

@function luminance($color) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);

    $r: component-luminance($r);
    $g: component-luminance($g);
    $b: component-luminance($b);

    @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
}

@function component-luminance($value) {
    $value: $value / 255;

    @if ($value <= 0.03928) {
        @return $value / 12.92;
    } @else {
        @return math.pow(($value + 0.055) / 1.055, 2.4);
    }
}