@mixin permanent-scrollbar {
    /* stylelint-disable property-no-vendor-prefix */
    &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 12px;
    }

    &::-webkit-scrollbar-track {
        margin: 5px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-clip: padding-box;
        background-color: var(--gray-300);
        border-color: transparent;
        border-radius: 9px;
        border-style: solid;
        border-width: 3px; /* Workaround because margins aren't supported */
        box-shadow: 0 0 1px rgba(255 255 255 / 50%);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0 0 0 / 50%);
    }

    /* stylelint-enable */
}

@mixin box-shadow-bottom {
    box-shadow: 0 2px 15px 0 rgb(28 28 28 / 10%);
    clip-path: inset(0 0 -15px 0);
}

@mixin box-shadow-top {
    box-shadow: 0 -2px 15px 0 rgb(28 28 28 / 10%);
    clip-path: inset(-15px 0 0 0);
}

@mixin box-shadow-right {
    box-shadow: 2px 0 15px 0 rgb(28 28 28 / 10%);
    clip-path: inset(0 -15px 0 0);
}

@mixin box-shadow-left {
    box-shadow: -2px 0 15px 0 rgb(28 28 28 / 10%);
    clip-path: inset(0 0 0 -15px);
}

@mixin box-shadow-bottom-right {
    box-shadow: 2px 2px 15px 0 rgb(28 28 28 / 10%);
    clip-path: inset(0 -15px -15px 0);
}

@mixin box-shadow-dropdown {
    box-shadow: 0 0 5px 0 rgba(28 28 28 / 15%);
}

@function var-with-opacity($variable, $opacity) {
    @return color-mix(in sRGB, var(#{$variable}), transparent #{100% - $opacity});
}