// ----------------------------------------------
// Mixin to define hover, active and loading styles for interactive elements.
// The mixin expects the '--int-states-mixin-bg-color' css var to be used in component styles.
// ---
// $bg-color: design token name to be used for the states
// $mode: 'default': apply the default lighten/darken to the color via hsl
//        'alt': applies a larger percentage change to the color (darken)
//        'inverse': inverts the modifier, so that it lightens the color rather than darken it
//        'transparent': uses hsla syntax to make the color semi-opaque with base as black
//        'transparent-inverse': uses hsla syntax to make the color semi-opaque with base as white
// $level: the level of hover/active to be used. Follows hover/active token names (01, 02, 01-dark, 02-light)
// ----------------------------------------------
@mixin interactive-states($bg-color, $mode: default, $level: '01') {
    // Needed for webviews and safari <16.2
    // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility
    @media (hover: hover) { // @media (hover: hover) prevents the hover state from getting stuck on touch devices
        &:hover:not(:disabled, .is-disabled, .is-dismissible) {
            @if $mode == 'alt' {
                --hover-modifier: calc(-1 * var(--dt-color-hover-02));
            } @else if $mode == 'inverse' {
                --hover-modifier: var(--dt-color-hover-02);
            } @else {
                --hover-modifier: calc(-1 * var(--dt-color-hover-01));
            }

            // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
            @if $mode == 'transparent' {
                --hover-modifier: var(--dt-color-hover-01);
                --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
            }
            @if $mode == 'transparent-inverse' {
                --hover-modifier: var(--dt-color-hover-02);
                --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
            } @else {
                --int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
            }
        }
    }

    &:active:not(:disabled, .is-disabled, .is-dismissible),
    &.is-loading:not(:disabled, .is-disabled) {
        @if $mode == 'alt' {
            --active-modifier: calc(-1 * var(--dt-color-active-02));
        } @else if $mode == 'inverse' {
            --active-modifier: var(--dt-color-active-02);
        } @else {
            --active-modifier: calc(-1 * var(--dt-color-active-01));
        }

        @if $mode == 'transparent' {
            --active-modifier: var(--dt-color-active-01);
            --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
        }
        @if $mode == 'transparent-inverse' {
            --active-modifier: var(--dt-color-active-02);
            --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
        } @else {
            --int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
        }
    }

    @supports (background-color: color-mix(in srgb, black, white)) {
        @media (hover: hover) {
            &:hover:not(:disabled, .is-disabled, .is-dismissible) {
                /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
                --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}), var(#{$bg-color}));
            }
        }

        &:active:not(:disabled, .is-disabled, .is-dismissible),
        &.is-loading:not(:disabled, .is-disabled) {
            /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
            --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-#{$level}-bg) var(--dt-color-active-#{$level}), var(#{$bg-color}));
        }
    }
}