@mixin clipped() {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@mixin unclipped() {
    clip-path: none;
    height: auto;
    overflow: visible;
    white-space: normal;
    width: auto;
}

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

@mixin image-treatment($border-radius: 8px, $display: flex) {
    align-items: center;
    border-radius: $border-radius;
    display: $display;
    justify-content: center;
    overflow: hidden;
    position: relative;

    &::after {
        background: rgb(0 0 0 / 0.05);
        content: "";
        display: block;
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
}

@mixin flex-items-centered($display: flex) {
    align-items: center;
    display: $display;
    justify-content: center;
}

@mixin inline-flex-items-centered() {
    @include flex-items-centered(inline-flex);
}

@mixin scrollbars-permanent($target) {
    #{$target} {
        scroll-behavior: smooth;
        /* stylelint-disable declaration-block-no-duplicate-properties */
        -webkit-scroll-snap-type: mandatory;
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: proximity;
        scroll-snap-type: x proximity;
        /* stylelint-enable declaration-block-no-duplicate-properties */
    }

    #{$target}::-webkit-scrollbar {
        background-color: var(--color-state-layer-focus);
        border-radius: 12px;
    }

    #{$target}::-webkit-scrollbar:vertical {
        width: 6px;
    }

    #{$target}::-webkit-scrollbar:horizontal {
        height: 6px;
    }

    #{$target}::-webkit-scrollbar-thumb {
        background-color: var(--color-foreground-secondary);
        border-color: transparent;
        border-radius: 12px;
        border-right-style: inset;
        box-shadow: none;
    }
}