.modal {
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background-color: var(--backdrop);
}

.modal__scroller {
    overflow-y: auto;
    position: fixed;
    inset: 0;
    padding-top: calc(var(--control-height-s) + var(--padding-xs));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal__content-wrapper {
    max-height: 100%;
}

.modal_size_max .modal__content-wrapper {
    width: calc(100% - 1rem);
}

.modal_size_l .modal__content-wrapper {
    width: min(100% - 1rem, 48rem);
}

.modal_size_m .modal__content-wrapper {
    width: min(100% - 1rem, 32rem);
}

.modal_size_s .modal__content-wrapper {
    width: min(100% - 1rem, 24rem);
}

.modal__content-wrapper::after {
    content: '';
    display: block;
    height: calc(var(--control-height-s) + var(--gap-s));
}

.modal__content {
    cursor: auto;
    overflow: hidden;
}

.modal_card .modal__content {

    padding: calc(var(--gap-m) * .75);
    background: var(--page-background-color-light);
}

.modal__content>*:first-child {
    margin-top: 0;
}

.modal__content>*:last-child {
    margin-bottom: 0;
}

.body:has(.modal[open]) {
    overflow: hidden;
}

.modal__close {
    position: fixed;
    top: var(--gap-s);
    right: var(--gap-s);
    color: #fff;
}

.modal[data-modal-hidden] {
    display: none;
}

[data-modal] {
    cursor: pointer;
}