/* stylelint-disable no-descending-specificity */
.ReactModal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;

    &__Overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &.ReactModal__Content {
        transform: scale(0);
        transition: all 0.33s ease-in-out;

        &:focus-visible {
            outline: none;
        }
    }

    &.ReactModal__Content--after-open {
        transform: scale(1);
        opacity: 1;
    }

    &.ReactModal__Content--before-close {
        opacity: 0.01;
    }

    &-header {
        $padding: var(--sizing-sizing-20);

        display: flex;
        padding: $padding $padding 0 $padding;
        align-items: flex-start;

        &-text {
            display: flex;
            margin: 0;
            padding-bottom: $padding;
        }

        &:has(.ReactModal-header-subtitle) {
            flex-wrap: wrap;
        }

        &-subtitle {
            @include text-body-bold;

            display: flex;
            align-items: center;
            min-height: 50px;
            border-bottom: 1px solid var(--dividers-light-stroke);
            border-top: 1px solid var(--dividers-light-stroke);
            padding: 0 20px;
            color: var(--text-secondary);

            /* Stretch element to negate container padding */
            margin: 0 calc(-1 * $padding);
            width: calc(100% + (2 * $padding));
        }
    }

    &-close {
        margin-left: auto;
    }

    &-content {
        background: white;
        border: none;
        border-radius: var(--radius-extra-large);
        box-shadow: 0 4px 20px rgb(28 28 28 / 25%);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 100px);
        max-width: calc(100vw - 20px);
        min-height: 140px;
        min-width: 340px;
        overflow: hidden;
        position: relative;
    }

    &-body {
        overflow-y: auto;
        padding: var(--padding-large);
    }

    &-body-open {
        overflow: hidden;
    }

    &-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--dividers-light-stroke);
        padding: var(--padding-large);

        .btn:last-child {
            margin-left: auto;
        }
    }

    &-footer-right-align {
        justify-content: flex-end;
    }

    &-header,
    &-footer {
        transition: box-shadow 0.5s ease-in-out;
    }

    &-scrollBottom {
        .ReactModal-footer {
            box-shadow: -2px -2px 8px 0 rgba(13 36 53 / 4%);
        }
    }

    &-scrollTop {
        .ReactModal-header {
            box-shadow: 4px 4px 8px 0 rgba(13 36 53 / 4%);
        }
    }

    @include permanent-scrollbar;
}