<commit_before>@mixin scrollbars($size, $foreground-color,
    $background-color: mix($foreground-color, white,  50%),
    $hover-color: mix($foreground-color, white, 25%),
    $border-color: rgba(0,0,0,0)
) {
    $thumb-padding: 3px;
    $border-width: 1px;
    // For Google Chrome
    ::-webkit-scrollbar {
        width:  $size;
        height: $size;
    }

    ::-webkit-scrollbar-thumb {
        background-color: $foreground-color;
        border-radius: 10px;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: $hover-color;
        border-radius: 10px;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:vertical:hover {
        border: $thumb-padding solid transparent;
        border-left: $thumb-padding+$border-width solid transparent;
    }

    ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:horizontal:hover {
        border: $thumb-padding solid transparent;
        border-top: $thumb-padding+$border-width solid transparent;
    }

    ::-webkit-scrollbar-track {
        background-color: $background-color;
    }

    ::-webkit-scrollbar-track:vertical {
        border-left: $border-width solid $border-color;
    }

    ::-webkit-scrollbar-track:horizontal {
        border-top: $border-width solid $border-color;
    }

    ::-webkit-scrollbar-corner {
        background-color: $background-color;
    }

    // For Internet Explorer
    body {
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
    }
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,\ <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\ height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\ <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\ </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 49%;
}

#example-wrapper {
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;

    max-width: 100%;<commit_msg>Demo page: limit select field styling to .options-container.<commit_after>@mixin scrollbars($size, $foreground-color,
    $background-color: mix($foreground-color, white,  50%),
    $hover-color: mix($foreground-color, white, 25%),
    $border-color: rgba(0,0,0,0)
) {
    $thumb-padding: 3px;
    $border-width: 1px;
    // For Google Chrome
    ::-webkit-scrollbar {
        width:  $size;
        height: $size;
    }

    ::-webkit-scrollbar-thumb {
        background-color: $foreground-color;
        border-radius: 10px;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: $hover-color;
        border-radius: 10px;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:vertical:hover {
        border: $thumb-padding solid transparent;
        border-left: $thumb-padding+$border-width solid transparent;
    }

    ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:horizontal:hover {
        border: $thumb-padding solid transparent;
        border-top: $thumb-padding+$border-width solid transparent;
    }

    ::-webkit-scrollbar-track {
        background-color: $background-color;
    }

    ::-webkit-scrollbar-track:vertical {
        border-left: $border-width solid $border-color;
    }

    ::-webkit-scrollbar-track:horizontal {
        border-top: $border-width solid $border-color;
    }

    ::-webkit-scrollbar-corner {
        background-color: $background-color;
    }

    // For Internet Explorer
    body {
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
    }
}

.options-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,\ <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\ height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\ <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\ </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 49%;
}

#example-wrapper {
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;

    max-width: 100%;
{'fraction_non_alphanumeric': 0.15230278157774738, 'fraction_numerical': 0.03967168262653899, 'mean_word_length': 2.8214285714285716, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6099368', 'n_tokens_mistral': 1598, 'n_tokens_neox': 1405, 'n_words': 255}