<commit_before>@import 'modal-variables';

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: $modal__z-index;
    width: 100%;
    height: 100%;
    padding: $modal__padding;
    background-color: $modal__background-color;
    border: $modal__border;

    &--active {
        display: flex;
        flex-direction: column;
        justify-content: $modal__justify-content;
        align-items: $modal__align-items;
    }

    &--secondary {
        justify-content: $modal__justify-content--secondary;
        align-items: $modal__align-items--secondary;

        .modal__container {
            height: $modal__container-height--secondary;
            width: $modal__container-width--secondary;
            max-width: $modal__container-max-width--secondary;
            animation: $modal__container-animation--secondary;

            @include mq($screen-m) {
                padding: $modal__container-padding--secondary\@medium;
            }

            @include mq($screen-l) {
                max-width: $modal__container-max-width--secondary\@large;
                padding: $modal__container-padding--secondary\@large;
            }
        }

        .modal__content {
            height: $modal__content-height--secondary;
        }
    }

    &--tertiary {
        justify-content: $modal__justify-content--tertiary;
        align-items: $modal__align-items--tertiary;

        .modal__container {
            height: $modal__container-height--tertiary;
            width: $modal__container-width--tertiary;
            max-width: $modal__container-max-width--tertiary;
            animation: $modal__container-animation--tertiary;
            box-shadow: $modal__container-box-shadow--tertiary;
        }
    }

    &__container {
        position: relative;
        display: block;
        width: $modal__container-width;
        max-width: $modal__container-max-width;
        max-height: 100%;
        padding: $modal__container-padding;
        border: $modal__container-border;
        box-shadow: $modal__container-box-shadow;
        background-color: $modal__container-background-color;
        animation: $modal__container-animation;

        @include mq($screen-m) {
            padding: $modal__container-padding\@medium;
        }
    }

    &__content {
        display: flex;
        flex-direction: column;
        max-height: 100%;

        &--block {
            display: block;
        }
    }

    &__top {
        padding: $modal__top-padding;
        margin: $modal__top-margin;
        border: $modal__top-border;
        border-width: $modal__top-border-width;
    }

    &__middle {
        padding: $modal__middle-padding;
        margin: $modal__middle-margin;
        border: $modal__middle-border;
        border-width: $modal__middle-border-width;
        overflow-y: auto;
    }

    &__bottom {
        padding: $modal__bottom-padding;
        margin: $modal__bottom-margin;
        border: $modal__bottom-border;
        border-width: $modal__bottom-border-width;
    }

    &__heading {
        font-size: $modal__heading-font-size;
        font-weight: $modal__heading-font-weight;
        margin: $modal__heading-margin;

        @include font-padding(
            $modal__heading-font-size,
            $modal__heading-height,
            $modal__heading-padding-right,
            $modal__heading-padding-left
        );
    }

    &__subheading {
        font-size: $modal__subheading-font-size;
        font-weight: $modal__subheading-font-weight;
        margin: $modal__subheading-margin;

        @include font-padding(
            $modal__subheading-font-size,
            $modal__subheading-height,
            $modal__subheading-padding-right,
            $modal__subheading-padding-left
        );
    }

    &__bottom-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: $modal__bottom-actions-justify-content;
        padding: $modal__bottom-actions-padding;
        margin: $modal__bottom-actions-margin;
        max-width: $modal__bottom-actions-max-width;
    }

    &__bottom-action {
        padding: $modal__bottom-action-padding;
        margin: $modal__bottom-action-margin;
        flex-basis: $modal__bottom-action-width;

        &:last-child {
            margin-bottom: 0;
        }

        .button {
            width: $modal__bottom-action-button-width;
        }
    }

    .button--rotate-icon {
        &.modal__close-button {
            position: absolute;
            top: $modal__close-button-top;
            right: $modal__close-button-right;
        }
    }
}

// Magento_UI
.modal-custom,
.modal-popup {
    z-index: $modal-ui-base__z-index;
}

.modal-popup {
    &.confirm {
        z-index: $modal-ui-confirm__z-index;
    }
}
<commit_msg>Fix close button position in Magento_UI modals<commit_after>@import 'modal-variables';

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: $modal__z-index;
    width: 100%;
    height: 100%;
    padding: $modal__padding;
    background-color: $modal__background-color;
    border: $modal__border;

    &--active {
        display: flex;
        flex-direction: column;
        justify-content: $modal__justify-content;
        align-items: $modal__align-items;
    }

    &--secondary {
        justify-content: $modal__justify-content--secondary;
        align-items: $modal__align-items--secondary;

        .modal__container {
            height: $modal__container-height--secondary;
            width: $modal__container-width--secondary;
            max-width: $modal__container-max-width--secondary;
            animation: $modal__container-animation--secondary;

            @include mq($screen-m) {
                padding: $modal__container-padding--secondary\@medium;
            }

            @include mq($screen-l) {
                max-width: $modal__container-max-width--secondary\@large;
                padding: $modal__container-padding--secondary\@large;
            }
        }

        .modal__content {
            height: $modal__content-height--secondary;
        }
    }

    &--tertiary {
        justify-content: $modal__justify-content--tertiary;
        align-items: $modal__align-items--tertiary;

        .modal__container {
            height: $modal__container-height--tertiary;
            width: $modal__container-width--tertiary;
            max-width: $modal__container-max-width--tertiary;
            animation: $modal__container-animation--tertiary;
            box-shadow: $modal__container-box-shadow--tertiary;
        }
    }

    &__container {
        position: relative;
        display: block;
        width: $modal__container-width;
        max-width: $modal__container-max-width;
        max-height: 100%;
        padding: $modal__container-padding;
        border: $modal__container-border;
        box-shadow: $modal__container-box-shadow;
        background-color: $modal__container-background-color;
        animation: $modal__container-animation;

        @include mq($screen-m) {
            padding: $modal__container-padding\@medium;
        }
    }

    &__content {
        display: flex;
        flex-direction: column;
        max-height: 100%;

        &--block {
            display: block;
        }
    }

    &__top {
        padding: $modal__top-padding;
        margin: $modal__top-margin;
        border: $modal__top-border;
        border-width: $modal__top-border-width;
    }

    &__middle {
        padding: $modal__middle-padding;
        margin: $modal__middle-margin;
        border: $modal__middle-border;
        border-width: $modal__middle-border-width;
        overflow-y: auto;
    }

    &__bottom {
        padding: $modal__bottom-padding;
        margin: $modal__bottom-margin;
        border: $modal__bottom-border;
        border-width: $modal__bottom-border-width;
    }

    &__heading {
        font-size: $modal__heading-font-size;
        font-weight: $modal__heading-font-weight;
        margin: $modal__heading-margin;

        @include font-padding(
            $modal__heading-font-size,
            $modal__heading-height,
            $modal__heading-padding-right,
            $modal__heading-padding-left
        );
    }

    &__subheading {
        font-size: $modal__subheading-font-size;
        font-weight: $modal__subheading-font-weight;
        margin: $modal__subheading-margin;

        @include font-padding(
            $modal__subheading-font-size,
            $modal__subheading-height,
            $modal__subheading-padding-right,
            $modal__subheading-padding-left
        );
    }

    &__bottom-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: $modal__bottom-actions-justify-content;
        padding: $modal__bottom-actions-padding;
        margin: $modal__bottom-actions-margin;
        max-width: $modal__bottom-actions-max-width;
    }

    &__bottom-action {
        padding: $modal__bottom-action-padding;
        margin: $modal__bottom-action-margin;
        flex-basis: $modal__bottom-action-width;

        &:last-child {
            margin-bottom: 0;
        }

        .button {
            width: $modal__bottom-action-button-width;
        }
    }

    .button--rotate-icon {
        &.modal__close-button {
            position: absolute;
            top: $modal__close-button-top;
            right: $modal__close-button-right;
        }
    }
}

// Magento_UI
.modal-custom,
.modal-popup {
    z-index: $modal-ui-base__z-index;
}

.modal-popup {
    &.confirm {
        z-index: $modal-ui-confirm__z-index;
    }

    .button--rotate-icon {
        &.modal__close-button {
            position: absolute;
            top: $modal__close-button-top;
            right: $modal__close-button-right;
        }
    }
}

{'fraction_non_alphanumeric': 0.11577232461052846, 'fraction_numerical': 0.003054678749618165, 'mean_word_length': 1.9548736462093863, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '674512', 'n_tokens_mistral': 2947, 'n_tokens_neox': 2861, 'n_words': 430}