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

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

    font-size: inherit;
    font-weight: 400;

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

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

    &::after {
        content: '';
        position: absolute;
        top: -$v;
        left: -$h;
        right: -$h;
        bottom: -$v;
    }
}

@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-top: $ratio * 100%;
    }

    > *:only-child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

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

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

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

        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {
            border-radius: 0;
            border-left: 0;
            border-right: 0;
        }

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

        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {
            border-radius: $radius 0 0 $radius;
        }

        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {
            border-radius: 0 $radius $radius 0;
        }

        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {
            border-radius: $radius 0 0 $radius;
            border-right: 0;
        }

        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {
            border-radius: 0 $radius $radius 0;
            border-left: 0;
        }

        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {
            border-radius: 0;
            border-right: 0;
        }

        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {
            border-radius: 0;
            border-left: 0;
        }

        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {
            border-radius: 100px 0 0 100px;
        }

        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {
            border-radius: 0 100px 100px 0;
        }

        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {
            border-radius: 100px 0 0 100px;
            border-right: 0;
        }

        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {
            border-radius: 0 100px 100px 0;
            border-left: 0;
        }
    }
}

// Typography

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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