@mixin slim-scroll($track-color: var(--deprecated-light-grey), $thumb-color: var(--deprecated-dark-grey)) {
    &::-webkit-scrollbar,
    ::-webkit-scrollbar {
        width: $slim-scroll-bar-width;
        height: $slim-scroll-bar-width;
    }

    &::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track {
        background-color: $track-color;
        border-radius: 0 8px 0 0;
    }

    &::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
        background-color: $thumb-color;
        border-radius: 8px;
    }

    &::-webkit-scrollbar-button,
    ::-webkit-scrollbar-button {
        width: 0;
        height: 0;
    }
}

@mixin placeholder($text-color: var(--default-text-color), $font-family: var(--main-font)) {
    &::placeholder {
        color: $text-color;
        font-size: inherit;
        font-family: $font-family;
        text-transform: none;
        transition: color 0.2s ease;
    }

    &:input-placeholder {
        /*
        * IE11 treats input placeholders like input text. It styles them according to
        * the "color" property inside an input selector.
        *
        * Adding !important allows consumers of Vapor to customize the colour of input text without affecting
        * the visibility of the placeholder inside IE11.
        *
        * https://stackoverflow.com/questions/22199047/placeholder-css-not-being-applied-in-ie-11 */
        color: $text-color !important;
    }
}