<commit_before>@require "modal-settings.styl";
@require "../grid/container.styl";

$modal-margin-right = -1 * $modal-width / 2;

// TODO: Create z-index override to force on top
.modal
    display: block;
    position: fixed;
    z-index: $modal-z-index;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    overflow-y: visible;
    transition: visibility $modal-transition-duration, overflow $modal-transition-duration;
    will-change: visibility;

    &.modal-open
        //transform: none;
        visibility: inherit;
        overflow-y: scroll;

        & > .modal-content
            transform: none !important;


    &.modal-background:before
        content: '';
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $modal-mask-background-color;
        opacity: 0;
        transition: opacity $modal-transition-duration;
        will-change: opacity;

        .modal-open&
            opacity: 1;


    .modal-content
        position: fixed;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;

        //width: $modal-width;
        min-height: $modal-min-height;
        background-color: $modal-background-color;
        box-shadow: $modal-content-box-shadow;
        transform: translateY(-2 * ($modal-margin-top + $modal-margin-bottom)) translateY(-100%);
        transition: transform $modal-transition-duration;
        will-change: transform;
        clearfix();

        &.modal-content-space
            padding: $modal-padding;

        .modal-header
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: $modal-padding;
            border-bottom: $modal-border-width solid $modal-border-color;
            background-color: $modal-header-background-color;
            border-top-left-radius: 0;
            border-top-right-radius: 0;

            .modal-title
                margin: 0;
                flex-grow: 0;

        .modal-action
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex-grow: 1;
            padding: 0;

            &.modal-action-reverse
                flex-direction: row-reverse;

            &.modal-action-start
                justify-content: flex-start;

            & > *
                margin: 0 $modal-action-spacing 0 0;

                &:last-child
                    margin-right: 0;


        .modal-body
            margin: 0;
            padding: 0;
            flex: 1;
            overflow-y: auto;

            &.modal-body-space
                padding: $modal-padding;

            &:first-child
                &.lock-contents:after
                    border-top-right-radius: max(0, $modal-border-radius - $modal-border-width);
                    border-top-left-radius: max(0, $modal-border-radius - $modal-border-width);

            &:last-child
                &.lock-contents:after
                    border-bottom-right-radius: max(0, $modal-border-radius - $modal-border-width);
                    border-bottom-left-radius: max(0, $modal-border-radius - $modal-border-width);


        .modal-footer
            margin: 0;
            padding: $modal-padding;
            border-top: $modal-border-width solid $modal-border-color;
            background-color: $modal-header-background-color;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            clearfix();


    &.modal-animate-top
        .modal-content
            transform: translateY(-2 * ($modal-margin-top + $modal-margin-bottom)) translateY(-100%);

    &.modal-animate-right
        .modal-content
            transform: translateX(100%);

    &.modal-animate-bottom
        .modal-content
            transform: translateY(2 * ($modal-margin-top + $modal-margin-bottom)) translateY(100%);

    &.modal-animate-left
        .modal-content
            transform: translateX(-100%);

    &.modal-animate-center
        .modal-content
            transform: scale(0, 0);


modal-floating($min-width = 100%)
    &.modal-open
        overflow-y: auto;

    .modal-content
        position: relative;
        display: block;
        flex-direction: unset;
        margin: $modal-margin-top auto $modal-margin-top auto;
        width: $min-width;
        border: $modal-border-width solid $modal-border-color;
        border-radius: $modal-border-radius;

        .modal-header
            border-top-left-radius: $modal-border-radius;
            border-top-right-radius: $modal-border-radius;

        .modal-footer
            border-bottom-left-radius: $modal-border-radius;
            border-bottom-right-radius: $modal-border-radius;<commit_msg>Fixed modal scrolling.<commit_after>@require "modal-settings.styl";
@require "../grid/container.styl";

$modal-margin-right = -1 * $modal-width / 2;

// TODO: Create z-index override to force on top
.modal
    display: block;
    position: fixed;
    z-index: $modal-z-index;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    overflow-y: visible;
    transition: visibility $modal-transition-duration, overflow $modal-transition-duration;
    will-change: visibility;

    &.modal-open
        //transform: none;
        visibility: inherit;
        overflow-y: auto;

        & > .modal-content
            transform: none !important;


    &.modal-background:before
        content: '';
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $modal-mask-background-color;
        opacity: 0;
        transition: opacity $modal-transition-duration;
        will-change: opacity;

        .modal-open&
            opacity: 1;


    .modal-content
        position: fixed;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;

        //width: $modal-width;
        min-height: $modal-min-height;
        background-color: $modal-background-color;
        box-shadow: $modal-content-box-shadow;
        transform: translateY(-2 * ($modal-margin-top + $modal-margin-bottom)) translateY(-100%);
        transition: transform $modal-transition-duration;
        will-change: transform;
        clearfix();

        &.modal-content-space
            padding: $modal-padding;

        .modal-header
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: $modal-padding;
            border-bottom: $modal-border-width solid $modal-border-color;
            background-color: $modal-header-background-color;
            border-top-left-radius: 0;
            border-top-right-radius: 0;

            .modal-title
                margin: 0;
                flex-grow: 0;

        .modal-action
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex-grow: 1;
            padding: 0;

            &.modal-action-reverse
                flex-direction: row-reverse;

            &.modal-action-start
                justify-content: flex-start;

            & > *
                margin: 0 $modal-action-spacing 0 0;

                &:last-child
                    margin-right: 0;


        .modal-body
            margin: 0;
            padding: 0;
            flex: 1;
            overflow-y: auto;

            &.modal-body-space
                padding: $modal-padding;

            &:first-child
                &.lock-contents:after
                    border-top-right-radius: max(0, $modal-border-radius - $modal-border-width);
                    border-top-left-radius: max(0, $modal-border-radius - $modal-border-width);

            &:last-child
                &.lock-contents:after
                    border-bottom-right-radius: max(0, $modal-border-radius - $modal-border-width);
                    border-bottom-left-radius: max(0, $modal-border-radius - $modal-border-width);


        .modal-footer
            margin: 0;
            padding: $modal-padding;
            border-top: $modal-border-width solid $modal-border-color;
            background-color: $modal-header-background-color;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            clearfix();


    &.modal-animate-top
        .modal-content
            transform: translateY(-2 * ($modal-margin-top + $modal-margin-bottom)) translateY(-100%);

    &.modal-animate-right
        .modal-content
            transform: translateX(100%);

    &.modal-animate-bottom
        .modal-content
            transform: translateY(2 * ($modal-margin-top + $modal-margin-bottom)) translateY(100%);

    &.modal-animate-left
        .modal-content
            transform: translateX(-100%);

    &.modal-animate-center
        .modal-content
            transform: scale(0, 0);


modal-floating($min-width = 100%)
    &.modal-open
        overflow-y: scroll;

    .modal-content
        position: relative;
        display: block;
        flex-direction: unset;
        margin: $modal-margin-top auto $modal-margin-top auto;
        width: $min-width;
        border: $modal-border-width solid $modal-border-color;
        border-radius: $modal-border-radius;

        .modal-header
            border-top-left-radius: $modal-border-radius;
            border-top-right-radius: $modal-border-radius;

        .modal-footer
            border-bottom-left-radius: $modal-border-radius;
            border-bottom-right-radius: $modal-border-radius;
{'fraction_non_alphanumeric': 0.1229816187671372, 'fraction_numerical': 0.013201990453945364, 'mean_word_length': 1.6233351092168353, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, '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': '631989', 'n_tokens_mistral': 2936, 'n_tokens_neox': 2721, 'n_words': 563}