@use 'sass:list';
@use 'sass:selector';

@mixin overflow-ellipsis($type: ellipsis) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: $type;
}

@mixin button-reset() {
    padding: 0;

    font-family: var(--g-text-body-font-family);
    font-size: inherit;
    font-weight: var(--g-text-body-font-weight);

    color: inherit;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

@mixin link-reset() {
    color: inherit;
    text-decoration: inherit;
}

@mixin expand-interactive-area($h: 4px, $v: $h) {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        inset: logical (-$v) (-$h);
    }
}

@mixin max-height($height) {
    max-height: $height;
    overflow-y: auto;
}

@mixin max-text-width($width: 100%) {
    @include overflow-ellipsis();

    max-width: $width;
}

@mixin aspect-ratio($ratio) {
    position: relative;

    &::before {
        display: block;
        content: '';
        width: 100%;
        padding-block-start: $ratio * 100%;
    }

    > *:only-child {
        position: absolute;
        inset: 0;
    }
}

@function get-pin-selector($mod, $selector, $append: true) {
    @if $append {
        @return selector.append($mod, $selector);
    } @else {
        @return list.join($mod, $selector, $separator: space);
    }
}

@mixin pin($block, $selectors, $radius, $append: true) {
    @each $selector in $selectors {
        @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {
            border-radius: $radius;
        }

        @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {
            border-radius: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {
            border-radius: 0;
            border-inline: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {
            border-radius: 100px;
        }

        @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {
            border-start-start-radius: $radius;
            border-start-end-radius: 0;
            border-end-start-radius: $radius;
            border-end-end-radius: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {
            border-start-start-radius: 0;
            border-start-end-radius: $radius;
            border-end-start-radius: 0;
            border-end-end-radius: $radius;
        }

        @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {
            border-start-start-radius: $radius;
            border-start-end-radius: 0;
            border-end-start-radius: $radius;
            border-end-end-radius: 0;
            border-inline-end: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {
            border-start-start-radius: 0;
            border-start-end-radius: $radius;
            border-end-start-radius: 0;
            border-end-end-radius: $radius;
            border-inline-start: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {
            border-radius: 0;
            border-inline-end: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {
            border-radius: 0;
            border-inline-start: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {
            border-start-start-radius: 100px;
            border-start-end-radius: 0;
            border-end-start-radius: 100px;
            border-end-end-radius: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {
            border-start-start-radius: 0;
            border-start-end-radius: 100px;
            border-end-start-radius: 0;
            border-end-end-radius: 100px;
        }

        @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {
            border-start-start-radius: 100px;
            border-start-end-radius: 0;
            border-end-start-radius: 100px;
            border-end-end-radius: 0;
            border-inline-end: 0;
        }

        @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {
            border-start-start-radius: 0;
            border-start-end-radius: 100px;
            border-end-start-radius: 0;
            border-end-end-radius: 100px;
            border-inline-start: 0;
        }
    }
}

// Typography

@mixin text-body-1() {
    font-family: var(--g-text-body-font-family);
    font-weight: var(--g-text-body-font-weight);
    font-size: var(--g-text-body-1-font-size);
    line-height: var(--g-text-body-1-line-height);
}

@mixin text-body-2() {
    font-family: var(--g-text-body-font-family);
    font-weight: var(--g-text-body-font-weight);
    font-size: var(--g-text-body-2-font-size);
    line-height: var(--g-text-body-2-line-height);
}

@mixin text-body-3() {
    font-family: var(--g-text-body-font-family);
    font-weight: var(--g-text-body-font-weight);
    font-size: var(--g-text-body-3-font-size);
    line-height: var(--g-text-body-3-line-height);
}

@mixin text-body-short() {
    font-family: var(--g-text-body-font-family);
    font-weight: var(--g-text-body-font-weight);
    font-size: var(--g-text-body-short-font-size);
    line-height: var(--g-text-body-short-line-height);
}

@mixin text-caption-1() {
    font-family: var(--g-text-caption-font-family);
    font-weight: var(--g-text-caption-font-weight);
    font-size: var(--g-text-caption-1-font-size);
    line-height: var(--g-text-caption-1-line-height);
}

@mixin text-caption-2() {
    font-family: var(--g-text-caption-font-family);
    font-weight: var(--g-text-caption-font-weight);
    font-size: var(--g-text-caption-2-font-size);
    line-height: var(--g-text-caption-2-line-height);
}

@mixin text-header-1() {
    font-family: var(--g-text-header-font-family);
    font-weight: var(--g-text-header-font-weight);
    font-size: var(--g-text-header-1-font-size);
    line-height: var(--g-text-header-1-line-height);
}

@mixin text-header-2() {
    font-family: var(--g-text-header-font-family);
    font-weight: var(--g-text-header-font-weight);
    font-size: var(--g-text-header-2-font-size);
    line-height: var(--g-text-header-2-line-height);
}

@mixin text-subheader-1() {
    font-family: var(--g-text-subheader-font-family);
    font-weight: var(--g-text-subheader-font-weight);
    font-size: var(--g-text-subheader-1-font-size);
    line-height: var(--g-text-subheader-1-line-height);
}

@mixin text-subheader-2() {
    font-family: var(--g-text-subheader-font-family);
    font-weight: var(--g-text-subheader-font-weight);
    font-size: var(--g-text-subheader-2-font-size);
    line-height: var(--g-text-subheader-2-line-height);
}

@mixin text-subheader-3() {
    font-family: var(--g-text-subheader-font-family);
    font-weight: var(--g-text-subheader-font-weight);
    font-size: var(--g-text-subheader-3-font-size);
    line-height: var(--g-text-subheader-3-line-height);
}

@mixin text-display-1() {
    font-family: var(--g-text-display-font-family);
    font-weight: var(--g-text-display-font-weight);
    font-size: var(--g-text-display-1-font-size);
    line-height: var(--g-text-display-1-line-height);
}

@mixin text-display-2() {
    font-family: var(--g-text-display-font-family);
    font-weight: var(--g-text-display-font-weight);
    font-size: var(--g-text-display-2-font-size);
    line-height: var(--g-text-display-2-line-height);
}

@mixin text-display-3() {
    font-family: var(--g-text-display-font-family);
    font-weight: var(--g-text-display-font-weight);
    font-size: var(--g-text-display-3-font-size);
    line-height: var(--g-text-display-3-line-height);
}

@mixin text-display-4() {
    font-family: var(--g-text-display-font-family);
    font-weight: var(--g-text-display-font-weight);
    font-size: var(--g-text-display-4-font-size);
    line-height: var(--g-text-display-4-line-height);
}

@mixin text-code-1() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-1-font-size);
    line-height: var(--g-text-code-1-line-height);
}

@mixin text-code-2() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-2-font-size);
    line-height: var(--g-text-code-2-line-height);
}

@mixin text-code-3() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-3-font-size);
    line-height: var(--g-text-code-3-line-height);
}

@mixin text-code-inline-1() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-inline-1-font-size);
    line-height: var(--g-text-code-inline-1-line-height);
}

@mixin text-code-inline-2() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-inline-2-font-size);
    line-height: var(--g-text-code-inline-2-line-height);
}

@mixin text-code-inline-3() {
    font-family: var(--g-text-code-font-family);
    font-weight: var(--g-text-code-font-weight);
    font-size: var(--g-text-code-inline-3-font-size);
    line-height: var(--g-text-code-inline-3-line-height);
}

@mixin text-accent() {
    font-weight: var(--g-text-accent-font-weight);
}

@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {
    background-image: repeating-linear-gradient(
        -45deg,
        $loading-color-1,
        $loading-color-1 4px,
        $loading-color-2 4px,
        $loading-color-2 8px
    );
    background-size: 150%;
    background-clip: padding-box;

    // stylelint-disable-next-line no-unknown-animations
    animation: g-loading-animation 0.5s linear infinite;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}

@mixin scrollbar() {
    &::-webkit-scrollbar,
    *::-webkit-scrollbar {
        width: var(--g-scrollbar-width);
        height: var(--g-scrollbar-width);
        background: var(--g-color-scroll-track);
    }

    &::-webkit-scrollbar-track,
    *::-webkit-scrollbar-track {
        background: var(--g-color-scroll-track);
    }

    &::-webkit-scrollbar-corner,
    *::-webkit-scrollbar-corner {
        background: var(--g-color-scroll-corner);
    }

    &::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-thumb {
        background: var(--g-color-scroll-handle);
    }

    &::-webkit-scrollbar-thumb:hover,
    *::-webkit-scrollbar-thumb:hover {
        background: var(--g-color-scroll-handle-hover);
    }
}

@mixin focus-outline() {
    outline: 2px solid var(--g-color-line-focus);
}